/* WARNO design.css: one design system extracted from the accepted UI-2 mocks (9 Oct 2026, Designer).
   Law: STRATEGY.md section 7. One accent (brand gold) for the primary button, the active menu item and the focus ring; nothing else.
   Neutral cool ladder, muted status hues for dots, chips and BID / CHECK / PASS only. IBM Plex Sans (SIL OFL 1.1), self-hosted, latin + latin-ext + cyrillic (loaded only when a page uses those letters), 400/500/600. No external requests.
   Themes: <html data-theme="dark|light"> (dark is the default). Plain CSS, no build step.
   Sections: 1 fonts and tokens, 2 base, 3 shell (sidebar, top bar, footer), 4 controls and chips, 5 panels, strip, tables, tabs, filter bar, 6 pipeline, 7 account, 8 company section cards, 9 notice page, 10 capture plan, 11 responsive. */

/* ---------- 1. fonts and tokens ---------- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plex/ibm-plex-sans-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plex/ibm-plex-sans-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plex/ibm-plex-sans-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plex/ibm-plex-sans-latin-ext-500.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plex/ibm-plex-sans-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plex/ibm-plex-sans-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plex/ibm-plex-sans-cyrillic-400.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plex/ibm-plex-sans-cyrillic-500.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plex/ibm-plex-sans-cyrillic-600.woff2") format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
:root {
  /* color: one accent (the brand gold), cool-neutral ladder, muted status hues of equal lightness (Stripe's rule) */
  --bg: #0e1218; --panel: #141a22; --raised: #1a222c; --line: #232d3a; --line2: #2e3a4a;
  --text: #e8ecf1; --text2: #aab4c2; --mute: #7d8998;
  --accent: #e8b24a; --accent-ink: #14100a; --accent-soft: rgba(232,178,74,.14);
  --ok: #62c79c; --warn: #e2a84b; --bad: #ea8a80; --info: #7aa7e0; --viol: #a99be0;
  --side-w: 236px; --top-h: 52px;
  /* type scale (px): data 14, secondary 13, prose 16, title 28; 4-px grid */
  --fs-1: 12.5px; --fs-2: 13px; --fs-3: 14px; --fs-4: 16px; --fs-5: 18px; --fs-6: 22px; --fs-7: 28px;
  --r-ctl: 6px; --r-card: 8px; --r-panel: 12px;
  --font: "IBM Plex Sans", system-ui, "Segoe UI", sans-serif; --font-title: var(--font); --num: tabular-nums;
}
html[data-theme="light"] { --bg: #f4f6f8; --panel: #ffffff; --raised: #f7f9fb; --line: #e3e8ee; --line2: #d3dae3; --text: #111821; --text2: #4a5666; --mute: #5d6a7b; --accent: #b87a12; --accent-ink: #14100a; --accent-soft: rgba(184,122,18,.12); --ok: #1c7d56; --warn: #96620f; --bad: #b0382e; --info: #2c63a8; --viol: #5a4ab0; }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs-3)/1.45 var(--font); -webkit-font-smoothing: antialiased; }
body { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }
a { color: var(--info); text-decoration: none; } a:hover { text-decoration: underline; }
.num { font-variant-numeric: var(--num); }

/* ---- sidebar: mark + wordmark 32 px, sentence-case group labels, 32 px rows ---- */
.side { position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line); background: var(--panel); padding: 14px 10px 10px; display: flex; flex-direction: column; overflow: hidden; }
.brand { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 8px; margin-bottom: 8px; color: var(--text); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand .mk { width: 32px; height: 32px; border-radius: 8px; background: #0f131b; position: relative; flex: none; box-shadow: inset 0 0 0 1px var(--line2); }
html[data-theme="light"] .brand .mk { background: #0f131b; }
.brand .mk b { position: absolute; left: 5px; top: 2px; color: #fff; font: 800 21px/28px var(--font); letter-spacing: -.04em; }
.brand .mk i { position: absolute; left: 21px; top: 21px; width: 7px; height: 3px; background: #c98a1f; }
.brand .wm { font: 600 24px/1 var(--font); letter-spacing: .01em; } .brand .wm span { color: var(--accent); }
.nav { overflow: hidden auto; flex: 1; scrollbar-width: none; }
.nav h6 { margin: 14px 8px 4px; font: 500 var(--fs-1)/1.2 var(--font); color: var(--mute); }
.nav a { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; border-radius: var(--r-ctl); color: var(--text2); font-size: var(--fs-3); }
.nav a:hover { background: var(--raised); color: var(--text); text-decoration: none; }
.nav a.on { background: var(--accent-soft); color: var(--text); font-weight: 500; box-shadow: inset 2px 0 0 var(--accent); }
.nav svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.nav .pill { margin-left: auto; font: 500 var(--fs-1)/1 var(--font); padding: 3px 6px; border-radius: 999px; border: 1px solid var(--line2); color: var(--mute); }
.nav .fold { color: var(--mute); }
.nav .fold::after { content: "\203A"; margin-left: auto; }

/* ---- top bar + page ---- */
.main { min-width: 0; display: flex; flex-direction: column; }
.top { height: var(--top-h); display: flex; align-items: center; gap: 12px; padding: 0 32px; border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 2; }
.search { flex: 0 1 520px; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line2); border-radius: var(--r-ctl); color: var(--mute); background: var(--panel); font-size: var(--fs-3); }
.search kbd { margin-left: auto; font: 500 var(--fs-1) var(--font); padding: 2px 6px; border: 1px solid var(--line2); border-radius: 4px; color: var(--mute); }
.top .sp { flex: 1; }
.btn { height: 34px; padding: 0 14px; border-radius: var(--r-ctl); border: 1px solid var(--line2); background: transparent; color: var(--text); font: 500 var(--fs-3)/1 var(--font); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.btn:hover { background: var(--raised); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.quiet { border-color: transparent; color: var(--text2); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.page { padding: 28px 32px 0; flex: 1; }
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.ph h1 { margin: 0; font: 600 var(--fs-7)/1.15 var(--font-title); letter-spacing: -.015em; }
.ph p { margin: 6px 0 0; color: var(--text2); font-size: var(--fs-4); max-width: 70ch; }
.tools { display: flex; gap: 8px; align-items: center; }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--r-ctl); overflow: hidden; } .seg button { height: 32px; padding: 0 12px; background: transparent; border: 0; color: var(--text2); font: 500 var(--fs-3) var(--font); } .seg button.on { background: var(--raised); color: var(--text); }
.filter { height: 34px; width: 220px; padding: 0 12px; border: 1px solid var(--line2); border-radius: var(--r-ctl); background: var(--panel); color: var(--mute); display: flex; align-items: center; font-size: var(--fs-3); }

/* ---- summary strip: numbers with labels, no boxes (Mercury / Stripe) ---- */
.strip { display: flex; margin: 0 0 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip > div { padding: 14px 32px 14px 0; margin-right: 32px; border-right: 1px solid var(--line); min-width: 180px; } .strip > div:last-child { border-right: 0; }
.strip b { display: block; font: 600 var(--fs-7)/1.1 var(--font); letter-spacing: -.02em; font-variant-numeric: var(--num); }
.strip span { color: var(--mute); font-size: var(--fs-2); }

/* ---- pipeline board ---- */
.board { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; align-items: start; }
.lane h3 { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font: 600 var(--fs-3)/1 var(--font); }
.lane h3 i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .lane h3 em { font-style: normal; font-weight: 400; color: var(--mute); }
.lane h3 small { margin-left: auto; font: 400 var(--fs-2) var(--font); color: var(--mute); font-variant-numeric: var(--num); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px; margin-bottom: 8px; }
.card:hover { border-color: var(--line2); background: var(--raised); }
.card .t { font: 500 var(--fs-3)/1.35 var(--font); color: var(--text); margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .m { color: var(--mute); font-size: var(--fs-2); line-height: 1.35; margin: 0 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .f { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-2); color: var(--text2); }
.due { display: inline-flex; align-items: center; gap: 6px; } .due::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mute); }
.due.soon { color: var(--warn); } .due.soon::before { background: var(--warn); } .due.late { color: var(--bad); } .due.late::before { background: var(--bad); }
.val { font-variant-numeric: var(--num); color: var(--text); }
.empty-lane { border: 1px dashed var(--line2); border-radius: var(--r-card); padding: 14px; color: var(--mute); font-size: var(--fs-2); }

/* ---- app footer: one line ---- */
.foot { margin-top: 32px; padding: 14px 32px; border-top: 1px solid var(--line); color: var(--mute); font-size: var(--fs-2); display: flex; gap: 16px; flex-wrap: wrap; }
.foot a { color: var(--text2); }

/* ---- account page ---- */
.grid2 { display: grid; grid-template-columns: 340px 1fr; gap: 24px; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-panel); }
.panel > .hd { padding: 14px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; } .panel > .hd h2 { margin: 0; font: 600 var(--fs-5)/1.2 var(--font); }
.panel > .bd { padding: 20px; }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 12px 16px; margin: 0; } .kv dt { color: var(--mute); } .kv dd { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line2); display: inline-flex; align-items: center; font-size: var(--fs-2); color: var(--text2); } .chip.accent { border-color: var(--line2); background: var(--raised); color: var(--text); }
.rows .r { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--line); } .rows .r:first-child { border-top: 0; }
.rows .r b { font-weight: 500; display: block; } .rows .r span { color: var(--mute); font-size: var(--fs-2); }
.callout { border: 1px solid var(--line2); background: var(--raised); border-radius: var(--r-card); padding: 16px 20px; display: flex; gap: 16px; align-items: center; justify-content: space-between; } .callout p { margin: 0; color: var(--text2); max-width: 64ch; } .callout b { color: var(--text); display: block; font-size: var(--fs-4); font-weight: 600; margin-bottom: 2px; }
.stack { display: grid; gap: 24px; }

.search svg { width: 16px; height: 16px; }


/* ---------- 4-5. search, filter bar, tables, tabs, badges ---------- */
.search svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; }
.src { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.src a { padding: 10px 14px; color: var(--text2); font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.src a em { font-style: normal; font-weight: 400; color: var(--mute); margin-left: 6px; font-variant-numeric: var(--num); }
.src a.on { color: var(--text); border-bottom-color: var(--text); } .src a:hover { text-decoration: none; color: var(--text); }
.fbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.fbar .kw { flex: 1 1 320px; max-width: 520px; height: 36px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--line2); border-radius: var(--r-ctl); background: var(--panel); color: var(--mute); }
.fchip { height: 30px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2); color: var(--text2); background: transparent; }
.fchip b { color: var(--text); font-weight: 500; } .fchip.on { border-color: var(--text2); background: var(--raised); }
.fchip.add { border-style: dashed; color: var(--mute); }
.fbar .sp { flex: 1; }
.mapbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel); margin: 0 0 12px; color: var(--text2); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font: 500 var(--fs-2)/1 var(--font); color: var(--mute); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--bg); }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:hover td { background: var(--raised); }
.tbl .ttl { font-weight: 500; color: var(--text); display: block; max-width: 62ch; } .tbl .by { color: var(--mute); font-size: var(--fs-2); }
.badge { min-width: 56px; height: 26px; padding: 0 10px; gap: 6px; border-radius: 999px; border: 1px solid var(--line2); background: var(--raised); display: inline-flex; align-items: center; justify-content: center; font: 600 var(--fs-2) var(--font); font-variant-numeric: var(--num); color: var(--text); }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mute); } .badge.hi::before { background: var(--ok); } .badge.mid::before { background: var(--warn); } .badge.lo::before { background: var(--bad); }
.call { display: inline-block; min-width: 64px; text-align: center; padding: 5px 9px; border-radius: 6px; border: 1px solid; font: 600 var(--fs-2)/1.2 var(--font); }
.call.bid { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 70%, transparent); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.call.check { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 70%, transparent); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.call.pass { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 70%, transparent); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.tag2 { display: inline-block; font-size: var(--fs-1); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line2); color: var(--text2); }
.pager { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; color: var(--mute); font-size: var(--fs-2); }
@media (max-width: 800px) {
  body { grid-template-columns: 1fr; } .side { position: fixed; z-index: 30; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); height: auto; transform: translateX(-100%); visibility: hidden; box-shadow: 0 0 0 100vmax transparent; } .side.open { transform: none; visibility: visible; box-shadow: 0 0 0 100vmax rgba(5,8,12,.6); } .top { padding: 0 16px; } .page { padding: 20px 16px 0; } .foot { padding: 14px 16px; }
  .ph { flex-direction: column; align-items: stretch; gap: 12px; } .ph h1 { font-size: 24px; } .tools { flex-wrap: wrap; }
  .tbl thead { display: none; } .tbl, .tbl tbody { display: block; }
  .tbl tr { display: grid; grid-template-columns: 44px 1fr auto; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .tbl td { display: block; padding: 0; border: 0; } .tbl td.c-set, .tbl td.c-src { display: none; }
  .tbl td.c-m { grid-column: 1; grid-row: 1 / span 3; } .tbl td.c-t { grid-column: 2; } .tbl td.c-call { grid-column: 3; grid-row: 1 / span 2; text-align: right; }
  .tbl td.c-v { grid-column: 2; color: var(--text2); font-size: var(--fs-2); } .tbl td.c-d { grid-column: 2; color: var(--mute); font-size: var(--fs-2); }
}

.search span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.top .tb { display: none; padding: 0; } .top .tb .mk { width: 28px; height: 28px; } .top .tb .mk b { font-size: 18px; line-height: 24px; left: 4px; } .top .tb .mk i { left: 18px; top: 18px; }
@media (max-width: 800px) { .top .tb { display: flex; } .top .search { flex: 1 1 auto; min-width: 0; } .top .btn.quiet { display: none; } }


/* ---------- 8. company section cards ---------- */
.co { padding: 1.5rem 2rem 0; flex: 1; font-size: .875rem; line-height: 1.5; }
.co-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin: 0 0 1rem; }
.co-h h1 { margin: 0; font: 600 1.75rem/1.2 var(--font-title); letter-spacing: -.015em; }
.co-h p { margin: .25rem 0 0; color: var(--text2); font-size: .9375rem; }
.co-id { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .625rem; }
.co-tabs { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--line); margin: 0 0 1.5rem; scrollbar-width: none; position: sticky; top: 3.25rem; background: var(--bg); z-index: 1; }
.co-tabs a { padding: .625rem .875rem; color: var(--text2); white-space: nowrap; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.co-tabs a.on { color: var(--text); border-bottom-color: var(--text); } .co-tabs a:hover { text-decoration: none; color: var(--text); }
.scard { background: var(--panel); border: 1px solid var(--line); border-radius: .75rem; margin: 0 0 1.5rem; }
.scard-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.scard-h h2 { margin: 0; font: 600 1.125rem/1.3 var(--font); } .scard-h p { margin: .125rem 0 0; color: var(--mute); font-size: .875rem; }
.scard-h .acts { display: flex; gap: .5rem; flex: none; }
.scard-b { padding: 0 1.25rem 1rem; }
.scard-b > h3 { margin: 1.5rem 0 .5rem; font: 600 1rem/1.3 var(--font); }
.ctl { display: flex; align-items: center; gap: .75rem; padding: .875rem 0; flex-wrap: wrap; color: var(--mute); font-size: .8125rem; }
.ctl .sel { display: inline-flex; align-items: center; gap: .375rem; min-height: 2rem; padding: 0 .625rem; border: 1px solid var(--line2); border-radius: .375rem; color: var(--text); background: var(--bg); }
.ctl .kw { margin-left: auto; min-height: 2rem; min-width: 14rem; padding: 0 .75rem; display: inline-flex; align-items: center; border: 1px solid var(--line2); border-radius: .375rem; background: var(--bg); }
.pg { display: inline-flex; align-items: center; gap: .25rem; } .pg b { min-width: 2rem; min-height: 2rem; padding: 0 .5rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line2); border-radius: .375rem; font-weight: 500; color: var(--text2); } .pg b.on { background: var(--raised); border-color: var(--text2); color: var(--text); }
.dt { width: 100%; border-collapse: collapse; }
.dt th { text-align: left; font-weight: 500; font-size: .8125rem; color: var(--mute); padding: .625rem .75rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dt th .ar { opacity: .6; margin-left: .25rem; }
.dt td { padding: .75rem; border-bottom: 1px solid var(--line); vertical-align: top; min-height: 2.75rem; }
.dt tr:last-child td { border-bottom: 0; }
.dt .r { text-align: right; font-variant-numeric: var(--num); } .dt th.r { text-align: right; }
.dt .nm { font-weight: 500; color: var(--text); } .dt .ds { display: block; color: var(--mute); font-size: .8125rem; margin-top: .125rem; max-width: 70ch; }
.dt a { color: var(--info); }
.sins { display: flex; flex-wrap: wrap; gap: .375rem; }
.note2 { color: var(--text2); max-width: 75ch; margin: 1rem 0 0; }
.sig { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; margin-top: 1rem; } .sig b { display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; }
.sig span { color: var(--mute); font-size: .8125rem; }
@media (max-width: 800px) { .co { padding: 1rem 1rem 0; } .co-h { flex-direction: column; } .dt th:nth-child(n+4), .dt td:nth-child(n+4) { display: none; } .ctl .kw { margin-left: 0; min-width: 0; flex: 1 1 100%; } .sig { grid-template-columns: 1fr; } }


/* ---------- 9. notice page ---------- */
.nt { padding: 28px 32px 0; flex: 1; max-width: 1400px; width: 100%; }
.nt-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 0 0 16px; }
.nt-h h1 { margin: 0; font: 600 var(--fs-7)/1.2 var(--font-title); letter-spacing: -.015em; max-width: 34ch; }
.nt-h .by { margin: 6px 0 0; color: var(--text2); font-size: var(--fs-4); }
.nt-meta { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 12px 0 0; padding: 0; } .nt-meta div { display: flex; gap: 6px; } .nt-meta dt { color: var(--mute); } .nt-meta dd { margin: 0; color: var(--text); }
.nt-meta { font-size: var(--fs-3); }

.nt-cov { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; color: var(--text2); font-size: var(--fs-2); }
.smp { flex: none; white-space: nowrap; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; border: 1px dashed var(--line2); color: var(--mute); font-size: var(--fs-1); }

.nt-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; margin: 24px 0 0; }
.nt .panel { overflow: visible; }
.nt .panel > .hd p { margin: 2px 0 0; color: var(--mute); font-size: var(--fs-2); }
.nt .panel > .hd { align-items: flex-start; }

/* key-facts strip: scope on the left, six facts on the right */
.kf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.kf > div { padding: 16px 20px 20px; } .kf > div + div { border-left: 1px solid var(--line); }
.kf h3 { margin: 0 0 12px; font: 600 var(--fs-3)/1.2 var(--font); color: var(--text); }
.scope { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .scope li { padding-left: 14px; position: relative; }
.scope li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--mute); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin: 0; }
.facts > div { min-width: 0; } .facts dt { color: var(--mute); font-size: var(--fs-2); margin: 0 0 2px; } .facts dd { margin: 0; }

/* quote on hover or focus: every cited item shows the exact source text */
.ev { position: relative; cursor: help; border-radius: 4px; outline-offset: 2px; text-decoration: underline dotted var(--line2); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ev:hover, .ev:focus { text-decoration-color: var(--text2); }
.ev:focus-visible { outline: 2px solid var(--accent); }
.qt { display: none; position: absolute; z-index: 5; left: 0; top: calc(100% + 6px); width: 360px; max-width: 80vw; padding: 12px 14px; background: var(--raised); border: 1px solid var(--line2); border-radius: var(--r-card); box-shadow: 0 8px 24px rgba(0,0,0,.35); font-size: var(--fs-2); line-height: 1.45; color: var(--text); text-decoration: none; cursor: default; }
.ev:hover > .qt, .ev:focus > .qt, .ev:focus-within > .qt { display: block; }
.qt q { display: block; quotes: "\201C" "\201D"; } .qt small { display: block; margin-top: 8px; color: var(--mute); font-size: var(--fs-1); }
.qt + .qt { margin-top: 0; top: auto; }
.right .qt { left: auto; right: 0; }

/* status: dot + word, no fill (status hues are for dots and chips only) */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2); color: var(--text2); white-space: nowrap; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mute); }
.st.stated::before { background: var(--ok); } .st.conflicting::before { background: var(--warn); } .st.not_required::before { background: var(--info); }

.chk { width: 100%; border-collapse: collapse; }
.chk th { text-align: left; font: 500 var(--fs-2)/1 var(--font); color: var(--mute); padding: 10px 20px; border-bottom: 1px solid var(--line); }
.chk td { padding: 12px 20px; border-bottom: 1px solid var(--line); vertical-align: top; } .chk tr:last-child td { border-bottom: 0; }
.chk td:first-child { width: 220px; font-weight: 500; } .chk td:nth-child(2) { width: 140px; }
.pers { margin: 0; padding: 0; list-style: none; } .pers li { padding: 12px 20px; border-top: 1px solid var(--line); } .pers b { font-weight: 500; display: block; } .pers span { color: var(--text2); }

/* Bid Odds */
.bo-call { display: flex; align-items: center; gap: 12px; padding: 16px 20px 4px; }
.verdict { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 6px; border: 1px solid; font: 600 var(--fs-3)/1 var(--font); }
.verdict.crowded { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 70%, transparent); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.verdict.winnable { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 70%, transparent); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.verdict.lock { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 70%, transparent); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.bo-why { padding: 8px 20px 16px; margin: 0; color: var(--text2); }
.bo-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bo-stats > div { padding: 12px 20px; } .bo-stats > div + div { border-left: 1px solid var(--line); }
.bo-stats b { display: block; font: 600 var(--fs-6)/1.2 var(--font); font-variant-numeric: var(--num); } .bo-stats span { color: var(--mute); font-size: var(--fs-2); }
.bo-t { width: 100%; border-collapse: collapse; } .bo-t th { text-align: left; font: 500 var(--fs-2)/1 var(--font); color: var(--mute); padding: 10px 8px; border-bottom: 1px solid var(--line); } .bo-t th:first-child, .bo-t td:first-child { padding-left: 20px; } .bo-t th:last-child, .bo-t td:last-child { padding-right: 20px; }
.bo-t td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; } .bo-t tr:last-child td { border-bottom: 0; } .bo-t .r { text-align: right; font-variant-numeric: var(--num); }
.bo-t small { display: block; color: var(--mute); font-size: var(--fs-2); }
.bo-note { margin: 0; padding: 12px 20px 16px; color: var(--mute); font-size: var(--fs-2); border-top: 1px solid var(--line); }

@media (max-width: 1280px) { .nt-grid { grid-template-columns: 1fr; } }
@media (max-width: 800px) {
  .nt { padding: 20px 16px 0; } .nt-h { flex-direction: column; gap: 12px; } .nt-h h1 { font-size: 24px; }
  .kf { grid-template-columns: 1fr; } .kf > div + div { border-left: 0; border-top: 1px solid var(--line); } .facts { grid-template-columns: 1fr; }
  .chk thead { display: none; } .chk, .chk tbody, .chk tr, .chk td { display: block; width: auto !important; } .chk tr { padding: 12px 16px; border-bottom: 1px solid var(--line); } .chk td { padding: 0; border: 0; } .chk td:nth-child(2) { margin: 2px 0 4px; }
  .qt { position: static; width: auto; max-width: none; margin-top: 6px; box-shadow: none; }
  .bo-t th:nth-child(4), .bo-t td:nth-child(4) { display: none; }
  .nt-grid { margin-top: 16px; gap: 16px; }
}


/* ---------- 10. capture plan ---------- */
.cp-strip { margin: 0 0 24px; }
.cp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.tg { width: 100%; border-collapse: collapse; }
.tg th { text-align: left; font: 500 var(--fs-2)/1 var(--font); color: var(--mute); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tg td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; } .tg tr:last-child td { border-bottom: 0; }
.tg th:first-child, .tg td:first-child { padding-left: 20px; } .tg th:last-child, .tg td:last-child { padding-right: 20px; }
.tg .r { text-align: right; font-variant-numeric: var(--num); } .tg .nm { font-weight: 500; color: var(--text); display: block; } .tg small { display: block; color: var(--mute); font-size: var(--fs-2); }
.rk { width: 28px; color: var(--mute); font-variant-numeric: var(--num); }
.wn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--text2); }
.wn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mute); }
.wn.winnable::before { background: var(--ok); } .wn.crowded::before { background: var(--warn); } .wn.lock::before { background: var(--bad); }
.fit { font-variant-numeric: var(--num); font-weight: 600; }
.lst { margin: 0; padding: 0; list-style: none; } .lst li { padding: 12px 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; } .lst li:first-child { border-top: 0; }
.lst b { font-weight: 500; display: block; } .lst small { display: block; color: var(--mute); font-size: var(--fs-2); } .lst .rt { text-align: right; flex: none; font-variant-numeric: var(--num); }
.act { margin: 0; padding: 0; list-style: none; counter-reset: a; } .act li { padding: 12px 20px 12px 44px; border-top: 1px solid var(--line); position: relative; } .act li:first-child { border-top: 0; }
.act li::before { counter-increment: a; content: counter(a); position: absolute; left: 20px; top: 12px; color: var(--mute); font-variant-numeric: var(--num); }
.act small { display: block; color: var(--mute); font-size: var(--fs-2); }
@media (max-width: 1280px) { .cp-grid { grid-template-columns: 1fr; } }
@media (max-width: 800px) {
  .cp-grid { gap: 16px; } .cp-strip.strip { flex-wrap: wrap; } .cp-strip.strip > div { min-width: 0; flex: 1 1 45%; margin-right: 0; padding-right: 12px; border-right: 0; }
  .tg thead { display: none; } .tg, .tg tbody, .tg tr, .tg td { display: block; } .tg tr { padding: 12px 16px; border-bottom: 1px solid var(--line); } .tg td { padding: 0 !important; border: 0; } .tg td.hm { display: none; } .tg td.r { text-align: left; } .tg td.rk { display: none; }
}
.tg .r { white-space: nowrap; } .panel > .hd .btn { flex: none; white-space: nowrap; }

/* ---------- focus, motion, touch ---------- */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 800px) { .btn, .seg button, .filter { min-height: 40px; } .nav a { height: 40px; } .chip, .fchip { min-height: 32px; } }

/* ---------- shell helpers (sub-menu rows under a group; replaces the inline styles used in the mock shell) ---------- */
.nav a.sub { padding-left: 34px; height: 30px; color: var(--text2); } .nav a.sub.on { color: var(--text); }
.nav .grp-end { margin-top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 800px) { .strip { flex-wrap: wrap; } .strip > div { flex: 1 1 45%; min-width: 0; margin-right: 0; padding-right: 12px; border-right: 0; } }

/* ---------- pipeline lanes (dot colours per stage; status hues and neutrals only, never gold) ---------- */
.lane-c1 { background: var(--info); } .lane-c2 { background: var(--viol); } .lane-c3 { background: var(--text2); } .lane-c4 { background: var(--warn); } .lane-c5 { background: var(--info); opacity: .7; } .lane-c6 { background: var(--ok); } .lane-c7 { background: var(--mute); }

/* ---------- forms ---------- */
.field { display: grid; gap: 6px; align-content: start; } .field > label { font-weight: 500; color: var(--text); } .field .hint { color: var(--mute); font-size: var(--fs-2); } .field .err { color: var(--bad); font-size: var(--fs-2); }
.in, .sel2, .ta { width: 100%; min-height: 34px; padding: 0 12px; border: 1px solid var(--line2); border-radius: var(--r-ctl); background: var(--panel); color: var(--text); font: 400 var(--fs-3)/1.4 var(--font); }
.ta { padding: 8px 12px; min-height: 96px; resize: vertical; }
.in::placeholder, .ta::placeholder { color: var(--mute); }
.in:hover, .sel2:hover, .ta:hover { border-color: var(--text2); }
.in:focus-visible, .sel2:focus-visible, .ta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--text2); }
.in[aria-invalid="true"], .ta[aria-invalid="true"] { border-color: var(--bad); }
.in:disabled, .sel2:disabled, .ta:disabled { opacity: .55; cursor: not-allowed; }
.chkbox { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; } .chkbox input { width: 16px; height: 16px; accent-color: var(--text2); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
@media (max-width: 800px) { .in, .sel2 { min-height: 40px; } }

/* ---------- phone menu: a button in the top bar opens the sidebar as a drawer (menu.js; no animation) ---------- */
.menu-btn { display: none; width: 40px; height: 40px; padding: 0; flex: none; align-items: center; justify-content: center; border: 1px solid var(--line2); border-radius: var(--r-ctl); background: transparent; color: var(--text); cursor: pointer; }
.menu-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; }
.menu-btn:hover { background: var(--raised); }
@media (max-width: 800px) { .menu-btn { display: inline-flex; } .top { gap: 8px; } .side .brand { cursor: default; } }

/* ---------- 12. agency logo and documents (notice page) ---------- */
/* Logo: 32 px tile beside the agency name (.sm = 24 px for list rows). The tile is a light neutral in both themes because agency seals are drawn for white;
   the image is contained with 3 px padding, never stretched, always alt="" (the agency name is next to it). Fallback: .fb tile with the agency's initials (max 2 letters). */
.org { display: flex; align-items: center; gap: 12px; }
.org-logo { width: 32px; height: 32px; flex: none; border-radius: 6px; border: 1px solid var(--line2); background: #f4f6f8; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.org-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; display: block; }
.org-logo.sm { width: 24px; height: 24px; border-radius: 4px; } .org-logo.sm img { padding: 2px; }
.org-logo.fb { background: var(--raised); color: var(--text2); font: 600 var(--fs-1)/1 var(--font); letter-spacing: 0; }
.org-logo.fb.sm { font-size: 11px; }

/* Documents: .docs panel with a head row (title + count left, zip button right), one .doc row per file. */
.docs .hd .acts { display: flex; gap: 8px; align-items: center; flex: none; }
.docs .hd .btn { white-space: nowrap; }
.doc { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line); min-height: 60px; }
.doc:first-of-type { border-top: 0; }
.doc .ftag { display: inline-flex; align-items: center; justify-content: center; height: 24px; min-width: 44px; padding: 0 6px; border: 1px solid var(--line2); border-radius: 4px; color: var(--text2); font: 600 var(--fs-1)/1 var(--font); }
.doc .nm { font-weight: 500; color: var(--text); overflow-wrap: anywhere; } .doc .nm a { color: inherit; }
.doc small { display: block; color: var(--mute); font-size: var(--fs-2); margin-top: 2px; }
.doc .st { justify-self: end; }
.doc .btn { height: 34px; padding: 0 12px; }
.doc .btn svg, .docs .hd .btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.docs-empty { padding: 20px; color: var(--mute); }
@media (max-width: 800px) {
  .docs .hd { flex-wrap: wrap; gap: 12px; } .docs .hd .acts { width: 100%; } .docs .hd .acts .btn { flex: 1; justify-content: center; min-height: 40px; }
  .doc { grid-template-columns: 44px minmax(0, 1fr) 40px; gap: 12px; padding: 12px 16px; } .doc .st { display: none; }
  .doc .btn { width: 40px; height: 40px; padding: 0; justify-content: center; } .doc .btn span { display: none; }
}

/* ---------- 13. match score chip (notice page header; same bands as the search table .badge) ---------- */
/* Bands (from search.html pct(): >= 70 high, 50 to 69 mid, below 50 low). Colour is never the only cue: the word (Strong / Possible / Weak) and the number are always printed. */
.match { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--line2); border-radius: 999px; background: var(--raised); color: var(--text); font-size: var(--fs-3); white-space: nowrap; }
.match::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mute); flex: none; }
.match b { font-weight: 600; font-variant-numeric: var(--num); } .match span { color: var(--text2); }
.match.hi::before { background: var(--ok); } .match.mid::before { background: var(--warn); } .match.lo::before { background: var(--bad); }
.match.na, .match.ld { border-style: dashed; background: transparent; color: var(--mute); } .match.na::before, .match.ld::before { background: transparent; border: 1px solid var(--mute); }
.match.na span, .match.ld span { color: var(--mute); }
.match.ev { cursor: help; text-decoration: none; } .match .qt { white-space: normal; }
.nt-match { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 12px 0 0; } .nt-match .hint { color: var(--mute); font-size: var(--fs-2); }

/* ---------- 14. collapsible nav group (Learn): <details class="grp" data-phone-closed open><summary>Learn</summary> links </details>; menu.js closes it on phones unless it holds the current page ---------- */
.nav .grp { margin: 14px 0 0; } .nav .grp > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 24px; margin: 0 8px 4px; padding: 0; border-radius: 4px; font: 500 var(--fs-1)/1.2 var(--font); color: var(--mute); cursor: pointer; }
.nav .grp > summary::-webkit-details-marker { display: none; }
.nav .grp > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); margin-right: 3px; } .nav .grp[open] > summary::after { transform: rotate(45deg); margin-bottom: 3px; }
.nav .grp > summary:hover { color: var(--text); }
@media (max-width: 800px) { .nav .grp > summary { min-height: 40px; margin-bottom: 0; } }

/* ---------- 14b. item-like nav groups (Search opportunities, World map and its regions): summary looks like a nav row; children are .sub rows ---------- */
.nav .grp.nv { margin: 0; }
.nav .grp.nv > summary { display: flex; align-items: center; gap: 10px; height: 32px; min-height: 32px; margin: 0; padding: 0 8px; border-radius: var(--r-ctl); color: var(--text2); font: 400 var(--fs-3)/1 var(--font); }
.nav .grp.nv > summary:hover { background: var(--raised); color: var(--text); }
.nav .grp.nv > summary svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.nav .grp.nv > summary .pill { margin-left: auto; margin-right: 6px; }
.nav .grp.nv:not(:has(.pill)) > summary::after, .nav .grp.nv > summary:not(:has(.pill))::after { margin-left: auto; }
.nav .grp.nv > summary:has(.pill)::after { margin-left: 0; }
.nav a.sub.s2 { padding-left: 50px; height: 28px; }
.nav .grp.l2 > summary { height: 30px; min-height: 30px; padding-left: 34px; color: var(--text2); }
.nav .sub.soon { display: flex; align-items: center; height: 30px; padding: 0 8px 0 34px; color: var(--mute); }
.nav .sub.soon .pill { margin-left: auto; }
@media (max-width: 800px) { .nav .grp.nv > summary { height: 40px; min-height: 40px; } .nav a.sub.s2 { height: 36px; } .nav .grp.l2 > summary { height: 36px; } }
/* active pill: lift the muted text so the Core / Pro label keeps 4.5:1 on the active tint */
.nav a.on .pill { color: var(--text2); border-color: var(--text2); }