/* BidDoctor - design tokens, then layout, then components. */
:root {
  --bd-css: 1; /* boot.js checks this to know the stylesheet arrived */
  --bg: #f4f2ec;
  --surface: #ffffff;
  --surface-2: #faf9f5;
  --ink: #17282c;
  --muted: #5d6e72;
  --line: #dedbd0;
  --brand: #0b6e63;
  --brand-hover: #09594f;
  --brand-ink: #ffffff;
  --brand-soft: #dff1ee;
  --side: #0e2a2e;
  --side-ink: #cfe3e0;
  --side-active: #17474d;
  --good: #17703f;   --good-bg: #e0f2e7;
  --warn: #8a5a0b;   --warn-bg: #fbefd2;
  --bad: #a52a1d;    --bad-bg: #fbe3df;
  --info: #1d5694;   --info-bg: #e1ecf8;
  --neutral: #4a5b5f; --neutral-bg: #e8e6dd;
  --shadow: 0 1px 2px rgba(23, 40, 44, 0.06), 0 4px 16px rgba(23, 40, 44, 0.05);
  --radius: 10px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Light is the default. Dark applies only when the user picks it with the toggle
   (stored per browser, applied by /static/js/theme.js before first paint). */
:root[data-theme="dark"] {
  --bg: #0e1a1c; --surface: #152427; --surface-2: #1a2c30; --ink: #e5eeed; --muted: #94a9aa; --line: #2a3e42;
  --brand: #3cc0ac; --brand-hover: #5bd0be; --brand-ink: #06201c; --brand-soft: #173a36;
  --side: #0a1a1c; --side-ink: #b9d2cf; --side-active: #15373b;
  --good: #6fd39a; --good-bg: #163527; --warn: #f0c06a; --warn-bg: #3a2c10; --bad: #ff9a8c; --bad-bg: #432019;
  --info: #8fbcf0; --info-bg: #172d46; --neutral: #b5c6c8; --neutral-bg: #233539;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

.theme-toggle { display: inline-flex; align-items: center; gap: .45rem; background: none; border: 1px solid rgba(255, 255, 255, .18); color: var(--side-ink); border-radius: 8px; padding: .35rem .6rem; font: inherit; font-size: .82rem; cursor: pointer; }
.theme-toggle:hover { background: rgba(255, 255, 255, .06); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .when-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .when-dark { display: inline; }
:root[data-theme="dark"] .theme-toggle .when-light { display: none; }
.theme-toggle.on-light { border-color: var(--line); color: var(--ink); }
.theme-toggle.on-light:hover { background: var(--surface-2); }
.login-tools { position: fixed; top: 1rem; right: 1rem; }

/* ---- E-signing ---- */
.sign-wrap { max-width: 980px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.sign-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.pdf-frame { width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.sig-pad { width: 100%; height: 170px; border: 2px dashed var(--line); border-radius: 8px; background: #fff; touch-action: none; cursor: crosshair; display: block; }
.sig-typed { font-family: "Segoe Script", "Brush Script MT", "Lucida Handwriting", cursive; font-size: 2rem; padding: .6rem .9rem; border: 1px solid var(--line); border-radius: 8px; min-height: 64px; background: #fff; color: #10233a; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: var(--surface); border: 0; padding: .4rem .9rem; font: inherit; cursor: pointer; color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); font-weight: 600; }
.steps { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; padding: 0; list-style: none; font-size: .85rem; }
.steps li { padding: .25rem .7rem; border-radius: 99px; background: var(--neutral-bg); color: var(--neutral); }
.steps li.on { background: var(--brand); color: var(--brand-ink); font-weight: 600; }
.steps li.done { background: var(--good-bg); color: var(--good); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -0.01em; }
h1 { font-size: 1.55rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .75em; }
small, .muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.stack > * + * { margin-top: 1rem; }
.row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1 1 auto; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 55%, transparent); outline-offset: 2px; border-radius: 4px; }

/* ---- Shell ---- */
/* The background paints the sidebar colour under the sticky sidebar on long pages. */
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; background: linear-gradient(to right, var(--side) 236px, transparent 236px); }
.sidebar { background: var(--side); color: var(--side-ink); padding: 1.1rem .8rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 1.2rem; }
.brand { display: flex; align-items: center; gap: .55rem; color: #fff; font-weight: 700; font-size: 1.15rem; padding: 0 .4rem; }
.brand:hover { text-decoration: none; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand small { display: block; color: var(--side-ink); font-weight: 400; font-size: .72rem; opacity: .8; }.nav { display: flex; flex-direction: column; gap: 2px; }
.nav h4 { margin: .9rem .5rem .3rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; color: #7fa5a2; font-weight: 600; }
.nav a { color: var(--side-ink); padding: .5rem .65rem; border-radius: 8px; display: flex; align-items: center; gap: .6rem; font-size: .93rem; }
.nav a:hover { background: rgba(255, 255, 255, .06); text-decoration: none; }
.nav a.active { background: var(--side-active); color: #fff; font-weight: 600; }
.nav svg { width: 18px; height: 18px; flex: none; opacity: .85; }
/* "Install app" (public/js/install.js): looks like a menu item; instructions open beneath it */
.install-app { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.install-app[hidden] { display: none; }
.nav-btn { width: 100%; background: none; border: 0; color: var(--side-ink); padding: .5rem .65rem; border-radius: 8px; display: flex; align-items: center; gap: .6rem; font: inherit; font-size: .93rem; cursor: pointer; text-align: left; }
.nav-btn:hover, .nav-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .06); color: #fff; }
.install-help { margin: .35rem .4rem .2rem; padding: .55rem .65rem; border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--side-ink); font-size: .8rem; line-height: 1.45; }
.install-help[hidden] { display: none; }
.sidebar .me { margin-top: auto; padding: .7rem .6rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .85rem; }
.sidebar .me b { color: #fff; display: block; min-width: 0; overflow-wrap: anywhere; }
.sidebar .me form { display: inline; }
.sidebar .me .linkbtn { color: var(--side-ink); text-decoration: underline; padding: 0; }
.me-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.me-row + .me-row { margin-top: .3rem; }
.me-icon { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .14); background: none; color: var(--side-ink); cursor: pointer; padding: 0; }
.me-icon:hover, .me-icon.active { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.me-icon svg { width: 17px; height: 17px; }

/* Nothing may push a column wider than the screen: long emails, references and checksums wrap */
.grid > *, .stack > *, .checklist li > div { min-width: 0; }
.card code, .signer-email { overflow-wrap: anywhere; word-break: break-word; }
.card code { word-break: break-all; }

/* Contract stage on phones: compact progress instead of the 8-step stepper */
.stage-compact { display: none; }
.stage-compact-head { font-size: .85rem; margin-bottom: .45rem; }
.stage-compact-head b { display: block; font-size: 1rem; margin-top: .1rem; }
.stage-compact-bar { display: flex; gap: 4px; margin-bottom: .35rem; }
.stage-compact-bar i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.stage-compact-bar i.done { background: var(--brand); }
.stage-compact-bar i.current { background: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: inset 0 0 0 1.5px var(--brand); }
@media (max-width: 560px) {
  ol.stepper { display: none; } /* "ol." outranks the .stepper rule further down */
  .stage-compact { display: block; margin: .9rem 0 0; }
}

/* Tabs that scroll sideways fade at the edge where more can be swiped (app.js sets the classes) */
.tabs.more-right { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
.tabs.more-left { -webkit-mask-image: linear-gradient(to left, #000 82%, transparent); mask-image: linear-gradient(to left, #000 82%, transparent); }
.tabs.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); }

/* E-signing: one signer per row - name and status, then email (may wrap), then role */
.signer-head { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; }
.signer small { display: block; }

/* A callout whose detail opens on request */
details.callout-more > summary { cursor: pointer; list-style: none; }
details.callout-more > summary::-webkit-details-marker { display: none; }
.callout-more-link { color: var(--brand); font-weight: 600; text-decoration: underline; white-space: nowrap; }
details.callout-more[open] .callout-more-link { display: none; }
details.callout-more[open] > summary { margin-bottom: .2rem; }

/* Fields that need fixing: from the server (.has-error, app.js) or the browser's own checks
   once someone has interacted with the field (:user-invalid), so empty forms don't start red */
.field.has-error input, .field.has-error select, .field.has-error textarea,
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 18%, transparent); }
.field.has-error input:focus, .field.has-error select:focus, .field.has-error textarea:focus,
input:user-invalid:focus, select:user-invalid:focus, textarea:user-invalid:focus { border-color: var(--bad); outline-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 28%, transparent); }
.field.has-error > label { color: var(--bad); }
.field-msg { display: block; color: var(--bad); font-size: .8rem; font-weight: 600; margin-top: .25rem; }

/* Backups page: one collapsible panel per destination */
details.dest { border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; margin-top: .6rem; background: var(--surface); }
details.dest[open] { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
details.dest > summary { cursor: pointer; display: flex; align-items: center; gap: .5rem; list-style: none; }
details.dest > summary::-webkit-details-marker { display: none; }
details.dest > summary::before { content: "▸"; color: var(--muted); transition: transform .15s; }
details.dest[open] > summary::before { transform: rotate(90deg); }

/* Connectivity strip and new-version banner (public/js/status.js) */
.net-strip { position: fixed; top: 0; left: 0; right: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; padding: .5rem 1rem; background: #f4c86a; color: #3a2a05; font-size: .88rem; font-weight: 600; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.net-strip[hidden] { display: none; }
.net-strip.ok { background: #bfe8cf; color: #12422a; }
.net-strip .net-msg { display: inline-flex; align-items: center; gap: .5rem; }
.net-strip svg { width: 17px; height: 17px; flex: none; }
.net-retry { border: 1px solid currentColor; background: none; color: inherit; border-radius: 6px; padding: .15rem .6rem; font: inherit; font-size: .82rem; cursor: pointer; }
.net-retry[hidden] { display: none; }
.net-strip.nudge { animation: bd-nudge .45s; }
@keyframes bd-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.update-banner { position: fixed; right: 1rem; bottom: 1rem; z-index: 1250; width: min(360px, calc(100vw - 2rem)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius); padding: .85rem 1rem; box-shadow: 0 12px 34px rgba(0, 0, 0, .22); }
.update-banner[hidden] { display: none; }
.update-banner.warn { border-left-color: var(--bad); }
.update-msg { margin: 0 0 .6rem; font-size: .9rem; font-weight: 600; }
.update-actions { display: flex; gap: .5rem; justify-content: flex-end; }
@media (prefers-reduced-motion: reduce) { .net-strip.nudge { animation: none; } }

/* Guided tour (public/js/tour.js) */
.tour-shield { position: fixed; inset: 0; z-index: 1000; }
.tour-hole { position: fixed; z-index: 1001; border-radius: 10px; box-shadow: 0 0 0 200vmax rgba(6, 18, 20, .62); outline: 2px solid var(--brand); outline-offset: 2px; pointer-events: none; transition: left .25s, top .25s, width .25s, height .25s; }
.tour-hole[hidden] { display: block; left: 50% !important; top: 50% !important; width: 0 !important; height: 0 !important; outline: 0; }
.tour-card { position: fixed; z-index: 1002; width: min(340px, calc(100vw - 24px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem 1rem; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); transition: left .25s, top .25s; }
.tour-card.centred { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 24px)); }
.tour-card h2 { font-size: 1.1rem; margin: 0 1.6rem .4rem 0; }
.tour-card p { margin: 0; line-height: 1.5; }
.tour-count { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin-bottom: .3rem !important; }
.tour-x { position: absolute; top: .55rem; right: .6rem; width: 30px; height: 30px; border: 0; background: none; color: var(--muted); font-size: 1.4rem; line-height: 1; border-radius: 6px; cursor: pointer; }
.tour-x:hover { background: var(--surface-2); color: var(--ink); }
.tour-dots { display: flex; gap: 5px; margin: .9rem 0 .2rem; flex-wrap: wrap; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.tour-dots i.on { background: var(--brand); width: 18px; border-radius: 4px; }
.tour-nav { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .6rem; }
.tour-nav [hidden] { display: none; }
body.touring.nav-open .sidebar { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .tour-hole, .tour-card { transition: none; } }

/* Tooltips ([data-tip], drawn by app.js) and the small "i" button (ui.info) */
.tooltip { position: fixed; z-index: 1200; max-width: min(300px, calc(100vw - 16px)); background: var(--ink); color: var(--bg); padding: .45rem .65rem; border-radius: 7px; font-size: .8rem; font-weight: 400; line-height: 1.45; letter-spacing: normal; text-transform: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .22); pointer-events: none; }
.tooltip[hidden] { display: none; }
.info { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: .35rem; padding: 0; border: 1.5px solid currentColor; border-radius: 50%; background: none; color: var(--muted); font: italic 700 .68rem/1 Georgia, "Times New Roman", serif; text-transform: none; letter-spacing: 0; vertical-align: .1em; cursor: help; }
.info:hover, .info:focus-visible { color: var(--brand); }
.header-role { cursor: help; }
.header-role:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }
.main { padding: 1.5rem clamp(1rem, 3vw, 2.2rem) 3rem; min-width: 0; max-width: 1280px; width: 100%; }
.topbar { display: none; }

/* Always-visible help: top-right of every page (desktop), book icon in the top bar (mobile). */
.app-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: -.5rem 0 .6rem; }
/* Signed-in role above the page title (desktop); phones show it in the top bar instead */
.header-role { color: var(--muted); font-size: .95rem; }
.help-link { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 600; font-size: .86rem; box-shadow: var(--shadow); }
.help-link:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.help-link svg { width: 17px; height: 17px; color: var(--brand); }
.topbar-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 34px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; color: #fff; }
.topbar-btn:hover { background: rgba(255, 255, 255, .08); text-decoration: none; }
.topbar-btn svg { width: 19px; height: 19px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.page-head p { margin: 0; color: var(--muted); }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }

/* ---- Cards, grids ---- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.2rem; }
.card > h2:first-child, .card > .card-head:first-child { margin-top: 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .8rem; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.grid { display: grid; gap: 1rem; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .9rem; margin-bottom: 1.2rem; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--radius); padding: .85rem 1rem; box-shadow: var(--shadow); }
.kpi .v { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi .l { color: var(--muted); font-size: .82rem; }
.kpi.warn { border-left-color: #d49a24; } .kpi.bad { border-left-color: #cf4a39; }
.kpi a { color: inherit; }

dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.2rem; margin: 0; }
dl.facts dt { color: var(--muted); }
dl.facts dd { margin: 0; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.card .table-wrap { border: 0; border-radius: 0; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: .6rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--surface-2); position: sticky; top: 0; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--brand-soft) 45%, transparent); }
td.actions { white-space: nowrap; text-align: right; }
td .sub { display: block; color: var(--muted); font-size: .82rem; }
.empty { padding: 1.6rem; text-align: center; color: var(--muted); }

/* ---- Badges ---- */
.badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.badge-good { background: var(--good-bg); color: var(--good); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-bad { background: var(--bad-bg); color: var(--bad); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-neutral { background: var(--neutral-bg); color: var(--neutral); }

/* ---- Forms ---- */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem 1.1rem; }
.form-grid .wide { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: .25rem; }
.field label { font-weight: 600; font-size: .86rem; }
.field .req { color: var(--bad); }
.field small { font-size: .78rem; }
.field.check label { font-weight: 500; display: flex; gap: .5rem; align-items: center; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], select, textarea {
  width: 100%; padding: .5rem .65rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline: 2px solid color-mix(in srgb, var(--brand) 30%, transparent); outline-offset: 0; }
textarea { resize: vertical; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem 1rem; margin: 0 0 1rem; }
legend { font-weight: 700; padding: 0 .4rem; font-size: .9rem; }
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .95rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.2; }
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); }
.btn-danger:hover { background: var(--bad-bg); }
.btn[hidden] { display: none; } /* .btn's display would otherwise override the hidden attribute */

/* Confirmation dialog (public/js/app.js, forms with data-confirm) */
.confirm-dlg { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); padding: 1.3rem 1.4rem 1.1rem; width: min(440px, calc(100vw - 32px)); box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }
.confirm-dlg::backdrop { background: rgba(8, 20, 22, .5); }
.confirm-dlg h2 { margin: 0 0 .5rem; font-size: 1.1rem; }
.confirm-dlg p { margin: 0 0 1.1rem; line-height: 1.5; }
.confirm-dlg .row { justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.confirm-dlg .btn-danger { background: var(--bad); border-color: var(--bad); color: #fff; }
:root[data-theme="dark"] .confirm-dlg .btn-danger { color: #2a0d08; }
.btn-sm { padding: .28rem .6rem; font-size: .82rem; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); cursor: pointer; }
.linkbtn:hover { text-decoration: underline; }
form.inline { display: inline; }
.filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.filters .field { min-width: 150px; }

/* ---- Flash & callouts ---- */
.flash { border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1rem; border: 1px solid; }
.flash ul { margin: 0; padding-left: 1.1rem; }
.flash-ok { background: var(--good-bg); color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, transparent); }
.flash-error { background: var(--bad-bg); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.callout { border-left: 4px solid var(--info); background: var(--info-bg); color: var(--ink); padding: .65rem .9rem; border-radius: 0 8px 8px 0; margin-bottom: 1rem; font-size: .9rem; }
.callout.warn { border-color: #d49a24; background: var(--warn-bg); }
.callout.bad { border-color: #cf4a39; background: var(--bad-bg); }

/* ---- Contract header, stepper, tabs ---- */
.stepper { display: flex; gap: 0; margin: .9rem 0 0; padding: 0; list-style: none; overflow-x: auto; }
.stepper li { flex: 1 1 0; min-width: 96px; text-align: center; position: relative; padding-top: 26px; font-size: .76rem; color: var(--muted); }
.stepper li::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 3px; background: var(--line); }
.stepper li:first-child::before { left: 50%; } .stepper li:last-child::before { right: 50%; }
.stepper li::after { content: ""; position: absolute; top: 3px; left: calc(50% - 8px); width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 3px solid var(--line); }
.stepper li.done { color: var(--ink); } .stepper li.done::before { background: var(--brand); } .stepper li.done::after { background: var(--brand); border-color: var(--brand); }
.stepper li.current { color: var(--brand); font-weight: 700; } .stepper li.current::after { border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 4px var(--brand-soft); }
.stepper li.skipped { opacity: .45; }
/* Swipeable sideways on narrow screens. The base line is an inset shadow (inside the box) so the
   active tab's underline overlaps it without overflowing - otherwise browsers (notably Firefox)
   show a vertical scrollbar for the 2px. */
.tabs { display: flex; gap: .2rem; box-shadow: inset 0 -2px 0 var(--line); margin: 1.1rem 0 1.1rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: .55rem .7rem; color: var(--muted); font-weight: 600; font-size: .88rem; border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a.active { color: var(--brand); border-color: var(--brand); }

/* ---- Bars, board ---- */
.bar { height: 10px; background: var(--neutral-bg); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.bar.warn > i { background: #d49a24; } .bar.bad > i { background: #cf4a39; }
.funnel { display: grid; gap: .55rem; }
.funnel .f { display: grid; grid-template-columns: 128px 1fr 64px; gap: .7rem; align-items: center; font-size: .9rem; }
.funnel .f .bar { height: 14px; }
/* Pipeline: stage track (all stages always visible) + list grouped by stage */
.stage-track { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.stage-track .st { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n label" "count count" "meta meta"; column-gap: .45rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .7rem; color: var(--ink); box-shadow: var(--shadow); position: relative; }
.stage-track .st:hover { border-color: var(--brand); text-decoration: none; }
.stage-track .st.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.stage-track .st.is-empty { color: var(--muted); }
.stage-track .st.is-empty .st-count { color: var(--muted); }
.stage-track .st.has-late { box-shadow: inset 0 3px 0 var(--bad), var(--shadow); }
.stage-track .st.has-late.on { box-shadow: inset 0 3px 0 var(--bad), 0 0 0 2px var(--brand-soft); }
.st-n { grid-area: n; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: .72rem; font-weight: 700; flex: none; }
.stage-track .st-label { grid-area: label; font-size: .8rem; font-weight: 600; line-height: 1.25; align-self: center; min-width: 0; }
.stage-track .st-count { grid-area: count; font-size: 1.6rem; font-weight: 700; line-height: 1.1; margin-top: .35rem; font-variant-numeric: tabular-nums; }
.stage-track .st-meta { grid-area: meta; font-size: .75rem; color: var(--muted); }
.st-late { color: var(--bad); font-weight: 700; }
.pipe-tools { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chips { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 99px; padding: .3rem .8rem; font-size: .85rem; font-weight: 600; }
.chip:hover { border-color: var(--brand); text-decoration: none; }
.chip.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.seg a { display: inline-block; background: var(--surface); padding: .4rem .9rem; color: var(--ink); font-size: .88rem; }
.seg a:hover { text-decoration: none; background: var(--surface-2); }
.seg a[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); font-weight: 600; }
.pipe-group { margin-bottom: 1.3rem; }
.pipe-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: .3rem 1rem; flex-wrap: wrap; margin-bottom: .45rem; }
.pipe-group-head h2 { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: .5rem; }
.pipe-group-head small { color: var(--muted); }
.pipe-table td:first-child { width: 38%; }
.pipe-table tr.late td:first-child { box-shadow: inset 4px 0 0 var(--bad); }
.pipe-table .days-cell { width: 190px; }
.pipe-table .days-num { display: block; font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: .3rem; }
.pipe-table tr.late .days-num { color: var(--bad); }
@media (max-width: 1100px) { .stage-track { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  /* Compact stage rows: number + name + status on the left, count on the right */
  .stage-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin-bottom: .8rem; }
  .stage-track .st { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n label count" "n meta count"; align-items: center; column-gap: .5rem; padding: .5rem .6rem; }
  .stage-track .st-n { align-self: start; margin-top: .05rem; }
  .stage-track .st-label { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stage-track .st-count { margin: 0; font-size: 1.25rem; }
  .stage-track .st-meta { font-size: .72rem; }
  .pipe-tools { margin-bottom: .9rem; }
  .pipe-group { margin-bottom: 1.1rem; }
  .pipe-group-head { flex-direction: column; align-items: flex-start; gap: .15rem; margin-bottom: .5rem; }
  .pipe-group-head h2 { font-size: .98rem; }
  /* Rows become cards */
  .pipe-table thead { display: none; }
  .pipe-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .8rem; padding: .75rem .85rem; border-bottom: 1px solid var(--line); }
  .pipe-table tbody tr:last-child { border-bottom: 0; }
  .pipe-table td { border: 0; padding: 0; width: auto !important; }
  .pipe-table td:first-child { grid-column: 1 / -1; margin-bottom: .45rem; }
  .pipe-table td:nth-child(2) { font-size: .88rem; color: var(--muted); align-self: start; }
  .pipe-table td.num { font-size: .88rem; text-align: right; }
  .pipe-table .days-cell { grid-column: 1 / -1; margin-top: .55rem; }
  .pipe-table tr.late td:first-child { box-shadow: none; }
  .pipe-table tr.late { box-shadow: inset 4px 0 0 var(--bad); }
}
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: .8rem; overflow-x: auto; padding-bottom: .5rem; align-items: start; }
.col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem; min-height: 140px; }
.col h3 { font-size: .85rem; margin-bottom: .6rem; min-height: 2.6em; }
.col h3 span { display: block; color: var(--muted); font-weight: 400; font-size: .78rem; margin-top: .15rem; }
.tile b { word-break: break-all; }
.tile { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem; margin-bottom: .55rem; color: var(--ink); box-shadow: var(--shadow); }
.tile:hover { border-color: var(--brand); text-decoration: none; }
.tile b { display: block; font-size: .9rem; }
.tile small { display: block; }
.tile.late { border-left: 4px solid #cf4a39; }
.tile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.tile-head b { min-width: 0; }
.tile .days { flex: none; font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--neutral-bg); color: var(--neutral); border-radius: 99px; padding: .05rem .45rem; }
.tile.late .days { background: var(--bad-bg); color: var(--bad); }

.alert-row { display: grid; grid-template-columns: 8px 1fr auto; gap: .8rem; padding: .65rem 0; border-bottom: 1px solid var(--line); align-items: center; }
.alert-row:last-child { border-bottom: 0; }
.alert-row .sev { width: 8px; align-self: stretch; border-radius: 4px; background: var(--neutral-bg); }
.alert-row .sev.high { background: #cf4a39; } .alert-row .sev.medium { background: #d49a24; } .alert-row .sev.low { background: #7aa6b8; }
.alert-row b { display: block; font-size: .92rem; }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: grid; grid-template-columns: 26px 1fr; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 0; }
.tick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: .75rem; font-weight: 700; margin-top: 2px; }
.tick.ok { background: var(--good); border-color: var(--good); color: #fff; }
.tick.na { background: var(--neutral-bg); border-color: var(--neutral); color: var(--neutral); }
.tick.bad { border-color: #cf4a39; color: #cf4a39; }
.checklist form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: end; margin-top: .4rem; }
.checklist form select, .checklist form input { width: auto; min-width: 130px; padding: .3rem .5rem; font-size: .85rem; }
.checklist form input[name=note] { min-width: 200px; flex: 1; }
.ref { font-size: .75rem; color: var(--muted); }
.score { font-variant-numeric: tabular-nums; font-weight: 700; }

details.more { margin-top: .8rem; }
details.more summary { cursor: pointer; font-weight: 600; color: var(--brand); }
details.more[open] summary { margin-bottom: .7rem; }

/* ---- Login ---- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(1000px 500px at 85% -10%, color-mix(in srgb, var(--brand) 18%, transparent), transparent), var(--bg); }
.login-card { width: min(420px, 100%); }
.login-card .brand { color: var(--ink); font-size: 1.5rem; margin-bottom: 1.2rem; padding: 0; }
.login-card .brand small { color: var(--muted); }

/* ---- Print (Form 49) ---- */
.print-only { display: none; }
@media print {
  body { background: #fff; color: #000; }
  .sidebar, .topbar, .no-print, .tabs { display: none !important; }
  .app { display: block; } .main { padding: 0; max-width: none; }
  .card { box-shadow: none; border-color: #999; break-inside: avoid; }
  .print-only { display: block; }
  a { color: #000; }
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; background: none; }
  .sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: 260px; transform: translateX(-100%); transition: transform .2s; }
  body.nav-open .sidebar { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .45); }
  .topbar { display: flex; align-items: center; gap: .8rem; background: var(--side); color: #fff; padding: .6rem 1rem; position: sticky; top: 0; z-index: 20; }
  .topbar [data-nav-toggle] { background: none; border: 0; color: #fff; font-size: 1.4rem; cursor: pointer; line-height: 1; }
  .topbar .theme-toggle .tt-label { display: none !important; }
  .topbar { gap: .5rem; }
  .topbar-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: .55rem; }
  .topbar-title b { flex: none; }
  .topbar-role { font-size: .82rem; font-weight: 400; color: var(--side-ink); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-header { display: none; }
  .cols-2, .cols-3, .cols-4, .cols-main { grid-template-columns: 1fr; }
  .funnel .f { grid-template-columns: 96px 1fr 44px; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* Tables -> cards on phones. Opt in with <div class="table-wrap cards">; app.js copies each
   column heading into data-label so cells read "Label  value". The first cell is the card title. */
@media (max-width: 560px) {
  .filters .field { flex: 1 1 calc(50% - .6rem); min-width: 0; }
  .filters .field:first-child, .filters .field.check { flex-basis: 100%; }
  .filters > .btn { flex: 1 1 0; justify-content: center; }
  .table-wrap.cards { border: 0; background: none; overflow: visible; border-radius: 0; }
  .table-wrap.cards table, .table-wrap.cards tbody, .table-wrap.cards tr, .table-wrap.cards td { display: block; width: auto; }
  .table-wrap.cards thead { display: none; }
  .table-wrap.cards tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .75rem .9rem; margin-bottom: .6rem; }
  .table-wrap.cards td { position: relative; border: 0; padding: .22rem 0 .22rem 7.2rem; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .table-wrap.cards td::before { content: attr(data-label); position: absolute; left: 0; top: .34rem; width: 6.6rem; color: var(--muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; line-height: 1.3; }
  .table-wrap.cards td:first-child { padding: 0 0 .5rem; margin-bottom: .35rem; border-bottom: 1px solid var(--line); font-size: 1rem; overflow-wrap: normal; }
  .table-wrap.cards td:first-child::before, .table-wrap.cards td:not([data-label])::before { content: none; }
  .table-wrap.cards td:not([data-label]):not(:first-child) { padding-left: 0; }
  .table-wrap.cards td.actions { padding-top: .55rem; text-align: left; }
  /* Inside a card (contract tabs) rows are separated by rules rather than nested cards */
  .card .table-wrap.cards tr { box-shadow: none; border-width: 0 0 1px; border-radius: 0; padding: .75rem 0; margin: 0; background: none; }
  .card .table-wrap.cards tr:last-child { border-bottom: 0; }
  .table-wrap.cards td.empty, .table-wrap.cards td[colspan] { display: block; border: 0; padding: .4rem 0; margin: 0; }
  .table-wrap.cards td:empty { display: none; }
}