/* site/wizard/full/wizard.css: the full wizard's app layout, on the site's older skin.
 *
 * /styles.css carries the whole look (tokens, topbar, cards, footer, type);
 * this file only adds what an app needs on top of it: the six screens and
 * the rule that exactly one is on screen at a time, the progress rail, the
 * tabs, the form fields, the status lines and the exceedance chart. Every
 * colour here is a token /styles.css defines: no second palette, no fonts,
 * and nothing fetched: no @import, no url(), no host.
 *
 * Mobile-first: everything is a single column by default and works at phone
 * width; the two-pane layouts only appear on wide viewports. The page
 * scrolls normally; the playground's one-viewport shell is deliberately
 * not inherited.
 *
 * The one hiding rule: a screen is hidden as a WHOLE, and nothing finer
 * than a screen is ever hidden. `.screen[data-visible="no"]` is the only
 * `display: none` in this file: a disclosure, a status line or a label is
 * never a thing this stylesheet can hide.
 */

/* --- the screens --------------------------------------------------------- */

section.screen { display: none; }
section.screen[data-visible="yes"] { display: block; }
section.screen { padding: 56px 0 72px; }

/* --- the progress rail --------------------------------------------------- */

.wz-railbar {
  position: sticky;
  top: 0;
  z-index: 9;
  background: var(--night-2);
  border-bottom: 1px solid var(--hair-dark);
  overflow-x: auto;
  scrollbar-width: none;
}

.wz-rail {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.rail-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--mist);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}

.rail-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 9px;
}

.rail-state {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.rail-stage[data-state="done"] .rail-button { color: var(--glow); }
.rail-stage[data-state="current"] .rail-button {
  color: var(--night);
  background: var(--sky);
  border-color: var(--sky);
}
.rail-stage[data-state="failed"] .rail-button { color: #f0a6a6; }
.rail-stage[data-state="locked"] .rail-button { cursor: not-allowed; opacity: 0.55; }
.rail-stage[data-view="yes"] .rail-button { border-color: var(--mist); }

/* --- panes: one column first, two on wide viewports ---------------------- */

.wz-panes { display: grid; gap: 22px; margin-top: 36px; align-items: start; }

.wz-panes .card { margin-bottom: 22px; }
.wz-panes .card:last-child { margin-bottom: 0; }

@media (min-width: 960px) {
  .wz-panes { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.card-grid.wz-models { margin-top: 28px; }

/* --- buttons and controls ------------------------------------------------ */

.wz-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 550 14px/1 var(--body);
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: 11px 22px;
  border-radius: 999px;
  cursor: pointer;
}

.wz-button:hover { background: var(--accent-hover); }

.wz-button[disabled] {
  background: var(--panel);
  border-color: var(--hair);
  color: var(--muted);
  cursor: not-allowed;
}

.wz-button-quiet {
  background: transparent;
  border-color: var(--hair);
  color: var(--ink);
}

.wz-button-quiet:hover { background: var(--day); border-color: var(--mist); }

.rowbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 0 6px;
}

.wz-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }

.wz-tab {
  font: 550 13px/1 var(--body);
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
}

.wz-tab[data-chosen="yes"] {
  background: var(--night);
  border-color: var(--night);
  color: var(--snow);
}

.wz-tabpane[data-shown="no"] { visibility: hidden; height: 0; overflow: hidden; margin: 0; }

input[type="number"], input[type="text"], textarea, select {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: 12px;
}

input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--glow);
  outline-offset: -1px;
}

.wz-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 6px;
}

.wz-field { margin: 0 0 14px; }

.wz-cap {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.wz-file { display: block; font-size: 13.5px; color: var(--ink-2); }
.wz-file input { margin-top: 10px; font-family: var(--mono); font-size: 12px; }

/* --- status, notes, honesty --------------------------------------------- */

.wz-status {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--panel);
  border-left: 2px solid var(--hair);
  padding: 7px 10px;
  margin: 14px 0 8px;
  overflow-wrap: anywhere;
}

section.screen[data-state="failed"] .wz-status {
  color: #8f1f2a;
  border-left-color: #8f1f2a;
}

.wz-note { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.wz-empty { font-size: 12.5px; color: var(--muted); }
.wz-copy { font-size: 14px; color: var(--ink-2); }
.wz-tagline { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; }

/* The sentences a run document attaches to its numbers: its disclosure,
 * its basis, a model's own note. Never hidden, never collapsed, never
 * smaller than the copy around them; an empty one takes no space but is
 * never display-hidden. */
.disclosure {
  border-left: 2px solid var(--ink);
  padding: 4px 0 4px 10px;
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
}

.disclosure:empty { border-left: 0; padding: 0; margin: 0; }

.wz-model { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); }

.wz-warning {
  font-size: 13.5px;
  margin: 12px 0 0;
  color: var(--muted);
}

.wz-warning[data-level="warn"] {
  color: #8a4b12;
  font-weight: 600;
  border-left: 2px solid #8a4b12;
  padding-left: 10px;
}

.wz-headline { margin: 8px 0 0; }

.figure-big {
  font-size: 30px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin: 2px 0;
}

.wz-figure-note { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }
.wz-caption { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }

/* --- model cards --------------------------------------------------------- */

.wz-model-card[data-chosen="yes"] { border-color: var(--glow); background: #f0f9fd; }
.wz-model-card[data-coming="yes"] { opacity: 0.72; }
.wz-model-card .wz-button { margin-top: auto; align-self: flex-start; }

.wz-caps {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--muted);
}

.wz-caps li { margin: 2px 0; }

/* --- fields, tables, history -------------------------------------------- */

dl.fields {
  display: grid;
  grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
  gap: 3px 12px;
  margin: 10px 0 8px;
  align-items: baseline;
}

dl.fields dt { font-size: 12px; color: var(--muted); }
dl.fields dd { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }

table.grid td, table.grid th { font-size: 13px; padding: 8px 14px 8px 0; }
table.grid td.num, table.grid th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#points-table input { max-width: 130px; }
#points-table td { border-top: none; padding: 4px 8px 4px 0; }

.wz-history { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

.wz-history-entry {
  font-family: var(--mono);
  font-size: 12px;
  text-align: left;
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 7px 10px;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.wz-history-entry:hover { border-color: var(--mist); }

.wz-track {
  display: flex;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 14px 0 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.wz-track li { color: var(--muted); opacity: 0.6; }
.wz-track li[data-reached="yes"] { color: #1c5c34; opacity: 1; font-weight: 600; }
.wz-track li[data-reached="failed"] { color: #8f1f2a; opacity: 1; }

/* --- raw request and response ------------------------------------------- */

.wz-raw { margin: 18px 0 0; }

.wz-raw summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.wz-json {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 10px 0 0;
  overflow: auto;
  max-height: 320px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

details.why { margin-top: 16px; font-size: 13px; }
details.why summary { cursor: pointer; color: var(--ink-2); padding: 3px 0; }
details.why p { margin: 8px 0 6px; color: var(--muted); max-width: 70ch; }

/* --- the exceedance chart ------------------------------------------------ */

.wz-chart-wrap { position: relative; margin-top: 10px; }
.wz-chart svg { display: block; width: 100%; height: auto; }

.wz-rule { stroke: var(--hair); stroke-width: 1; }
.wz-tick { font-family: var(--mono); font-size: 10px; fill: var(--muted); }
.wz-guide { stroke: var(--night); stroke-width: 1; }

.wz-line.s0 { stroke: #0f6a93; stroke-width: 2; }
.wz-line.s1 { stroke: #b4540a; stroke-width: 2; }
.wz-dot.s0 { fill: #0f6a93; }
.wz-dot.s1 { fill: #b4540a; }

#chart-tip {
  display: none;
  position: absolute;
  top: 6px;
  background: var(--night);
  border: 1px solid var(--hair-dark);
  color: var(--snow);
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
}

.wz-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: var(--ink-2); }
.wz-legend-item { display: inline-flex; align-items: center; gap: 7px; }
.wz-swatch { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.wz-swatch.s0 { background: #0f6a93; }
.wz-swatch.s1 { background: #b4540a; }

/* --- the key panel ------------------------------------------------------- */

.wz-secret-value {
  font-family: var(--mono);
  font-size: 12.5px;
  overflow-wrap: anywhere;
  margin: 6px 0 0;
}

.wz-secret-value[data-shown="no"] { margin: 0; }

.wz-permalink {
  font-family: var(--mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* --- phones: the email-gate pattern: under 480px, strictly one column --- */

@media (max-width: 480px) {
  section.screen { padding: 36px 0 44px; }
  .wz-panes, .card-grid.three, .card-grid.wz-models {
    grid-template-columns: minmax(0, 1fr);
  }
  .rowbar .wz-button { width: 100%; justify-content: center; }
  .wz-tabs { flex-direction: column; align-items: stretch; }
  #points-table input { max-width: none; width: 100%; }
  .figure-big { font-size: 24px; }
}

/* Step 1's two-up choice row: primary flow beside the playground pointer.
   Composes the v6 card grid; collapses at the site's own narrow break. */
.card-grid.wz-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid.wz-two .card { display: flex; flex-direction: column; }
.card-grid.wz-two .card .card-link { margin-top: auto; }
@media (max-width: 900px) {
  .card-grid.wz-two { grid-template-columns: minmax(0, 1fr); }
}

/* --- the exposure map ----------------------------------------------------
   The base drawing carries the night tokens itself (it is committed that
   way); this block only frames it and colours the overlay: glow dots with
   small value labels, the PiWind footprint, faint basin hints. Sizes that
   must hold steady across zooms (radii, label sizes, dashes) are set as
   attributes from the current window in wizard.js, not here. */

.wz-inset-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }

.wz-inset {
  font: 550 12px/1 var(--body);
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
}

.wz-inset:hover { border-color: var(--mist); }

.wz-inset[data-chosen="yes"] {
  background: var(--night);
  border-color: var(--night);
  color: var(--snow);
}

.wz-inset[data-hinted="yes"] { border-color: var(--glow); box-shadow: 0 0 0 1px var(--glow); }

.wz-place-results { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 0; }

.wz-place {
  font-family: var(--mono);
  font-size: 12px;
  text-align: left;
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 7px 10px;
  cursor: pointer;
}

.wz-place:hover { border-color: var(--mist); }

.wz-map {
  margin-top: 12px;
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
  background: var(--night);
}

.wz-map svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  cursor: crosshair;
  touch-action: manipulation;
}

.wz-map-dot { fill: var(--glow); stroke: var(--night); cursor: pointer; }
.wz-map-dot[data-chosen="yes"] { fill: var(--snow); stroke: var(--glow); }
.wz-map-hit { fill: var(--night); fill-opacity: 0; cursor: pointer; }

.wz-map-label {
  fill: var(--snow);
  font-family: var(--mono);
  opacity: 0.9;
  pointer-events: none;
}

.wz-map-footprint { fill: var(--glow); fill-opacity: 0.12; stroke: var(--glow); }
.wz-map-basin { fill: none; stroke: var(--mist); opacity: 0.7; }

.wz-map-hint-label {
  fill: var(--glow);
  font-family: var(--mono);
  letter-spacing: 0.05em;
  pointer-events: none;
}

.wz-map-credit { font-size: 11px; color: var(--muted); margin: 6px 0 0; }

#points-table tr[data-chosen="yes"] input {
  border-color: var(--glow);
  background: var(--sky-hover);
}

/* The money declaration and the plain reading of the result. */
.wz-currency-row { max-width: 70ch; color: var(--muted); }
.wz-currency-row select {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--hair); border-radius: 8px; padding: 2px 8px;
}
.wz-reading { max-width: 62ch; font-size: 17px; line-height: 1.55; }

/* Step 1: the guided path beside tiles of everything else built here. */
.wz-choice {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 22px;
  margin-top: 44px;
  align-items: start;
}
.wz-buildables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.wz-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--hair);
  border-radius: 18px;
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
}
.wz-tile:hover { background: var(--sky-hover); }
.wz-tile h4 { margin: 0; font-size: 15px; }
.wz-tile p { margin: 0; font-size: 13.5px; color: var(--muted); }
.wz-tile-where { margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--ink-2); }
@media (max-width: 900px) {
  .wz-choice { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .wz-buildables { grid-template-columns: minmax(0, 1fr); }
}