/* CALIBRE Governance Fabric UI v1.2 (tool v1.2.0).
   Calm enterprise theme: light surfaces, teal primary, severity colours reserved for status.
   Self-contained: no web fonts, no external requests. Loaded by templates/base.html only;
   the printable Decision Pack keeps static/nexus.css. */

:root {
  /* colour */
  --c-bg: #f5f7fa;
  --c-surface: #ffffff;
  --c-surface-2: #f8fafc;
  --c-sunken: #eef2f6;
  --c-line: #e3e8ef;
  --c-line-strong: #cfd7e2;
  --c-ink: #0f1f3a;
  --c-ink-2: #334155;
  --c-muted: #5f6f84;
  --c-faint: #8a98aa;

  --c-primary: #0f766e;
  --c-primary-hover: #0c625b;
  --c-primary-press: #0a524c;
  --c-primary-soft: #e6f4f2;
  --c-primary-line: #b7ded9;
  --c-focus: #14b8a6;

  --c-info: #2563eb;      --c-info-soft: #eaf1ff;
  --c-low: #15803d;       --c-low-soft: #e7f6ec;
  --c-mod: #a16207;       --c-mod-soft: #fdf4dc;
  --c-high: #c2410c;      --c-high-soft: #fdeee4;
  --c-crit: #b91c1c;      --c-crit-soft: #fdeaea;
  --c-neutral-soft: #eef1f5;

  /* type */
  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px;

  /* shape */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(15, 31, 58, .05);
  --sh-2: 0 2px 6px rgba(15, 31, 58, .06), 0 1px 2px rgba(15, 31, 58, .04);
  --sh-3: 0 12px 32px rgba(15, 31, 58, .14), 0 2px 6px rgba(15, 31, 58, .06);

  /* layout */
  --nav-w: 244px;
  --top-h: 56px;
  --gap: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font); font-size: var(--fs-md); line-height: 1.5;
  color: var(--c-ink); background: var(--c-bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
p { margin: 0 0 .6em; }
code, pre, kbd { font-family: var(--mono); font-size: .92em; }
code { background: var(--c-sunken); padding: 1px 5px; border-radius: 4px; }
pre { background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: 12px; overflow: auto; }
img, svg, iframe { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: 16px 0; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: #c7ece7; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- icon ---------- */
.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ic.sm { width: 16px; height: 16px; }
.ic.xs { width: 14px; height: 14px; }

/* ---------- app shell ---------- */
.app { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: 100vh; }
.sidenav {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--c-surface); border-right: 1px solid var(--c-line);
  display: flex; flex-direction: column; padding: 14px 12px 12px;
  scrollbar-width: thin;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; color: var(--c-ink); text-decoration: none !important; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; background: var(--c-primary); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 17px; letter-spacing: -.02em;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.12);
}
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: .02em; line-height: 1.1; }
.brand-sub { font-size: 11.5px; color: var(--c-muted); line-height: 1.2; }

.nav-section { margin-top: 10px; }
.nav-label { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-faint); padding: 8px 10px 4px; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; margin: 1px 0; border-radius: var(--r-md);
  color: var(--c-ink-2); font-size: 13.5px; font-weight: 500;
  text-decoration: none !important; transition: background .12s var(--ease), color .12s var(--ease);
}
.nav-item .ic { color: var(--c-faint); transition: color .12s var(--ease); }
.nav-item:hover { background: var(--c-sunken); color: var(--c-ink); }
.nav-item:hover .ic { color: var(--c-ink-2); }
.nav-item.active { background: var(--c-primary-soft); color: var(--c-primary); font-weight: 600; }
.nav-item.active .ic { color: var(--c-primary); }
.nav-item.active::before { content: ""; position: absolute; left: -12px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c-primary); }
.nav-item .count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--c-muted); background: var(--c-sunken); border-radius: var(--r-pill); padding: 0 7px; line-height: 18px; }
.nav-item.active .count { background: #fff; color: var(--c-primary); }

.nav-foot { margin-top: auto; padding: 12px 8px 4px; border-top: 1px solid var(--c-line); font-size: 11.5px; color: var(--c-muted); }
.nav-foot .svc { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.nav-foot .svc a { color: inherit; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-faint); flex: none; }
.dot.on { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.dot.native { background: var(--c-primary); }
.nav-foot .ver { margin-top: 8px; color: var(--c-faint); font-size: 11px; line-height: 1.45; }

.content { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--top-h);
  display: flex; align-items: center; gap: 12px; padding: 0 28px;
  background: rgba(255,255,255,.88); backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--c-line);
}
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-muted); min-width: 0; }
.crumbs a { color: var(--c-muted); }
.crumbs a:hover { color: var(--c-ink); }
.crumbs .sep { color: var(--c-line-strong); }
.crumbs .here { color: var(--c-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .spacer { flex: 1; }
.search-trigger {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 10px; min-width: 240px;
  background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r-md);
  color: var(--c-faint); font: inherit; font-size: 13px; cursor: pointer; transition: border-color .12s, background .12s;
}
.search-trigger:hover { border-color: var(--c-line-strong); background: #fff; color: var(--c-muted); }
.search-trigger kbd { margin-left: auto; font-size: 11px; color: var(--c-muted); border: 1px solid var(--c-line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: #fff; }
.top-link { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: var(--r-md); color: var(--c-muted); font-size: 13px; text-decoration: none !important; }
.top-link:hover { background: var(--c-sunken); color: var(--c-ink); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--c-info-soft); color: var(--c-info); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.topbar .menu-btn { display: none; }

.page { padding: 26px 28px 56px; width: 100%; max-width: 1360px; }
.page.narrow { max-width: 1040px; }

.demo-strip {
  display: flex; align-items: center; gap: 10px; padding: 7px 28px; font-size: 12.5px;
  background: #fff8e6; border-bottom: 1px solid #f5e1ad; color: #6b4e0a;
}
.demo-strip .ic { color: #b7791f; }
.demo-strip .x-btn { margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; padding: 2px; border-radius: 4px; display: inline-grid; }
.demo-strip .x-btn:hover { background: rgba(0,0,0,.06); }

/* top progress bar (navigation feedback) */
#nprogress { position: fixed; z-index: 100; top: 0; left: 0; height: 2.5px; width: 0; background: var(--c-primary); box-shadow: 0 0 8px rgba(15,118,110,.5); opacity: 0; transition: width .25s var(--ease), opacity .3s; }
#nprogress.run { opacity: 1; }

/* ---------- page header ---------- */
.ph { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ph-main { min-width: 0; flex: 1 1 420px; }
.ph h1, .ph-title { margin: 0; font-size: var(--fs-2xl); line-height: 1.2; font-weight: 700; letter-spacing: -.015em; color: var(--c-ink); }
.ph .sub { margin: 6px 0 0; color: var(--c-muted); font-size: 14px; max-width: 760px; }
.ph .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; font-size: 13px; color: var(--c-muted); }
.ph .meta b { color: var(--c-ink-2); font-weight: 600; }
.ph-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }

/* ---------- surfaces ---------- */
.panel, .card {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: 20px; margin: 0 0 var(--gap);
}
.panel.flush { padding: 0; overflow: hidden; }
.panel.tight { padding: 14px 16px; }
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.panel-h h2, .panel-h h3, .panel-title { margin: 0; font-size: 15.5px; font-weight: 650; color: var(--c-ink); letter-spacing: -.005em; }
.panel-h .sub, .panel-sub { margin: 2px 0 0; color: var(--c-muted); font-size: 12.5px; }
.panel.flush .panel-h { padding: 16px 20px 0; }
.card h2 { font-size: 15.5px; font-weight: 650; color: var(--c-ink); margin: 0 0 10px; }
.card h3 { font-size: 14px; font-weight: 650; color: var(--c-ink); margin: 14px 0 8px; }
.card > h3:first-child, .card > h2:first-child { margin-top: 0; }
main > h2, .page > h2 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.015em; margin: 0 0 6px; }
.page > h2 + p.muted, .page > h2 + .muted { font-size: 14px; margin-bottom: 18px; }

.grid { display: grid; gap: var(--gap); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.g-side { grid-template-columns: minmax(0, 1fr) 340px; }
.grid > .panel, .grid > .card { margin: 0; }
.stack > * + * { margin-top: var(--gap); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.grid-2 > .card, .grid-3 > .card { margin: 0; }
.mb { margin-bottom: var(--gap); }
.mt { margin-top: var(--gap); }

/* ---------- metric cards ---------- */
.metric {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); padding: 16px 18px; min-width: 0; display: block; color: inherit; text-decoration: none !important;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
a.metric:hover { border-color: var(--c-primary-line); box-shadow: var(--sh-2); transform: translateY(-1px); }
.metric .m-label { font-size: 12.5px; font-weight: 600; color: var(--c-muted); display: flex; align-items: center; gap: 6px; }
.metric .m-value { font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.metric .m-value small { font-size: 15px; font-weight: 600; color: var(--c-muted); letter-spacing: 0; }
.metric .m-foot { font-size: 12px; margin-top: 4px; color: var(--c-muted); }
.m-foot.good { color: var(--c-low); } .m-foot.warn { color: var(--c-mod); } .m-foot.bad { color: var(--c-crit); } .m-foot.info { color: var(--c-primary); }

/* legacy kpi tiles (secondary pages) */
.kpi { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--sh-1); text-align: left; }
.kpi .num { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--c-ink); line-height: 1.2; }
.kpi .lbl { font-size: 12px; color: var(--c-muted); margin-top: 4px; }

/* ---------- buttons ---------- */
.btn, button.btn, a.btn, .f-action, button:not([class]), input[type=submit] {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: var(--r-md);
  font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer; text-decoration: none !important; user-select: none;
  transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease), box-shadow .12s var(--ease), transform .06s;
  margin: 0;
}
.btn, button:not([class]), input[type=submit] { background: var(--c-primary); color: #fff !important; box-shadow: 0 1px 1px rgba(15,31,58,.08), inset 0 -1px 0 rgba(0,0,0,.12); }
.btn:hover, button:not([class]):hover { background: var(--c-primary-hover); }
.btn:active, button:not([class]):active { background: var(--c-primary-press); transform: translateY(.5px); }
.btn.ghost, .btn.secondary, .f-action {
  background: var(--c-surface); color: var(--c-ink-2) !important; border-color: var(--c-line-strong); box-shadow: var(--sh-1);
}
.btn.ghost:hover, .btn.secondary:hover, .f-action:hover { background: var(--c-surface-2); border-color: #b9c4d3; color: var(--c-ink) !important; }
.btn.quiet { background: transparent; color: var(--c-ink-2) !important; box-shadow: none; }
.btn.quiet:hover { background: var(--c-sunken); }
.btn.danger { background: var(--c-crit); }
.btn.danger:hover { background: #991b1b; }
.btn.sm, .f-action.sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.btn.lg { height: 42px; padding: 0 18px; font-size: 14.5px; }
.btn.icon { width: 36px; padding: 0; }
.btn[disabled], .btn.is-loading { opacity: .7; cursor: progress; pointer-events: none; }
.btn .spin { display: none; }
.btn.is-loading .spin { display: inline-block; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* dropdown menu (details based, no JS needed) */
.dd { position: relative; display: inline-block; }
.dd > summary { list-style: none; }
.dd > summary::-webkit-details-marker { display: none; }
.dd-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 230px;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 6px;
  animation: pop .12s var(--ease);
}
.dd-menu a, .dd-menu button.dd-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--c-ink-2); font: inherit; font-size: 13.5px; text-align: left; background: none; border: 0; cursor: pointer; text-decoration: none !important;
}
.dd-menu a:hover, .dd-menu button.dd-item:hover { background: var(--c-sunken); color: var(--c-ink); }
.dd-menu .ic { color: var(--c-faint); }
.dd-menu hr { margin: 6px 0; }
.dd-menu .dd-note { padding: 6px 10px; font-size: 12px; color: var(--c-muted); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- status pills ---------- */
.pill, .badge, .tag {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle;
  background: var(--c-neutral-soft); color: var(--c-ink-2); border: 0; margin: 0;
}
.pill.dot-l::before, .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.tag { font-weight: 500; background: var(--c-sunken); color: var(--c-muted); height: 20px; padding: 0 7px; font-size: 11.5px; border-radius: 5px; }
.tag.mono { font-family: var(--mono); font-size: 11px; }
.badge.Low, .badge.Approve, .badge.APPROVE, .pill.low, .pill.ok, .badge.Complete, .badge.Permit, .badge.Implemented, .badge.applicable, .badge.Current { background: var(--c-low-soft); color: var(--c-low); }
.badge.Medium, .badge.Moderate, .pill.mod, .pill.warn, .badge.APPROVE_WITH_CONDITIONS, .badge.REQUIRES_REMEDIATION, .badge.potentially_applicable, .badge.Partially, .badge.In_Progress, .badge.Escalate, .badge.Pending { background: var(--c-mod-soft); color: var(--c-mod); }
.badge.High, .pill.high, .badge.ESCALATE_TO_RISK_COMMITTEE { background: var(--c-high-soft); color: var(--c-high); }
.badge.Critical, .pill.crit, .pill.bad, .badge.DO_NOT_APPROVE, .badge.Deny, .badge.Rejected { background: var(--c-crit-soft); color: var(--c-crit); }
.badge.PENDING, .badge.Open, .badge.Waived, .badge.neutral, .badge.NA, .badge.not_enough_information, .badge.Inherent, .pill.neutral { background: var(--c-neutral-soft); color: var(--c-muted); }
.pill.info, .badge.info { background: var(--c-info-soft); color: var(--c-info); }
.pill.brand { background: var(--c-primary-soft); color: var(--c-primary); }
.pill.sample { background: #f1ecfd; color: #6d28d9; height: 18px; font-size: 10.5px; letter-spacing: .04em; padding: 0 6px; border-radius: 4px; }
.pill.lg { height: 26px; padding: 0 11px; font-size: 12.5px; }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--c-line); margin: 0 0 20px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px 11px;
  font: inherit; font-size: 13.5px; font-weight: 550; color: var(--c-muted); background: none; border: 0; cursor: pointer; white-space: nowrap;
  border-radius: var(--r-md) var(--r-md) 0 0; text-decoration: none !important; transition: color .12s;
}
.tab:hover { color: var(--c-ink); background: var(--c-sunken); }
.tab[aria-selected="true"], .tab.active { color: var(--c-primary); font-weight: 650; }
.tab[aria-selected="true"]::after, .tab.active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--c-primary); }
.tab .count { font-size: 11px; font-weight: 600; color: var(--c-muted); background: var(--c-sunken); border-radius: var(--r-pill); padding: 0 7px; line-height: 18px; }
.tab[aria-selected="true"] .count { background: var(--c-primary-soft); color: var(--c-primary); }
.tabpanel[hidden] { display: none !important; }
.tabpanel { animation: fadein .18s var(--ease); }
@keyframes fadein { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* segmented control */
.seg { display: inline-flex; padding: 3px; background: var(--c-sunken); border-radius: var(--r-md); gap: 2px; }
.seg label, .seg a, .seg button { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 550; color: var(--c-muted); cursor: pointer; text-decoration: none !important; background: none; border: 0; font-family: inherit; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked), .seg a.active, .seg button.active { background: #fff; color: var(--c-ink); box-shadow: var(--sh-1); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; background: transparent; }
th, td { padding: 11px 14px; text-align: left; vertical-align: middle; border: 0; border-bottom: 1px solid var(--c-line); }
th { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--c-muted); background: var(--c-surface-2); white-space: nowrap; }
thead th:first-child { border-top-left-radius: var(--r-md); }
thead th:last-child { border-top-right-radius: var(--r-md); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .1s; }
tbody tr:hover { background: #f9fbfc; }
tr[data-href] { cursor: pointer; }
tr[data-href]:hover td:first-child { box-shadow: inset 2px 0 0 var(--c-primary); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .t-main { font-weight: 600; color: var(--c-ink); }
td .t-sub { font-size: 12px; color: var(--c-muted); margin-top: 1px; }
td.chev { width: 28px; color: var(--c-faint); }
tr[data-href]:hover td.chev { color: var(--c-primary); }
.panel.flush table th:first-child, .panel.flush table td:first-child { padding-left: 20px; }
.panel.flush table th:last-child, .panel.flush table td:last-child { padding-right: 20px; }
.panel.flush thead th { border-radius: 0; }
.card table { margin-top: 6px; }
.table-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; font-size: 12.5px; color: var(--c-muted); border-top: 1px solid var(--c-line); }

/* ---------- filter bar ---------- */
.filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 20px; border-bottom: 1px solid var(--c-line); }
.input-icon { position: relative; flex: 1 1 260px; max-width: 380px; }
.input-icon .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--c-faint); pointer-events: none; }
.input-icon input { padding-left: 34px !important; }
.filterbar select { width: auto; min-width: 140px; }
.filterbar .count-lbl { margin-left: auto; font-size: 12.5px; color: var(--c-muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--r-pill);
  border: 1px solid var(--c-line-strong); background: #fff; color: var(--c-ink-2); font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer;
  transition: all .12s var(--ease);
}
.chip:hover { border-color: #b9c4d3; background: var(--c-surface-2); }
.chip[aria-pressed="true"] { background: var(--c-primary-soft); border-color: var(--c-primary-line); color: var(--c-primary); }
.chip .n { font-size: 11px; color: var(--c-muted); }

/* ---------- forms ---------- */
label { display: block; font-size: 13px; font-weight: 600; color: var(--c-ink-2); margin: 14px 0 6px; }
label .opt, .hint { font-weight: 400; color: var(--c-muted); font-size: 12.5px; }
.hint { margin-top: 5px; display: block; }
input[type=text], input[type=url], input[type=email], input[type=password], input[type=number], input[type=search], input[type=date], input:not([type]), textarea, select {
  width: 100%; min-height: 38px; padding: 8px 11px; border: 1px solid var(--c-line-strong); border-radius: var(--r-md);
  background: #fff; color: var(--c-ink); font: inherit; font-size: 14px; line-height: 1.4;
  transition: border-color .12s var(--ease), box-shadow .12s var(--ease);
}
input::placeholder, textarea::placeholder { color: #9aa7b8; }
input:hover, textarea:hover, select:hover { border-color: #b4c0cf; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(20,184,166,.18); }
textarea { resize: vertical; min-height: 96px; }
select { appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235f6f84' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 16px; }
select.sm, input.sm { min-height: 30px; padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
input[type=checkbox], input[type=radio] { accent-color: var(--c-primary); width: 16px; height: 16px; margin: 0; vertical-align: -3px; }
label:has(> input[type=checkbox]), label:has(> input[type=radio]) { font-weight: 500; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; font-weight: 650; font-size: 14px; color: var(--c-ink); }
.field-row { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.form-actions { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--c-line); flex-wrap: wrap; }
.form-actions .left { margin-right: auto; }
.req { color: var(--c-crit); }

/* option cards (radio as card) */
.opt-grid { display: grid; gap: 8px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.opt-card { position: relative; margin: 0; cursor: pointer; }
.opt-card input { position: absolute; opacity: 0; pointer-events: none; }
.opt-card .oc {
  height: 100%; display: flex; flex-direction: column; gap: 3px; padding: 10px 11px; border-radius: var(--r-md);
  border: 1px solid var(--c-line-strong); background: #fff; font-weight: 500; font-size: 12.5px; color: var(--c-ink-2); line-height: 1.35;
  transition: all .12s var(--ease);
}
.opt-card .oc b { font-size: 12px; color: var(--c-muted); font-weight: 650; }
.opt-card:hover .oc { border-color: #9fb0c3; background: var(--c-surface-2); }
.opt-card input:checked + .oc { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-ink); box-shadow: 0 0 0 1px var(--c-primary) inset; }
.opt-card input:checked + .oc b { color: var(--c-primary); }
.opt-card input:focus-visible + .oc { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.q-block { padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.q-block:last-child { border-bottom: 0; }
.q-title { font-weight: 650; font-size: 14px; display: flex; gap: 8px; align-items: baseline; }
.q-title .qn { color: var(--c-faint); font-weight: 600; font-size: 12.5px; }
.q-sub { color: var(--c-muted); font-size: 12.5px; margin: 2px 0 10px; }

/* toggle chips (checkbox as chip) */
.toggle-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle { position: relative; margin: 0; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle span { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--c-line-strong); background: #fff; font-size: 13px; font-weight: 550; color: var(--c-ink-2); transition: all .12s var(--ease); }
.toggle span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--c-line-strong); background: #fff; transition: all .12s; }
.toggle:hover span { border-color: #9fb0c3; }
.toggle input:checked + span { background: var(--c-primary-soft); border-color: var(--c-primary-line); color: var(--c-primary); }
.toggle input:checked + span::before { background: var(--c-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/11px no-repeat; border-color: var(--c-primary); }
.toggle input:focus-visible + span { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* method choice cards */
.choice-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice { position: relative; margin: 0; cursor: pointer; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .cc { height: 100%; display: flex; gap: 12px; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--c-line-strong); background: #fff; transition: all .12s var(--ease); font-weight: 400; }
.choice .cc .ci { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--c-sunken); color: var(--c-muted); flex: none; }
.choice .cc strong { display: block; font-size: 14px; color: var(--c-ink); margin-bottom: 2px; }
.choice .cc span { font-size: 12.5px; color: var(--c-muted); }
.choice:hover .cc { border-color: #9fb0c3; }
.choice input:checked + .cc { border-color: var(--c-primary); box-shadow: 0 0 0 1px var(--c-primary) inset; background: #fbfefd; }
.choice input:checked + .cc .ci { background: var(--c-primary); color: #fff; }

/* ---------- stepper ---------- */
.stepper { display: flex; align-items: center; gap: 0; margin: 4px 0 22px; list-style: none; padding: 0; }
.stepper li { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--c-faint); flex: 1; }
.stepper li:last-child { flex: none; }
.stepper li::after { content: ""; flex: 1; height: 2px; background: var(--c-line); margin: 0 12px; border-radius: 2px; }
.stepper li:last-child::after { display: none; }
.stepper .n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; border: 1.5px solid var(--c-line-strong); background: #fff; color: var(--c-muted); flex: none; transition: all .15s; }
.stepper li.current { color: var(--c-ink); }
.stepper li.current .n { border-color: var(--c-primary); color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-soft); }
.stepper li.done { color: var(--c-ink-2); cursor: pointer; }
.stepper li.done .n { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.stepper li.done::after { background: var(--c-primary); }
.step[hidden] { display: none !important; }

/* ---------- lists ---------- */
.action-list { display: flex; flex-direction: column; gap: 8px; }
.action-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--c-line); border-radius: var(--r-md); background: #fff;
  color: inherit; text-decoration: none !important; transition: border-color .12s, box-shadow .12s, transform .12s;
}
a.action-row:hover, button.action-row:hover { border-color: var(--c-primary-line); box-shadow: var(--sh-2); }
a.action-row:hover .ic.chev { color: var(--c-primary); transform: translateX(2px); }
.action-row .ic.chev { color: var(--c-faint); transition: transform .12s; }
.action-row .a-title { font-weight: 600; font-size: 13.5px; color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; }
.action-row .a-sub { font-size: 12px; color: var(--c-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.action-row .badge { min-width: 70px; justify-content: center; }

.kv { display: grid; grid-template-columns: minmax(110px, 40%) minmax(0, 1fr); gap: 0; margin: 0; }
.kv dt, .kv dd { padding: 9px 0; border-bottom: 1px solid var(--c-line); margin: 0; font-size: 13.5px; }
.kv dt { color: var(--c-muted); }
.kv dd { font-weight: 600; color: var(--c-ink); min-width: 0; overflow-wrap: anywhere; }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }

.bullets { margin: 0; padding: 0; list-style: none; }
.bullets li { position: relative; padding: 7px 0 7px 18px; font-size: 13.5px; border-bottom: 1px dashed var(--c-line); }
.bullets li:last-child { border-bottom: 0; }
.bullets li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-line-strong); }
.bullets.risk li::before { background: var(--c-high); }
.bullets.ok li::before { background: var(--c-low); }

.timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.timeline .t-when { font-size: 12px; font-weight: 650; color: var(--c-primary); }
.timeline .t-what { font-size: 13px; margin-top: 3px; }

/* ---------- bars ---------- */
.bar-row { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) 52px; align-items: center; gap: 12px; padding: 7px 0; font-size: 13px; }
.bar-row .bl { color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .bv { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.bar { height: 8px; background: var(--c-sunken); border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--c-primary); width: 0; transition: width .6s var(--ease); }
.bar > i.low { background: #22a35a; } .bar > i.mod { background: #d4a017; } .bar > i.high { background: #ea6a2a; } .bar > i.crit { background: #d33a3a; } .bar > i.neutral { background: #a7b3c2; } .bar > i.info { background: #3b74e6; }

.stackbar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--c-sunken); gap: 2px; }
.stackbar i { display: block; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12.5px; color: var(--c-ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* score ring */
.ring { --v: 0; --c: var(--c-primary); width: 116px; height: 116px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--c-sunken) 0); position: relative; transition: --v .6s; }
.ring::before { content: ""; position: absolute; inset: 10px; background: #fff; border-radius: 50%; }
.ring .rv { position: relative; text-align: center; line-height: 1.1; }
.ring .rv b { display: block; font-size: 26px; font-weight: 750; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ring .rv span { font-size: 11.5px; color: var(--c-muted); }

/* ---------- verdict ---------- */
.verdict-card { display: flex; gap: 16px; align-items: center; padding: 16px 20px; border-radius: var(--r-lg); border: 1px solid var(--c-line); background: #fff; box-shadow: var(--sh-1); margin-bottom: var(--gap); border-left: 4px solid var(--c-faint); flex-wrap: wrap; }
.verdict-card .v-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--c-neutral-soft); color: var(--c-muted); }
.verdict-card .v-main { flex: 1 1 320px; min-width: 0; }
.verdict-card .v-label { font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.verdict-card .v-title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin-top: 1px; }
.verdict-card .v-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; color: var(--c-muted); margin-top: 4px; }
.verdict-card .v-facts b { color: var(--c-ink-2); }
.verdict-card.APPROVE, .verdict-card.APPROVE_WITH_CONDITIONS { border-left-color: var(--c-low); } .verdict-card.APPROVE .v-ic, .verdict-card.APPROVE_WITH_CONDITIONS .v-ic { background: var(--c-low-soft); color: var(--c-low); }
.verdict-card.REQUIRES_REMEDIATION { border-left-color: #d4a017; } .verdict-card.REQUIRES_REMEDIATION .v-ic { background: var(--c-mod-soft); color: var(--c-mod); }
.verdict-card.ESCALATE_TO_RISK_COMMITTEE { border-left-color: var(--c-high); } .verdict-card.ESCALATE_TO_RISK_COMMITTEE .v-ic { background: var(--c-high-soft); color: var(--c-high); }
.verdict-card.DO_NOT_APPROVE { border-left-color: var(--c-crit); } .verdict-card.DO_NOT_APPROVE .v-ic { background: var(--c-crit-soft); color: var(--c-crit); }

/* legacy decision banner (secondary pages) */
.decision-banner { border-radius: var(--r-lg); padding: 16px 20px; color: #fff; margin: 0 0 var(--gap); background: var(--c-muted); }
.decision-banner .label { font-size: 11.5px; letter-spacing: .06em; font-weight: 650; opacity: .9; }
.decision-banner .verdict { font-size: 20px; font-weight: 700; }
.decision-banner.APPROVE, .decision-banner.APPROVE_WITH_CONDITIONS { background: var(--c-low); }
.decision-banner.REQUIRES_REMEDIATION { background: #b7791f; }
.decision-banner.ESCALATE_TO_RISK_COMMITTEE { background: var(--c-high); }
.decision-banner.DO_NOT_APPROVE { background: var(--c-crit); }

/* ---------- callouts, banners, explainer ---------- */
.callout, .help, .banner { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--r-md); font-size: 13px; line-height: 1.5; border: 1px solid var(--c-line); background: var(--c-surface-2); color: var(--c-ink-2); margin: 0 0 var(--gap); }
.callout .ic { margin-top: 1px; color: var(--c-muted); }
.callout.info, .help { background: var(--c-info-soft); border-color: #d1e0ff; }
.callout.info .ic { color: var(--c-info); }
.callout.warn, .banner.warn { background: #fff8e6; border-color: #f5e1ad; color: #5c430a; }
.callout.warn .ic { color: #b7791f; }
.callout.bad, .banner.err { background: var(--c-crit-soft); border-color: #f6caca; color: #7f1d1d; }
.callout.bad .ic { color: var(--c-crit); }
.callout.ok, .banner.ok { background: var(--c-low-soft); border-color: #bfe5cc; color: #14532d; }
.callout.ok .ic { color: var(--c-low); }
.help { display: block; border-left: 3px solid var(--c-info); }

details.explainer { border: 1px solid var(--c-line); border-radius: var(--r-md); background: var(--c-surface); margin: 0 0 var(--gap); }
details.explainer > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--c-ink-2); user-select: none; }
details.explainer > summary::-webkit-details-marker { display: none; }
details.explainer > summary .ic { color: var(--c-info); }
details.explainer > summary::after { content: ""; margin-left: auto; width: 16px; height: 16px; background: currentColor; opacity: .55; transition: transform .15s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E") center/16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E") center/16px no-repeat; }
details.explainer[open] > summary::after { transform: rotate(180deg); }
details.explainer > summary:hover { background: var(--c-surface-2); border-radius: var(--r-md); }
details.explainer > .ex-body { padding: 2px 16px 14px; font-size: 13px; color: var(--c-ink-2); }
details.explainer > .ex-body > p:last-child { margin-bottom: 0; }

/* expandable list rows (findings) */
details.row-x { border-bottom: 1px solid var(--c-line); }
details.row-x:last-child { border-bottom: 0; }
details.row-x > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 92px minmax(0, 1fr) auto 18px; gap: 12px; align-items: center; padding: 11px 20px; font-size: 13.5px; }
details.row-x > summary::-webkit-details-marker { display: none; }
details.row-x > summary:hover { background: #f9fbfc; }
details.row-x > summary .ic.chev { color: var(--c-faint); transition: transform .15s; }
details.row-x[open] > summary .ic.chev { transform: rotate(90deg); color: var(--c-primary); }
details.row-x[open] > summary { background: var(--c-surface-2); }
details.row-x .rx-title { min-width: 0; }
details.row-x .rx-title b { font-weight: 600; }
details.row-x .rx-title .rx-id { font-family: var(--mono); font-size: 11.5px; color: var(--c-muted); margin-right: 6px; }
details.row-x .rx-meta { display: flex; gap: 6px; align-items: center; }
details.row-x .rx-body { padding: 4px 20px 16px 124px; font-size: 13px; color: var(--c-ink-2); background: var(--c-surface-2); }

.num-dot { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 650; background: var(--c-primary-soft); color: var(--c-primary); flex: none; }

.gl-row { display: grid; grid-template-columns: minmax(140px, 30%) minmax(0, 1fr); gap: 16px; padding: 11px 20px; border-bottom: 1px solid var(--c-line); font-size: 13.5px; }
.gl-row:last-of-type { border-bottom: 0; }
.gl-row b { color: var(--c-ink); font-weight: 600; }
@media (max-width: 560px) { .gl-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* empty state */
.empty { text-align: center; padding: 36px 20px; color: var(--c-muted); }
.empty .e-ic { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 12px; background: var(--c-sunken); display: grid; place-items: center; color: var(--c-faint); }
.empty h3 { margin: 0 0 4px; font-size: 15px; color: var(--c-ink); }
.empty p { margin: 0 0 14px; font-size: 13px; }

/* tiles (demo samples, quick starts) */
.tile {
  display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--c-line); background: #fff; box-shadow: var(--sh-1);
  color: inherit; text-decoration: none !important; transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); min-width: 0;
}
a.tile:hover { border-color: var(--c-primary-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.tile .t-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tile .t-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--c-primary-soft); color: var(--c-primary); }
.tile h3 { margin: 0; font-size: 14.5px; font-weight: 650; color: var(--c-ink); }
.tile p { margin: 0; font-size: 13px; color: var(--c-muted); }
.tile .t-foot { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--c-muted); }
.tile .t-go { margin-left: auto; color: var(--c-primary); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }

/* legacy use-case card */
.usecase { background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.usecase .title { font-weight: 650; }
.usecase .desc { color: var(--c-muted); font-size: 13px; flex: 1; }

/* ---------- toast ---------- */
#toasts { position: fixed; z-index: 90; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 420px; padding: 11px 14px; border-radius: var(--r-md); background: var(--c-ink); color: #fff; font-size: 13.5px; box-shadow: var(--sh-3); animation: toastin .2s var(--ease); }
.toast.ok .ic { color: #4ade80; } .toast.err { background: #7f1d1d; } .toast.err .ic { color: #fecaca; }
.toast.out { opacity: 0; transform: translateY(6px); transition: all .2s; }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- command palette ---------- */
.cmdk-back { position: fixed; inset: 0; z-index: 80; background: rgba(15,31,58,.28); backdrop-filter: blur(2px); display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.cmdk-back.open { display: flex; animation: fadein .12s; }
.cmdk { width: min(620px, calc(100vw - 32px)); background: #fff; border-radius: 14px; box-shadow: var(--sh-3); overflow: hidden; border: 1px solid var(--c-line); animation: pop .14s var(--ease); }
.cmdk-in { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--c-line); }
.cmdk-in .ic { color: var(--c-faint); }
.cmdk-in input { border: 0 !important; box-shadow: none !important; height: 52px; font-size: 15px; padding: 0; }
.cmdk-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.cmdk-group { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--c-faint); padding: 10px 10px 4px; }
.cmdk-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-md); color: var(--c-ink-2); font-size: 13.5px; text-decoration: none !important; }
.cmdk-item .ic { color: var(--c-faint); }
.cmdk-item .k { margin-left: auto; font-size: 11.5px; color: var(--c-faint); font-family: var(--mono); }
.cmdk-item.sel { background: var(--c-primary-soft); color: var(--c-primary); }
.cmdk-item.sel .ic { color: var(--c-primary); }
.cmdk-empty { padding: 26px; text-align: center; color: var(--c-muted); font-size: 13px; }
.cmdk-foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--c-line); font-size: 11.5px; color: var(--c-faint); background: var(--c-surface-2); }

/* ---------- misc legacy utilities ---------- */
.muted { color: var(--c-muted); }
small.muted, .muted.sm { font-size: 12.5px; }
.note { font-size: 12px; color: var(--c-muted); margin-top: 8px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cite { font-size: 12px; color: var(--c-muted); }
.loader { display: none; color: var(--c-muted); font-size: 13px; }
.htmx-request .loader, form.is-busy .loader { display: inline-flex; align-items: center; gap: 8px; }
.recent { list-style: none; margin: 0; padding: 0; }
.recent li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--c-line); font-size: 13.5px; }
.gauge { height: 8px; border-radius: 999px; background: var(--c-sunken); overflow: hidden; margin: 6px 0; }
.gauge > div { height: 100%; border-radius: 999px; }
.mono { font-family: var(--mono); font-size: 12px; }
.t-right { text-align: right; } .nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flex { display: flex; align-items: center; gap: 8px; } .flex.wrap { flex-wrap: wrap; } .flex.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.hide-sm { }

/* the long-text pages (help, about, architecture) */
.prose { font-size: 14px; line-height: 1.65; color: var(--c-ink-2); max-width: 860px; }
.prose h2 { font-size: 18px; margin: 24px 0 8px; color: var(--c-ink); }
.prose h3 { font-size: 15px; margin: 18px 0 6px; color: var(--c-ink); }
.card ul, .card ol { padding-left: 20px; margin: 6px 0; }
.card li { margin: 3px 0; }

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
  .g-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g-side { grid-template-columns: minmax(0, 1fr); }
  .opt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-main, .g-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .search-trigger { min-width: 0; }
  .search-trigger .lbl { display: none; }
}
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidenav { position: fixed; z-index: 70; left: 0; top: 0; bottom: 0; width: 280px; transform: translateX(-102%); transition: transform .2s var(--ease); box-shadow: var(--sh-3); }
  body.nav-open .sidenav { transform: none; }
  body.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 60; background: rgba(15,31,58,.3); }
  .topbar .menu-btn { display: inline-flex; }
  .topbar { padding: 0 14px; }
  .page { padding: 18px 14px 40px; }
  .demo-strip { padding: 7px 14px; }
  .g-2, .grid-2, .grid-3, .choice-grid { grid-template-columns: minmax(0, 1fr); }
  .top-link .lbl { display: none; }
  .ph h1, .ph-title, main > h2, .page > h2 { font-size: 22px; }
  .hide-sm { display: none !important; }
  .stepper li span.sl { display: none; }
  details.row-x > summary { grid-template-columns: minmax(0, 1fr) 18px; }
  details.row-x > summary .rx-src, details.row-x > summary .rx-meta { display: none; }
  details.row-x .rx-body { padding-left: 20px; }
  .crumbs > :not(.here):not(:last-child) { display: none; }
}
@media (max-width: 560px) {
  .g-4, .g-5, .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opt-grid { grid-template-columns: minmax(0, 1fr); }
  .metric .m-value { font-size: 23px; }
  .metric { padding: 13px 14px; }
  .filterbar { padding: 12px 14px; }
  .filterbar select { flex: 1 1 140px; }
  .input-icon { max-width: none; flex-basis: 100%; }
  .bar-row { grid-template-columns: 100px minmax(0, 1fr) 44px; }
  .action-row { grid-template-columns: minmax(0, 1fr) auto; }
  .action-row > .badge { display: none; }
  .ph-actions { width: 100%; }
  input, select, textarea { font-size: 16px !important; }
  .top-link.help-l { display: none; }
  .search-trigger kbd { display: none; }
  .search-trigger { width: 36px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@media print {
  .sidenav, .topbar, .demo-strip, .ph-actions, .tabs, #toasts, .btn { display: none !important; }
  .app { display: block; }
  .tabpanel[hidden] { display: block !important; }
  body { background: #fff; }
  .panel, .card, .metric { box-shadow: none; break-inside: avoid; }
}