/* ============================================================
   Backbone Atlas — premium UI
   Brand tokens match Backbone Solutions brand.html verbatim
   (Navy 900/800/700 · Gold · Fraunces/Poppins/Open Sans)
   ============================================================ */
@font-face { font-family: "Fraunces"; font-weight: 400 600; font-style: normal; font-display: swap;
  src: url("/static/fonts/fraunces.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/poppins400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/static/fonts/poppins500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/static/fonts/poppins600.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/static/fonts/poppins700.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-weight: 300 600; font-style: normal; font-display: swap;
  src: url("/static/fonts/opensans.woff2") format("woff2"); }

:root {
  /* brand — Navy 900 #0B1220 · Navy 800 #0F172A · Navy 700 #1B2A47 · Gold #C9A24A */
  --navy: #0F172A;
  --navy-2: #0B1220;
  --navy-soft: #1B2A47;
  --gold: #C9A24A;
  --gold-lt: #DDBB63;
  --gold-dk: #A5822F;
  --font-display: "Fraunces", Georgia, serif;
  --font-head: "Poppins", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-body: "Open Sans", -apple-system, "Segoe UI", system-ui, sans-serif;
  /* surfaces */
  --bg: #f5f6f9;
  --bg-2: #eef1f5;
  --panel: #ffffff;
  --ink: #1a2434;
  --ink-soft: #43526b;
  --muted: #5f6d80;
  --line: #e6eaf0;
  --line-strong: #d6dce6;
  /* semantic */
  --brand: #0F172A;
  --brand-2: #2f6fb0;
  --accent: #eef3f8;
  --ok: #1a7a48; --ok-bg: #e6f5ec;
  --warn: #a8651a; --warn-bg: #fbf0e2;
  --bad: #b42318; --bad-bg: #fbeae8;
  --shadow: 0 1px 2px rgba(16,26,46,.04), 0 4px 16px rgba(16,26,46,.06);
  --shadow-lg: 0 8px 30px rgba(16,26,46,.12);
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1420; --bg-2: #0b111b; --panel: #16202f; --ink: #e7edf5; --ink-soft: #b3c0d3;
    --muted: #7f8ea3; --line: #223046; --line-strong: #2c3c56; --accent: #1a2739;
    --brand-2: #6aa8d8; --ok-bg: #10281b; --warn-bg: #2a1e0e; --bad-bg: #2a1210;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.35);
    --shadow-lg: 0 8px 30px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --bg: #0e1420; --bg-2: #0b111b; --panel: #16202f; --ink: #e7edf5; --ink-soft: #b3c0d3;
  --muted: #7f8ea3; --line: #223046; --line-strong: #2c3c56; --accent: #1a2739;
  --brand-2: #6aa8d8; --ok-bg: #10281b; --warn-bg: #2a1e0e; --bad-bg: #2a1210;
}
:root[data-theme="light"] {
  --bg: #f5f6f9; --bg-2: #eef1f5; --panel: #ffffff; --ink: #1a2434; --ink-soft: #43526b;
  --muted: #5f6d80; --line: #e6eaf0; --line-strong: #d6dce6; --accent: #eef3f8;
  --brand-2: #2f6fb0; --ok-bg: #e6f5ec; --warn-bg: #fbf0e2; --bad-bg: #fbeae8;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 15px/1.55 var(--font-body);
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- app shell: sidebar + content ---------- */
.app { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
.sidebar {
  background: linear-gradient(178deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #cdd6e6; padding: 18px 14px 28px; position: sticky; top: 0; height: 100vh;
  overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.sidebar .logo {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px 16px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar .logo .mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: linear-gradient(150deg, var(--navy-soft), var(--navy-2));
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 8px rgba(11,18,32,.3);
}
.mark svg { width: 20px; height: 20px; }
.sidebar .logo .txt { font: 700 16px var(--font-head); color: #fff; letter-spacing: .01em; line-height: 1.1; }
.sidebar .logo .txt small { display: block; font-weight: 500; font-size: 10.5px; letter-spacing: .16em;
  color: var(--gold-lt); text-transform: uppercase; margin-top: 2px; font-family: var(--font-head); }
.nav-group { font: 600 10.5px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: #6f809c;
  padding: 14px 12px 5px; }
/* Collapsible nav groups. A flat list of thirty destinations makes every one of them
   equally hard to find; groups collapse, remember their state per browser, and the
   group holding the current page is forced open so you can never lose your place. */
button.nav-toggle { display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  border-radius: 7px; transition: color .13s; }
button.nav-toggle:hover { color: #a8b6cc; }
button.nav-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
button.nav-toggle .chev { width: 13px; height: 13px; flex: none; opacity: .6;
  transition: transform .16s ease; }
button.nav-toggle[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.nav-items { display: flex; flex-direction: column; gap: 2px; }
.nav-items[hidden] { display: none; }
/* Keyboard hint on the global search box */
.topbar-app .search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font: 600 10.5px var(--font-head); color: var(--muted); background: var(--bg-2);
  border: 1px solid var(--line-strong); border-radius: 5px; padding: 2px 6px; pointer-events: none; }
.topbar-app .search input:focus ~ kbd { display: none; }
.sidebar a.nav-link {
  display: flex; align-items: center; gap: 11px; color: #c3cddd; text-decoration: none;
  padding: 8px 12px; border-radius: 9px; font: 500 14px var(--font-head); transition: all .13s;
}
.sidebar a.nav-link svg { width: 17px; height: 17px; flex: none; opacity: .8; }
.sidebar a.nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar a.nav-link.active { background: rgba(201,162,75,.14); color: #fff; }
.sidebar a.nav-link.active svg { opacity: 1; color: var(--gold-lt); }
.sidebar a.nav-link.active { box-shadow: inset 3px 0 0 var(--gold); }

/* ---------- topbar ---------- */
.topbar-app {
  display: flex; align-items: center; gap: 14px; height: 62px; padding: 0 26px;
  background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
  box-shadow: 0 1px 0 rgba(16,26,46,.02);
}
.topbar-app .search { flex: 1; max-width: 420px; position: relative; }
.topbar-app .search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--muted); }
.topbar-app .search input {
  width: 100%; padding: 9px 12px 9px 36px; border: 1px solid var(--line-strong);
  border-radius: 999px; background: var(--bg); font-size: 13.5px;
}
.topbar-app .search input:focus { outline: none; border-color: var(--brand-2); background: var(--panel);
  box-shadow: 0 0 0 3px rgba(47,111,176,.12); }
/* Guidance quick-links, sitting between the search box and the user block. Quiet by
   default so they don't compete with the primary sidebar nav; the active page is marked
   in gold. Collapse below the search's own breakpoint, where the sidebar already carries
   these destinations and horizontal room runs out. */
.topbar-app .topnav-links { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.topbar-app .topnav-links a { font: 500 13px var(--font-head); color: var(--ink-soft);
  text-decoration: none; padding: 7px 12px; border-radius: 8px; white-space: nowrap;
  transition: background .13s, color .13s; }
.topbar-app .topnav-links a:hover { background: var(--bg-2); color: var(--ink); }
.topbar-app .topnav-links a.active { color: var(--gold-dk); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.topbar-app .topnav-links a:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
@media (max-width: 900px) { .topbar-app .topnav-links { display: none; } }

.topbar-app .spacer { flex: 1; }
.topbar-app .who { text-align: right; line-height: 1.25; }
.topbar-app .who b { font: 600 13.5px var(--font-head); color: var(--ink); display: block; }
.topbar-app .who span { font: 11.5px var(--font-head); color: var(--muted); }
.topbar-app .avatar { width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: linear-gradient(150deg, var(--navy-soft), var(--navy-2)); color: var(--gold-lt);
  display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.topbar-app .logout { color: var(--muted); text-decoration: none; font: 500 13px var(--font-head); padding: 7px 10px;
  border-radius: 8px; border: 1px solid var(--line); }
.topbar-app .logout:hover { color: var(--bad); border-color: var(--bad); }

main { max-width: 1180px; margin: 0 auto; padding: 26px 26px 60px; }

/* ---------- typography ----------
   Fraunces (the display face) was previously used only on KPI numbers. Page titles
   now carry it too: at 30px it gives the product an editorial weight that separates
   it from default SaaS, while Poppins keeps every working label crisp. Restraint is
   the point — display face for the title only, never for UI chrome. */
h1 { font: 600 clamp(25px, 3vw, 31px)/1.12 var(--font-display); margin: 0 0 18px;
  letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
h2 { font: 650 15.5px/1.3 var(--font-head); margin: 24px 0 11px; color: var(--ink); letter-spacing: -.005em; }
/* brand.html puts every heading level on the head face, not just h1-h3 */
h3, h4, h5 { font-family: var(--font-head); }
a { color: var(--brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- panels / cards ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; margin-bottom: 18px; box-shadow: var(--shadow); }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--gold-lt), var(--gold-dk)); opacity: .0; transition: opacity .15s; }
.kpi:hover::before { opacity: 1; }
.kpi .n { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--navy); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.kpi .l { font: 600 11px var(--font-head); color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
  margin-top: 3px; }
@media (prefers-color-scheme: dark) { .kpi .n { color: var(--gold-lt); } }
:root[data-theme="dark"] .kpi .n { color: var(--gold-lt); }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  margin-bottom: 18px; }
th { text-align: left; font: 650 11px var(--font-head); text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); background: var(--bg-2); padding: 11px 14px; border-bottom: 1px solid var(--line); }
td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: top; font-size: 14px; }
tr:first-child td { border-top: 0; }
tbody tr:hover td, table tr:hover td { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.winner td { background: var(--ok-bg) !important; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--navy); color: #fff; border: 0;
  border-radius: 9px; padding: 9px 17px; font: 600 14px var(--font-head); cursor: pointer;
  text-decoration: none; transition: all .14s; box-shadow: 0 1px 2px rgba(16,26,46,.12); }
.btn:hover { background: var(--navy-soft); text-decoration: none; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16,26,46,.18); }
.btn:active { transform: translateY(0); }
.btn.secondary { background: var(--panel); color: var(--navy); border: 1px solid var(--line-strong); box-shadow: none; }
.btn.secondary:hover { background: var(--bg-2); border-color: var(--brand-2); color: var(--brand-2); }
.btn.danger { background: var(--bad); }
.btn.danger:hover { background: #922017; }
.btn.gold { background: linear-gradient(145deg, var(--gold-lt), var(--gold-dk)); color: var(--navy-2); }
.btn.gold:hover { filter: brightness(1.05); }
.btn.small { padding: 5px 11px; font-size: 12.5px; border-radius: 7px; }
:root[data-theme="dark"] .btn.secondary { color: var(--gold-lt); }
@media (prefers-color-scheme: dark) { .btn.secondary { color: var(--gold-lt); } }

/* ---------- forms ---------- */
form.inline { display: inline; }
label { display: block; font: 550 12.5px var(--font-head); color: var(--ink-soft); margin: 11px 0 4px; }
input, select, textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line-strong);
  border-radius: 9px; font: inherit; font-size: 14px; background: var(--panel); color: var(--ink);
  transition: border-color .13s, box-shadow .13s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(47,111,176,.13); }
textarea { min-height: 74px; resize: vertical; }
::placeholder { color: var(--muted); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 20px; }

/* ---------- badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
  font: 650 11.5px var(--font-head); background: var(--accent); color: var(--brand); letter-spacing: .01em;
  white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
/* Inline advisory that must be noticed but is not an error — e.g. two settings that
   disagree in a way that may well be deliberate. Uses the warn tokens so it follows
   the light/dark theme instead of hardcoding a colour. */
.warn-note { margin: 0 0 12px; font-size: 13px; color: var(--warn); background: var(--warn-bg);
  border-left: 3px solid var(--warn); padding: 9px 13px; border-radius: 0 8px 8px 0; }
/* Explains what the public/private entity choice actually changes. Not a warning —
   this is confirmation of a deliberate setting, so it uses the neutral surface. */
.entity-effects { margin: 12px 0 4px; padding: 12px 15px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.entity-effects ul { margin: 7px 0 8px; padding-left: 19px; }
.entity-effects li { margin: 3px 0; }

/* ---------- bar chart rows ---------- */
.bar-row { display: grid; grid-template-columns: 190px 1fr 96px; gap: 12px; align-items: center;
  margin: 9px 0; font-size: 13.5px; }
.bar { height: 16px; background: var(--bg-2); border-radius: 8px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 8px;
  background: linear-gradient(90deg, var(--brand-2), var(--navy)); transition: width .5s ease; }
.bar-row > div:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-soft); }

.muted { color: var(--muted); font-size: 13px; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.topbar h1 { margin: 0; }
.error { background: var(--bad-bg); color: var(--bad); border-radius: 9px; padding: 11px 14px;
  margin-bottom: 14px; font-size: 14px; border: 1px solid color-mix(in srgb, var(--bad) 22%, transparent); }
.error strong { display: block; margin-bottom: 2px; }

/* ---------- negotiation threads: one card per proponent, in evaluated rank order ---------- */
.nthread { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; }
.nthread.open { border-left: 3px solid var(--gold); }
.nthread.agreed { border-left: 3px solid var(--ok); }
.nthread.closed { border-left: 3px solid var(--line-strong); }
.nthread > header { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; justify-content: space-between; }
.nthread h3 { margin: 0; font-size: 15px; }
.nrank { display: inline-block; min-width: 20px; text-align: center; border-radius: 10px; padding: 1px 8px;
  background: var(--accent); color: var(--muted); font-size: 12px; font-weight: 600; margin-right: 8px; }
.nblocked { color: var(--muted); font-size: 12.5px; font-style: italic; }

/* ---------- callout panels (alerts / my actions) ---------- */
.callout { border-radius: var(--radius); padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.callout h2 { margin-top: 0; }
.callout.gold { background: linear-gradient(140deg, color-mix(in srgb, var(--gold-lt) 16%, var(--panel)), var(--panel));
  border-color: color-mix(in srgb, var(--gold) 35%, var(--line)); }
.callout.blue { background: linear-gradient(140deg, color-mix(in srgb, var(--brand-2) 10%, var(--panel)), var(--panel));
  border-color: color-mix(in srgb, var(--brand-2) 28%, var(--line)); }
.callout .row { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: 13.5px; }

/* ---------- lifecycle progress tracker ---------- */
.tracker { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: 6px 2px 2px;
  margin-bottom: 18px; }
.tracker .step { flex: 1 1 0; min-width: 92px; text-align: center; position: relative; }
.tracker .step::before { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px;
  background: var(--line-strong); z-index: 0; }
.tracker .step:first-child::before { display: none; }
.tracker .step .dot { position: relative; z-index: 1; width: 28px; height: 28px; margin: 0 auto 7px;
  border-radius: 50%; background: var(--panel); border: 2px solid var(--line-strong); color: var(--muted);
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700; }
.tracker .step .lbl { font: 11.5px var(--font-head); color: var(--muted); line-height: 1.3; padding: 0 3px; }
.tracker .step.done .dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.tracker .step.done::before { background: var(--ok); }
.tracker .step.current .dot { background: linear-gradient(150deg, var(--gold-lt), var(--gold-dk));
  border-color: var(--gold-dk); color: var(--navy-2); box-shadow: 0 0 0 4px rgba(201,162,75,.22); }
.tracker .step.current .lbl { color: var(--ink); font-weight: 650; }
.tracker .step.stopped .dot { background: var(--bad); border-color: var(--bad); color: #fff; }
.tracker .step.stopped .lbl { color: var(--bad); font-weight: 650; }

/* ---------- empty states ---------- */
.empty { text-align: center; padding: 46px 20px; color: var(--muted); }
.empty img { width: 132px; height: 132px; opacity: .9; margin-bottom: 14px; }
.empty h3 { margin: 0 0 6px; color: var(--ink); font-size: 16px; }

/* ---------- login / register ---------- */
.auth { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; }
.auth .brandside {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff;
  padding: 60px 56px; display: flex; flex-direction: column; justify-content: space-between;
  /* gap stops the footer butting against the feature list once the copy grows;
     space-between alone lets them touch as soon as content fills the panel */
  gap: 40px; position: relative; overflow: hidden;
}
/* Optional hero art — drop an image at /static/img/login-bg.png and it appears
   behind the copy. The navy scrim on top is part of the same layer, so text stays
   readable over any photograph; with no image present the scrim alone renders as
   a clean gradient, so the page never looks broken while art is being sourced. */
.auth .brandside::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(155deg, rgba(11,18,32,.93) 0%, rgba(11,18,32,.80) 42%, rgba(11,18,32,.58) 100%),
    url("/static/img/login-bg.png");
  background-size: cover; background-position: center; }
.auth .brandside > * { position: relative; z-index: 1; }
.auth .brandside::after { content: ""; position: absolute; right: -140px; bottom: -140px; width: 440px; height: 440px;
  border-radius: 50%; background: radial-gradient(circle, rgba(201,162,75,.26), transparent 70%); z-index: 0; }
.auth .brandside .mark { width: 66px; height: 66px; border-radius: 18px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); display: grid; place-items: center;
  box-shadow: 0 4px 20px rgba(11,18,32,.45); }
.auth .brandside .mark svg { width: 36px; height: 36px; }

/* Two-part wordmark: house name in Poppins, product beneath it in gold small caps,
   separated by a hairline rule. Same lockup as the sidebar, sized for the hero. */
.auth .brandside .wordmark { margin: 20px 0 22px; font: 700 26px var(--font-head);
  color: #fff; letter-spacing: .01em; line-height: 1.05; }
.auth .brandside .wordmark span { display: block; margin-top: 7px; padding-top: 7px;
  font: 500 12px var(--font-head); letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold-lt); border-top: 1px solid rgba(255,255,255,.16); max-width: 210px; }

/* gold eyebrow pill — the brand guide's own hero pattern */
.auth .brandside .eyebrow { display: inline-flex; align-items: center; gap: 9px;
  font: 600 12px var(--font-head); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-lt); background: rgba(201,162,74,.12); border: 1px solid rgba(201,162,74,.30);
  padding: 8px 16px; border-radius: 999px; margin: 30px 0 0; }
.auth .brandside .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-lt); box-shadow: 0 0 0 4px rgba(221,187,99,.20); }

.auth .brandside h1 { font-family: var(--font-display); font-weight: 500; color: #fff;
  font-size: clamp(34px, 3.1vw, 50px); line-height: 1.1; margin: 22px 0 18px;
  max-width: 15ch; letter-spacing: -.02em; }
/* the brand's hero accent: gold italic on the phrase that matters */
.auth .brandside h1 .accent { color: var(--gold-lt); font-style: italic; }
.auth .brandside p { color: #c2cee2; font-size: clamp(15.5px, 1.1vw, 18px); max-width: 44ch; line-height: 1.65; font-weight: 300; }
.auth .brandside .feats { display: flex; flex-direction: column; gap: 16px; margin-top: 38px; font-family: var(--font-head); }
.auth .brandside .feats div { display: flex; align-items: center; gap: 14px; color: #e2e9f4;
  font-size: clamp(14.5px, 1vw, 16.5px); font-weight: 500; }
.auth .brandside .feats div::before { content: "✓"; width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: rgba(201,162,75,.20); border: 1px solid rgba(201,162,74,.34);
  color: var(--gold-lt); display: grid; place-items: center; font-size: 14px; font-weight: 700; }

/* Capability strip — shows the breadth "Source-to-Pay" alone doesn't spell out. A quiet
   wrapped set of chips: enough to read "this does a lot" at a glance without competing
   with the headline. Each chip carries a small gold marker. */
.auth .brandside .caps-label { margin-top: 34px; font: 600 11px var(--font-head);
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold-lt); }
.auth .brandside .caps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.auth .brandside .caps span { display: inline-flex; align-items: center; gap: 7px;
  font: 500 12.5px var(--font-head); color: #dbe3ef; padding: 6px 12px 6px 10px;
  border-radius: 999px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12); white-space: nowrap; }
.auth .brandside .caps span::before { content: ""; width: 5px; height: 5px; flex: none;
  border-radius: 50%; background: var(--gold-lt); }

.auth .brandside .foot { color: #8593ab; font: 500 13px var(--font-head); position: relative; z-index: 1; }

/* The panel clips (overflow:hidden keeps the gold glow inside), so on shorter
   screens — 768px laptops, or a browser with toolbars eating height — the tall
   type would push the footer out of sight. Tighten the scale instead of letting
   content disappear. Large displays keep the full-size treatment. */
@media (max-height: 900px) {
  .auth .brandside { padding: 42px 48px; gap: 22px; }
  .auth .brandside .mark { width: 54px; height: 54px; border-radius: 15px; }
  .auth .brandside .mark svg { width: 29px; height: 29px; }
  .auth .brandside .eyebrow { margin-top: 22px; padding: 7px 14px; font-size: 11px; }
  .auth .brandside h1 { font-size: clamp(27px, 2.5vw, 36px); margin: 16px 0 12px; }
  .auth .brandside p { font-size: 15px; line-height: 1.55; }
  .auth .brandside .caps-label { margin-top: 22px; }
  .auth .brandside .caps { gap: 7px; margin-top: 11px; }
  .auth .brandside .caps span { font-size: 11.5px; padding: 5px 10px 5px 9px; }
}
.auth .formside { display: grid; place-items: center; padding: 40px; background: var(--bg); }
.auth .formside .box { width: 100%; max-width: 380px; }
.auth .formside .box h2 { font-size: 22px; color: var(--ink); margin: 0 0 4px; }
.auth .formside .box .sub { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
.auth .formside .box .btn { width: 100%; justify-content: center; padding: 11px; margin-top: 8px; }

/* legacy login-wrap fallback */
.login-wrap { max-width: 400px; margin: 9vh auto; }
.login-wrap .brand-big { text-align: center; font: 700 27px var(--font-head); color: var(--brand); margin-bottom: 18px; }

/* ---------- page section heading ---------- */
.page-head { margin-bottom: 20px; }
.page-head .eyebrow { font: 700 11px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dk); }
.page-head h1 { margin: 4px 0 0; }
.page-head p { color: var(--muted); margin: 6px 0 0; font-size: 14px; }

/* ---------- mobile ---------- */
.menu-btn { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; z-index: 60; width: 244px; transform: translateX(-100%);
    transition: transform .2s; box-shadow: var(--shadow-lg); }
  .app.nav-open .sidebar { transform: translateX(0); }
  .menu-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--panel); cursor: pointer; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth .brandside { display: none; }
  .bar-row { grid-template-columns: 120px 1fr 80px; }
}
@media (max-width: 560px) {
  main { padding: 18px 14px 50px; }
  .topbar-app { padding: 0 14px; }
  .topbar-app .who { display: none; }
}

/* ---- Date fields: bigger calendar affordance, quick picks, plain-English echo ---- */
.datefield input[type="date"] { cursor: pointer; }
/* Enlarge and brand the native calendar button (WebKit/Blink).
   Keep it in normal flow - absolute positioning escapes the input box. */
.datefield input[type="date"]::-webkit-calendar-picker-indicator {
  width: 18px; height: 18px; padding: 2px; margin-left: 4px;
  border-radius: 5px; cursor: pointer;
  opacity: .55; transition: opacity .15s ease, background .15s ease;
}
.datefield input[type="date"]:hover::-webkit-calendar-picker-indicator,
.datefield input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1; background: rgba(201, 162, 75, .18);
}
.date-echo { font-size: 12px; color: var(--ink-soft); margin-top: 4px; min-height: 15px; }
.date-echo.warn { color: #b45309; }
/* Quick picks stay out of the way until the field is in use - they are a
   shortcut, not the primary control (the calendar itself is). */
.date-picks { display: none; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.datefield:hover .date-picks,
.datefield:focus-within .date-picks { display: flex; }
.date-pick {
  font: 500 11.5px var(--font-head); line-height: 1; cursor: pointer;
  padding: 5px 9px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink-soft);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.date-pick:hover { border-color: var(--gold); color: var(--ink); background: rgba(201, 162, 75, .10); }
.date-pick.clear { color: var(--muted); }
.date-pick.clear:hover { border-color: var(--line-strong); background: transparent; color: var(--ink-soft); }
@media (prefers-color-scheme: dark) {
  .datefield input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1.6); }
}


/* ---- Sourcing project workspace nav: one page, every section a click away ---- */
.proj-nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; gap: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px; margin: 0 0 16px;
  box-shadow: 0 4px 14px rgba(11, 18, 32, .05);
}
.proj-nav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 7px;
  font: 600 13px var(--font-head); color: var(--ink-soft); text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.proj-nav a:hover { background: rgba(201, 162, 75, .12); color: var(--ink); }
.proj-nav .chip {
  font: 600 11px var(--font-head); line-height: 1;
  padding: 3px 7px; border-radius: 999px;
  background: var(--line); color: var(--ink-soft);
}
.proj-nav .chip.warn { background: #fde8d7; color: #9a3412; }


/* ---- Source-to-pay journey: the whole process at first glance ---- */
.journey {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  border-radius: 14px; padding: 18px 20px 20px; margin: 0 0 20px;
  color: #e7edf5; overflow-x: auto;
}
.journey .eyebrow { color: var(--gold-lt); }
.journey-head { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.journey-head strong { font: 600 15px var(--font-head); }
.journey-head .muted { color: #8fa0b8; }
.journey-track { display: flex; align-items: stretch; min-width: 860px; }
.j-step {
  flex: 1; min-width: 86px; text-decoration: none; color: #b3c0d3;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 5px; padding: 8px 4px; border-radius: 10px;
  transition: background .15s ease, color .15s ease;
}
.j-step:hover { background: rgba(231, 200, 120, .10); color: #fff; }
.j-dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-soft); color: #b3c0d3;
  font-size: 12px; font-weight: 700;
  border: 1.5px solid rgba(179, 192, 211, .35);
}
.j-step.mine .j-dot { background: var(--gold); border-color: var(--gold-lt); color: var(--navy-2); }
.j-step.mine { color: #fff; }
.j-step.mine .j-name { color: var(--gold-lt); }
.j-name { font: 700 12.5px var(--font-head); display: flex; gap: 5px; align-items: center; }
.j-count {
  font: 700 10.5px var(--font-head); line-height: 1;
  background: rgba(231, 200, 120, .22); color: var(--gold-lt);
  padding: 3px 6px; border-radius: 999px;
}
.j-hint { font-size: 10.5px; color: #8fa0b8; line-height: 1.35; max-width: 110px; }
.j-step.mine .j-hint { color: #c9d4e4; }
.j-link {
  align-self: center; width: 18px; height: 2px; flex: 0 0 auto;
  background: linear-gradient(90deg, rgba(179,192,211,.35), rgba(231,200,120,.5));
  margin-top: -26px;
}
@media (max-width: 760px) { .journey-track { min-width: 760px; } }


/* ---- KPI card row (360 page, dashboard lenses) ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 0 0 18px; }
.cards .card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; box-shadow: 0 4px 14px rgba(11, 18, 32, .04); }
.cards .num { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.cards .num.warn { color: #9a3412; }
.cards .lbl { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.cards .lbl a { color: inherit; }


/* ============================================================
   Premium layer — hierarchy, not decoration
   ------------------------------------------------------------
   Three rules hold this together:
   1. GOLD MEANS "THIS NEEDS YOU". It is the only accent used on the
      attention rail, and it is used nowhere else on a landing page.
      An accent that appears everywhere signals nothing.
   2. One idea per band. Sections are separated by rhythm and a quiet
      rule, not by boxing every paragraph in its own card.
   3. Dense pages disclose progressively. A 600-line workspace becomes
      one visible section at a time.
   ============================================================ */

/* ---------- page header: quieter eyebrow, more room to breathe ---------- */
.page-head { margin-bottom: 24px; }
.page-head .eyebrow { font: 700 10.5px var(--font-head); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-dk); }
.page-head p { max-width: 74ch; }

/* ---------- section band: groups content without boxing it ---------- */
.band { margin: 30px 0 8px; display: flex; align-items: baseline; gap: 12px; }
.band h2 { margin: 0; font-size: 16.5px; }
.band .rule { flex: 1; height: 1px; background: var(--line); }
.band .band-link { font: 600 12.5px var(--font-head); white-space: nowrap; }

/* ---------- the attention rail: "what needs you", the dashboard's thesis ---------- */
.attention {
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line));
  border-radius: 14px; overflow: hidden; margin-bottom: 22px;
  box-shadow: 0 1px 2px rgba(16,26,46,.05), 0 10px 30px -18px rgba(16,26,46,.35);
}
.attention > header {
  display: flex; align-items: center; gap: 10px; padding: 14px 20px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--gold) 14%, var(--panel)), var(--panel) 70%);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line));
}
.attention > header h2 { margin: 0; font-size: 15px; }
.attention > header .count {
  font: 700 11px var(--font-head); color: var(--navy-2);
  background: linear-gradient(145deg, var(--gold-lt), var(--gold-dk));
  border-radius: 999px; padding: 3px 10px; letter-spacing: .02em;
}
.attention .rail { display: flex; flex-direction: column; }
.attention .item {
  display: flex; align-items: center; gap: 14px; padding: 13px 20px;
  border-top: 1px solid var(--line-soft, var(--line)); text-decoration: none; color: inherit;
  transition: background .12s ease;
}
.attention .item:first-child { border-top: 0; }
.attention .item:hover { background: var(--bg-2); text-decoration: none; }
.attention .item .what { flex: 1; min-width: 0; }
.attention .item .what b { display: block; font: 600 14px var(--font-head); color: var(--ink); }
.attention .item .what span { font-size: 12.5px; color: var(--muted); }
.attention .item .go { font: 600 12.5px var(--font-head); color: var(--brand-2); white-space: nowrap; }
.attention .item:hover .go { text-decoration: underline; }
/* severity dot — state carried in form as well as colour */
.attention .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted); }
.attention .dot.bad { background: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent); }
.attention .dot.warn { background: var(--warn); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 18%, transparent); }
.attention .dot.ok { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.attention .clear { padding: 22px 20px; display: flex; align-items: center; gap: 12px; color: var(--muted); }
.attention .clear svg { width: 20px; height: 20px; color: var(--ok); flex: none; }

/* ---------- "where things live" directory: orientation after time away ---------- */
.wayfind { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; margin-bottom: 8px; }
.wayfind a {
  display: block; padding: 15px 17px; border-radius: 12px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.wayfind a:hover { text-decoration: none; border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
  transform: translateY(-1px); box-shadow: 0 4px 18px -6px rgba(16,26,46,.18); }
.wayfind a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wayfind .t { display: flex; align-items: center; gap: 9px; font: 600 14px var(--font-head); color: var(--ink); }
.wayfind .t svg { width: 16px; height: 16px; color: var(--gold-dk); flex: none; }
.wayfind .d { font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; }

/* ---------- section tabs: progressive disclosure for dense workspaces ---------- */
.sectabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 18px;
  border-bottom: 1px solid var(--line); padding-bottom: 0; }
.sectabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  font: 600 13.5px var(--font-head); color: var(--muted); padding: 9px 14px 10px;
  transition: color .13s ease, border-color .13s ease;
}
.sectabs button:hover { color: var(--ink); }
.sectabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.sectabs button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 6px 6px 0 0; }
.sectabs button .chip { margin-left: 6px; }
.secpanel[hidden] { display: none; }

/* ---------- settings: grouped, navigable ---------- */
.set-nav { position: sticky; top: 74px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.set-nav a { display: block; padding: 8px 12px; border-radius: 8px; font: 500 13.5px var(--font-head);
  color: var(--ink-soft); text-decoration: none; border-left: 2px solid transparent; }
.set-nav a:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.set-nav a.on { border-left-color: var(--gold); color: var(--ink); background: var(--bg-2); }
.set-grid { display: grid; grid-template-columns: 200px 1fr; gap: 26px; align-items: start; }
@media (max-width: 880px) { .set-grid { grid-template-columns: 1fr; } .set-nav { position: static; flex-direction: row; flex-wrap: wrap; } }
.set-card { scroll-margin-top: 80px; }
.set-card > h2:first-child { margin-top: 0; }
.set-card .hint { color: var(--muted); font-size: 13px; margin: 0 0 14px; max-width: 72ch; }

/* ---------- refinements ---------- */
.panel { transition: box-shadow .16s ease; }
.btn:focus-visible, .btn.small:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
th { position: relative; }
tbody tr { transition: background .1s ease; }
/* numbers in tables line up */
td { font-variant-numeric: tabular-nums; }
td strong, td b { font-variant-numeric: normal; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .wayfind a:hover { transform: none; }
}


/* ---------- section index: orientation on long working pages ---------- */
.pageindex { position: sticky; top: 70px; z-index: 15; display: flex; gap: 3px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-radius: 10px; padding: 6px; margin: 0 0 18px;
  box-shadow: 0 4px 14px rgba(11,18,32,.05); }
.pageindex a { padding: 6px 11px; border-radius: 7px; font: 600 12.5px var(--font-head);
  color: var(--ink-soft); text-decoration: none; white-space: nowrap; transition: background .12s, color .12s; }
.pageindex a:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.pageindex a.on { background: rgba(201,162,75,.15); color: var(--ink); }
[data-index] h2[id] { scroll-margin-top: 130px; }
@media (max-width: 700px) { .pageindex { position: static; } }

/* ---------- sortable table headings ----------
   The affordance stays quiet until you approach it: a faint neutral chevron on
   hover, a solid gold one once the column is actually sorting. A table full of
   permanently-loud sort arrows reads as clutter, which is what this whole pass
   is trying to remove. */
th.sortable { cursor: pointer; user-select: none; padding-right: 22px; }
th.sortable:hover { color: var(--ink); }
th.sortable:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
th.sortable::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px;
  margin-top: -4px; opacity: 0; transition: opacity .12s ease;
  background: currentColor; clip-path: polygon(50% 0, 100% 70%, 0 70%);
}
th.sortable:hover::after { opacity: .35; }
th.sortable[aria-sort="ascending"]::after { opacity: 1; color: var(--gold-dk); }
th.sortable[aria-sort="descending"]::after { opacity: 1; color: var(--gold-dk);
  clip-path: polygon(0 30%, 100% 30%, 50% 100%); }
@media (prefers-color-scheme: dark) {
  th.sortable[aria-sort="ascending"]::after,
  th.sortable[aria-sort="descending"]::after { color: var(--gold-lt); }
}
:root[data-theme="dark"] th.sortable[aria-sort="ascending"]::after,
:root[data-theme="dark"] th.sortable[aria-sort="descending"]::after { color: var(--gold-lt); }

/* ---------- filter bar: consistent control row above a table ---------- */
.filterbar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  margin: 0 0 14px; }
.filterbar > div { min-width: 150px; }
.filterbar label { margin-top: 0; }
.filterbar .grow { flex: 1; min-width: 200px; }

/* ---------- table scroll containers ----------
   A wide table has to scroll inside its own box, otherwise it drags the whole
   page sideways and every other column on the screen goes off with it. The
   wrapper is inserted by _tablesort.html around every table; the table keeps
   width:100% so narrow tables still fill the panel and only genuinely wide
   ones scroll. The bottom margin moves to the wrapper so spacing is unchanged
   either way. */
.tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin-bottom: 18px; }
.tablescroll > table { margin-bottom: 0; }

/* ---------- page purpose: what this screen is for ---------- */
.purpose { display: flex; gap: 10px; align-items: flex-start;
  background: var(--accent); border-radius: 10px; padding: 11px 14px;
  margin: 0 0 18px; font-size: 13.5px; color: var(--ink-soft); max-width: 90ch; }
.purpose svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--brand-2); }
.purpose b { color: var(--ink); font-family: var(--font-head); font-weight: 600; }

/* ---------- form field hints ----------
   A short line under the control saying what it does, instead of a wall of
   prose above the whole section. The explanation belongs next to the decision. */
.fh { display: block; font-size: 11.5px; line-height: 1.45; color: var(--muted);
  margin: 4px 0 2px; max-width: 46ch; }
.panel .hint { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 14px; max-width: 76ch; }
.panel h2 + .hint { margin-top: -4px; }
#wtotal { font-weight: 600; }
#wtotal.bad { color: var(--bad); }