/* TPI Estimation UI. Tokens follow the staged tpi-design Studio (29 Oct 2026) amendment: warm ink/paper, dark sidebar,
   sand hero band, bronze accent #9A7B4F / fill #8A6C42, rounded cards, Poppins 300/400. No TCH navy/gold. */
@font-face { font-family: 'Poppins'; font-weight: 300; font-display: swap; src: url('/assets/fonts/Poppins-300.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url('/assets/fonts/Poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url('/assets/fonts/Poppins-500.woff2') format('woff2'); }
:root {
  --ink-1: #161616; --ink-2: #2E2D2A; --ink-3: #6E6C66; --ink-4: #8E8A82;
  --paper: #F4F3EF; --paper-2: #F2EFE8; --surface-card: #FFFFFF; --hairline: #E2DFD7;
  --tpi-gilt: #9A7B4F; --tpi-gilt-fill: #8A6C42; --tpi-gilt-ink: #6E5530; --tpi-sand: #CDB892;
  --shell-bg: #141414; --shell-bg-2: #232220; --shell-text: #CFCBC2; --shell-muted: #8E8A82;
  --gate-bg: #F6EFE2; --gate-bd: #E4D6BC; --gate-fg: #6E5530;
  --hero-band: linear-gradient(100deg, #F7F3EC 0%, #EFE6D6 55%, #D9C7A6 100%);
  --ok: #2E7D5B; --ok-t: #E7F3EC; --warn: #B7791F; --warn-t: #FFF6DB; --bad: #B5402F; --bad-t: #F9E9E5; --info: #5D6F7E; --info-t: #EEF0F1;
  --r0: 8px; --rc: 14px; --rn: 10px;
  --shadow: 0 1px 0 rgba(20,20,20,.03), 0 18px 40px -28px rgba(20,20,20,.10);
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink-1); font: 300 15px/1.55 var(--font); }
a { color: var(--tpi-gilt-ink); }
:focus-visible { outline: 3px solid var(--tpi-gilt); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 10px 14px; z-index: 10; }
.skip:focus { left: 8px; }
.layout { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.shell-nav { background: var(--shell-bg); color: var(--shell-text); padding: 20px 14px; display: flex; flex-direction: column; gap: 6px; }
.shell-nav .brand { display: flex; align-items: center; gap: 10px; padding: 4px 10px 18px; }
.shell-nav .brand img { width: 112px; height: auto; }
.shell-nav .module { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--shell-muted); padding: 0 12px 10px; }
.shell-nav a { color: var(--shell-text); border-radius: var(--rn); padding: 10px 14px; min-height: 44px; display: flex; align-items: center; text-decoration: none; }
.shell-nav a:hover { background: var(--shell-bg-2); }
.shell-nav a[aria-current="page"] { background: var(--tpi-gilt-fill); color: #fff; font-weight: 500; }
.shell-nav a[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.shell-nav .foot { margin-top: auto; font-size: 12px; color: var(--shell-muted); padding: 10px 12px; }
main { padding: 24px clamp(14px, 3vw, 36px) 64px; max-width: 1280px; width: 100%; }
.banner { border-radius: var(--rc); padding: 10px 16px; margin-bottom: 14px; font-size: 14px; }
.banner.qa { background: var(--warn-t); color: #6b4a0f; border: 1px solid #ecd9a6; }
.banner.err { background: var(--bad-t); color: #7a2a1e; border: 1px solid #ebc3bb; }
.hero-band { background: var(--hero-band); border-radius: var(--rc); padding: 22px 24px; margin-bottom: 18px; }
.hero-band h1 { margin: 0 0 4px; font-weight: 300; font-size: clamp(22px, 3vw, 30px); }
.eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--tpi-gilt-ink); }
.card { background: var(--surface-card); border-radius: var(--rc); box-shadow: var(--shadow); border: 1px solid var(--hairline); padding: 18px 20px; margin-bottom: 16px; }
.card h2 { font-weight: 400; font-size: 18px; margin: 0 0 12px; }
.card h3 { font-weight: 400; font-size: 15px; margin: 16px 0 8px; }
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }
input, select, textarea { font: inherit; min-height: 44px; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: var(--r0); background: #fff; color: var(--ink-1); }
textarea { min-height: 88px; }
button, .btn { font: inherit; font-weight: 400; min-height: 44px; min-width: 44px; padding: 8px 16px; border-radius: var(--r0); border: 1px solid var(--hairline); background: #fff; color: var(--ink-1); cursor: pointer; }
button.primary, .btn.primary { background: var(--tpi-gilt-fill); border-color: var(--tpi-gilt-fill); color: #fff; }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.btn:focus-visible, button.signout:focus-visible { outline: 2px solid var(--tpi-gilt-ink); outline-offset: 2px; }
button:disabled { opacity: .5; cursor: not-allowed; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.chip { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 400; border: 1px solid transparent; }
.chip.ok { background: var(--ok-t); color: var(--ok); border-color: #bfe0cd; }
.chip.warn { background: var(--warn-t); color: #8a5a12; border-color: #ecd9a6; }
.chip.bad { background: var(--bad-t); color: var(--bad); border-color: #ebc3bb; }
.chip.info { background: var(--info-t); color: var(--info); border-color: #d5dadd; }
.chip.syn { background: var(--gate-bg); color: var(--gate-fg); border-color: var(--gate-bd); }
.table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r0); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
th { font-weight: 400; color: var(--ink-3); background: var(--paper-2); position: sticky; top: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td input, td select { min-height: 40px; width: 100%; min-width: 80px; }
.muted { color: var(--ink-3); }
.gate { background: var(--gate-bg); border: 1px solid var(--gate-bd); border-radius: var(--rc); padding: 14px 18px; color: var(--gate-fg); margin-bottom: 16px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; font-size: 14px; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); margin-top: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.bar { height: 10px; border-radius: 3px; display: inline-block; vertical-align: middle; }
dialog { border: 0; border-radius: var(--rc); box-shadow: var(--shadow); max-width: min(720px, 94vw); padding: 20px; }
dialog::backdrop { background: rgba(20,20,20,.35); }
.loading { color: var(--ink-3); }
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .shell-nav { flex-direction: row; overflow-x: auto; padding: 8px; gap: 4px; position: sticky; top: 0; z-index: 5; }
  .shell-nav .brand { padding: 0 8px; }
  .shell-nav .brand img { width: 72px; }
  .shell-nav .module, .shell-nav .foot { display: none; }
  .shell-nav a { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }