/* Mercury-light — Family Budget Planner stylesheet.
 *
 * Derived from the approved desktop + mobile mockups in
 * .superpowers/brainstorm/12038-1777555661/content/. Single source of truth
 * for the Phase 1 UI: top bar + sticky status pill, single-column content
 * (max 880px desktop), three KPI cards, panels for Incomes/Expenses/Savings,
 * floor card, and a right-side drawer (desktop) / bottom-sheet (mobile)
 * for add forms. Mobile-first @media query swaps the drawer to a sheet and
 * stacks the KPIs.
 */

:root {
  --bg: #fafaf7;
  --surface: #ffffff;
  --surface-2: #f7f7f5;
  --ink: #111114;
  --muted: #6b6b75;
  --hair: #e8e8ec;
  --hair-strong: #d8d8de;
  --gold: #9c7e3e;
  --gold-bright: #c8a86b;
  --gold-soft: #f5edd9;
  --navy: #0e1729;
  --navy-2: #1a2438;
  --green: #2f6a3a;
  --warm: #9a4f0e;
  --red: #b91c1c;
  --red-soft: #fef2f2;
  --amber: #b45309;
  --serif: ui-serif, "Charter", Georgia, serif;

  /* Motion tokens — referenced by hover/press rules. */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }

html {
  /* Reserve space for the vertical scrollbar even on short pages so
     centered .content doesn't shift horizontally between long and
     short routes (Active vs /scenarios was off by ~7.5px because
     short routes hid the scrollbar). */
  scrollbar-gutter: stable;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "Inter", "SF Pro Text", system-ui, sans-serif;
  font-feature-settings: "tnum" 1, "ss01" 1;
  font-size: 14px;
  line-height: 1.4;
}

a { color: inherit; text-decoration: none; }

button { font-family: inherit; font-size: inherit; }

/* ---------- Top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 16px 36px;
  background: var(--surface);
  border-bottom: 1px solid var(--hair);
  font-size: 13px;
}
.topbar .brand {
  font-weight: 700;
  letter-spacing: 1.4px;
  font-size: 12px;
  color: var(--gold);
  text-transform: uppercase;
}
.topbar a {
  position: relative;
  color: var(--muted);
  padding: 4px 0;
  transition: color var(--motion-fast) ease;
}
.topbar a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--gold);
  opacity: 0.45;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-base) var(--ease-out);
}
.topbar a:hover {
  color: var(--ink);
}
.topbar a:hover::after {
  transform: scaleX(1);
}
.topbar a.active {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--gold);
  padding-bottom: 6px;
}
.topbar a.active::after {
  display: none;
}
.topbar .spacer { flex: 1; }
.topbar .status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.topbar .status-pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amber);
}
.topbar .status-pill strong { color: var(--ink); font-weight: 700; }
.topbar .link {
  position: relative;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 0;
  transition: color var(--motion-fast) ease;
}
.topbar .link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--gold);
  opacity: 0.45;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-base) var(--ease-out);
}
.topbar .link:hover {
  color: var(--ink);
}
.topbar .link:hover::after {
  transform: scaleX(1);
}

/* ---------- Page content ---------- */

.content {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 28px 48px;
}

/* ---------- KPI bar ---------- */

.kpi-bar {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 18px 20px;
}
.kpi.accent {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  border-color: transparent;
  color: #f7f3e8;
}
.kpi .label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--muted);
  font-weight: 600;
}
.kpi.accent .label { color: var(--gold-bright); opacity: 0.95; }
.kpi .value {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  margin-top: 8px;
  letter-spacing: -0.8px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1;
}
.kpi.accent .value { color: #f7f3e8; }
.kpi.warn .value { color: var(--amber); }
.kpi .sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.kpi.accent .sub { color: rgba(247, 243, 232, 0.7); }
.kpi.danger {
  background: linear-gradient(135deg, var(--red) 0%, #8a1717 100%);
  border-color: transparent;
  color: #f7f3e8;
}
.kpi.danger .label { color: rgba(247, 243, 232, 0.85); }
.kpi.danger .value { color: #f7f3e8; }
.kpi.danger .sub { color: rgba(247, 243, 232, 0.7); }

/* ---------- Panels ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: baseline;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hair);
}
.panel-head h4 {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ink);
  flex: 1;
}
.panel-head .add {
  position: relative;
  font-size: 12.5px;
  color: var(--gold);
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  z-index: 0;
  transition:
    color var(--motion-fast) ease,
    transform var(--motion-base) var(--ease-out);
}
.panel-head .add::before { content: "+ "; }
.panel-head .add::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: var(--gold-soft);
  opacity: 0;
  transform: scale(0.92);
  z-index: -1;
  transition:
    opacity var(--motion-fast) ease,
    transform var(--motion-base) var(--ease-out);
}
.panel-head .add:hover {
  color: var(--gold-bright);
  transform: translateY(-1px);
}
.panel-head .add:hover::after {
  opacity: 1;
  transform: scale(1);
}
.panel-head .add:active {
  transform: translateY(0);
}

/* ---------- Rows ---------- */

.row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid var(--hair);
  font-size: 13.5px;
}
.row:last-of-type { border-bottom: none; }
.row .who {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
}
.row .who.orange { background: #fde7d2; color: var(--warm); }
.row .who.green  { background: #d8e8d4; color: var(--green); }
.row .who.house  { background: var(--gold-soft); color: var(--gold); }
.row .name {
  color: var(--ink);
  display: flex;
  gap: 10px;
  align-items: center;
}
.row .name .type-hint { color: var(--muted); font-size: 12px; }
.row .amt {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  color: var(--ink);
  font-size: 14px;
}

/* Edit-icon button — used on row, floor card. Pencil icon, ink-on-hover. */
.edit-btn {
  background: transparent;
  border: 0;
  padding: 6px;
  margin: -6px;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--motion-fast) ease,
    color var(--motion-fast) ease,
    transform var(--motion-base) var(--ease-out);
}
.edit-btn:hover {
  background: var(--gold-soft);
  color: var(--gold);
  transform: scale(1.05);
}
.edit-btn:active {
  transform: scale(0.95);
}
.edit-btn:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 0;
}
.edit-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}
.row.editing .editor {
  display: flex;
  gap: 8px;
  align-items: center;
}
.row.editing .editor input {
  border: 1px solid var(--gold-bright);
  border-radius: 6px;
  padding: 6px 10px;
  font: inherit;
  font-family: var(--serif);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  width: 110px;
  outline: 2px solid var(--gold-soft);
}
.row.editing .editor button {
  border: 0;
  background: var(--ink);
  color: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  font-weight: 600;
  cursor: pointer;
}
.row.editing .editor button.cancel {
  background: var(--surface-2);
  color: var(--muted);
}
.row .delete {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
}
.row .delete:hover { color: var(--red); }

.total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 20px;
  background: var(--surface-2);
  border-top: 1px solid var(--hair);
}
.total-row .label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 700;
}
.total-row .value {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- Empty-row placeholder ---------- */

.row.empty {
  grid-template-columns: 1fr;
  color: var(--muted);
  font-style: italic;
  padding: 18px 20px;
}

/* ---------- Tag pill row (filter chips) ---------- */

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--hair);
  background: var(--surface-2);
}
.pill-row .label {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-right: 6px;
  font-weight: 600;
}
.pill-row .pill {
  cursor: pointer;
  padding: 4px 11px;
  font-size: 12px;
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--hair);
}
.pill-row .pill:hover {
  border-color: var(--hair-strong);
  color: var(--ink);
}
.pill-row .pill.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* ---------- Tag pills ---------- */

.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--hair);
}
.pill.tag {
  background: var(--gold-soft);
  color: var(--gold);
  border-color: transparent;
}

/* ---------- Validation banner ---------- */

.validation-banner {
  background: var(--red-soft);
  border: 1px solid #fecaca;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 16px;
}
.validation-banner.warn {
  background: #fef3c7;
  border-color: #fde68a;
}
.validation-banner h5 {
  margin: 0 0 6px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 700;
  color: var(--red);
}
.validation-banner.warn h5 { color: var(--amber); }
.validation-banner ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--ink);
}
.validation-banner li {
  margin: 4px 0;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.validation-banner .code {
  display: inline-block;
  background: rgba(185, 28, 28, 0.1);
  color: var(--red);
  border-radius: 4px;
  padding: 1px 8px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  flex: 0 0 auto;
}
.validation-banner.warn .code {
  background: rgba(180, 83, 9, 0.1);
  color: var(--amber);
}
.validation-banner .msg { color: var(--ink); }

/* Topbar invalid pill — red dot + red text */
.topbar .status-pill.error { color: var(--red); border-color: #fecaca; }
.topbar .status-pill.error .dot { background: var(--red); }

/* ---------- Funnel page ---------- */

.funnel-page h1 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.5px;
}
.funnel-page .lead {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 24px;
}
.funnel-section {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 12px;
}
.funnel-section .section-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 10px;
}
.funnel-section .section-label .hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--muted);
  margin-left: 6px;
}
.funnel-row {
  display: flex;
  gap: 4px;
  align-items: stretch;
  min-height: 56px;
}
.funnel-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--hair);
  min-width: 70px;
  overflow: hidden;
}
.funnel-bar .bar-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.funnel-bar .bar-amt {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.funnel-bar.hero {
  min-height: 72px;
}
.funnel-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-style: italic;
  font-size: 12.5px;
}

/* tint variants */
.funnel-bar.tint-income-orange {
  background: #fff4eb;
  border-color: #f5d8be;
  border-left: 3px solid var(--warm);
}
.funnel-bar.tint-income-green {
  background: #ecf3eb;
  border-color: #c2dabf;
  border-left: 3px solid var(--green);
}
.funnel-bar.tint-income-house {
  background: var(--gold-soft);
  border-color: var(--gold-bright);
  border-left: 3px solid var(--gold);
}
.funnel-bar.tint-floor {
  background: var(--gold-soft);
  border-color: var(--gold-bright);
  color: var(--gold);
}
.funnel-bar.tint-floor .bar-label,
.funnel-bar.tint-floor .bar-amt { color: var(--gold); }
.funnel-bar.tint-common {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  border-color: transparent;
}
.funnel-bar.tint-common .bar-label { color: var(--gold-bright); opacity: 0.95; }
.funnel-bar.tint-common .bar-amt { color: #f7f3e8; }
.funnel-bar.tint-expense {
  background: #fff4eb;
  border-color: #f5d8be;
}
.funnel-bar.tint-expense .bar-label,
.funnel-bar.tint-expense .bar-amt { color: var(--warm); }
.funnel-bar.tint-savings {
  background: #ecf3eb;
  border-color: #c2dabf;
}
.funnel-bar.tint-savings .bar-label,
.funnel-bar.tint-savings .bar-amt { color: var(--green); }
.funnel-bar.tint-unallocated {
  background: #fdf6e3;
  border-color: #ead7a3;
}
.funnel-bar.tint-unallocated .bar-label,
.funnel-bar.tint-unallocated .bar-amt { color: var(--amber); }

.funnel-page .footer-note {
  color: var(--muted);
  font-size: 12.5px;
  font-style: italic;
  margin-top: 16px;
}

/* ---------- Funnel: desktop/mobile split ---------- */

.funnel-desktop { display: none; }
.funnel-mobile  { display: block; }

@media (min-width: 880px) {
  .funnel-desktop { display: block; }
  .funnel-mobile  { display: none; }
}

/* ---------- Sankey ---------- */

svg.sankey {
  width: 100%;
  height: auto;
  max-width: 1100px;
  margin: 8px auto 4px;
  display: block;
  font-family: inherit;
  overflow: visible;
}
svg.sankey .sankey-rect {
  stroke: var(--hair-strong);
  stroke-width: 0.5;
}
svg.sankey .sankey-label {
  font-size: 11px;
  font-weight: 600;
  fill: var(--ink);
}
svg.sankey .sankey-amt {
  font-size: 10.5px;
  fill: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Node tints (fill the rect) */
svg.sankey .sankey-node.tint-income-orange .sankey-rect { fill: var(--warm); }
svg.sankey .sankey-node.tint-income-green  .sankey-rect { fill: var(--green); }
svg.sankey .sankey-node.tint-income-house  .sankey-rect { fill: var(--gold); }
svg.sankey .sankey-node.tint-floor         .sankey-rect { fill: var(--gold-bright); }
svg.sankey .sankey-node.tint-common        .sankey-rect { fill: var(--navy); }
svg.sankey .sankey-node.tint-expense       .sankey-rect { fill: var(--warm); }
svg.sankey .sankey-node.tint-savings       .sankey-rect { fill: var(--green); }
svg.sankey .sankey-node.tint-unallocated   .sankey-rect { fill: var(--amber); }

/* Ribbon tints (translucent fill, source-coloured) */
svg.sankey .sankey-ribbon {
  fill: var(--muted);
  fill-opacity: 0.55;
  transition: fill-opacity 150ms ease;
}
svg.sankey .sankey-ribbon.tint-income-orange { fill: #d28856; }
svg.sankey .sankey-ribbon.tint-income-green  { fill: #6ba175; }
svg.sankey .sankey-ribbon.tint-income-house  { fill: var(--gold-bright); }
svg.sankey .sankey-ribbon.tint-expense       { fill: #d28856; }
svg.sankey .sankey-ribbon.tint-savings       { fill: #6ba175; }
svg.sankey .sankey-ribbon.tint-unallocated   { fill: #d4a45a; }

/* Hover: dim every other ribbon. Pure CSS via :has(). */
svg.sankey:has(.sankey-ribbon:hover) .sankey-ribbon { fill-opacity: 0.18; }
svg.sankey .sankey-ribbon:hover { fill-opacity: 0.85; }
svg.sankey:has(.sankey-node:hover) .sankey-ribbon { fill-opacity: 0.18; }
svg.sankey .sankey-node:hover { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  svg.sankey .sankey-ribbon { transition: none; }
}

/* ---------- Standing-orders dedicated page ---------- */

.so-page h1 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.5px;
}
.so-page .lead {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 24px;
}
.so-page .summary-strip {
  display: flex;
  gap: 24px;
  margin-bottom: 22px;
  padding: 14px 18px;
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: 10px;
}
.so-page .summary-strip .stat .lbl {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 700;
}
.so-page .summary-strip .stat .val {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.so-page .footer-note {
  color: var(--muted);
  font-size: 12.5px;
  font-style: italic;
  margin-top: 16px;
}
.so-card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
}
.so-card .head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hair);
  background: var(--surface-2);
}
.so-card .head .who {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}
.so-card .head h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  flex: 1;
}
.so-card .head .meta {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.so-card.empty {
  background: var(--surface-2);
}
.so-card.empty .head {
  background: transparent;
  border-bottom: none;
}
.so-card .empty-msg {
  padding: 6px 18px 16px;
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
}
.so-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--hair);
}
.so-line:last-of-type { border-bottom: none; }
.so-line .target {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.so-line .target .name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.so-line .target .ref {
  font-size: 11.5px;
  color: var(--muted);
  font-family: "SF Mono", Menlo, Consolas, monospace;
  background: var(--surface-2);
  padding: 2px 7px;
  border-radius: 4px;
  align-self: flex-start;
  margin-top: 4px;
}
.so-line .target .freq {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.so-line .amt {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- Standing orders preview ---------- */

.so-row {
  display: grid;
  grid-template-columns: 1fr 32px 1fr 110px;
  gap: 14px;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid var(--hair);
  font-size: 13px;
}
.so-row:last-of-type { border-bottom: none; }
.so-row .from,
.so-row .to { color: var(--ink); }
.so-row .to {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.so-row .to .purpose {
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
}
.so-row .arrow {
  color: var(--gold);
  text-align: center;
  font-weight: 700;
  font-size: 14px;
}
.so-row .amt {
  font-family: var(--serif);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: right;
  font-size: 15px;
}
.so-row.empty {
  grid-template-columns: 1fr;
  color: var(--muted);
  font-style: italic;
  padding: 18px 20px;
}
.panel-head .meta {
  font-size: 12px;
  color: var(--muted);
  margin-right: 16px;
}

/* ---------- Floor card ---------- */

.floor-card {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 18px;
  padding: 20px;
}
.floor-input-wrap {
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.floor-input-wrap .lbl {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 700;
}
.floor-input-wrap .val {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.floor-input-wrap .floor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.member-status {
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.member-status .who {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
  flex: 0 0 auto;
}
.member-status .who.orange { background: #fde7d2; color: var(--warm); }
.member-status .who.green  { background: #d8e8d4; color: var(--green); }
.member-status .info { flex: 1; min-width: 0; }
.member-status .info .name {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.member-status .info .flow {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}
.member-status .info .flow strong { color: var(--ink); font-weight: 600; }

/* ---------- Add drawer (desktop) / sheet (mobile) ---------- */

.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 20, 0.35);
  z-index: 99;
}
.drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 420px;
  background: var(--surface);
  border-left: 1px solid var(--hair);
  box-shadow: -12px 0 36px rgba(17, 17, 20, 0.10);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  z-index: 100;
  overflow-y: auto;
}
.drawer-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.drawer-head h3 { margin: 0; font-size: 18px; font-weight: 700; }
.drawer-head .close {
  background: var(--surface-2);
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
  font-weight: 700;
  font-size: 16px;
}
.drawer .lead {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 22px;
}
/* Form primitives — used by the drawer (add/edit) and floor editor.
   Selectors are unscoped so the same classes work in both contexts. */
.field { margin-bottom: 18px; }
.field .lbl {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
}
.input,
select.input,
.field select {
  width: 100%;
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  outline: 2px solid transparent;
  outline-offset: 0;
  transition:
    border-color var(--motion-fast) ease,
    outline-color var(--motion-fast) ease;
}
.input:focus,
select.input:focus,
.field select:focus {
  outline-color: var(--gold-bright);
  border-color: var(--gold-bright);
}
.input.amount {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
}
/* "Use unallocated" shortcut on the savings drawer (issue #5). Sits below
   the amount input. Hidden when there's nothing to allocate (template
   guards rendering, so no display:none state is needed). */
.field .chip.use-unalloc {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--gold);
  background: var(--gold-soft);
  border: 1px solid var(--gold-bright);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background var(--motion-fast) ease,
    color var(--motion-fast) ease;
}
.field .chip.use-unalloc:hover,
.field .chip.use-unalloc:focus-visible {
  background: var(--gold-bright);
  color: var(--surface);
  outline: none;
}
.actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
/* Drawer + floor-editor button row. Scoped to `.actions` so the
   scenarios page's separate `.btn` utility (`.btn` / `.btn.primary` /
   `.btn.danger`, defined further down) doesn't collide with these
   filled, full-width form buttons. */
.actions .btn {
  flex: 1;
  padding: 12px 0;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border: none;
  font-family: inherit;
}
.actions .btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 0 0 rgba(17, 17, 20, 0);
  transition:
    background var(--motion-fast) ease,
    transform var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}
.actions .btn-primary:hover {
  background: var(--navy-2);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(17, 17, 20, 0.18);
}
.actions .btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(17, 17, 20, 0.12);
}
.actions .btn-secondary {
  background: var(--surface-2);
  color: var(--ink);
  transition:
    background var(--motion-fast) ease,
    color var(--motion-fast) ease;
}
.actions .btn-secondary:hover {
  background: #ececea;
  color: var(--ink);
}
.actions .btn-secondary:active {
  background: #e0e0de;
}
.drawer .btn-delete {
  margin-top: 22px;
  width: 100%;
  padding: 10px;
  background: none;
  border: 0;
  border-top: 1px solid var(--hair);
  padding-top: 18px;
  color: var(--red);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition:
    background var(--motion-fast) ease,
    color var(--motion-fast) ease,
    letter-spacing var(--motion-base) var(--ease-out);
}
.drawer .btn-delete:hover {
  background: var(--red-soft);
  color: #991b1b;
  letter-spacing: 0.3px;
}
.drawer .btn-delete:active {
  background: #fee2e2;
}

/* ---------- Sign-in ---------- */

.signin {
  max-width: 380px;
  margin: 12vh auto;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 12px;
  text-align: center;
}
.signin .brand {
  font-weight: 700;
  letter-spacing: 1.4px;
  font-size: 12px;
  color: var(--gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}
.signin h1 {
  font-family: var(--serif);
  font-weight: 600;
  margin: 4px 0 4px;
  font-size: 28px;
  letter-spacing: -0.5px;
}
.signin p { color: var(--muted); margin: 0 0 20px; }
.signin form {
  display: grid;
  gap: 12px;
}
.signin input[type="email"],
.signin input[type="password"] {
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  outline: 2px solid transparent;
  outline-offset: 0;
  transition:
    border-color var(--motion-fast) ease,
    outline-color var(--motion-fast) ease;
}
.signin input[type="email"]:focus,
.signin input[type="password"]:focus {
  outline-color: var(--gold-bright);
  border-color: var(--gold-bright);
}
.signin button {
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(17, 17, 20, 0);
  transition:
    background var(--motion-fast) ease,
    transform var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}
.signin button:hover {
  background: var(--navy-2);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(17, 17, 20, 0.18);
}
.signin button:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(17, 17, 20, 0.12);
}
.signin .error {
  background: var(--red-soft);
  color: var(--red);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
  text-align: left;
}
.signin-fallback {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
  text-align: left;
}
.signin-fallback summary {
  cursor: pointer;
  text-align: center;
  color: var(--muted);
  padding: 6px 0;
  user-select: none;
  list-style: none;
}
.signin-fallback summary::-webkit-details-marker { display: none; }
.signin-fallback summary:hover { color: var(--ink); }
.signin-fallback[open] summary {
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--hair);
  padding-bottom: 10px;
}
.signin-fallback form {
  display: grid;
  gap: 10px;
}
.signin-fallback input[type="email"] {
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}
.signin-fallback button {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.signin-fallback button:hover {
  border-color: var(--ink);
  background: #fafaf7;
}

/* ---------- Mobile chrome (Phase 3.6) ---------- */

/* Hide mobile chrome on desktop. */
.mobile-header,
.bottom-tabs { display: none; }

/* Hide desktop chrome and show mobile chrome below 880px. */
@media (max-width: 879px) {
  .topbar { display: none; }

  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--hair);
    gap: 12px;
  }
  .mobile-header .page-title {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .mobile-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .settings-btn {
    background: none;
    border: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 6px;
    transition: color var(--motion-fast) ease;
  }
  .settings-btn:hover { color: var(--ink); }

  .bottom-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--hair);
    padding: 10px 0 calc(8px + env(safe-area-inset-bottom));
    z-index: 50;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.02);
  }
  .bottom-tabs a {
    text-align: center;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    padding: 6px 4px;
    text-decoration: none;
    position: relative;
    transition: color var(--motion-fast) ease;
  }
  .bottom-tabs a:hover { color: var(--ink); }
  .bottom-tabs a.active {
    color: var(--ink);
    font-weight: 700;
  }
  .bottom-tabs a.active::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gold);
    margin: 5px auto 0;
    border-radius: 1px;
  }

  /* Reserve space below the content so the last row isn't hidden behind
     the fixed bottom-tabs bar. 64px ≈ tab font + paddings + safe inset. */
  .content { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* Print: never include nav chrome. */
@media print {
  .topbar, .mobile-header, .bottom-tabs { display: none; }
}

/* ---------- Settings sheet (Phase 3.6) ---------- */

.settings-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--hair);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 36px rgba(17, 17, 20, 0.12);
  padding: 18px 20px calc(22px + env(safe-area-inset-bottom));
  z-index: 100;       /* same layer as .drawer; above .bottom-tabs (z=50) */
}
.settings-sheet .sheet-grabber {
  width: 36px;
  height: 4px;
  background: var(--hair-strong);
  border-radius: 2px;
  margin: -6px auto 14px;
}
.settings-sheet .sheet-eyebrow {
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
  font-weight: 600;
}
.settings-sheet .sheet-name {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 2px;
  font-weight: 600;
}
.settings-sheet .sheet-email {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 18px;
}
.settings-sheet .actions { margin: 0; }
.settings-sheet .btn-signout {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--hair);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: 12px;
  padding: 14px 0;     /* ~46px tall — comfortable thumb target */
  transition:
    background var(--motion-fast) ease,
    color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    transform var(--motion-base) var(--ease-out),
    box-shadow var(--motion-base) var(--ease-out);
}
.settings-sheet .btn-signout:hover {
  background: var(--red-soft);
  color: var(--red);
  border-color: #fecaca;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(185, 28, 28, 0.10);
}
.settings-sheet .btn-signout:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(185, 28, 28, 0.12);
}
.settings-sheet .sheet-version {
  text-align: center;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.5px;
  margin: 14px 0 0;
}

/* ---------- Mobile (Phase 1 — content density) ---------- */

@media (max-width: 720px) {
  .topbar {
    padding: 12px 16px;
    gap: 14px;
    flex-wrap: wrap;
  }
  .content { padding: 20px 16px 80px; }

  /* Hero KPI: stack the available-for-savings on top, smaller siblings below. */
  .kpi-bar {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hero hero"
      "left right";
    gap: 10px;
  }
  .kpi.accent, .kpi.danger { grid-area: hero; }
  .kpi-bar .kpi:nth-child(1) { grid-area: left; }
  .kpi-bar .kpi:nth-child(3) { grid-area: right; }
  .kpi { padding: 14px 16px; }
  .kpi.accent .value { font-size: 38px; }
  .kpi.danger .value { font-size: 38px; }
  .kpi .value { font-size: 24px; }

  .row {
    grid-template-columns: 24px 1fr auto auto;
    padding: 11px 14px;
    gap: 12px;
  }
  .panel-head { padding: 12px 16px; }
  .total-row { padding: 12px 16px; }

  .floor-card {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Drawer becomes a bottom sheet. */
  .drawer {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
    border-left: 0;
    border-top: 1px solid var(--hair);
    box-shadow: 0 -12px 36px rgba(17, 17, 20, 0.12);
  }
}

/* ===== Phase 3: Scenarios — aligned with the .superpowers brainstorm mockup ===== */

/* Scenario row layout — ALL scenario rows (linked, override, added, removed)
   get a 6-col grid: 14px stripe gutter, 28px who, 1fr name, auto amt,
   auto meta-cell, auto edit. Active-page rows keep the original 4-col
   layout because they don't get a .row--* modifier. */
.row.row--linked,
.row.row--override,
.row.row--added,
.row.row--removed {
  grid-template-columns: 14px 28px 1fr auto minmax(0, auto) auto;
  column-gap: 12px;
}

/* Stripe sits in column 1, only its inner 4px is coloured. Linked rows
   leave the gutter empty (transparent stripe). */
.row .row-stripe {
  width: 4px; height: 100%; min-height: 28px; border-radius: 2px;
  align-self: stretch; justify-self: start;
}
.row--override .row-stripe { background: var(--gold); }
.row--added    .row-stripe { background: var(--green); }
.row--removed  .row-stripe { background: var(--red); opacity: 0.85; }

/* Per-state colouring on amount / name. */
.row--override .amt { color: var(--gold); }
.row--added    .amt { color: var(--green); }
.row--added    .name { font-weight: 600; }
.row--removed  .amt {
  color: var(--muted); text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.row--removed  .name {
  color: var(--muted); text-decoration: line-through;
}

/* Right-side meta-cell (was X / restore / scenario-only / etc.) */
.row .meta-cell {
  font-size: 11px; color: var(--muted);
  text-align: right; line-height: 1.35;
  white-space: nowrap;
  display: flex; gap: 6px; align-items: center; justify-content: flex-end;
  flex-wrap: wrap;
}
.row .meta-cell .was {
  color: var(--muted); text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}
.row .meta-cell .link {
  color: var(--gold); cursor: pointer; font-weight: 600;
  text-decoration: none;
}
.row .meta-cell .link:hover { text-decoration: underline; }
.row .meta-cell .link.danger { color: var(--red); }

/* Pill-shape badges per the mockup. */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.4;
}
.badge.override { background: var(--gold-soft); color: var(--gold); }
.badge.added    { background: #ecf3eb; color: #2f6a3a; }
.badge.removed  { background: var(--red-soft); color: var(--red); }
.badge.invalid  { background: var(--red-soft); color: var(--red); }
.badge.warn     { background: var(--gold-soft); color: var(--gold); }
.badge.ok       { background: #ecf3eb; color: #2f6a3a; }
.badge.changes  { background: var(--surface-2); color: var(--muted); }

/* Removed subsection inside a panel. */
.removed-section {
  border-top: 1px dashed var(--hair-strong);
  margin-top: 4px;
}
.removed-head {
  font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin: 12px 20px 0;
  font-weight: 700;
}

/* Floor card override stripe + revert link. */
.panel--override .panel-head h4 { color: var(--gold); }
.floor-override-line {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-size: 12px; color: var(--muted);
  display: flex; gap: 8px; align-items: center;
}
.floor-override-line .link {
  color: var(--gold); text-decoration: none; cursor: pointer;
  font-weight: 600;
}
.floor-override-line .link:hover { text-decoration: underline; }

/* ----- Scenarios list page ----- */

.scenario-cards {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
  margin: 0 0 32px;
}
.scenario-card {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title actions"
    "meta  badges"
    "kpi   kpi";
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
}
.scenario-card .title {
  grid-area: title;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  letter-spacing: -0.2px;
}
.scenario-card .title:hover { color: var(--gold); }
.scenario-card .meta   { grid-area: meta; color: var(--muted); font-size: 12px; }
.scenario-card .badges { grid-area: badges; text-align: right; }
.scenario-card .badges .badge { margin-left: 0; margin-right: 4px; }
.scenario-card .kpi-mini {
  grid-area: kpi;
  display: flex; gap: 24px; flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  color: var(--ink);
  font-size: 13px;
}
.scenario-card .kpi-mini em {
  font-style: normal; color: var(--muted); margin-right: 6px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
}
.scenario-card .kpi-mini .danger {
  color: var(--red);
  font-weight: 600;
}
.scenario-card .kpi-mini .danger em { color: var(--red); opacity: 0.85; }
.scenario-card .kpi-mini .muted { color: var(--muted); }
.scenario-card .row-actions {
  grid-area: actions;
  display: flex; gap: 4px;
}

.empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--hair-strong);
  border-radius: 8px;
}
.empty-state p { margin: 0 0 16px; }

/* ----- Buttons (cross-cutting utilities used on list + page-head) ----- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid var(--hair-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.btn:hover { border-color: var(--ink); }
.btn.primary {
  background: var(--ink); color: var(--surface); border-color: var(--ink);
}
.btn.primary:hover { background: #2a2a2f; }
.btn.danger {
  border-color: var(--red); color: var(--red); background: var(--surface);
}
.btn.danger:hover { background: var(--red-soft); }

/* Borderless icon button (pencil, trash, ✕). */
button.icon {
  background: none; border: 0; padding: 6px;
  font-size: 14px; line-height: 1;
  cursor: pointer; color: var(--muted);
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  transition: background 120ms ease, color 120ms ease;
}
button.icon:hover { background: var(--surface-2); color: var(--ink); }
button.icon.danger { color: var(--muted); }
button.icon.danger:hover { background: var(--red-soft); color: var(--red); }

/* ----- Page header (used on /scenarios, /scenarios/{id}) ----- */

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 18px;
}
.page-head h1 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.5px;
}
.page-head .lead { margin: 0; color: var(--muted); font-size: 13px; }
.page-head .page-actions {
  display: flex; gap: 6px; align-items: center;
  flex-shrink: 0;
}

/* ----- Drawer forms reused by scenario list (new / rename / delete confirm) ----- */

.drawer .drawer-body {
  padding: 0 20px 20px;
  display: grid; gap: 12px;
}
.drawer .drawer-body label {
  display: grid; gap: 6px;
  font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.drawer .drawer-body input[type="text"],
.drawer .drawer-body input:not([type]) {
  border: 1px solid var(--hair-strong);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
}
.drawer .drawer-body input:focus {
  outline: 2px solid var(--gold-bright);
  border-color: var(--gold-bright);
}
.drawer .drawer-body .btn { justify-self: stretch; margin-top: 4px; }
/* Drawer's pre-existing .drawer .btn rule strips the outline-style border,
   so danger/primary need filled looks here. .primary already has bg:ink. */
.drawer .btn.danger {
  background: var(--red); color: var(--surface); border-color: var(--red);
}
.drawer .btn.danger:hover { background: #991b1b; }
.drawer .drawer-body p.muted {
  color: var(--muted); font-size: 12px; margin: 0;
}


/* Mobile overrides for scenario rows: stack meta-cell to a second row so
   the primary row stays readable at narrow widths. Active-page rows have
   no .row--* modifier, so they keep the simpler 4-col mobile layout from
   the @media block above. */
@media (max-width: 720px) {
  .row.row--linked,
  .row.row--override,
  .row.row--added,
  .row.row--removed {
    grid-template-columns: 4px 24px 1fr auto auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 4px;
    padding: 11px 14px;
  }
  .row.row--linked   .row-stripe,
  .row.row--override .row-stripe,
  .row.row--added    .row-stripe,
  .row.row--removed  .row-stripe {
    grid-row: 1 / span 2;
  }
  .row.row--linked   .meta-cell,
  .row.row--override .meta-cell,
  .row.row--added    .meta-cell,
  .row.row--removed  .meta-cell {
    grid-column: 2 / -1;
    grid-row: 2;
    text-align: left;
    justify-content: flex-start;
    padding-top: 2px;
    white-space: normal;
  }
}