/* 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: 2px solid var(--ink-1); outline-offset: 2px; }
.shell-nav :focus-visible { outline-color: #fff; }
/* Headings and main take focus from script (tabindex=-1) for screen readers; they are not controls, so no ring. */
[tabindex="-1"]:focus { outline: none; }
.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; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.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 .group { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--shell-muted); padding: 14px 12px 4px; }
.shell-nav details.earlier > summary { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--shell-muted); padding: 14px 12px; cursor: pointer; border-radius: var(--rn); }
.shell-nav details.earlier > summary:hover { background: var(--shell-bg-2); }
main { padding: 24px clamp(14px, 3vw, 36px) 64px; max-width: 1280px; width: 100%; min-width: 0; }
.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); }
select { max-width: 100%; }
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; }
/* Studio: primary buttons are ink; bronze fill is rationed to the one main call to action (sign-in). */
button.primary, .btn.primary { background: var(--ink-1); border-color: var(--ink-1); color: #fff; }
button.primary:hover:not(:disabled), .btn.primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
button:disabled { opacity: .5; cursor: not-allowed; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.row > label { max-width: 100%; }
.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); }
/* Review queue (shared component in app.js). Confidence is spelled out in the chip; colour only reinforces it. */
.review-queue .rq-head { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.review-queue .rq-head h2 { margin: 0; }
.review-queue tbody tr:focus-visible { outline: 2px solid var(--ink-1); outline-offset: -2px; background: var(--paper-2); }
.review-queue tbody tr:hover { background: var(--paper); }
.review-queue td .row { flex-wrap: nowrap; }
.review-queue .edit-fields { display: grid; gap: 8px; min-width: 220px; margin-bottom: 8px; }
.source-ref { color: var(--ink-3); overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .shell-nav { flex-direction: row; overflow-x: auto; overflow-y: visible; height: 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 .group { display: none; }
  .shell-nav a { white-space: nowrap; }
  .shell-nav details.earlier > summary { white-space: nowrap; }
}
/* Signed-out screens stand alone. The body class is set in index.html so the navigation never flashes before sign-in state is known. */
body.signed-out .layout { display: block; }
body.signed-out .shell-nav { display: none; }
body.signed-out main { margin: 0 auto; }
.signin { min-height: 100vh; margin: -24px auto -64px; max-width: 1160px; padding: 48px 32px; display: grid; grid-template-columns: 1fr minmax(320px, 440px); gap: 64px; align-items: center; }
.signin-brand { text-align: center; }
.signin-brand img { width: 220px; height: auto; }
.signin-brand .eyebrow { margin: 24px 0 8px; }
.signin-brand h1 { font-size: 52px; font-weight: 300; line-height: 1.15; margin: 0; }
.signin-rule { display: block; width: 48px; height: 2px; margin: 24px auto; background: var(--tpi-gilt-fill); }
.signin-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--rc); box-shadow: var(--shadow); padding: 40px 44px; }
.signin-card .eyebrow { margin: 0 0 4px; }
.signin-card h2 { font-size: 34px; font-weight: 300; margin: 0 0 12px; }
.signin-note { margin: 0 0 24px; }
.signin-btn { width: 100%; }
.btn.primary.signin-btn { background: var(--tpi-gilt-fill); border-color: var(--tpi-gilt-fill); }
.signin-foot { margin: 28px 0 0; padding-top: 18px; border-top: 1px dashed var(--hairline); text-align: center; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.signin-status { display: block; margin-top: 8px; text-align: center; font-size: 13px; }
@media (max-width: 860px) { .signin { grid-template-columns: 1fr; gap: 32px; padding: 32px 0; min-height: 0; margin: 0; } .signin-brand h1 { font-size: 40px; } .signin-card { padding: 28px 24px; } }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-height: 0; padding: 0; margin: 0; flex: none; accent-color: var(--tpi-gilt-fill); }
label.check { display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: 44px; grid-column: 1 / -1; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* D11: fixed toast mirroring a banner that appeared off-screen */
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 50; max-width: min(520px, calc(100vw - 40px)); border-radius: var(--rc); padding: 10px 16px; font-size: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.toast[hidden] { display: none; }
.toast.ok { background: var(--ok-t); color: var(--ok); border: 1px solid #bfe0cd; }
.toast.err { background: var(--bad-t); color: #7a2a1e; border: 1px solid #ebc3bb; }
/* Training copy bar (app.js trainingBanner, body.training): always on top of every screen; the sticky navigation and
   the skip link start below it (--training-bar is the bar's measured height). Bronze ink on paper: 6.3:1 contrast. */
.training-bar { position: sticky; top: 0; z-index: 20; background: var(--tpi-gilt-ink); color: var(--paper); font-weight: 500; font-size: 14px; line-height: 1.4; text-align: center; padding: 8px 16px; overflow-wrap: anywhere; }
body.training .shell-nav { top: var(--training-bar, 0px); height: calc(100vh - var(--training-bar, 0px)); }
body.training .skip { top: calc(var(--training-bar, 0px) + 8px); z-index: 21; }
@media (max-width: 860px) { body.training .shell-nav { height: auto; } }
/* Print: bid review and other pages print as the content only, on white, with whole cards and table rows. */
@media print {
  .shell-nav, .no-print, .skip, .toast, dialog { display: none !important; }
  .layout { display: block; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { padding: 0; max-width: none; }
  .card { box-shadow: none; border: 1px solid #ccc; }
  .table-wrap { overflow: visible; }
  tr { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  a { color: inherit; text-decoration: none; }
}