/* Components.

   The form is NOT a dark card any more. The old .form-card set
   background:var(--ink);color:white and then nested pale .callout panels
   inside it, producing pale-text-on-pale-panel -- the unreadable "What it
   does" box in the planner. Controls now sit on the normal page surface,
   so every nested element inherits a readable pair. */

/* ---- controls ---- */
.picker{display:flex;gap:var(--s2);align-items:flex-end;margin-bottom:14px}
.picker .fieldwrap{flex:1;min-width:0}

label.lb,.lb{
  display:block;margin-bottom:5px;
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3)
}
input,select,textarea{
  width:100%;padding:8px 10px;
  border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--surface);color:var(--ink);
  font:15px var(--sans)
}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
input:disabled,select:disabled{background:var(--sunken);color:var(--ink-3);cursor:not-allowed}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:11px 14px}
.f{position:relative;min-width:0}
.f.wide{grid-column:1/-1}

/* Persistent hint. Always visible -- the "why" goes in the tooltip, but the
   "what" must never require a hover, which touch users cannot perform. */
.hint{margin:3px 0 0;font-size:11.5px;line-height:1.35;color:var(--ink-3)}

/* Tooltip trigger: a real button, so it is keyboard-reachable and announced.
   The previous implementation revealed help on :hover only. */
.q{
  display:inline-grid;place-items:center;
  width:14px;height:14px;margin-left:4px;padding:0;
  border:1px solid var(--ink-3);border-radius:50%;
  background:transparent;color:var(--ink-3);
  font:700 9px var(--sans);cursor:help;vertical-align:1px;position:relative
}
.q:hover,.q:focus-visible{border-color:var(--accent);color:var(--accent)}
.q:hover::after,.q:focus-visible::after{
  content:attr(data-help);
  position:absolute;left:-8px;bottom:calc(100% + 7px);z-index:80;
  width:250px;padding:9px 11px;
  border-radius:var(--r);
  background:var(--ink);color:var(--paper);
  font:400 12px/1.45 var(--sans);letter-spacing:0;text-transform:none;
  text-align:left;
  box-shadow:0 6px 20px rgb(0 0 0 / .22)
}
/* Near the right edge the tooltip would overflow the viewport. */
.f:nth-child(2n) .q:hover::after,.f:nth-child(2n) .q:focus-visible::after{left:auto;right:-8px}

.go{
  width:100%;margin-top:var(--s4);padding:11px;
  border:0;border-radius:var(--r);
  background:var(--accent);color:#fff;
  font:700 14px var(--sans);cursor:pointer
}
.go:hover{filter:brightness(1.08)}
.go:disabled{opacity:.55;cursor:not-allowed}

.ghost{
  padding:8px 12px;
  border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--surface);color:var(--ink-2);
  font:600 13px var(--sans);cursor:pointer;white-space:nowrap
}
.ghost:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}

/* ---- explanatory panels ---- */
.about,.callout{
  margin:0 0 var(--s4);padding:11px 14px;
  border-left:3px solid var(--accent);border-radius:0 var(--r) var(--r) 0;
  background:var(--accent-soft);color:var(--ink)
}
.about b,.callout strong{
  display:block;margin-bottom:4px;
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--accent)
}
.about p,.callout p{margin:0 0 6px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.about p:last-child,.callout p:last-child{margin-bottom:0}
.about .eg{color:var(--ink-2);font-style:italic;font-size:13px}

/* ---- result ---- */
.result[hidden]{display:none!important}
.rhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.rhead .lbl{
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3)
}
.big{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  font:600 54px/1.05 var(--serif);letter-spacing:-.035em;color:var(--ink)
}
.bigunit{font:400 15px/1.3 var(--sans);color:var(--ink-2);white-space:nowrap}
.plain{margin:9px 0 14px;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:56ch}
.plain b{color:var(--ink);font-weight:600}

.mets{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-bottom:14px}
.met{padding:9px 11px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.met b{display:block;font:600 20px/1.1 var(--serif)}
.met small{display:block;margin-top:2px;font-size:11px;line-height:1.3;color:var(--ink-3)}
.met.good b{color:var(--ok)}
.met.warn b{color:var(--warn)}

h3.sec{margin:var(--s4) 0 7px;font:600 14px var(--sans);letter-spacing:.01em}

.assume{
  margin:0;padding:0;list-style:none;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);overflow:hidden
}
.assume li{
  position:relative;padding:7px 11px 7px 26px;
  border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.45;color:var(--ink-2)
}
.assume li:first-child{border-top:0}
.assume li::before{
  content:"";position:absolute;left:11px;top:13px;
  width:5px;height:5px;border-radius:50%;background:var(--accent)
}

/* ---- disclosure ---- */
details.rep,details.panel{
  margin-top:var(--s3);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface)
}
details.rep summary,details.panel summary{
  padding:8px 11px;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--ink-2)
}
details.rep summary:hover,details.panel summary:hover{color:var(--accent)}
details.rep .body,details.panel .body{
  padding:0 11px 11px;font-size:12.5px;line-height:1.5;color:var(--ink-2)
}
details.rep pre{
  margin:0;padding:10px;overflow-x:auto;
  border-radius:var(--r);background:var(--sunken);
  font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word
}

/* ---- cards ---- */
.card{
  padding:var(--s4);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);min-width:0
}
.card h2{font-size:1.35rem;margin-bottom:var(--s2)}
.card h3{font-size:1.1rem;margin-bottom:6px}
.card p{color:var(--ink-2);font-size:13.5px;line-height:1.5}
.card .path{font-size:12px;color:var(--ink-3);font-style:italic}

/* ---- tables ---- */
.table-wrap{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:var(--r)}
.data-table{width:100%;border-collapse:collapse;background:var(--surface)}
.data-table th,.data-table td{
  padding:8px 10px;border-top:1px solid var(--line);
  text-align:left;vertical-align:top;font-size:12.5px;line-height:1.45
}
.data-table thead th{
  position:sticky;top:0;z-index:1;
  border-top:0;background:var(--sunken);
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-2);white-space:nowrap
}
.data-table tbody tr:hover{background:var(--sunken)}
.data-table td.num{text-align:right;white-space:nowrap}

/* Sortable column headers on the cross-check table. */
.data-table th.sortable{cursor:pointer;user-select:none}
.data-table th.sortable:hover{color:var(--accent)}
.data-table th.sortable::after{content:"\2195";opacity:.35;margin-left:4px;font-size:10px}
.data-table th.sortable[aria-sort=ascending]::after{content:"\2191";opacity:1}
.data-table th.sortable[aria-sort=descending]::after{content:"\2193";opacity:1}

/* ---- badges ---- */
.badge{
  display:inline-block;padding:2px 7px;border-radius:20px;
  background:var(--sunken);color:var(--ink-2);
  font-size:11px;font-weight:700;white-space:nowrap
}
.badge.good{background:var(--ok-soft);color:var(--ok)}
.badge.review{background:var(--warn-soft);color:var(--warn)}

/* ---- tabs (Evidence section) ---- */
.tabs{
  display:flex;gap:2px;flex-wrap:wrap;
  padding:0 var(--s5);border-bottom:1px solid var(--line);
  background:var(--surface)
}
.tabs a{
  padding:9px 12px;
  border-bottom:2px solid transparent;
  color:var(--ink-2);text-decoration:none;
  font-size:13.5px;font-weight:500;white-space:nowrap
}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current=page]{border-bottom-color:var(--accent);color:var(--accent);font-weight:600}

/* ---- progress ---- */
.progress{margin-top:var(--s3);padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.progress[hidden]{display:none!important}
.progress-track{height:8px;margin:8px 0;border-radius:4px;background:var(--sunken);overflow:hidden}
.progress-bar{height:100%;width:0;background:var(--accent);transition:width .25s}
.progress small{color:var(--ink-3);font-size:12px}

/* ---- sensitivity chart ---- */
.sensitivity-chart{width:100%;height:auto;max-width:620px;margin:4px 0;overflow:visible}
.sensitivity-chart line{stroke:var(--line-2);stroke-width:1}
.sensitivity-chart polyline{fill:none;stroke:var(--accent);stroke-width:2}
.sensitivity-chart circle{fill:var(--accent)}
.sensitivity-chart circle.planned{fill:var(--surface);stroke:var(--accent);stroke-width:2.5}
.sensitivity-chart text,.sensitivity-chart .axis{fill:var(--ink-3);font:10.5px var(--sans)}
.sensitivity-chart .value{fill:var(--ink);font-weight:700}

.session-toolbar,.plan-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.session-note{margin:var(--s2) 0 0;font-size:12.5px;color:var(--ink-3)}

@media(max-width:700px){
  .fields{grid-template-columns:1fr}
  .mets{grid-template-columns:1fr}
  .q:hover::after,.q:focus-visible::after{left:auto;right:-8px;width:min(250px,78vw)}
}

/* ---- legacy structural classes ----
   compare.html, simulation-lab.html and validate.html use .form-card / .form-grid /
   .tool-layout, and their JS queries those selectors. Redefining them here in terms of
   the new system fixes the contrast defect everywhere at once, without rewriting three
   pages of markup and the scripts that address it.

   The critical change: .form-card was background:var(--ink) with color:white, and pages
   nested pale .callout panels inside it -- pale text on a pale panel. It is now a normal
   raised surface, so every nested element inherits a readable pair. */
.form-card{
  padding:var(--s4);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);color:var(--ink);
  min-width:0
}
.form-card legend{
  margin:0 0 var(--s3);padding:0;
  font:600 1.15rem var(--serif);color:var(--ink)
}
.form-card label{display:block;margin:0 0 var(--s3)}
/* Labels inside legacy forms wrap their own input, so the uppercase treatment has to
   apply to the label's own text without shrinking the input it contains. */
.form-card > label,.form-grid > label{
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3)
}
.form-card input,.form-card select,.form-card textarea{
  margin-top:5px;
  font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--ink)
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 14px}
.tool-layout{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(400px,1.15fr);gap:var(--s5);align-items:start}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin:var(--s4) 0}
.compare-shared{margin-bottom:var(--s2)}
.compare-submit{margin-top:var(--s2);max-width:420px}
.form-card .session-toolbar{margin:0 0 var(--s3)}
.form-card .session-note{color:var(--ink-3)}
.submit{
  width:100%;padding:11px;border:0;border-radius:var(--r);
  background:var(--accent);color:#fff;font:700 14px var(--sans);cursor:pointer
}
.submit:hover{filter:brightness(1.08)}
.submit:disabled{opacity:.55;cursor:not-allowed}
/* Legacy help buttons: same affordance as .q, kept because three pages emit .help. */
.help{
  display:inline-grid;place-items:center;
  width:14px;height:14px;margin-left:4px;padding:0;
  border:1px solid var(--ink-3);border-radius:50%;
  background:transparent;color:var(--ink-3);
  font:700 9px var(--sans);cursor:help;vertical-align:1px;position:relative
}
.help:hover,.help:focus-visible{border-color:var(--accent);color:var(--accent)}
.help:hover::after,.help:focus-visible::after{
  content:attr(data-help);
  position:absolute;left:-8px;bottom:calc(100% + 7px);z-index:80;
  width:250px;padding:9px 11px;border-radius:var(--r);
  background:var(--ink);color:var(--paper);
  font:400 12px/1.45 var(--sans);letter-spacing:0;text-transform:none;text-align:left;
  box-shadow:0 6px 20px rgb(0 0 0 / .22)
}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin:var(--s4) 0}
.metric{padding:9px 11px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.metric b{display:block;font:600 20px/1.1 var(--serif)}
.metric small{display:block;margin-top:2px;font-size:11px;color:var(--ink-3)}
.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
.choice{
  width:100%;padding:var(--s4);text-align:left;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);color:var(--ink)
}
.choice:hover,.choice.active{border-color:var(--accent);background:var(--accent-soft)}
.choice b{display:block;font:600 1.1rem var(--serif)}
.choice small{color:var(--ink-3)}
.result-number{font:600 58px/1 var(--serif);letter-spacing:-.035em;color:var(--ink)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.credits{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line)}
.steps li{margin:var(--s3) 0}
.definition{border-bottom:1px dotted var(--ink-3);cursor:help}
@media(max-width:920px){
  .tool-layout,.compare-grid,.choice-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .form-grid,.metrics{grid-template-columns:1fr}
}

/* ---- call-to-action buttons ----
   .button / .actions / .cta-row existed in the old stylesheet and are used by the
   Learn and index pages. They were lost in the rewrite, so the primary CTAs rendered
   as bare underlined links. */
.button{
  display:inline-block;padding:9px 15px;
  border:1px solid var(--accent);border-radius:var(--r);
  background:var(--accent);color:#fff;text-decoration:none;
  font:700 13px var(--sans);letter-spacing:.01em;cursor:pointer
}
.button:hover{filter:brightness(1.08);color:#fff}
.button.secondary{background:transparent;color:var(--accent)}
.button.secondary:hover{background:var(--accent-soft);filter:none;color:var(--accent)}
.actions,.cta-row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin:var(--s4) 0}

/* A <legend> is positioned on the fieldset's top border by default, which with a
   1px border and padding made "Plan A" / "Plan B" look like it was straddling the
   card edge. Float it into the padding box instead so it reads as a card heading. */
.form-card legend{
  float:left;width:100%;
  margin:0 0 var(--s3);padding:0
}
.form-card legend + *{clear:both}

/* Coverage card metadata. `.lane` must be a block: as an inline <small> it collided
   with the evidence line that follows it ("Lane: commonagrees with the ..."). */
.card .lane{
  display:block;margin-top:var(--s2);
  font-size:11.5px;color:var(--ink-3)
}