/* The calm pass, Area B, results and report views (app.js results, runoff-visual, publishing, history, narrative, assumptions, calibration).

   docs/CALM-UI.md. Only this area edits this file; it loads after ui.css,
   so a rule here may quiet a rule in style.css without editing style.css.
   Theme tokens only (no hex), light and dark, phone width. */

/* ---------- the results column ----------
   The hero keeps its figures; its method is one line with the rule behind
   a "?", not a mono box. Notes that explain sit behind "?" or a closed
   Details, and a caveat that asks for nothing is a muted line, not a box. */
.calm-method { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; font-size: 13px; color: var(--ink); }
.calm-method-l { font-size: 12px; color: var(--ink-soft); }
.calm-method-v { font-weight: 500; }
.calm-method.warn .calm-method-v { color: var(--ochre); }
.delta { box-shadow: none; padding: 16px; }
.delta .calm-increase { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13px; color: var(--ink-mid); }
.delta .calm-increase .calm-dot { background: var(--ochre); }

.results-summary .rs-caption-short { margin: 8px 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.results-summary .rs-caption { display: block; }
/* Round 2 fix, B4-23: one or two word headers, the unit on a quiet second
   line, numbers' headers over the numbers. */
.results-summary .rs-unit { display: block; margin-top: 2px; font-family: var(--sans); font-size: 11px; font-weight: 400;
  letter-spacing: normal; text-transform: none; color: var(--ink-soft); white-space: normal; }
.results-summary .rs-wide th[scope="col"]:not(:first-child) { text-align: right; vertical-align: bottom; }
.results-summary .rs-wide th[scope="col"] { white-space: nowrap; }
.results-summary .rs-table-narrow th[scope="row"] .rs-unit { display: inline; margin: 0 0 0 4px; }

.calm-agg h2 { display: flex; align-items: center; gap: 8px; }
/* Round 2 fix, B4-08: the Existing and Proposed headers over their numbers. */
.agg-both th.num { text-align: right; }
.calm-agg .calm-depth-note, .calm-sens { margin: 8px 0 0; }
.calm-sens { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.calm-sens-panel > .body { padding: 10px 16px; }
.calm-sens-panel .calm-sens { margin: 0; }

#results .panel .calm-details { margin-top: 12px; }
#results .panel .calm-details-body > .note:first-child { margin-top: 0; }
#results h2 .head-actions .calm-info-wrap { margin-left: 6px; }
#results .no-headline-lead { display: flex; align-items: center; gap: 6px; }

/* ---------- the run form ----------
   Labels of one to three words, each hint behind a "?" beside its label. */
.calm-label-row { display: flex; align-items: center; gap: 6px; }
.calm-label-row > label { margin-bottom: 0; }
.calm-label-more:empty { display: none; }
.run-form .run-field > .calm-label-row { margin-bottom: 4px; }
/* Round 2 fix, B4-17: a check-first line under the proposed Tc. */
.run-field .tc-check { margin: 4px 0 0; color: var(--ochre); font-size: 12px; }

/* ---------- quick check and reference ---------- */
#view-check .qc-print { align-items: center; }
#view-check .qc-print #qc-label-count { margin: 0; }
#view-reference h2 { display: flex; align-items: center; gap: 8px; }

#ref-cover th:nth-child(n+3) { text-align: right; }
/* Round 2 fix, B4-22: numbers' headers over the numbers; the answer first. */
#view-check th.num { text-align: right; }
#view-check .qc-lead { margin: 0 0 12px; font-size: 15px; }
#view-check .qc-how { margin-top: 16px; }
#view-check .calm-kept { color: var(--ink-mid); font-size: 13px; margin: 0 0 12px; display: flex; align-items: center; gap: 6px; }

/* ---------- the assumptions a run rests on ----------
   The count, the one entry in front of the reader and its control in
   view; what an acceptance is, the entry's reasoning and source, and what
   "for every site" records behind "?". Hairlines, not boxes in a box. */
.ack-count { border: 0; border-left: 3px solid var(--line-strong); padding: 2px 0 2px 12px; margin-bottom: 16px; }
.ack-count.prov { border-left-color: var(--ochre); }
.ack-count p { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ack-card, .ack-group { border: 0; border-top: 1px solid var(--line); padding: 16px 0 0; margin-bottom: 16px; }
.ack-card .d { font-style: normal; }
.ack-group .l { display: flex; align-items: center; gap: 6px; }
.ack-standing-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.ack-standing-row .ack-standing { margin: 0; }
.ack-acts .calm-info-wrap { margin-left: 2px; }
.ack-done { border-top: 1px solid var(--line); padding-top: 12px; }
.reason-label + .calm-info-wrap { margin-left: 6px; }
.ack-reason > .reason-label { display: inline; }

/* ---------- site history ----------
   The four kinds behind a "?" at the end of the filters; a change nobody
   evaluated says so in its head, its sentence behind a "?"; an empty ledger
   is two words and a "?". */
.hs-chips { align-items: center; }
.hs-legend { display: inline-flex; margin: 0 0 0 4px; padding: 0; border: 0; }
.hs-legend .hs-leg { display: block; border-left: 0; padding-left: 0; font-size: 12.5px; color: var(--ink-mid); }
.hs-legend .hs-leg b { display: inline; margin-right: 6px; }
.cm-pl .cm-pb-quiet { font-family: var(--sans); letter-spacing: normal; font-weight: 400; }
.cm-price.unevaluated { padding-top: 2px; padding-bottom: 2px; }
.cm-phint .calm-info-wrap { margin-left: 0; }
.calm-none { display: flex; align-items: center; gap: 6px; color: var(--ink-mid); font-size: 13px; }
.calm-h3 { display: flex; align-items: center; gap: 6px; }
.sa-current { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.sa-current .calm-dot { background: var(--accent); }
.sa-row .sa-note { margin: 0; display: inline-flex; align-items: center; }

/* ---------- report and share ---------- */
#publish-panel .calm-lead, .calm-check-row { display: flex; align-items: center; gap: 6px; }
.calm-check-row .ack-standing { margin: 0; }

/* ---------- calibration ----------
   The verdict and the first thing to do in view; the arithmetic, the
   reading rules and what each figure is not, behind "?". Hairlines. */
.cal-limit { border: 0; border-left: 3px solid var(--line-strong); padding: 2px 0 2px 12px; }
.cal-limit.no { border-left-color: var(--ochre); }
.cal-limit p, .calm-l, .cal-conventions .l, .cal-validation .l { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.cal-upload, .cal-fit, .cal-scenario { border: 0; border-top: 1px solid var(--line); padding-left: 0; padding-right: 0; border-radius: 0; }
.cal-fold { border: 0; border-top: 1px solid var(--line); padding-left: 0; padding-right: 0; }

/* ---------- Today's areas ---------- */
.cover-pick { border: 0; border-top: 1px solid var(--line); background: none; border-radius: 0; padding: 8px 0 0; }
.cover-pick-head { display: flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 13px; letter-spacing: normal; text-transform: none; color: var(--ink-mid); }
#narrative-panel .calm-lead, .calm-lead { display: flex; align-items: center; gap: 6px; }
#view-check .qc-print { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 12px 0 0; }
.workspace-fold > summary .ack-fold-count { font-weight: 400; color: var(--ink-soft); }
.workspace-fold > summary .ack-fold-count.pending { color: var(--ochre); }
#report-box > .site-act-block:first-child { border-top: 0; padding-top: 0; }
.ref-notes-fold { margin-top: 12px; }

/* ---------- storms: the site result for several storms (st-pitch) ----------
   One panel under the results: a compact header with the pass count and one
   action, a table with Pass/Fail chips, the hydrograph, and the AI row.
   Pass wears the accent (the product's green), Fail the red; each chip says
   its word, so color is never alone. Theme tokens only. */
.storms-panel { padding: 16px; }
.storms-panel h2 { margin: 0; padding: 0; border: 0; font-size: 17px; }
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.st-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.st-sum { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-mid); }
.st-sum::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.st-sum-pass { color: var(--accent); }
.st-sum-pass::before { background: var(--accent); }
.st-sum-fail { color: var(--red); }
.st-sum-fail::before { background: var(--red); }
.st-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; font-size: 13px; color: var(--ink-mid); }
.st-status:empty { display: none; }
.st-status { font-size: 13px; color: var(--ink-mid); margin: 8px 0 0; }

.st-table-wrap { margin: 0 0 16px; }
.st-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.st-table th, .st-table td { padding: 8px 8px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.st-table thead th { font-size: 12px; color: var(--ink-soft); font-weight: 500; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.st-table tbody th { font-family: var(--sans); font-size: 14px; text-transform: none; letter-spacing: normal; font-weight: 500; color: var(--ink); white-space: nowrap; }
.st-table .st-num { text-align: right; white-space: nowrap; }
.st-table .st-chk { text-align: right; width: 1%; white-space: nowrap; }
.st-table .st-strong { font-weight: 600; }
.st-table .st-muted, .st-muted { color: var(--ink-mid); }
.st-table tbody tr[data-storm] { cursor: pointer; }
.st-table tbody tr[data-storm]:hover { background: var(--sunk); }
.st-table tbody tr.on { background: var(--accent-soft); }
.st-table tbody tr:focus-visible { outline: var(--focus-ring); outline-offset: -3px; }
.st-unit { margin: 6px 0 0; font-size: 12px; color: var(--ink-soft); }
.st-over-line { margin: 4px 0 0; font-size: 12px; color: var(--ink-mid); }

.st-chip { display: inline-block; min-width: 44px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; text-align: center; line-height: 18px; }
.st-pass { color: var(--accent); background: var(--accent-soft); }
.st-fail { color: var(--red); background: var(--red-soft); }
.st-none { color: var(--ink-mid); background: var(--sunk); font-weight: 500; }

/* the hydrograph */
.st-chart { margin: 0 0 16px; padding: 12px 0 0; border-top: 1px solid var(--line); }
.st-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
.st-chart-title { font-size: 13px; font-weight: 500; color: var(--ink); }
.st-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink-mid); }
.st-legend span { display: inline-flex; align-items: center; gap: 6px; }
.st-key { display: inline-block; width: 14px; height: 0; border-top: 2px solid currentColor; }
.st-key.st-s-ex { color: var(--ink-mid); border-top-style: dashed; }
.st-key.st-s-pr { color: var(--ochre); border-top-width: 4px; opacity: 0.6; }
.st-key.st-s-wp { color: var(--accent); border-top-width: 3px; }
.st-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 8px; border-bottom: 1px solid var(--line); }
.st-tab { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 6px 8px; margin-bottom: -1px; font: inherit; font-size: 13px; color: var(--ink-mid); cursor: pointer; min-height: 32px; }
.st-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; }
.st-tab:hover { color: var(--ink); }
.st-tab:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.st-plot { position: relative; }
.st-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.st-grid { stroke: var(--line); stroke-width: 1; }
.st-tick, .st-axis { fill: var(--ink-soft); font-size: 11px; font-family: var(--sans); }
.st-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.st-line.st-s-ex { stroke: var(--ink-mid); stroke-dasharray: 5 4; }
/* Proposed is drawn wide and light under With practices, so it shows where
   the two coincide (B3-17). */
.st-line.st-s-pr { stroke: var(--ochre); stroke-width: 5; stroke-opacity: 0.4; }
.st-line.st-s-wp { stroke: var(--accent); stroke-width: 2.5; }
.st-dot { stroke: var(--surface); stroke-width: 2; }
.st-dot.st-s-ex { fill: var(--ink-mid); }
.st-dot.st-s-pr { fill: var(--ochre); }
.st-dot.st-s-wp { fill: var(--accent); }
.st-legend .st-peak { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.st-legend-unit { color: var(--ink-soft); }
.st-cross { stroke: var(--line-strong); stroke-width: 1; }
.st-tip { position: absolute; top: 8px; min-width: 150px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); font-size: 12px; color: var(--ink-mid); pointer-events: none; }
.st-tip div { display: flex; align-items: center; gap: 6px; }
.st-tip b { margin-left: auto; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.st-tip-t { color: var(--ink); font-weight: 500; margin-bottom: 4px; }

/* the AI row: ghost actions, then quiet words */
.st-ai { border-top: 1px solid var(--line); padding-top: 12px; }
.st-ai-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.st-ai-out:empty { display: none; }
.st-ai-out { margin-top: 12px; padding-left: 12px; border-left: 3px solid var(--accent-line); }
.st-ai-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.st-ai-tag { font-size: 13px; font-weight: 600; color: var(--ink); }
.st-ai-by { font-size: 12px; color: var(--ink-soft); }
.st-ai-text { margin: 8px 0; font-size: 14px; line-height: 1.55; color: var(--ink); max-width: 68ch; }
.st-draft-text { color: var(--ink-mid); }
.st-fix-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; font-size: 14px; }
.st-fix-line .st-sum { margin-left: 8px; }
.st-fix-table { margin: 0 0 4px; }
.st-size { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-mid); margin: 0; }
.st-size select { width: auto; min-height: 32px; padding: 2px 8px; }

/* B3-15: every column at every width; on a phone the table scrolls
   sideways inside its card, with the storm names held in place. */
.st-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.st-table thead th { vertical-align: bottom; }
.st-table .st-chk { display: table-cell; }
.st-table .st-chk .calm-info-wrap { margin-left: 4px; }
.st-chip.st-pass-over { color: var(--ochre); background: var(--ochre-soft); }
.st-tag { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: 11px; line-height: 16px; color: var(--ochre); background: var(--ochre-soft); font-variant-numeric: normal; }
.st-measure { font-size: 12px; }
.st-nowrap { white-space: nowrap; }
.st-table thead th .calm-info-wrap { margin-left: 4px; }
.st-verdict { display: inline-flex; align-items: center; gap: 4px; }
.st-verdict .calm-info-wrap { margin-left: 0; }
@media (max-width: 560px) {
  .storms-panel { padding: 12px; }
  .st-table th, .st-table td { padding: 8px 2px; }
  .st-table th:first-child, .st-table td:first-child { padding-left: 0; }
  .st-table th:last-child, .st-table td:last-child { padding-right: 0; }
  .st-table { font-size: 13px; }
  .st-table thead th { white-space: normal; text-transform: none; letter-spacing: normal; font-family: var(--sans); font-size: 12px; line-height: 1.25; }
  .st-table tbody th { white-space: normal; font-size: 13px; line-height: 1.25; }
  .st-table .calm-info { width: 18px; height: 18px; min-width: 18px; }
  .st-chip { min-width: 0; padding: 2px 5px; }
  /* B3-15: the longest row still fits 390 px. The Entered tag goes under
     its depth, Not checked breaks onto two lines with its "?" under it,
     and the number headers may wrap ("Rain," over "in"). */
  .st-table .st-num .st-tag { display: block; width: max-content; margin: 2px 0 0 auto; }
  .st-chip.st-none { white-space: normal; line-height: 14px; padding: 2px 6px; border-radius: 9px; }
  .st-table thead th.st-num { white-space: normal; }
  .st-verdict { flex-direction: column; align-items: flex-end; gap: 2px; }
  .st-tab { padding: 6px 6px; }
}

.st-table tbody tr:last-child > * { border-bottom: 0; }
.st-size { font-family: var(--sans); text-transform: none; letter-spacing: normal; }

/* Edit storms: a small dialog on the storm set */
.st-edit-link { font-size: 13px; }
dialog.workspace-dialog.st-edit-dialog { width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.st-edit-dialog h2 { margin: 0 0 16px; }
.st-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-edit-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-mid); }
.st-edit-field input { width: 100%; box-sizing: border-box; }
.st-edit-list { border: 0; margin: 16px 0 0; padding: 0; }
.st-edit-list legend { font-size: 13px; color: var(--ink-mid); padding: 0; margin: 0 0 4px; }
.st-edit-storm { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.st-edit-storm:last-child { border-bottom: 0; }
.st-edit-storm, .st-edit-storm span { font-family: var(--sans); text-transform: none; letter-spacing: normal; font-size: 14px; }
.st-edit-storm .st-muted { font-variant-numeric: tabular-nums; }
.st-edit-err { margin: 12px 0 0; font-size: 13px; color: var(--red); }
@media (max-width: 480px) { .st-edit-grid { grid-template-columns: 1fr; } }

/* B3-02: a table out of date is greyed under its notice until Run again */
.st-table-wrap.st-stale .st-table, .st-table-wrap.st-stale .st-over-line { opacity: 0.55; }

/* Edit storms: a depth per storm, Entered, Add storm, errors by field (B3-10, B3-19) */
.st-edit-storm { grid-template-columns: minmax(0, 1fr) auto; }
.st-edit-on { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; text-transform: none; letter-spacing: normal; font-family: var(--sans); font-size: 14px; color: var(--ink); white-space: nowrap; }
.st-edit-on input { width: auto; margin: 0; }
.st-edit-depth { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.st-edit-depth input { width: 84px; min-height: 32px; padding: 2px 8px; box-sizing: border-box; font-variant-numeric: tabular-nums; }
.st-edit-hint { font-size: 12px; min-width: 96px; }
.st-edit-reset { font-size: 12px; }
.st-field-err { grid-column: 1 / -1; display: block; font-size: 12px; color: var(--red); text-transform: none; letter-spacing: normal; font-family: var(--sans); }
.st-field-err[hidden] { display: none; }
.st-edit-wide { grid-column: 1 / -1; }
.st-edit-wide select, .st-edit-add select { width: auto; min-height: 32px; }
.st-edit-add { display: flex; align-items: center; gap: 8px; padding: 8px 0 0; font-size: 13px; color: var(--ink-mid); }
.st-edit-reason { margin-top: 12px; }
.st-edit-reason textarea { width: 100%; box-sizing: border-box; }
.st-edit-warn { margin: 8px 0 0; font-size: 12px; }
.st-sizing-line { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.st-nochart { margin: 16px 0; }