/* Web calculators (web-bend). Colors from docs/ux/tokens.json, layout on top of /assets/site.css. */
:root {
  --c-surface: #FFFFFF;
  --c-surface-alt: #E7ECF0;
  --c-border: #C5D0D9;
  --c-border-strong: #6B7C8B;
  --c-text: #0F1D2A;
  --c-text-muted: #4B5B69;
  --c-primary: #14324F;
  --c-on-primary: #FFFFFF;
  --c-primary-soft: #DDE7F0;
  --c-on-primary-soft: #14324F;
  --c-mark: #E0482B;
  --c-mark-fill: #C93E22;
  --c-on-mark: #FFFFFF;
  --c-mark-text: #B8361C;
  --c-pipe: #DCE3E8;
  --c-pipe-edge: #6E8090;
  --c-obstruction: #8A6A00;
  --c-warn-bg: #FFF1D6;
  --c-warn-text: #6E4300;
  --c-error: #B3261E;
}
@media (prefers-color-scheme: dark) {
  :root {
    --c-surface: #142230;
    --c-surface-alt: #1D2E3E;
    --c-border: #2C4052;
    --c-border-strong: #8A9CAC;
    --c-text: #E6EDF2;
    --c-text-muted: #A2B2C0;
    --c-primary: #9CC3E8;
    --c-on-primary: #0C1620;
    --c-primary-soft: #1F3A55;
    --c-on-primary-soft: #D3E4F4;
    --c-mark: #FF6B4D;
    --c-mark-fill: #FF6B4D;
    --c-on-mark: #1A0905;
    --c-mark-text: #FF8A70;
    --c-pipe: #33465A;
    --c-pipe-edge: #9FB0BE;
    --c-obstruction: #E0B84A;
    --c-warn-bg: #3A2A0A;
    --c-warn-text: #FFD48A;
    --c-error: #FF8A80;
  }
}

.calc-hero { background: var(--steel); color: #fff; padding: 40px 0 32px; }
.calc-hero h1 { font: 700 clamp(36px, 6vw, 60px)/1.05 var(--display); margin: 0 0 12px; }
.calc-hero h1 em { font-style: normal; color: var(--mark); }
.calc-hero p { color: #D6E2EC; max-width: 62ch; margin: 0; }
.crumbs { font-size: 15px; margin: 0 0 14px; color: #B9C8D5; }
.crumbs a { color: #D6E2EC; }

main section.calc-section { padding: 32px 0 48px; }
#calc-app { display: grid; gap: 24px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
#calc-app noscript, #calc-app .calc-fallback { grid-column: 1 / -1; }
@media (max-width: 860px) { #calc-app { grid-template-columns: minmax(0, 1fr); } }

.calc-form { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-row { flex-direction: row; flex-wrap: wrap; gap: 16px; }
.field-col { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-weight: 700; font-size: 16px; color: var(--c-text); }
.field-help { font-size: 14px; color: var(--c-text-muted); }
.field-error { font-size: 15px; color: var(--c-error); min-height: 0; }
.field-error:empty { display: none; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input { width: 100%; font: 500 22px/1.2 var(--mono); color: var(--c-text); background: var(--c-surface); border: 1.5px solid var(--c-border-strong); border-radius: 10px; padding: 10px 48px 10px 12px; min-height: 48px; }
.input:focus { outline: 3px solid var(--c-mark); outline-offset: 1px; }
.input[aria-invalid="true"] { border-color: var(--c-error); }
.input-suffix { position: absolute; right: 12px; color: var(--c-text-muted); font: 500 16px/1 var(--mono); pointer-events: none; }

.segmented { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--c-border-strong); border-radius: 10px; overflow: hidden; align-self: flex-start; }
.seg { font: 600 16px/1.2 var(--body); color: var(--c-text); background: var(--c-surface); border: 0; border-right: 1px solid var(--c-border); padding: 10px 14px; min-height: 44px; cursor: pointer; }
.seg:last-child { border-right: 0; }
.seg[aria-pressed="true"] { background: var(--c-primary); color: var(--c-on-primary); }
.seg:disabled { opacity: .55; cursor: default; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 500 15px/1 var(--mono); color: var(--c-on-primary-soft); background: var(--c-primary-soft); border: 1px solid transparent; border-radius: 999px; padding: 9px 14px; min-height: 36px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--c-primary); color: var(--c-on-primary); }

.calc-result { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.result-bender { margin: 0; color: var(--c-text-muted); font-size: 16px; }
.info-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.info-chip { font-size: 15px; font-weight: 600; color: var(--c-on-primary-soft); background: var(--c-primary-soft); border-radius: 999px; padding: 6px 12px; }
.calc-result .card { padding: 0; background: var(--c-surface); border-color: var(--c-border); color: var(--c-text); }
.diagram-card { padding: 12px !important; }
.diagram { display: block; width: 100%; height: auto; font-family: var(--body); }

.mark-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.mark-row + .mark-row { border-top: 1px solid var(--c-border); }
.mark-badge { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--c-mark-fill); color: var(--c-on-mark); font: 700 17px/34px var(--body); text-align: center; }
.mark-main { flex: 1; min-width: 0; }
.mark-len { font: 600 clamp(32px, 6vw, 44px)/1.1 var(--mono); color: var(--c-text); font-variant-numeric: tabular-nums; }
.mark-sub { font-size: 15px; color: var(--c-text-muted); }
.mark-side { text-align: right; }
.mark-angle { font-weight: 700; font-size: 16px; }
.mark-cue { font-size: 15px; color: var(--c-mark-text); }
@media (max-width: 480px) { .mark-row { flex-wrap: wrap; } .mark-side { text-align: left; flex-basis: 100%; padding-left: 48px; } }

.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 0; }
.value { padding: 12px 16px; border-bottom: 1px solid var(--c-border); }
.value dt { font-size: 14px; color: var(--c-text-muted); }
.value dd { margin: 2px 0 0; font: 500 22px/1.25 var(--mono); }

.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; border-radius: 10px; padding: 12px 14px; font-size: 16px; border-left: 5px solid; }
.banner-text { flex: 1 1 240px; }
.banner-error { background: var(--c-surface); color: var(--c-error); border-color: var(--c-error); border-top: 1px solid var(--c-border); border-right: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.banner-warning { background: var(--c-warn-bg); color: var(--c-warn-text); border-color: var(--c-warn-text); }
.banner-info { background: var(--c-primary-soft); color: var(--c-on-primary-soft); border-color: var(--c-primary); }
.btn-secondary { font: 600 15px/1.2 var(--body); color: var(--c-primary); background: var(--c-surface); border: 1.5px solid var(--c-primary); border-radius: 10px; padding: 8px 14px; min-height: 40px; cursor: pointer; }

.section-title { font: 600 22px/1.2 var(--display); margin: 6px 0 0; }
.calc-result .steps { margin: 0; padding: 6px 16px 6px 44px; }
.steps li { padding: 8px 0; border-bottom: 1px solid var(--c-border); }
.steps li:last-child { border-bottom: 0; }
.steps li::marker { color: var(--c-primary); font-weight: 700; }
.math summary { cursor: pointer; font-weight: 700; padding: 14px 16px; }
.math-row { padding: 10px 16px; border-top: 1px solid var(--c-border); }
.math-formula { font-weight: 600; }
.math-subs { font: 500 14px/1.5 var(--mono); color: var(--c-text-muted); overflow-wrap: anywhere; }
.math-source { font-size: 14px; color: var(--c-text-muted); }
.other-methods { padding: 12px 16px !important; }
.other-methods p { margin: 4px 0 0; color: var(--c-text-muted); }
.result-footer { margin: 0; font-size: 15px; color: var(--c-text-muted); }

/* Diagram colors (same tokens as the app's Canvas renderers) */
.d-pipe { fill: var(--c-pipe); stroke: var(--c-pipe-edge); stroke-width: 1; }
.d-tick { stroke: var(--c-border-strong); stroke-width: 1; }
.d-muted { fill: var(--c-text-muted); font-size: 12px; }
.d-mark { stroke: var(--c-mark); stroke-width: 3; }
.d-mark-thin { stroke: var(--c-mark); stroke-width: 1; }
.d-badge { fill: var(--c-mark-fill); }
.d-badge-text { fill: var(--c-on-mark); font-size: 13px; font-weight: 700; }
.d-pipe-edge-line { fill: none; stroke: var(--c-pipe-edge); stroke-width: 12; stroke-linejoin: round; }
.d-pipe-line { fill: none; stroke: var(--c-pipe); stroke-width: 9; stroke-linejoin: round; }
.d-obstruction { fill: var(--c-obstruction); fill-opacity: .13; stroke: var(--c-obstruction); stroke-width: 1.5; stroke-dasharray: 6 4; }
.d-obstruction-text { fill: var(--c-obstruction); font-size: 12px; }
.d-dim line { stroke: var(--c-text); stroke-width: 1; }
.d-dim-text { fill: var(--c-text); font-size: 12px; paint-order: stroke; stroke: var(--c-surface); stroke-width: 4px; stroke-linejoin: round; }

/* Explanation, CTA and calc list */
.explain { max-width: 760px; }
.explain h2 { font-size: clamp(28px, 4vw, 36px); }
.explain p, .explain li { color: var(--muted); }
.cta { background: var(--steel); color: #fff; border-radius: 16px; padding: 24px; display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: space-between; }
.cta h2 { color: #fff; font-size: 30px; margin: 0 0 6px; }
.cta p { margin: 0; color: #D6E2EC; max-width: 52ch; }
.cta .btn { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 20px; border-radius: 10px; background: var(--mark); color: #fff; font: 700 20px/1 var(--display); letter-spacing: .02em; text-decoration: none; }
.calc-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: 0; margin: 0; list-style: none; }
.calc-list a { display: block; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; text-decoration: none; color: var(--text); }
.calc-list a strong { display: block; font: 600 22px/1.2 var(--display); }
.calc-list a span { color: var(--muted); font-size: 16px; }
.calc-list a:hover strong { text-decoration: underline; text-decoration-color: var(--mark); }
.calc-list a[aria-current="page"] { border-color: var(--mark); }