@layer reset, base, layout, components, utilities, print;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { font-size: 100%; scroll-behavior: smooth; }
  body, h1, h2, h3, p, fieldset, legend { margin: 0; }
  button, input, select { font: inherit; }
  button { cursor: pointer; }
}

@layer base {
  :root {
    color-scheme: light;
    --canvas: #e8ebe7;
    --surface: #f8f9f6;
    --surface-raised: #eef1ec;
    --surface-strong: #e2e7e2;
    --steel: #c4cbc5;
    --steel-bright: #89948c;
    --text: #111512;
    --muted: #4c5851;
    --quiet: #657069;
    --accent: #007f56;
    --accent-strong: #006846;
    --accent-dark: #deefe7;
    --warning: #b5521f;
    --danger: #a92f2a;
    --radius: 8px;
    --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    --font-display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --focus: 0 0 0 3px rgb(0 127 86 / 0.2);
  }

  body {
    min-width: 20rem;
    min-height: 100dvh;
    background:
      radial-gradient(circle at 10% 0%, rgb(255 255 255 / 0.82), transparent 27rem),
      linear-gradient(115deg, rgb(255 255 255 / 0.18), transparent 40%),
      var(--canvas);
    color: var(--text);
    font-family: var(--font-ui);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
  }

  ::selection { background: var(--accent); color: #fff; }
  a { color: inherit; }
  input, select, button { min-height: 2.75rem; }
  input, select {
    width: 100%;
    border: 1px solid var(--steel);
    border-radius: var(--radius);
    background: #fff;
    color: var(--text);
    padding: 0.68rem 0.75rem;
  }
  input::placeholder { color: #7b857e; opacity: 1; }
  input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: var(--focus);
  }
  input[aria-invalid="true"] { border-color: var(--danger); }
}

@layer layout {
  .skip-link {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 20;
    transform: translateY(-120%);
    background: var(--accent);
    color: #fff;
    padding: 0.75rem 1rem;
  }
  .skip-link:focus { transform: translateY(0); }

  .site-header {
    min-height: 4.25rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem clamp(1rem, 3vw, 3rem);
    border-bottom: 1px solid #242a26;
    background: #101411;
  }
  .brand {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: #f5f7f4;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-decoration: none;
  }
  .brand > span:last-child span { color: #20bd83; }
  .brand-mark { display: grid; grid-template-columns: repeat(3, 0.22rem); align-items: end; gap: 0.14rem; height: 1.25rem; }
  .brand-mark i { display: block; background: #20bd83; }
  .brand-mark i:nth-child(1) { height: 55%; }
  .brand-mark i:nth-child(2) { height: 100%; }
  .brand-mark i:nth-child(3) { height: 74%; }
  .header-mode, .header-notice { color: #aeb7b0; font-size: 0.875rem; }
  .header-mode { justify-self: center; }
  .header-notice { justify-self: end; }

  main { width: min(100%, 112rem); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 3rem) 4rem; }
  .intro {
    min-height: 16rem;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.65fr);
    align-items: end;
    gap: 2rem;
    padding: clamp(2.5rem, 6vw, 5rem) 0 2.25rem;
  }
  .kicker, .section-index {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  h1 { max-width: 13ch; margin-top: 0.45rem; font-family: var(--font-display); font-size: clamp(3rem, 7vw, 6.4rem); font-weight: 900; line-height: 0.88; letter-spacing: -0.065em; text-transform: uppercase; }
  .intro-copy { max-width: 31rem; color: var(--muted); font-size: 1.08rem; line-height: 1.6; padding-bottom: 0.5rem; }
  h2 { font-size: clamp(1.55rem, 3vw, 2.4rem); line-height: 1.05; letter-spacing: -0.025em; }
  h3 { font-size: 1.1rem; }

  .control-deck, .results-shell {
    border: 1px solid var(--steel);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 1.25rem 3rem rgb(23 32 26 / 0.06);
    overflow: clip;
  }
  .deck-heading, .results-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1.5rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--steel);
  }
  .deck-heading > div:first-child, .results-header > div:first-child { display: grid; gap: 0.35rem; }
  .toolbar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }
  .saved-project-select { width: auto; min-width: 10.5rem; }

  .project-strip {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(18rem, 1fr);
    gap: 1.25rem;
    align-items: end;
    padding: 1.25rem;
    border-bottom: 1px solid var(--steel);
  }
  .field { display: grid; gap: 0.4rem; }
  .field > label, .field > span:first-child, .number-grid label, .inventory-grid label {
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 700;
  }
  .field-help, .group-help { color: var(--quiet); font-size: 0.8125rem; }
  .assumption-flag { min-height: 4.4rem; display: grid; align-content: center; gap: 0.2rem; padding: 0.75rem 1rem; border-left: 3px solid var(--accent); background: var(--accent-dark); }
  .assumption-flag strong { color: var(--accent-strong); font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; }
  .assumption-flag span { color: var(--muted); }

  .pours-grid { display: grid; grid-template-columns: 1fr 1fr; }
  .pour-panel { min-width: 0; padding: 1.25rem; border: 0; border-bottom: 1px solid var(--steel); }
  .pour-panel + .pour-panel { border-left: 1px solid var(--steel); }
  .pour-panel legend { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0 0 1rem; font-weight: 800; font-size: 1.25rem; }
  .pour-panel legend small { color: var(--quiet); font-size: 0.8125rem; font-weight: 500; }
  .run-table-head, .run-row {
    display: grid;
    grid-template-columns: 2.4rem minmax(8rem, 1fr) minmax(7rem, 0.75fr);
    gap: 0.65rem;
    align-items: center;
  }
  .run-table-head { color: var(--quiet); font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; padding: 0 0 0.45rem; }
  .run-list { display: grid; gap: 0.5rem; }
  .run-row { position: relative; }
  .run-row label { font-family: var(--font-mono); font-size: 1rem; font-weight: 800; color: var(--accent); }
  .normalized { color: var(--muted); font-family: var(--font-mono); font-size: 0.78rem; }
  .field-error { grid-column: 2 / -1; color: var(--danger); font-size: 0.8rem; min-height: 0; }
  .field-error:empty { display: none; }

  .rules-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; }
  .rules-group { min-width: 0; padding: 1.25rem; border: 0; }
  .rules-group + .rules-group { border-left: 1px solid var(--steel); }
  .rules-group legend { padding: 0 0 0.35rem; font-size: 1.05rem; font-weight: 800; }
  .panel-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 1rem; }
  .panel-option { position: relative; }
  .panel-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .panel-option span { min-height: 3rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.65rem 0.75rem; border: 1px solid var(--steel); border-radius: var(--radius); color: var(--muted); }
  .panel-option input:checked + span { border-color: var(--accent); background: var(--accent-dark); color: var(--text); }
  .panel-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
  .panel-option b { color: var(--text); font-family: var(--font-mono); font-size: 1rem; }
  .switch-row { display: flex; align-items: center; gap: 0.65rem; margin-top: 0.85rem; color: var(--muted); font-size: 0.9rem; }
  .switch-row input { width: 1.1rem; min-height: 1.1rem; accent-color: var(--accent); }
  .number-grid, .inventory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.65rem; margin-top: 1rem; }
  .inventory-grid { grid-template-columns: repeat(4, 1fr); }
  .number-grid label, .inventory-grid label { display: grid; gap: 0.4rem; }
  .inline-warning { margin-top: 0.75rem; color: var(--warning); font-size: 0.83rem; }
  .select-field { margin-top: 1rem; }

  .submit-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-top: 1px solid var(--steel); background: var(--surface-raised); }
  .submit-row p { color: var(--muted); font-size: 0.9rem; }

  .results-shell { margin-top: 1.5rem; min-height: 18rem; }
  .empty-state { min-height: 14rem; display: flex; justify-content: center; align-items: center; gap: 1.5rem; padding: 2rem; color: var(--muted); }
  .empty-state h3 { color: var(--text); margin-bottom: 0.25rem; }
  .empty-diagram { display: flex; align-items: end; gap: 0.22rem; height: 3.5rem; padding: 0.7rem; border: 1px solid var(--steel); }
  .empty-diagram i { width: 0.75rem; background: var(--steel-bright); }
  .empty-diagram i:nth-child(1) { height: 75%; }
  .empty-diagram i:nth-child(2) { height: 100%; }
  .empty-diagram i:nth-child(3) { height: 62%; }
  .empty-diagram i:nth-child(4) { height: 84%; }

  .site-footer { display: grid; grid-template-columns: auto minmax(0, 50rem); gap: 1.25rem; padding: 1.5rem clamp(1rem, 3vw, 3rem) 2.5rem; border-top: 1px solid var(--steel); color: var(--quiet); font-size: 0.84rem; }
  .site-footer strong { color: var(--text); white-space: nowrap; }
}

@layer components {
  .button { min-width: max-content; border: 1px solid transparent; border-radius: var(--radius); padding: 0.65rem 0.9rem; font-weight: 800; transition: transform 120ms ease, border-color 120ms ease, background 120ms ease; }
  .button:active { transform: translateY(1px); }
  .button:disabled { cursor: not-allowed; opacity: 0.42; }
  .button-primary { background: var(--accent); color: #fff; }
  .button-primary:hover:not(:disabled) { background: var(--accent-strong); }
  .button-secondary { border-color: var(--steel); background: transparent; color: var(--text); }
  .button-secondary:hover:not(:disabled) { border-color: var(--steel-bright); background: var(--surface-strong); }
  .micro-button { min-height: 1.9rem; border: 1px solid var(--steel); border-radius: var(--radius); background: transparent; color: var(--muted); padding: 0.25rem 0.5rem; font-size: 0.72rem; font-weight: 800; }
  .micro-button:hover { border-color: var(--accent); color: var(--text); }

  .strategy-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--steel); }
  .strategy-tabs button { border: 0; border-right: 1px solid var(--steel); border-radius: 0; background: var(--surface-raised); color: var(--muted); padding: 0.85rem 1rem; font-weight: 800; }
  .strategy-tabs button:last-child { border-right: 0; }
  .strategy-tabs button[aria-selected="true"] { background: var(--accent-dark); color: var(--accent-strong); box-shadow: inset 0 -3px 0 var(--accent); }
  .plan-identity { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: 1.25rem; border-bottom: 1px solid var(--steel); }
  .plan-identity > div { display: grid; gap: 0.35rem; }
  .plan-identity > p { max-width: 30rem; color: var(--muted); }
  .metric-grid { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; border-bottom: 1px solid var(--steel); }
  .metric-grid div { padding: 1rem 1.25rem; border-right: 1px solid var(--steel); }
  .metric-grid div:last-child { border-right: 0; }
  .metric-grid dt { color: var(--quiet); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; }
  .metric-grid dd { margin: 0.25rem 0 0; color: var(--text); font-family: var(--font-mono); font-size: clamp(1.45rem, 3vw, 2.3rem); font-weight: 800; }
  .field-view { border-bottom: 1px solid #303833; background: #111512; color: #f3f6f2; }
  .field-view .section-index { color: #58d6a5; }
  .field-view-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid #303833; }
  .field-view-header > div:first-child { display: grid; gap: 0.35rem; }
  .view-run-tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; }
  .view-run-tabs button { min-height: 2.25rem; border: 1px solid #465149; border-radius: var(--radius); background: transparent; color: #b8c2ba; padding: 0.35rem 0.6rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 800; }
  .view-run-tabs button:hover { border-color: #58d6a5; color: #fff; }
  .view-run-tabs button[aria-selected="true"] { border-color: #58d6a5; background: #173b2d; color: #8decc6; }
  .field-view-grid { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; }
  .perspective-stage { min-width: 0; display: grid; place-items: center; padding: 1rem; overflow: hidden; border-right: 1px solid #303833; background: radial-gradient(circle at 50% 45%, #253029 0, #161c18 48%, #101411 82%); }
  .perspective-svg { display: block; width: 100%; height: auto; max-height: 28rem; }
  .perspective-ground { stroke: #47544c; stroke-width: 2; }
  .perspective-face, .perspective-top, .perspective-corner { stroke: #7a8980; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
  .perspective-face.is-panel { fill: #39423c; }
  .perspective-face.is-panel.pattern-1 { fill: #465149; }
  .perspective-face.is-panel.pattern-2 { fill: #2c342f; }
  .perspective-top.is-panel { fill: #59655d; }
  .perspective-top.is-panel.pattern-1 { fill: #667169; }
  .perspective-top.is-panel.pattern-2 { fill: #4a554e; }
  .perspective-face.is-closure { fill: #087f58; stroke: #77dfb7; stroke-dasharray: 3 2; }
  .perspective-top.is-closure { fill: #24a978; stroke: #77dfb7; }
  .perspective-corner { fill: #1f2722; stroke: #98a49c; }
  .perspective-panel-label { fill: #f5f7f4; font-family: var(--font-mono); font-size: 16px; font-weight: 800; text-anchor: middle; dominant-baseline: middle; }
  .perspective-callout { fill: none; stroke: #77dfb7; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
  .perspective-callout-label, .perspective-callout-value { fill: #8decc6; font-family: var(--font-mono); font-size: 10px; font-weight: 800; text-anchor: middle; }
  .perspective-callout-value { fill: #fff; font-size: 12px; }
  .perspective-dimension { fill: none; stroke: #738078; stroke-width: 1; vector-effect: non-scaling-stroke; }
  .perspective-dimension-label, .perspective-note { fill: #cad1cc; font-family: var(--font-mono); font-size: 11px; text-anchor: middle; }
  .perspective-note { fill: #87938b; font-size: 9px; text-anchor: end; }
  .perspective-meta { display: grid; align-content: center; gap: 0.35rem; padding: 1.25rem; background: #151a17; }
  .perspective-meta > span { color: #8decc6; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .perspective-meta > strong { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; }
  .perspective-meta dl { display: grid; gap: 0.8rem; margin: 1rem 0; }
  .perspective-meta dl div { display: grid; gap: 0.1rem; }
  .perspective-meta dt { color: #89958d; font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; }
  .perspective-meta dd { margin: 0; color: #eef2ee; font-size: 0.85rem; overflow-wrap: anywhere; }
  .perspective-meta p { color: #9ca79f; font-size: 0.75rem; }
  .plan-section { padding: 1.25rem; border-bottom: 1px solid var(--steel); }
  .plan-section-heading { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
  .run-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .run-card { min-width: 0; padding: 0.85rem; border: 1px solid #303833; border-radius: var(--radius); background: #151a17; color: #f3f6f2; break-inside: avoid; }
  .run-card.is-viewing { border-color: #58d6a5; box-shadow: inset 0 0 0 1px #58d6a5; }
  .run-card header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
  .run-card header > div { display: flex; align-items: center; gap: 0.5rem; }
  .run-card header > div:first-child { display: grid; gap: 0.1rem; }
  .run-card header .run-actions { flex-wrap: wrap; justify-content: flex-end; }
  .run-card header span { color: #9ca79f; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; }
  .run-card header strong { font-size: 1.12rem; }
  code { color: var(--accent-strong); font-family: var(--font-mono); font-weight: 800; }
  .run-card code { color: #58d6a5; }
  .run-card .micro-button { border-color: #536159; color: #c2cbc4; }
  .run-card .micro-button:hover { border-color: #58d6a5; color: #fff; }
  .run-diagram { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; min-height: 4.25rem; overflow: hidden; border: 1px solid #69766e; }
  .boundary { display: grid; place-items: center; width: 1.4rem; background: repeating-linear-gradient(135deg, #252d28 0 5px, #39433c 5px 10px); color: transparent; writing-mode: vertical-rl; font-size: 0; }
  .segments { min-width: 0; display: flex; }
  .segment { flex: var(--segment) 1 1px; min-width: 1.6rem; display: grid; place-content: center; text-align: center; border-right: 1px solid #111512; overflow: hidden; }
  .segment:last-child { border-right: 0; }
  .segment b { font-family: var(--font-mono); font-size: 0.82rem; white-space: nowrap; }
  .segment small { color: #b5beb7; font-size: 0.58rem; text-transform: uppercase; }
  .segment-panel { background-color: #303a33; background-image: linear-gradient(90deg, transparent 48%, rgb(255 255 255 / 0.05) 50%, transparent 52%); }
  .segment-panel.pattern-1 { background-color: #3b443e; }
  .segment-panel.pattern-2 { background-color: #242b27; }
  .segment-closure { min-width: 2.4rem; background: repeating-linear-gradient(135deg, rgb(0 127 86 / 0.42) 0 5px, rgb(0 127 86 / 0.16) 5px 10px); color: #73e3b8; }
  .component-line, .equation { color: #a8b2ab; font-family: var(--font-mono); font-size: 0.69rem; overflow-wrap: anywhere; }
  .component-line { margin-top: 0.55rem; }
  .equation { margin-top: 0.2rem; color: #c3cbc5; }
  .cycle-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; margin: 0; padding: 0; list-style: none; }
  .cycle-steps li { min-width: 0; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0.75rem; padding: 0.85rem; border: 1px solid var(--steel); border-radius: var(--radius); background: var(--surface-raised); }
  .cycle-steps li > span { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-dark); color: var(--accent-strong); font-family: var(--font-mono); font-weight: 800; }
  .cycle-steps li > div { min-width: 0; display: grid; align-content: start; gap: 0.15rem; }
  .cycle-steps strong { color: var(--text); font-size: 0.88rem; }
  .cycle-steps p { color: var(--muted); font-size: 0.78rem; }
  .table-scroll { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; min-width: 56rem; }
  th, td { padding: 0.75rem; border-bottom: 1px solid var(--steel); text-align: left; vertical-align: top; }
  th { color: var(--quiet); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; }
  td { color: var(--muted); font-size: 0.82rem; }
  td strong { display: block; color: var(--text); }
  td small { display: block; max-width: 10rem; margin-top: 0.15rem; color: var(--warning); }
  .assumptions { display: grid; grid-template-columns: minmax(12rem, 0.42fr) 1fr; gap: 2rem; padding: 1.25rem; background: var(--surface-raised); }
  .assumptions > div { display: grid; align-content: start; gap: 0.35rem; }
  .assumptions ul { margin: 0; padding-left: 1.2rem; color: var(--muted); }
  .assumptions li + li { margin-top: 0.4rem; }
  .infeasible { padding: 1.25rem; }
  .infeasible h3 { margin-top: 0.35rem; }
  .infeasible ul { display: grid; gap: 0.65rem; padding: 0; list-style: none; }
  .infeasible li { display: grid; gap: 0.2rem; padding: 0.85rem; border-left: 3px solid var(--warning); background: rgb(181 82 31 / 0.06); }
  .infeasible li span { color: var(--muted); }
  .is-error { color: var(--danger) !important; }
}

@layer utilities {
  [hidden] { display: none !important; }
}

@media (max-width: 64rem) {
  .intro { grid-template-columns: 1fr; min-height: auto; }
  .intro-copy { padding-bottom: 0; }
  .rules-grid { grid-template-columns: 1fr 1fr; }
  .rules-group:last-child { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--steel); }
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .metric-grid div:nth-child(3) { border-right: 0; }
  .metric-grid div:nth-child(n + 4) { border-top: 1px solid var(--steel); }
  .field-view-grid { grid-template-columns: 1fr; }
  .perspective-stage { border-right: 0; border-bottom: 1px solid #303833; }
  .perspective-meta { grid-template-columns: auto 1fr; column-gap: 1rem; }
  .perspective-meta dl, .perspective-meta p { grid-column: 1 / -1; }
}

@media (max-width: 48rem) {
  .site-header { grid-template-columns: 1fr auto; }
  .header-mode { display: none; }
  h1 { font-size: clamp(3rem, 17vw, 5.4rem); }
  .deck-heading, .results-header, .submit-row, .site-footer { align-items: stretch; flex-direction: column; }
  .deck-heading, .results-header, .submit-row { display: flex; }
  .toolbar { justify-content: flex-start; }
  .saved-project-select { flex: 1 1 100%; width: 100%; }
  .project-strip, .pours-grid, .rules-grid, .site-footer { grid-template-columns: 1fr; }
  .pour-panel + .pour-panel, .rules-group + .rules-group { border-left: 0; border-top: 1px solid var(--steel); }
  .rules-group:last-child { grid-column: auto; }
  .run-table-head { display: none; }
  .run-row { grid-template-columns: 2rem minmax(0, 1fr); }
  .normalized, .field-error { grid-column: 2; }
  .number-grid { grid-template-columns: 1fr; }
  .inventory-grid { grid-template-columns: repeat(2, 1fr); }
  .button { min-height: 3rem; }
  .site-footer { display: grid; }
  .strategy-tabs { grid-template-columns: 1fr; }
  .strategy-tabs button { border-right: 0; border-bottom: 1px solid var(--steel); text-align: left; }
  .plan-identity, .run-card header { align-items: stretch; flex-direction: column; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-grid div { border-top: 1px solid var(--steel); }
  .metric-grid div:nth-child(odd) { border-right: 1px solid var(--steel); }
  .metric-grid div:nth-child(even) { border-right: 0; }
  .run-cards { grid-template-columns: 1fr; }
  .field-view-header { align-items: stretch; flex-direction: column; }
  .view-run-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 0.25rem; }
  .view-run-tabs button { flex: 0 0 auto; }
  .perspective-stage { padding: 0.5rem; overflow-x: auto; }
  .perspective-svg { min-width: 42rem; }
  .perspective-meta { grid-template-columns: 1fr; }
  .perspective-meta dl, .perspective-meta p { grid-column: auto; }
  .cycle-steps { grid-template-columns: 1fr; }
  .assumptions { grid-template-columns: 1fr; gap: 1rem; }
}

@media (max-width: 24rem) {
  .header-notice { display: none; }
  .site-header { grid-template-columns: 1fr; }
  .panel-options { grid-template-columns: 1fr; }
  .inventory-grid { grid-template-columns: 1fr; }
  .toolbar .button { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@layer components {
  .export-status { padding: 0 1.5rem 1rem; color: var(--muted); font-size: .875rem; }
  .layout-help { max-width: 65ch; margin-bottom: 1.25rem; color: var(--muted); font-size: .875rem; line-height: 1.6; }
  #plan-dialog { width: min(64rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.5rem; border: 1px solid var(--steel); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 24px 100px #10141155; }
  #plan-dialog::backdrop { background: #101411aa; backdrop-filter: blur(4px); }
  .dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
  .dialog-header h2 { font-size: clamp(1.2rem, 3vw, 1.8rem); }
  #plan-dialog-body { display: grid; gap: 1rem; }
  #depth-action-form { display: grid; gap: 1rem; }
  .dialog-depths { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
  .dialog-depths label { display: grid; gap: .5rem; font-weight: 600; }
  .dialog-depths input { width: 100%; min-width: 0; min-height: 3rem; font-size: 16px; padding: .75rem; border: 1px solid var(--steel-bright); border-radius: 8px; background: white; }
  .dialog-error { color: var(--danger); }
  .dialog-error:empty { display: none; }
  #depth-entry-help, .dialog-limit { color: var(--muted); font-size: .875rem; }
  .dialog-dimensions { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
  #plan-dialog .perspective-stage { border-radius: 8px; overflow-x: auto; }
  .micro-button[aria-pressed="true"] { background: var(--accent-dark); border-color: var(--accent); color: var(--accent-strong); }
  @media (max-width: 40rem) { #plan-dialog { padding: 1rem; } .dialog-header { align-items: flex-start; } .export-status { padding-inline: 1rem; } }
}

@layer print {
  @media print {
    :root { color-scheme: light; }
    body { background: #fff; color: #111; font-size: 10pt; }
    .site-header, .intro, #planner-form, .toolbar, .empty-state, .site-footer, #plan-dialog, .export-status { display: none !important; }
    main { width: 100%; padding: 0; }
    .results-shell { margin: 0; border: 0; background: #fff; color: #111; }
    .results-header { padding: 0 0 0.5in; border-color: #555; }
    #result-content { display: block !important; }
    .strategy-tabs, .micro-button, .view-run-tabs { display: none !important; }
    .plan-identity, .metric-grid, .plan-section, .assumptions { border-color: #777; }
    .run-cards { grid-template-columns: 1fr; }
    .run-card { background: #fff; border-color: #777; color: #111; }
    .field-view { background: #fff; color: #111; border-color: #777; }
    .field-view-grid { grid-template-columns: 1fr; }
    .field-view-header, .perspective-stage { border-color: #777; }
    .perspective-stage, .perspective-meta { background: #fff; color: #111; }
    .perspective-meta dt, .perspective-meta p { color: #333; }
    .perspective-meta dd { color: #111; }
    .perspective-face.is-panel, .perspective-top.is-panel { fill: #ddd; }
    .perspective-face.is-closure, .perspective-top.is-closure { fill: #aaa; stroke: #111; }
    .perspective-panel-label, .perspective-callout-value { fill: #111; }
    .run-diagram { border-color: #333; }
    .segment-panel { background: #ddd; color: #111; }
    .segment-closure { background: repeating-linear-gradient(135deg, #ddd 0 4px, #fff 4px 8px); color: #111; }
    .component-line, .equation, td, .assumptions ul { color: #222; }
    .cycle-section { break-before: page; }
  }
}