/* =========================================================================
   Build or Busted — application stylesheet
   Tokens are the brand board values (Ignition Orange, Midnight Ink, Signal
   Green, Steel Gray, Cloud). Space Grotesk for display, Inter for body,
   8pt spacing grid. Verdict colours are reserved for verdicts only.
   ========================================================================= */

:root {
  /* brand core */
  --ignition: #FF5A1F;
  --midnight: #0E1420;
  --signal: #16C784;
  --steel: #8A94A6;
  --cloud: #F5F7FA;
  --white: #FFFFFF;

  /* orange ramp */
  --orange-50:#FFF2EC; --orange-100:#FFE0D2; --orange-200:#FFC3A9; --orange-300:#FF9E76;
  --orange-400:#FF7B45; --orange-500:#FF5A1F; --orange-600:#E8480F; --orange-700:#BC380A;

  /* ink ramp */
  --ink-900:#0E1420; --ink-850:#121A28; --ink-800:#161E2D; --ink-700:#1F2937; --ink-600:#2C3644;
  --ink-500:#48525F; --ink-400:#6B7484; --ink-300:#8A94A6; --ink-200:#BEC5D1; --ink-100:#DEE3EA;
  --ink-50:#EDF0F5; --ink-25:#F5F7FA;

  /* status */
  --green-500:#16C784; --green-600:#0FA76C; --green-700:#0A7C50;
  --red-500:#E5484D;   --red-600:#BF2B21;
  --amber-500:#E8933A;

  /* dark app surfaces (the product ships dark) */
  --surface-page: var(--ink-900);
  --surface-card: #161E2C;
  --surface-raised: #1C2637;
  --surface-sunken: #101724;
  --border-subtle: rgba(255,255,255,.07);
  --border-default: rgba(255,255,255,.12);
  --border-strong: rgba(255,255,255,.22);
  --focus-ring: rgba(255,90,31,.38);

  --text-strong: #F2F5F7;
  --text-body: #D7DCE5;
  --text-muted: #B7C3CE;
  --text-subtle: #7D8B99;

  /* verdicts */
  --v-build: var(--signal);
  --v-hold: var(--amber-500);
  --v-bust: var(--red-500);

  /* type */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "Inter", ui-monospace, SFMono-Regular, Menlo, monospace;
  --size-micro: 11px;
  --size-label: 13px;
  --size-body: 15px;
  --size-title: 20px;
  --size-display: 40px;
  --track-eyebrow: .18em;
  --track-caps: .08em;

  /* space (8pt grid) */
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:40px; --s7:48px;

  --r-sm:10px; --r-md:12px; --r-lg:16px; --r-xl:22px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.22);
  --shadow-pop: 0 24px 60px rgba(0,0,0,.55);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* light theme, offered in settings */
[data-theme="light"] {
  --surface-page: var(--cloud);
  --surface-card: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: var(--ink-50);
  --border-subtle: var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);
  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-subtle: var(--ink-400);
  --v-hold: #B26A15;
  --shadow-card: 0 1px 2px rgba(14,20,32,.05), 0 4px 14px rgba(14,20,32,.08);
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }

body {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.5;
  color: var(--text-body);
  background: #070B12;
  background-image:
    radial-gradient(1100px 620px at 74% -12%, rgba(255,90,31,.16), transparent 58%),
    radial-gradient(760px 480px at 10% 6%, rgba(22,199,132,.10), transparent 60%);
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; padding: var(--s4) var(--s3);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--orange-400); font-weight:600; text-decoration:none; }
a:hover { text-decoration:underline; }
::selection { background: rgba(255,90,31,.28); color: var(--white); }

/* ------------------------------------------------------------ phone shell */

.phone {
  width: min(420px, 100%);
  height: min(880px, calc(100vh - 48px));
  min-height: 560px;
  background: var(--surface-page);
  border: 1px solid var(--border-default);
  border-radius: 34px;
  box-shadow: var(--shadow-pop);
  display:flex; flex-direction:column;
  overflow:hidden; position:relative;
}

.statusbar {
  height:32px; flex:none; display:flex; align-items:center; justify-content:space-between;
  padding: 0 var(--s4); font-size: var(--size-micro); letter-spacing:.04em;
  color: var(--text-subtle); font-family: var(--font-mono);
}
.statusbar__right { display:inline-flex; align-items:center; gap:5px; }

.stage { display:flex; align-items:center; justify-content:center; width:100%; }

.skip {
  position:absolute; left:50%; top:8px; transform: translate(-50%, -160%);
  z-index:100; padding:10px 16px; border-radius: var(--r-sm);
  background: var(--ignition); color: var(--white); font-weight:600; font-size:13px;
  transition: transform .18s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); text-decoration:none; }

.appbar {
  flex:none; min-height:52px; display:flex; align-items:center; gap:var(--s2);
  padding: 0 var(--s3) var(--s2); position:relative; z-index:5;
}
.appbar__title {
  font-family: var(--font-display); font-weight:700; font-size:17px; letter-spacing:-.01em;
  color: var(--text-strong); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.appbar__spacer { flex:1; }

.screen {
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding: 0 var(--s3) 120px;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.screen::-webkit-scrollbar { width:6px; }
.screen::-webkit-scrollbar-thumb { background: var(--border-default); border-radius:3px; }

.dock {
  position:absolute; left:0; right:0; bottom:0; padding: var(--s3);
  display:flex; flex-direction:column; gap:var(--s2);
  background: linear-gradient(to top, var(--surface-page) 74%, rgba(14,20,32,0));
  pointer-events:none; z-index:6;
}
.dock > * { pointer-events:auto; }
[data-theme="light"] .dock { background: linear-gradient(to top, var(--cloud) 74%, rgba(245,247,250,0)); }
/* Ghost buttons are see-through by design, which cannot work over scrolling
   content — inside the dock they take the raised surface instead. */
.dock .btn--ghost { background: var(--surface-raised); }

/* --------------------------------------------------------------- buttons */

.btn {
  font-family: var(--font-body); font-size:15px; font-weight:600; letter-spacing:-.005em;
  height:48px; padding: 0 var(--s4); border-radius: var(--r-md);
  border:1px solid transparent; background: var(--surface-raised); color: var(--text-strong);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  cursor:pointer; transition: transform .12s var(--ease), background .16s var(--ease), border-color .16s var(--ease), opacity .16s;
  user-select:none;
}
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline:none; box-shadow: 0 0 0 3px var(--focus-ring); }
.btn--primary { background: var(--ignition); color:#FFFFFF; }
.btn--primary:hover { background: var(--orange-600); }
.btn--ghost { background: transparent; border-color: var(--border-default); color: var(--text-body); }
.btn--ghost:hover { border-color: var(--border-strong); color: var(--text-strong); }
.btn--quiet { background: transparent; border-color: transparent; color: var(--text-muted); height:40px; padding:0 var(--s2); }
.btn--quiet:hover { color: var(--text-strong); }
.btn--block { width:100%; }
.btn--sm { height:36px; font-size:13px; padding: 0 var(--s3); border-radius: var(--r-sm); }
.btn--danger { color: var(--red-500); border-color: rgba(229,72,77,.4); background:transparent; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }

.iconbtn {
  width:38px; height:38px; flex:none; border-radius: var(--r-sm);
  border:1px solid var(--border-default); background: var(--surface-card); color: var(--text-muted);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition: color .16s, border-color .16s;
}
.iconbtn:hover { color: var(--text-strong); border-color: var(--border-strong); }
.iconbtn:focus-visible { outline:none; box-shadow: 0 0 0 3px var(--focus-ring); }

/* ------------------------------------------------------------ primitives */

.eyebrow {
  font-size: var(--size-micro); font-weight:600; text-transform:uppercase;
  letter-spacing: var(--track-eyebrow); color: var(--text-subtle);
}
.label { font-size: var(--size-label); font-weight:500; color: var(--text-muted); }
.h1 { font-family: var(--font-display); font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.1; color: var(--text-strong); }
.h2 { font-family: var(--font-display); font-size:var(--size-title); font-weight:600; letter-spacing:-.01em; color: var(--text-strong); }
.muted { color: var(--text-subtle); }
.small { font-size: var(--size-label); }
.micro { font-size: var(--size-micro); }
.num { font-variant-numeric: tabular-nums; font-feature-settings:"tnum"; }

.card {
  background: var(--surface-card); border:1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: var(--s3);
  box-shadow: var(--shadow-card);
}
.card--flat { box-shadow:none; background: var(--surface-sunken); }
.card + .card { margin-top: var(--s2); }
.stack { display:flex; flex-direction:column; gap: var(--s2); }
.stack--lg { gap: var(--s3); }
.row { display:flex; align-items:center; gap: var(--s2); }
.row--between { justify-content:space-between; }
.grow { flex:1; min-width:0; }
.section { margin-top: var(--s4); }
.section__head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom: var(--s2); gap: var(--s2); }

.badge {
  display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px;
  font-size: var(--size-micro); font-weight:600; letter-spacing: var(--track-caps);
  text-transform:uppercase; border-radius:6px; white-space:nowrap;
  border:1px solid var(--border-default); color: var(--text-muted); background: var(--surface-sunken);
}
.badge--build { color: var(--v-build); border-color: rgba(22,199,132,.42); background: rgba(22,199,132,.12); }
.badge--hold  { color: var(--v-hold);  border-color: rgba(232,147,58,.42); background: rgba(232,147,58,.12); }
.badge--bust  { color: var(--v-bust);  border-color: rgba(229,72,77,.42);  background: rgba(229,72,77,.12); }
.badge--brand { color: var(--orange-400); border-color: rgba(255,90,31,.42); background: rgba(255,90,31,.12); }

.chiprow { display:flex; gap:var(--s2); flex-wrap:wrap; }
.chip {
  height:34px; padding:0 14px; border-radius:999px; cursor:pointer;
  font-size:13px; font-weight:600; font-family: var(--font-body);
  background: transparent; border:1px solid var(--border-default); color: var(--text-muted);
  transition: color .16s, border-color .16s, background .16s;
}
.chip:hover { color: var(--text-strong); border-color: var(--border-strong); }
.chip[aria-pressed="true"] { color: var(--orange-400); border-color: var(--ignition); background: rgba(255,90,31,.12); }
.chip:focus-visible { outline:none; box-shadow: 0 0 0 3px var(--focus-ring); }

/* ------------------------------------------------------------ text input */

.field { display:flex; flex-direction:column; gap:6px; }
.input {
  height:48px; width:100%; border-radius: var(--r-md); padding: 0 14px;
  background: var(--surface-sunken); border:1px solid var(--border-default);
  color: var(--text-strong); font-family: var(--font-body); font-size:15px;
  transition: border-color .16s, box-shadow .16s;
}
.input--area { height:auto; min-height:120px; padding:12px var(--s3); line-height:1.55; resize:vertical; font-family:inherit; }
.input::placeholder { color: var(--text-subtle); }
.input:focus { outline:none; border-color: var(--ignition); box-shadow: 0 0 0 3px var(--focus-ring); }
.input--mono { font-variant-numeric: tabular-nums; }
select.input { appearance:none; cursor:pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238A94A6' stroke-width='1.8'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat:no-repeat; background-position: right 14px center; padding-right:36px; }

/* --------------------------------------------------------------- sliders */

.slider { display:flex; flex-direction:column; gap:6px; }
.slider__head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2); }
.slider__label { font-size: var(--size-label); color: var(--text-muted); display:flex; align-items:center; gap:6px; }
.slider__src {
  font-size: 10px; font-weight:600; letter-spacing: var(--track-caps); text-transform:uppercase;
  color: var(--orange-400); border:1px solid rgba(255,90,31,.34); background: rgba(255,90,31,.10);
  border-radius:4px; padding:1px 5px;
}
.slider__value { font-family: var(--font-display); font-weight:600; font-size:17px; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.slider__track {
  position:relative; height:34px; border-radius: var(--r-sm); cursor:ew-resize;
  background: var(--surface-sunken); border:1px solid var(--border-default); overflow:hidden;
  touch-action: none;
}
.slider__track:focus-visible { outline:none; box-shadow: 0 0 0 3px var(--focus-ring); border-color: var(--ignition); }
.slider__fill { position:absolute; inset:0 auto 0 0; background: linear-gradient(90deg, rgba(255,90,31,.30), rgba(255,90,31,.55)); }
.slider__knob {
  position:absolute; top:50%; width:18px; height:18px; margin-left:-9px;
  transform: translateY(-50%); border-radius:50%;
  background: var(--ignition); border:2px solid var(--surface-page);
  box-shadow: 0 1px 6px rgba(0,0,0,.5); pointer-events:none;
}
.slider__value--edit {
  background:none; border:none; padding:0 0 1px; cursor:pointer; font:inherit;
  color: var(--text-strong); font-family: var(--font-display); font-weight:600; font-size:17px;
  border-bottom:1px dashed var(--border-strong); font-variant-numeric: tabular-nums;
}
.slider__value--edit:hover { color: var(--orange-400); border-bottom-color: var(--ignition); }
.slider__value--edit:focus-visible { outline:none; box-shadow: 0 0 0 3px var(--focus-ring); border-radius:3px; }
.slider__ends { display:flex; justify-content:space-between; font-size:10px; color: var(--text-subtle); font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- deal rows */

.deal {
  display:block; width:100%; text-align:left; cursor:pointer;
  background: var(--surface-card); border:1px solid var(--border-subtle);
  border-radius: var(--r-lg); padding: var(--s3); box-shadow: var(--shadow-card);
  transition: border-color .16s, transform .12s var(--ease);
  position:relative; overflow:hidden;
}
.deal:hover { border-color: var(--border-strong); }
.deal:active { transform: scale(.995); }
.deal:focus-visible { outline:none; box-shadow: 0 0 0 3px var(--focus-ring); }
.deal__stripe { position:absolute; left:0; top:0; bottom:0; width:3px; }
.deal__title { font-family: var(--font-display); font-weight:600; font-size:16px; color: var(--text-strong); letter-spacing:-.01em; }
.deal__addr { font-size: var(--size-label); color: var(--text-subtle); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.deal__meta { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; margin-top:10px; }
.deal__score { font-family: var(--font-display); font-weight:700; font-size:15px; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.deal__lever { font-size: var(--size-label); color: var(--text-muted); }

/* ------------------------------------------------------- verdict reveal */

.verdict { text-align:center; padding: var(--s4) var(--s3) var(--s3); }
.stamp {
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; letter-spacing:.04em;
  font-size:34px; line-height:1; padding: 14px 26px; border-radius: var(--r-md);
  border:2px solid currentColor; opacity:0; transform: scale(1.22) rotate(-3deg);
}
.stamp.is-in { animation: stamp .42s var(--ease) forwards; }
@keyframes stamp {
  0%   { opacity:0; transform: scale(1.22) rotate(-3deg); }
  60%  { opacity:1; transform: scale(.97) rotate(-1.5deg); }
  100% { opacity:1; transform: scale(1) rotate(-1.5deg); }
}
.verdict__line { margin-top: var(--s3); color: var(--text-muted); font-size: var(--size-body); }

.headline { display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-top: var(--s4); }
.headline__cell { text-align:center; }
.headline__val {
  font-family: var(--font-display); font-weight:700; font-size:24px; color: var(--text-strong);
  font-variant-numeric: tabular-nums; letter-spacing:-.01em;
  opacity:0; transform: translateY(6px); transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.headline__val.is-in { opacity:1; transform:none; }
.headline__key { margin-top:4px; font-size:10px; text-transform:uppercase; letter-spacing: var(--track-caps); color: var(--text-subtle); }

.lever {
  margin-top: var(--s4); padding: var(--s3); border-radius: var(--r-lg);
  background: var(--surface-sunken); border:1px dashed var(--border-default);
  opacity:0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.lever.is-in { opacity:1; transform:none; }
.lever__price { font-family: var(--font-display); font-weight:700; font-size:28px; color: var(--text-strong); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- gate table */

.gate { display:flex; align-items:flex-start; justify-content:space-between; gap: var(--s3); padding: 12px 0; border-bottom:1px solid var(--border-subtle); }
.gate:last-child { border-bottom:none; }
.gate__name { font-size: var(--size-body); color: var(--text-body); }
.gate__target { font-size: var(--size-micro); color: var(--text-subtle); margin-top:2px; }
.gate__right { text-align:right; flex:none; }
.gate__val { font-family: var(--font-display); font-weight:600; font-size:16px; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.gate__state { font-size:10px; font-weight:600; letter-spacing: var(--track-caps); text-transform:uppercase; margin-top:3px; }
.gate__state--pass { color: var(--text-muted); }
.gate__state--fail { color: var(--text-muted); }
.gate__kind { font-size:9px; letter-spacing: var(--track-caps); text-transform:uppercase; color: var(--text-subtle); }

/* ------------------------------------------------------------- progress */

.work { margin-top: var(--s3); }
.work__bar { height:4px; border-radius:2px; background: var(--surface-sunken); overflow:hidden; }
.work__fill { height:100%; background: var(--ignition); transition: width .34s var(--ease); }
.work__steps { display:flex; flex-direction:column; gap:6px; margin-top: var(--s2); }
.work__step { display:flex; align-items:center; gap:var(--s2); font-size:10px; letter-spacing: var(--track-caps); text-transform:uppercase; color: var(--text-subtle); transition: color .2s; }
.work__step.is-done { color: var(--text-body); }
.work__dot { width:6px; height:6px; border-radius:50%; background: currentColor; flex:none; }

.skeleton { background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--surface-raised) 37%, var(--surface-sunken) 63%); background-size:400% 100%; animation: shimmer 1.4s linear infinite; border-radius:6px; }
@keyframes shimmer { 0% { background-position:100% 0; } 100% { background-position:0 0; } }

/* --------------------------------------------------------------- notices */

.notice {
  border-radius: var(--r-md); padding: 12px 14px; font-size: var(--size-label);
  border:1px solid rgba(255,90,31,.30); background: rgba(255,90,31,.09); color: var(--text-body);
}
.notice--warn { border-color: rgba(232,147,58,.34); background: rgba(232,147,58,.10); }
.notice--ok { border-color: rgba(22,199,132,.30); background: rgba(22,199,132,.09); }
.notice strong { color: var(--text-strong); font-weight:600; }
.notice--info { border-color: rgba(76,141,255,.30); background: rgba(76,141,255,.09); }

/* ------------------------------------------- actuals table and cost check */

.linkbtn { background:none; border:0; padding:0; font:inherit; color: var(--text-strong); text-decoration: underline; text-underline-offset: 2px; cursor:pointer; }
.linkbtn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
.actcmp__card { overflow-x:auto; }
.actcmp { width:100%; border-collapse:collapse; font-size: var(--size-label); margin-top: 6px; }
.actcmp th { text-align:right; font-weight:500; color: var(--text-muted); padding: 6px 0 6px 10px; border-bottom:1px solid var(--border-default); white-space:nowrap; }
.actcmp th:first-child, .actcmp td:first-child { text-align:left; padding-left:0; }
.actcmp td { text-align:right; padding: 7px 0 7px 10px; border-bottom:1px solid var(--border-subtle); color: var(--text-body); }
.actcmp td:first-child { white-space:normal; }
.actcmp tr:last-child td { border-bottom:0; }
.actcmp__strong td { color: var(--text-strong); font-weight:600; }
.actcmp__flag { color: var(--v-hold) !important; font-weight:600; }
.cost__split summary { cursor:pointer; color: var(--text-strong); padding: 2px 0; }
.cost__split[open] summary { margin-bottom: 8px; }

.empty { text-align:center; padding: 18vh var(--s3) var(--s7); }
.empty__art { margin: 0 auto var(--s3); color: var(--ink-500); }
.empty__title { font-family: var(--font-display); font-weight:600; font-size:18px; color: var(--text-strong); }
.empty__body { margin-top:6px; color: var(--text-subtle); font-size: var(--size-label); }

/* ----------------------------------------------------------------- sheet */

.veil {
  position:absolute; inset:0; z-index:20; display:flex; align-items:flex-end;
  background: rgba(7,11,18,.62); backdrop-filter: blur(3px);
  opacity:0; pointer-events:none; transition: opacity .22s var(--ease);
}
.veil.is-open { opacity:1; pointer-events:auto; }
.sheet {
  width:100%; max-height:88%; overflow-y:auto;
  background: var(--surface-card); border-top:1px solid var(--border-default);
  border-radius: var(--r-xl) var(--r-xl) 0 0; padding: var(--s3) var(--s3) var(--s4);
  transform: translateY(14px); transition: transform .24s var(--ease);
}
.veil.is-open .sheet { transform:none; }
.sheet__grip { width:38px; height:4px; border-radius:2px; background: var(--border-strong); margin: 0 auto var(--s3); }

.toast {
  position:absolute; left: var(--s3); right: var(--s3); bottom: 96px; z-index:30;
  background: var(--surface-raised); border:1px solid var(--border-default);
  border-radius: var(--r-md); padding: 12px 14px; font-size: var(--size-label);
  color: var(--text-strong); box-shadow: var(--shadow-pop);
  opacity:0; transform: translateY(8px); pointer-events:none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.toast.is-open { opacity:1; transform:none; }
.toast--action { display:flex; align-items:center; gap: var(--s3); }
.toast__msg { flex:1 1 auto; min-width:0; }
/* Only the action itself takes clicks — a toast that swallowed taps across its whole
   band would block the list underneath for as long as it was open. */
.toast__action {
  flex:0 0 auto; pointer-events:auto; background:none; border:0; padding:2px 0; cursor:pointer;
  font-family: var(--font-display); font-weight:700; font-size:13px;
  letter-spacing:.02em; color: var(--ignition);
}
.toast__action:hover { text-decoration: underline; }

/* ------------------------------------------------------------ hbu table */

.hbu { width:100%; border-collapse:collapse; font-size: var(--size-label); }
.hbu th { text-align:left; font-size:10px; letter-spacing: var(--track-caps); text-transform:uppercase; color: var(--text-subtle); font-weight:600; padding-bottom:8px; }
.hbu td { padding: 10px 0; border-top:1px solid var(--border-subtle); color: var(--text-body); }
.stack-tight { display:flex; flex-direction:column; gap:2px; }
.hbu th + th, .hbu td + td { padding-left: 10px; }
.hbu th:last-child, .hbu td:last-child { text-align:right; padding-left: 14px; white-space:nowrap; }
.hbu td.num, .hbu th.num { text-align:right; font-variant-numeric: tabular-nums; }
.hbu tr.is-top td { color: var(--text-strong); }
.hbu__rank { color: var(--text-subtle); font-variant-numeric: tabular-nums; width:22px; }

/* --------------------------------------------------------- share card */

.sharecard {
  position:relative; width:100%; aspect-ratio: 1200 / 630; border-radius: var(--r-lg);
  overflow:hidden; background: var(--midnight); border:1px solid var(--border-default);
  display:flex; flex-direction:column; justify-content:space-between; padding: 18px;
}
.sharecard__glow { position:absolute; inset:0; background: radial-gradient(420px 220px at 82% -20%, rgba(255,90,31,.34), transparent 62%); }
.sharecard__verdict { font-family: var(--font-display); font-weight:700; font-size:clamp(26px, 9vw, 44px); line-height:1; letter-spacing:.02em; }
.sharecard__addr { color:#B7C3CE; font-size: var(--size-label); }
.sharecard__foot { display:flex; align-items:center; justify-content:space-between; color:#7D8B99; font-size: var(--size-micro); position:relative; }

/* ------------------------------------------------------------- plugins */

.plugin { display:flex; align-items:flex-start; gap: var(--s3); padding: 14px 0; border-bottom:1px solid var(--border-subtle); }
.plugin:last-child { border-bottom:none; }
.plugin__dot { width:8px; height:8px; border-radius:50%; margin-top:6px; flex:none; background: var(--text-subtle); }
.plugin__dot--ok { background: var(--signal); box-shadow: 0 0 0 3px rgba(22,199,132,.18); }
.plugin__dot--off { background: var(--ink-500); }
.plugin__dot--err { background: var(--red-500); box-shadow: 0 0 0 3px rgba(229,72,77,.18); }
.plugin__name { font-family: var(--font-display); font-weight:600; font-size:15px; color: var(--text-strong); }
.plugin__fills { font-size: var(--size-micro); color: var(--text-subtle); margin-top:3px; line-height:1.5; }

.kv { display:flex; align-items:baseline; justify-content:space-between; gap: var(--s3); padding:7px 0; }
.kv + .kv { border-top:1px solid var(--border-subtle); }
.kv__k { font-size: var(--size-label); color: var(--text-muted); }
.kv__v { font-size: var(--size-label); color: var(--text-strong); font-variant-numeric: tabular-nums; text-align:right; }

.meter { height:6px; border-radius:3px; background: var(--surface-sunken); overflow:hidden; }
.meter__fill { height:100%; background: var(--ignition); border-radius:3px; transition: width .4s var(--ease); }

.ledger { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:10px 0; border-bottom:1px solid var(--border-subtle); }
.ledger:last-child { border-bottom:none; }
.ledger__what { font-size: var(--size-label); color: var(--text-body); }
.ledger__when { font-size:10px; letter-spacing: var(--track-caps); text-transform:uppercase; color: var(--text-subtle); margin-top:2px; }
.ledger__delta { font-family: var(--font-display); font-weight:600; font-variant-numeric: tabular-nums; color: var(--signal); }
.ledger__delta--neg { color: var(--text-subtle); }

/* --------------------------------------------------------------- mobile */

@media (max-width: 520px) {
  body { padding:0; align-items:stretch; }
  .phone { width:100%; height:100vh; height:100dvh; min-height:0; border-radius:0; border:none; box-shadow:none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .stamp, .headline__val, .lever { opacity:1 !important; transform:none !important; }
}

/* focus visibility for keyboard users everywhere */
:focus-visible { outline: none; }
.deal:focus-visible, .chip:focus-visible, .btn:focus-visible, .iconbtn:focus-visible,
.input:focus-visible, .slider__track:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

/* ------------------------------------------------- pipeline: sort, filter */

.badgebtn {
  appearance:none; background:transparent; border:none; padding:0; cursor:pointer; font:inherit;
  border-radius:999px; transition: box-shadow .16s var(--ease), opacity .16s var(--ease);
  opacity:.82;
}
.badgebtn:hover { opacity:1; }
.badgebtn[aria-pressed="true"] { opacity:1; box-shadow: 0 0 0 2px var(--border-strong); }
.badgebtn:focus-visible { outline:none; box-shadow: 0 0 0 3px var(--focus-ring); }

.chip--sm { height:30px; padding:0 11px; font-size: var(--size-micro); }
.btn--xs { height:30px; font-size: var(--size-micro); padding:0 10px; border-radius: var(--r-sm); }

.row--wrap { flex-wrap:wrap; }
.dot { width:7px; height:7px; border-radius:50%; flex:none; display:inline-block; }

.deal__note {
  display:flex; gap:6px; align-items:flex-start; margin-top:8px;
  font-size: var(--size-micro); color: var(--text-subtle); line-height:1.5;
}
.deal__note span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.deal.is-picked { border-color: var(--ignition); box-shadow: 0 0 0 1px var(--ignition) inset; }

/* --------------------------------------------------------- deal: rename */

.deal__rename {
  appearance:none; background:transparent; border:none; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; gap:6px; color: var(--text-strong);
  font-family: var(--font-display); font-weight:600; font-size:17px; letter-spacing:-.01em;
  text-align:left; max-width:100%;
}
.deal__rename > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.deal__rename[disabled] { cursor:default; }
.deal__rename:not([disabled]):hover { color: var(--orange-400); }
.deal__rename:focus-visible { outline:none; box-shadow: 0 0 0 3px var(--focus-ring); border-radius: var(--r-sm); }

.gate__kind { font-size:10px; letter-spacing: var(--track-caps); text-transform:uppercase; color: var(--text-subtle); margin-top:4px; line-height:1.5; }

/* ----------------------------------------------------- sensitivity grid */

.sens { display:grid; grid-template-columns: 1.15fr repeat(5, 1fr); gap:2px; }
.sens__cell {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  padding:8px 2px; border-radius:6px; background: var(--surface-raised);
  font-family: var(--font-display); font-weight:700; font-size:10px; letter-spacing:.03em;
  text-align:center; min-height:44px;
}
.sens__cell--head {
  background:transparent; color: var(--text-muted); font-weight:600; font-size:11px;
  letter-spacing:0; font-variant-numeric: tabular-nums;
}
.sens__sub { font-family: var(--font-body); font-weight:500; font-size:9px; letter-spacing:0; color: var(--text-subtle); }
.sens__cell:not(.sens__cell--head) .sens__sub { color: currentColor; opacity:.72; }
.sens__cell.is-base { box-shadow: 0 0 0 1.5px var(--ignition) inset; }
.sens__v { line-height:1; }

/* Pipeline roll-up: a disclosure, because the totals matter less than the deals. */
.rollup__head { display:flex; align-items:center; justify-content:space-between; gap: var(--s3); cursor:pointer; list-style:none; }
.rollup__head::-webkit-details-marker { display:none; }
.rollup__title { font-size: var(--size-micro); letter-spacing: var(--track-caps); text-transform:uppercase; color: var(--text-muted); }
.rollup__figure { font-family: var(--font-display); font-weight:600; font-size:16px; font-variant-numeric: tabular-nums; }
details[open] .rollup__title { color: var(--text-body); }

.tag {
  display:inline-block; margin-left:6px; padding:1px 6px; border-radius:999px;
  font-family: var(--font-body); font-size:10px; font-weight:600; letter-spacing:.02em;
  vertical-align:middle; white-space:nowrap;
}
.tag--stale { background: rgba(232,147,58,.14); color: var(--v-hold); }

/* ------------------------------------------------------- pro forma table */

.card--scroll { overflow-x:auto; -webkit-overflow-scrolling: touch; }
.pf {
  display:grid; grid-template-columns: 26px repeat(4, minmax(62px, max-content));
  gap:1px 10px; width:max-content; min-width:100%; align-items:end;
}
.pf__cell {
  padding:7px 2px; font-size:12px; text-align:right; white-space:nowrap;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.pf__cell--yr {
  text-align:left; color: var(--text-subtle); font-family: var(--font-display);
  font-weight:600; font-size:11px;
}
.pf__cell--head {
  font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color: var(--text-subtle); font-weight:600; padding-bottom:4px;
  border-bottom:1px solid var(--border-subtle); margin-bottom:2px;
}
.pf__cell.muted { color: var(--text-muted); }

/* ---------------------------------------------------------- compare grid */

.cmp { display:grid; grid-template-columns: 0.9fr 1fr 1fr; gap: var(--s2) var(--s3); align-items:baseline; }
.cmp--heads { grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s2); }
.cmp__head { min-width:0; }
.cmp__name {
  font-family: var(--font-display); font-weight:600; font-size:14px; color: var(--text-strong);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cmp__stamp { font-family: var(--font-display); font-weight:700; font-size:19px; letter-spacing:.02em; margin-top:3px; }
.cmp--body { row-gap:0; }
.cmp__label, .cmp__val {
  font-size: var(--size-micro); padding:9px 0; border-top:1px solid var(--border-subtle);
}
.cmp--body > *:nth-child(-n+3) { border-top:none; }
.cmp__label { color: var(--text-muted); }
.cmp__val { color: var(--text-body); font-variant-numeric: tabular-nums; text-align:right; }
.cmp__val.is-better { color: var(--text-strong); font-weight:600; }
.cmp__val.is-better::after { content:" \2713"; color: var(--signal); }

/* --------------------------------------------------- printable one-pager */

#onepager, #proforma { display:none; }

@media print {
  html, body { background:#FFFFFF !important; padding:0 !important; margin:0 !important; display:block !important; height:auto !important; }
  .phone, #veil, #sheet, #toast { display:none !important; }
  #onepager {
    display:block; color:#111111; background:#FFFFFF;
    font-family: "Inter", system-ui, sans-serif; font-size:10.5pt; line-height:1.5;
    padding:18mm 16mm; max-width:none;
  }
  .op__head { display:flex; justify-content:space-between; align-items:baseline; border-bottom:2px solid #111111; padding-bottom:6px; }
  .op__brand { font-family:"Space Grotesk","Inter",sans-serif; font-weight:700; letter-spacing:.14em; font-size:10pt; }
  .op__date { font-size:9pt; color:#555555; }
  .op__title { font-family:"Space Grotesk","Inter",sans-serif; font-size:20pt; font-weight:700; margin:14px 0 2px; letter-spacing:-.01em; }
  .op__addr { font-size:10pt; color:#555555; margin:0; }
  .op__verdict { display:flex; align-items:baseline; gap:12px; margin:14px 0 4px; }
  .op__stamp { font-family:"Space Grotesk","Inter",sans-serif; font-weight:700; font-size:26pt; letter-spacing:.02em; }
  .op__score { font-weight:600; font-size:13pt; }
  .op__meta { font-size:10pt; color:#555555; }
  .op__line { font-size:11pt; margin:0 0 4px; }
  .op__h2 {
    font-family:"Space Grotesk","Inter",sans-serif; font-size:9.5pt; font-weight:700;
    letter-spacing:.12em; text-transform:uppercase; color:#111111;
    margin:18px 0 6px; border-bottom:1px solid #CCCCCC; padding-bottom:4px;
  }
  .op__table { width:100%; border-collapse:collapse; }
  .op__table th, .op__table td { text-align:left; padding:4px 0; border-bottom:1px solid #EEEEEE; vertical-align:top; font-weight:400; }
  .op__table th { color:#555555; width:52%; }
  .op__table td { text-align:right; font-variant-numeric: tabular-nums; }
  .op__notes { white-space:pre-wrap; font-size:10pt; margin:0; }
  .op__fine { font-size:8.5pt; color:#555555; line-height:1.5; }
  .op__table--grid th, .op__table--grid td { width:auto; text-align:right; padding:3px 0 3px 8px; }
  .op__table--grid th { color:#555555; font-size:9px; text-transform:uppercase; letter-spacing:.05em; }
  .op__table--grid tr > th:first-child, .op__table--grid tr > td:first-child { text-align:left; padding-left:0; width:32px; }
  /* The stress table's first column is a sentence, not a year number. */
  .op__table--stress tr > th:first-child, .op__table--stress tr > td:first-child { width:34%; white-space:nowrap; }
  .op__h2, .op__table { break-inside:avoid; }

  /* The 13-section proforma and lender package share the one-pager's type. */
  body.is-printing-proforma #onepager { display:none !important; }
  /* The whole body takes the proforma's named page while it prints. Leaving the
     body on the default page made Chrome break from it to the named page before
     the first section, which printed a blank first page. */
  html:has(body.is-printing-proforma), body.is-printing-proforma { page: proforma; }
  #proforma {
    display:block; color:#111111; background:#FFFFFF;
    font-family: "Inter", system-ui, sans-serif; font-size:9.5pt; line-height:1.45;
    padding:0 15mm;
    page: proforma;               /* its own margins, so every page has a top and bottom */
  }
  #proforma .op__table th { width:58%; }
  .pp__break { break-before:page; }
  .pp__sec { break-inside:auto; }
  .pp__kpis { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px 16px; margin:14px 0 10px; }
  .pp__kpi { border-top:2px solid #111111; padding-top:6px; }
  .pp__kpi-v { font-family:"Space Grotesk","Inter",sans-serif; font-weight:700; font-size:14pt; font-variant-numeric:tabular-nums; }
  .pp__kpi-k { font-size:8pt; color:#555555; text-transform:uppercase; letter-spacing:.08em; }
  .pp__two { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .pp__gt { font-weight:600; font-size:9.5pt; margin:10px 0 4px; }
  #proforma .op__h2, #proforma .pp__gt { break-after:avoid; }
  #proforma .op__table tr { break-inside:avoid; }
  /* Grid tables: fixed, even columns; the first column sized by what it holds. */
  #proforma .pp__grid { table-layout:fixed; }
  #proforma .pp__grid th, #proforma .pp__grid td { width:auto; font-size:8.5pt; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #proforma .pp__grid tr > th:first-child, #proforma .pp__grid tr > td:first-child { text-align:left; padding-left:0; }
  #proforma .pp__yr tr > :first-child { width:7%; }
  #proforma .pp__label tr > :first-child { width:40%; }
  #proforma .pp__sens tr > :first-child { width:22%; }
  #proforma .pp__assump th, #proforma .pp__assump td { padding-top:2px; padding-bottom:2px; }
  #proforma .pp__assump tr > :first-child { width:40%; }
  #proforma .pp__assump tr > :nth-child(2) { width:20%; }
  #proforma .pp__assump tr > :nth-child(3) { width:26%; text-align:left; padding-left:14px; }
  #proforma .pp__assump tr > :nth-child(4) { width:14%; text-align:left; padding-left:14px; }
  #proforma .op__table td .op__fine, #proforma .op__table th .op__fine { margin-top:2px; }
  @page { margin:0; }
  @page proforma { margin:14mm 0 14mm; }
}

/* lender fit: how the chosen lender or investor reads the deal */
.fit__head { font-weight: 600; margin: 10px 0 6px; }
.fit__row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border-subtle); }
.fit__row .plugin__dot { flex: none; }
.fit__val { text-align: right; max-width: 48%; color: var(--text-strong); }
.fit__stack { margin-top: 12px; }
.tnum { font-variant-numeric: tabular-nums; }