/* site-design.css: WARNO site-wide design layer (Site Designer, 3 Oct 2026). Loaded LAST on every page, after theme.css.
   What it does: one type scale, readable minimum sizes + AA contrast, one button system (gold primary / ghost / red ghost, both themes),
   dark default with light via the toggle, consistent container width, styled form controls, single-border cards, empty states,
   the chat-replay panels capped, the map in the home-page palette, the left menu on one line per item.
   Rules: tokens only (the existing --w-* system plus the --sd-* set below); no markup changes; no CDN; Archivo self-hosted (fonts/).
   The raw colours below ARE the palette (dark-first), not unconverted light colours: the U02 sweep exempts this file by name. */

/* ---------- 0. fonts (self-hosted, OFL; same file as the home page) ---------- */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap; src: url(fonts/archivo-latin-var.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; }

/* ---------- 1. tokens ---------- */
:root { --sd-disp: "Instrument Sans", "InstrumentSans", system-ui, -apple-system, sans-serif; --sd-mono: "Instrument Sans", "InstrumentSans", system-ui, -apple-system, sans-serif;
  --sd-gold: #f0c05a; --sd-gold-ink: #8f6510; --sd-gold-soft: rgba(184,134,31,.12); --sd-r: 6px; --sd-r-card: 10px;
  --sd-h1: clamp(30px, 2.6vw, 38px); --sd-h2: clamp(22px, 1.9vw, 26px); --sd-body: 15px; --sd-small: 13px; --sd-label: 11.5px;
  --sd-wrap: 1240px; --sd-wrap-read: 960px;
  --sd-primary-bg: var(--sd-gold); --sd-primary-ink: #0b1019; --sd-danger: #b3261e;
  --sd-line: var(--w-line, #d9e0e8); --sd-mute: var(--w-muted, #5f6b7c); --sd-ink: var(--w-text, #0b1019); --sd-ink2: var(--w-text2, #3b4656); --sd-surface: var(--w-surface, #fff); --sd-surface2: var(--w-surface2, #f4f6f9); }
:root[data-theme="dark"] { --sd-gold-ink: #e0b457; --sd-gold-soft: rgba(224,180,87,.14); --sd-danger: #f19a91; --sd-line: #2b3445; --sd-mute: #a3aebf; --sd-ink2: #c9d2de; --sd-surface2: #1b2230; }

/* ---------- 1b. page surfaces follow the theme (the shell hard-codes a light body/shell background on app pages) ---------- */
:root[data-theme="dark"] body, :root[data-theme="dark"] .shell, :root[data-theme="dark"] .main, :root[data-theme="dark"] .main .wrap { background-color: var(--w-page, #0e131b) !important; color: var(--w-text, #e6ebf2); }
:root[data-theme="dark"] .side { background: var(--w-surface, #151b25) !important; border-right-color: var(--w-line, #2b3445) !important; }
:root[data-theme="dark"] .top2 { background: rgba(14,19,27,.94) !important; border-bottom-color: var(--w-line, #2b3445); }
:root[data-theme="dark"] .main footer, :root[data-theme="dark"] footer.df { background: transparent; border-top-color: var(--w-line, #2b3445); }
html:not([data-theme="dark"]) body { background-color: #f5f7fa; }

/* ---------- 2. type scale (all pages) ---------- */
html body .main .wrap h1, html body .main .wrap .phead h2, html body .main .wrap > h2:first-child, html body .main .wrap > div > h2:first-child, html body .main .wrap .dbhead h2,
html body .main .wrap h2#dbhi, html body .main .wrap h2#coname, html body .main .wrap h2#ofname, html body .main .wrap h1.hgh1, html body .main .wrap.nt h1 {
  font-family: var(--sd-disp) !important; font-weight: 500 !important; font-size: var(--sd-h1) !important; line-height: 1.08 !important; letter-spacing: -.03em !important; color: var(--sd-ink); margin: 0 0 8px !important; text-wrap: balance; max-width: 22em; }
html body .main .wrap h2:not(.phead h2):not(:first-child), html body .main .wrap h3 { font-family: var(--sd-disp); font-weight: 500; letter-spacing: -.02em; color: var(--sd-ink); }
html body .main .wrap h2:not(.phead h2):not(:first-child) { font-size: var(--sd-h2) !important; line-height: 1.15; margin: 34px 0 10px; }
html body .main .wrap h3 { font-size: 18px; margin: 22px 0 8px; }
html body .main .wrap .phead p, html body .main .wrap p.sub, html body .main .wrap p.sub1, html body .main .wrap .lead { font-size: 16px !important; line-height: 1.5; color: var(--sd-ink2); max-width: 44em; }
html body .main .wrap .phead { margin-bottom: 22px !important; }
html body .main .wrap p, html body .main .wrap li, html body .main .wrap td, html body .main .wrap .m, html body .main .wrap .xi .m { font-size: var(--sd-body); line-height: 1.5; }
html body:not(.widepage) .main .wrap table td, html body:not(.widepage) .main .wrap table th { font-size: 13.5px; padding: 10px 12px; vertical-align: top; }  /* wide data tables (search, lists) keep Dev 1's own density (Reviewer S-A) */
html body:not(.widepage) .main .wrap table th { font: 600 12px "Instrument Sans", "InstrumentSans", system-ui, sans-serif; letter-spacing: normal; text-transform: none; color: var(--sd-mute); }
/* eyebrows and labels: never below 11.5 px, AA contrast */
html body .main .wrap .k, html body .main .wrap .kick, html body .main .wrap .eyebrow, html body .main .wrap small, html body .main .wrap .meta, html body .main .wrap .cap, html body .main .wrap .hint, html body .main .wrap .note { font-size: var(--sd-label); line-height: 1.4; }
html body .main .wrap .k, html body .main .wrap .kick, html body .main .wrap .eyebrow { font-family: "Instrument Sans", "InstrumentSans", system-ui, sans-serif; letter-spacing: .02em; text-transform: none; color: var(--sd-gold-ink); font-weight: 600; }
html body .main .wrap .xi a.t { font-family: var(--sd-disp); font-size: 16.5px; font-weight: 500; }
html body .main .wrap .xi .m { font-size: 13.5px; } html body .main .wrap .xi .m b { font-weight: 500; }
html body .main .wrap small, html body .main .wrap .meta { color: var(--sd-mute); }

/* ---------- 3. container width (two page types) ---------- */
html body .main .wrap { margin-inline: auto; padding-left: 40px !important; padding-right: 40px !important; }
html body:not(.widepage) .main .wrap { max-width: var(--sd-wrap) !important; }  /* Dev 1 (3 Oct): wide data pages (body.widepage, wide.css) keep their 2400 px layout */
html body:not(.listpage):not(.widepage) .main .wrap.doc { max-width: var(--sd-wrap-read) !important; }
html body:not(.widepage) .main .wrap.nt { max-width: 1100px !important; }
html body .main .wrap.ov { padding-top: 36px !important; }
html body:not(.widepage) .main > *:not(.top2), html body:not(.widepage) .top2 > * { zoom: 1 !important; }  /* the wide data pages (search, lists) keep shell.css's .92 density zoom; resetting it cut the search table at 1920 (Reviewer S-A, 3 Oct) */
@media (max-width: 800px) { html body .main .wrap { padding-left: 18px !important; padding-right: 18px !important; } html body .main .wrap.ov { padding-top: 20px !important; } }

/* ---------- 4. buttons: one system, both themes ---------- */
html body .btn, html body button.btn, html body .xform .btn, html body .xsbtns .btn, html body .mx.foot .btn, html body .top2 .btn, html body .cta .btn, html body .hero .btn, html body .asks button, html body .search button, html body .main button:not(.thtog):not(.mnu):not(.wmbar button):not(.hgpg button):not(.cal button):not(.dbcal button):not(.pbill button):not(.rp):not(.secb):not(.hgx):not(.hgmx):not(.svf):not(.svt):not(.svp):not(.hglink):not(.hgsort):not(.cald):not(th > button):not(td > button) {  /* icon-only buttons (filter X, row tools, sort, calendar days) keep their own compact style (Reviewer S-A) */
  font-family: "Instrument Sans", "InstrumentSans", system-ui, -apple-system, sans-serif !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: normal !important; text-transform: none !important; line-height: 1 !important;
  min-height: 38px !important; padding: 11px 16px !important; border-radius: var(--sd-r) !important; border: 1px solid var(--sd-line) !important; background: transparent; color: var(--sd-ink);
  box-shadow: none !important; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
html body .btn:hover, html body .main button:not(.thtog):not(.mnu):not(.wmbar button):not(.secb):hover { border-color: var(--sd-ink) !important; }
html body .btn.go, html body .btn.primary, html body button.go, html body .btn.hgblue, html body .hgblue, html body button[type="submit"]:not(.thtog), html body .xform .btn.go, html body #pricing .mx.foot .hot .btn, html body .hcta .btn.go {
  background: var(--sd-primary-bg) !important; border-color: var(--sd-primary-bg) !important; color: var(--sd-primary-ink) !important; }
html body .btn.go:hover, html body button.go:hover, html body .hgblue:hover { background: #ffd778 !important; border-color: #ffd778 !important; }
html body .btn.danger, html body .btn.logout, html body .btn.red, html body a.btn[href*="logout"] { color: var(--sd-danger) !important; border-color: var(--sd-danger) !important; background: transparent !important; }
html body .btn:focus-visible, html body .main button:focus-visible, html body a:focus-visible { outline: 2px solid var(--sd-gold) !important; outline-offset: 2px; }
html body .btn:disabled, html body .main button:disabled { background: var(--w-line2, #cfd6df) !important; border-color: var(--w-line2, #cfd6df) !important; color: var(--sd-mute) !important; opacity: 1 !important; cursor: not-allowed; }
html body .top2 .btn.login, html body .top2 .btn.go { min-height: 34px !important; padding: 9px 14px !important; font-size: 11.5px !important; }

/* ---------- 5. form controls: one height, gold accent, no OS chrome ---------- */
html body .main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), html body .main select, html body .main textarea {
  font: 400 14px/1.3 inherit; min-height: 38px; padding: 8px 12px; border: 1px solid var(--sd-line) !important; border-radius: var(--sd-r) !important; background: var(--w-input, var(--sd-surface)); color: var(--sd-ink); box-sizing: border-box; }
html body .main select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
html body .main input:focus, html body .main select:focus, html body .main textarea:focus { outline: 2px solid var(--sd-gold); outline-offset: 1px; border-color: var(--sd-gold) !important; }
html body .main input[type="checkbox"], html body .main input[type="radio"] { accent-color: var(--sd-gold-ink); width: 16px; height: 16px; }
html[data-theme="dark"] body .main input[type="checkbox"], html[data-theme="dark"] body .main input[type="radio"] { accent-color: var(--sd-gold); }
html body .main ::placeholder { color: var(--sd-mute); opacity: 1; }
html body .main label { font-size: var(--sd-label); font-weight: 500; letter-spacing: .04em; color: var(--sd-mute); }

/* ---------- 6. cards: single border, same radius, no box-in-box ---------- */
html body .main .wrap .xi, html body .main .wrap .card, html body .main .wrap .cards > div, html body .main .wrap .tier, html body .main .wrap .plan, html body .main .wrap .sheet, html body .main .wrap .xform, html body .main .wrap .pk > div, html body .main .wrap .recg > div {
  border-radius: var(--sd-r-card) !important; border: 1px solid var(--sd-line) !important; box-shadow: none !important; background: var(--sd-surface); }
html body .main .wrap .xform .xform, html body .main .wrap .card .card, html body .main .wrap .sheet .sheet { border: 0 !important; padding: 0 !important; background: transparent !important; }
html body .main .wrap .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: stretch; }
html body .main .wrap .cards > div { padding: 22px; } html body .main .wrap .cards > div b, html body .main .wrap .cards > div h3 { font-family: var(--sd-disp); font-weight: 500; font-size: 17px; }
/* the gold-top cards whose corner clipped */
html body .main .wrap .cards > div[style*="border-top"], html body .main .wrap .gd .cards > div { overflow: hidden; }

/* ---------- 7. empty states ---------- */
html body .main .wrap .xempty { border: 1px solid var(--sd-line) !important; border-style: solid !important; border-radius: var(--sd-r-card); background: var(--sd-surface2); padding: 40px 24px !important; text-align: center; color: var(--sd-ink2); font-size: 15px; max-width: none; }
html body .main .wrap .xempty::before { content: ""; display: block; width: 36px; height: 36px; margin: 0 auto 14px; border: 2px solid var(--sd-gold-ink); border-radius: 50%; opacity: .7; background: radial-gradient(circle, var(--sd-gold-ink) 0 3px, transparent 3.5px); }
html body .main .wrap .xempty .btn, html body .main .wrap .xempty a.btn { margin-top: 14px; }
/* loading state: a quiet shimmer instead of orphaned headings */
html body .main .wrap .xempty:is([data-loading], .loading), html body .main .wrap .xempty:has(> :only-child:is(:empty)) { min-height: 120px; }

/* ---------- 8. the chat-replay panels (.demo): capped, never a big empty box ---------- */
html body .demo { max-width: 900px; min-height: 0 !important; border: 1px solid var(--sd-line) !important; border-radius: var(--sd-r-card) !important; box-shadow: none !important; background: var(--sd-surface) !important; }
html body .demo .dbar { background: var(--sd-surface2); border-bottom: 1px solid var(--sd-line); min-height: 40px; }
html body .demo .dbar i, html body .demo .dbar .dot { opacity: .9; }
html body .demo .dbar .dot:nth-child(1), html body .demo .dbar i:nth-child(1) { background: #ff5f56; } html body .demo .dbar .dot:nth-child(2), html body .demo .dbar i:nth-child(2) { background: #ffbd2e; } html body .demo .dbar .dot:nth-child(3), html body .demo .dbar i:nth-child(3) { background: #27c93f; }
html body .demo .dbody, html body .demo .dmsgs, html body .demo .dlog { min-height: 0 !important; max-height: 420px; overflow: auto; padding: 16px 18px; }
html body .demo .du, html body .demo .user { background: var(--sd-surface2); border: 1px solid var(--sd-line); border-radius: 12px; padding: 10px 14px; color: var(--sd-ink); display: inline-block; max-width: 80%; }
html body .demo:empty, html body .demo .dbody:empty { display: none; }
/* the prompt + copy row under the panel: one height, one style */
html body .main .wrap .cp, html body .main .wrap .prow, html body .main .wrap .copyrow { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
html body .main .wrap .cp code, html body .main .wrap .prow code { font: 13px/1.45 var(--sd-mono); color: var(--sd-ink); background: var(--sd-surface2); border: 1px solid var(--sd-line); border-radius: var(--sd-r); padding: 10px 12px; flex: 1 1 320px; }

/* ---------- 9. tabs, chips, pills ---------- */
html body .main .wrap .hgtab, html body .main .wrap .tabs a, html body .main .wrap .tab { font: 600 13px "Instrument Sans", "InstrumentSans", system-ui, sans-serif; letter-spacing: normal; text-transform: none; padding: 10px 14px; border-radius: 0; border: 0; border-bottom: 2px solid transparent; color: var(--sd-mute); }
html body .main .wrap .hgtab.on, html body .main .wrap .tabs a.on, html body .main .wrap .tab.on, html body .main .wrap .tab[aria-selected="true"] { color: var(--sd-ink); border-bottom-color: var(--sd-gold); background: transparent !important; }
html body .main .wrap .chip, html body .main .wrap .chipx, html body .main .wrap .pill, html body .main .wrap .tag { font-size: var(--sd-label); line-height: 1; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--sd-line); background: transparent; color: var(--sd-ink2); }
html body .main .wrap .chip.on, html body .main .wrap .chipx.on, html body .main .wrap .pill.on { background: var(--sd-gold-soft); border-color: var(--sd-gold-ink); color: var(--sd-ink); }
/* status pills (open / closed / BID etc.) keep their colours, just bigger */
html body .main .wrap .st, html body .main .wrap .status, html body .main .wrap .v { font-size: 11.5px; padding: 5px 9px; letter-spacing: .06em; }

/* ---------- 10. sidebar: one line per item, readable ---------- */
html body .side a { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 12px !important; line-height: 16px; padding: 3px 8px !important; margin: 0 6px !important;  /* Dev 1 (3 Oct): pre-layer metrics from desk.css so the menu never scrolls */ color: var(--w-text2, #1f2733); }
html[data-theme="dark"] body .side a { color: var(--w-text2, #c2cbd7); } html body .side a:hover { color: var(--w-text, #0b1019); }
html body .side a > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html body .side a > em { flex: none; margin-left: auto; font-size: 8.5px; line-height: 14px; letter-spacing: .05em; padding: 0 5px; }
html body .side a > .ic, html body .side summary .ic { flex: none; width: 14px; height: 14px; }
html body .side h6 { font-size: 10.5px; color: var(--sd-mute); }
html body .side a.cta { font-size: 11.5px; min-height: 34px; display: flex; align-items: center; justify-content: center; }
@media (min-width: 1280px) { html body .shell { grid-template-columns: 196px minmax(0, 1fr); } html body .side { width: 196px; } }

/* ---------- 11. map pages: the home-page palette ---------- */
html body .wmap { background: #0a0f16; border-color: var(--sd-line); box-shadow: none; }
html body .wmap .wmbar { background: #0c1118; border-bottom-color: rgba(238,241,246,.12); }
html body .wmap .wmbar button { background: transparent; border-color: rgba(238,241,246,.2) !important; color: #c3cbd6 !important; border-radius: var(--sd-r) !important; }
html body .wmap .wmbar button.on { background: var(--sd-gold) !important; border-color: var(--sd-gold) !important; color: #0a0d12 !important; }
html body .wmap .wmwrap { background: #0a0f16; }
html body .wmap path { fill: #1a2330; stroke: #3a4759; stroke-width: .45; } html body .wmap path.sph { fill: #0b121b !important; stroke: #26313f; stroke-width: 1.2; } html body .wmap path.grat { fill: none !important; stroke: rgba(238,241,246,.05); }
html body .wmap path.h1 { fill: #3a3321; } html body .wmap path.h2 { fill: #75602a; } html body .wmap path.h3 { fill: #c99b3a; }
html body .wmap path.has:hover, html body .wmap path.has.armed, html body .wmap path.sel { fill: var(--sd-gold); }
html body .wmap[data-region="us"] path.st { stroke: #0a0f16; stroke-width: 1.1; }
html body .wmap[data-region="us"] path.s0 { fill: #1a2330; } html body .wmap[data-region="us"] path.s1 { fill: #3a3321; } html body .wmap[data-region="us"] path.s2 { fill: #75602a; } html body .wmap[data-region="us"] path.s3 { fill: #a67e2d; } html body .wmap[data-region="us"] path.s4 { fill: #e0b457; }
html body .wmap[data-region="us"] path.has:not(.st):not(:hover) { fill: #1a2330; } html body .wmap[data-region="us"] path.st:hover, html body .wmap[data-region="us"] path.st.armed { fill: var(--sd-gold); }
html body .wmap .stl { fill: #f6f1e4; stroke: rgba(10,13,18,.75); stroke-width: .22em; }
html body .wmap .pin circle { fill: #0a0d12; stroke: var(--sd-gold); } html body .wmap .pin:hover circle, html body .wmap .pin.armed circle { fill: var(--sd-gold); stroke: #fff; } html body .wmap .pin:hover text, html body .wmap .pin.armed text { fill: #0a0d12; }
html body .wmap .pin.usp circle { fill: var(--sd-gold); stroke: #0a0d12; } html body .wmap .pin.usp text { fill: #0a0d12; }
html body .wmap .legend2 { background: rgba(10,13,18,.82); border-color: rgba(238,241,246,.16); color: #c3cbd6; border-radius: var(--sd-r); } html body .wmap .legend2 b { color: #fff; }
html body .wmap .tip { background: #0c1118; color: #eef1f6; border: 1px solid rgba(238,241,246,.2); }

/* ---------- 12. pricing matrix: real checks, Pro column, calmer banner ---------- */
html body .matrix .mx > span:not(:first-child) { font-size: 14px; }
html body .matrix .mx > span:not(:first-child):not(.hot):not(:empty) { color: var(--sd-ink); }
html body .matrix .mx.head .hot, html body .matrix .mx .hot { background: var(--sd-gold-soft); }
html body .matrix .mx.vet { background: var(--sd-surface2); color: var(--sd-ink); border-top: 1px solid var(--sd-line); font-size: 14px; }
html body .matrix .mx.vet b { color: var(--sd-gold-ink); }
html body .matrix .mx span a { text-decoration: underline dotted; text-underline-offset: 3px; }
html body .matrix { max-width: 1100px !important; margin-inline: auto !important; border-radius: var(--sd-r-card); }

/* ---------- 13. dark-mode lifts ---------- */
html[data-theme="dark"] body .main .wrap .xi, html[data-theme="dark"] body .main .wrap .card, html[data-theme="dark"] body .main .wrap .cards > div { border-color: #2f3a4d !important; }
html[data-theme="dark"] body .main .wrap hr, html[data-theme="dark"] body .main .wrap table td { border-color: #2b3445; }
html[data-theme="dark"] body a:not(.btn):not(.side a) { color: var(--w-link, #9cc4f0); }

/* ---------- 14. motion ---------- */
@media (prefers-reduced-motion: reduce) { html body * { transition: none !important; animation: none !important; } }

/* ---------- 15. guards: things the button rule must never touch ---------- */
html body .side summary, html body .side h6, html body .side h6 .secb, html body details > summary { border: 0 !important; min-height: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
html body .side h6 { font: 500 10.5px var(--sd-mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--sd-mute) !important; padding: 5px 14px 1px !important; line-height: 12px !important; }  /* 1 px per section: Dev 1's suite had the menu 769/768 at 1366x768 */
html body .side details.sgrp > summary { font-size: 12.5px !important; }
html body .wmap .wmbar button { min-height: 30px !important; padding: 6px 12px !important; font-size: 12px !important; text-transform: none; letter-spacing: 0; }
html body .main .wrap .k, html body .main .wrap .kick, html body .main .wrap .eyebrow { border: 0 !important; padding: 0 !important; width: auto; display: inline-block; background: transparent !important; }
html body .demo .rp { min-height: 28px !important; padding: 5px 10px !important; font-size: 11px !important; }

/* page eyebrow (.ovtag above the title): plain gold mono label, no box */
html body .main .wrap .ovtag { border: 0 !important; padding: 0 !important; background: transparent !important; width: auto; display: inline-block; font: 500 12px var(--sd-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--sd-gold-ink) !important; margin-bottom: 10px; }

/* ---------- 16. public pages that use .sh (pricing, about, index-style sections): same scale as the app pages ---------- */
html body .sh h2, html body .w .sh h2 { font-family: var(--sd-disp) !important; font-weight: 500 !important; font-size: var(--sd-h1) !important; line-height: 1.08 !important; letter-spacing: -.03em !important; color: var(--sd-ink) !important; text-wrap: balance; }
html body .sh p, html body .sh p.sub1 { font-size: 16px !important; color: var(--sd-ink2) !important; max-width: 44em; }
html body .sh .k { font: 500 12px var(--sd-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--sd-gold-ink); }
/* pricing matrix: the check/dash glyphs are a 1-line markup change for Dev 1 (● -> <i class="ck"></i>, – -> <i class="no"></i>); the layer styles those */
html body .matrix .mx > span > i.ck { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: var(--sd-gold-soft); position: relative; }
html body .matrix .mx > span > i.ck::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid var(--sd-gold-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
html body .matrix .mx > span > i.no { display: inline-block; width: 10px; height: 2px; background: var(--sd-mute); opacity: .6; vertical-align: middle; }

/* ---------- 17. upsell / lock cards: themed surface (was a fixed cream gradient) ---------- */
html body .main .lockcard { background: var(--sd-surface) !important; border: 1px solid var(--sd-line) !important; border-left: 3px solid var(--sd-gold-ink) !important; border-radius: var(--sd-r-card) !important; }
html[data-theme="dark"] body .main .lockcard { background: var(--w-surface2, #1b2230) !important; }
html body .main .lockcard b { color: var(--sd-ink) !important; font-family: var(--sd-disp); font-weight: 500; font-size: 18px; }


/* map calm-down (Koley: Brazil looks crazy): fills by rank, not a blazing top step; all big-count bubbles share one style */
html body .wmap path.h3 { fill: #a8862f; } html body .wmap path.h2 { fill: #6b5a2a; } html body .wmap path.h1 { fill: #3a3321; }
html body .wmap .pin circle { fill: #0a0d12; stroke: #f0c05a; stroke-width: 1.5; }
html body .wmap .pin.usp circle { fill: #0a0d12; stroke: #f0c05a; stroke-width: 2; } html body .wmap .pin.usp text { fill: #fff; }
html body .wmap .pin.usp:hover circle, html body .wmap .pin.usp.armed circle { fill: #f0c05a; } html body .wmap .pin.usp:hover text, html body .wmap .pin.usp.armed text { fill: #0a0d12; }
html body .wmap .pin text { font-weight: 600; letter-spacing: -.01em; }

/* ---------- 18. dark-mode: cards that hard-code a white surface (account sign-in, docs steps, step cards) ---------- */
html[data-theme="dark"] body .main .wrap .card, html[data-theme="dark"] body .main .wrap .sheet, html[data-theme="dark"] body .main .wrap .step, html[data-theme="dark"] body .main .wrap .steps > div, html[data-theme="dark"] body .main .wrap .acct, html[data-theme="dark"] body .main .wrap .signin, html[data-theme="dark"] body .main .wrap [class*="card"], html[data-theme="dark"] body .main .wrap .mock, html[data-theme="dark"] body .main .wrap .mini {
  background-color: var(--w-surface, #151b25) !important; color: var(--w-text, #e6ebf2); border-color: var(--w-line, #2b3445) !important; }
html[data-theme="dark"] body .main .wrap [class*="card"] p, html[data-theme="dark"] body .main .wrap .sheet p { color: var(--w-text2, #c2cbd7); }
html[data-theme="dark"] body .main .wrap .mock, html[data-theme="dark"] body .main .wrap .mini { background-color: var(--w-surface2, #1b2230) !important; }

/* top fill tier calmer still: a single dominant country must not read as a blazing blob (until the log-scale tiers land in pages.js) */
html body .wmap path.h3, html body #europe .wmap path.h3 { fill: #8a6f2a; } html body .wmap path.h2, html body #europe .wmap path.h2 { fill: #5e4f26; }
html body .wmap path.has:hover, html body .wmap path.has.armed, html body .wmap path.sel, html body #europe .wmap path.has:hover, html body #europe .wmap path.has.armed, html body #europe .wmap path.sel { fill: #f0c05a; }

html[data-theme="dark"] body .main .wrap .bf, html[data-theme="dark"] body .main .wrap section.bf { background-color: var(--w-surface, #151b25) !important; color: var(--w-text, #e6ebf2); border-color: var(--w-line, #2b3445) !important; }
html[data-theme="dark"] body .main .wrap .bf p, html[data-theme="dark"] body .main .wrap .bf small { color: var(--w-text2, #c2cbd7); }
/* headings inside dark cards (sign-in, lock cards, .bf) must use the dark-theme text colour */
html[data-theme="dark"] body .main .wrap :is(.bf, .card, .sheet, .lockcard, .xform) :is(h1, h2, h3, h4, b, strong, label) { color: var(--w-text, #e6ebf2); }
html[data-theme="dark"] body .main .wrap :is(.bf, .card, .sheet, .lockcard, .xform) :is(p, li, small, .sub) { color: var(--w-text2, #c2cbd7); }

/* ---------- 19. call chips and flags: one unmistakable set everywhere (the site's own tokens), bolder ---------- */
html body .main .v.bid, html body .main .ok:not(button):not(.btn) { background: var(--w-tint-ok, #e3f3ea) !important; color: var(--w-ok-text, #187a50) !important; border: 1.5px solid var(--w-ok-text, #187a50); }
html body .main .v.chk, html body .main .warn:not(button):not(.btn) { background: var(--w-tint-warn, #fdf1d8) !important; color: var(--w-gold-text, #8a5f12) !important; border: 1.5px solid var(--w-gold-text, #8a5f12); }
html body .main .v.pass, html body .main .bad:not(button):not(.btn) { background: var(--w-tint-bad, #fbe4e2) !important; color: var(--w-bad-text, #a3261e) !important; border: 1.5px solid var(--w-bad-text, #a3261e); }
html body .main .v { font: 800 11px var(--sd-mono); letter-spacing: .1em; padding: 4px 8px; border-radius: 3px; }

/* ---------- 20. estimate display (shared with the home page; Dev 1's ESTIMATE-DISPLAY-DRAFT): .est-src / .est-range / .est-conf.hi|.rough|.low / .est-note ---------- */
html body .main .est-src { display: block; font: 500 11px var(--sd-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sd-mute); }
html body .main .est-range { display: block; font: 600 16px var(--sd-disp); color: var(--sd-ink); }
html body .main .est-conf { display: inline-block; font: 600 11px var(--sd-mono); letter-spacing: .06em; padding: 3px 7px; border-radius: 3px; border: 1px solid; margin-top: 4px; }
html body .main .est-conf.hi { color: var(--sd-ink2); border-color: var(--sd-line); background: var(--sd-surface2); }
html body .main .est-conf.rough { color: var(--w-gold-text, #8a5f12); border-color: var(--w-gold-text, #8a5f12); background: var(--w-tint-warn, #fdf1d8); }
html body .main .est-conf.low { color: var(--w-gold-text, #8a5f12); border-color: var(--w-gold-text, #8a5f12); background: var(--w-tint-warn, #fdf1d8); font-weight: 700; }
html body .main .est-note { font-size: 12.5px; line-height: 1.45; color: var(--sd-mute); margin-top: 8px; }
/* list-page headings (Daily Sweep, Recompete Radar, Graduation Watch): same width box as the other pages (Reviewer's note) */
html body .main .wrap .phead h1, html body .main .wrap .phead h2, html body .main .wrap h1.hgh1 { max-width: 26em !important; }

/* ---------- 21. guards found on the signed-in rc1 shots (3 Oct): the dashboard calendar and the coming-due list widened the page ---------- */
/* root cause in rc1 pages.css: .calg { grid-template-columns: repeat(7, 1fr) } lets the 7 day cells grow to their min-content (91 px each > the 460 px column at 1280); .due { white-space: nowrap } at phone width */
html body .calg { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
html body .cald, html body .calw { min-width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; overflow: hidden; }
@media (max-width: 700px) { html body .due { white-space: normal !important; } html body .main a { overflow-wrap: anywhere; } html body .main .wrap > * { max-width: 100%; min-width: 0; } }
/* D1zo (16 Oct, Koley: "content ends at 1202 of 1883 px"): ONE width rule for every app page. The content fills the pane from the menu to the right edge with the same small gutter on both sides
   (1.5 to 2 rem), at any zoom; no per-page px cap (Favorites 1240, Dashboard 1270, Profile 1375, Search 1440 are gone). No cap at all (Lead: HigherGov layout; a 3000 px safety cap still left 460 px empty at 50% zoom on 1920).
   Guides, legal pages and docs keep their reading measure; the notice and opportunity pages fill the pane too (their inner 1240 / 1100 px caps go as well). Three :not(#id) beat every earlier !important rule that has at most two ids. */
@media (min-width: 801px) {
  html body .main > .wrap:not(#t2x):not(#t2y):not(#t2z):not(.guide):not(.lw):not(.prose):not(:has(> #docs-top, > .legal, > .doc-body)),
  html body .main .wrap.ov.doc:not(#t2x):not(#t2y):not(#t2z):not(.guide):not(.lw):not(.prose):not(:has(> #docs-top, > .legal, > .doc-body)) {
    width: 100% !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important;
    padding-left: clamp(1.5rem, 1.5vw, 2rem) !important; padding-right: clamp(1.5rem, 1.5vw, 2rem) !important; box-sizing: border-box;
  }
  html body .main .wrap.nt:not(#t2x):not(#t2y):not(#t2z) .nt-layout-wrap, html body #ntbody.nt-rows:not(#t2x):not(#t2y):not(#t2z), html body .main .nai-opportunity:not(#t2x):not(#t2y):not(#t2z) { max-width: none !important; }
}
/* D1zo item 3 (Koley: Company Profile looks bigger than Search): buttons and form fields on the Profile page were 16 px next to 15 px (Dashboard buttons, Search fields) and 13-14 px (Search table, labels).
   Desktop only: at phone width the fields stay 16 px (iOS zooms into anything smaller). Title 26 and paragraphs 15 already match the other pages. */
@media (min-width: 801px) {
  html body .wrap:has(#cp-load):not(#t2x):not(#t2y):not(#t2z) :is(.btn, button, select, input, textarea):not(#t2w):not(#t2v):not(#t2u) { font-size: 15px !important; }
}