/* AuditSahi visual identity, shared with the site. Bone page, white surfaces, warm greys, one green used only for
   covered and the primary action, Geist for everything, tiny pale labels and large figures. Separation by
   whitespace and hairlines, one soft shadow on the elevated layer, no card borders.
   Every class name here is unchanged from the previous identity so the pages need no edits. */
:root {
  --canvas: #f2efe6;
  --canvas-2: #e9e5d8;
  --surface: #ffffff;
  --surface-2: #f4f3ef;
  --ink: #141412;
  --ink-2: #5c5a54;
  --ink-3: #8a877f;
  --line: rgba(20, 20, 18, 0.09);
  --line-s: rgba(20, 20, 18, 0.28);
  --accent: #116b48;
  --accent-ink: #0d5438;
  --accent-soft: rgba(17, 107, 72, 0.09);
  --accent-line: rgba(17, 107, 72, 0.4);
  --accent-glow: #1e7f58;
  --crit: #b5341f; --crit-soft: rgba(181, 52, 31, 0.09);
  --high: #8f8c84; --high-soft: rgba(143, 140, 132, 0.16);
  --ok: #116b48;   --ok-soft: rgba(17, 107, 72, 0.09);
  --mis: #dedbd2;
  --glass: #ffffff;
  --glass-strong: #ffffff;
  --glass-line: rgba(20, 20, 18, 0.06);
  --font: "Geist", "Inter", system-ui, "Segoe UI", sans-serif;
  --mono: var(--font);
  --r: 12px;
  --r-panel: 14px;
  --r-inner: 8px;
  --shadow: 0 0 0 1px rgba(20, 20, 18, 0.06), 0 1px 2px rgba(20, 20, 18, 0.03);
  --shadow-glass: 0 0 0 1px rgba(20, 20, 18, 0.06), 0 30px 70px -36px rgba(20, 20, 18, 0.45);
  --t: 160ms cubic-bezier(.2,.7,.2,1);
  --bar: 64px;
}
* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body { margin: 0; min-height: 100dvh; background: var(--canvas); color: var(--ink); font: 14px/1.55 var(--font); -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; }
body::before { content: none; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; }
h1 { font-size: 30px; letter-spacing: -0.035em; }
h2 { font-size: 18px; }
h3 { font-size: 14.5px; letter-spacing: -0.01em; }
p { margin: 0; }
.num, .mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.mono { font-size: 12px; letter-spacing: 0; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); font-size: 12.5px; }
button { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Elevated layer: a white surface with the one soft shadow */
.glass { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
@media (prefers-reduced-transparency: reduce) { .glass { background: var(--surface); } }

/* Shell: the product window from the site, made real. A white window on the bone page with a sidebar
   for the brand, the organisation, the navigation and the person, and a breadcrumb bar over the canvas. */
.app { min-height: calc(100dvh - 32px); margin: 16px; display: grid; grid-template-columns: 184px minmax(0, 1fr); background: var(--surface); border-radius: var(--r-panel); overflow: clip; box-shadow: var(--shadow-glass); }
.side { display: flex; flex-direction: column; gap: 22px; padding: 20px 16px; border-right: 1px solid var(--line); position: sticky; top: 16px; align-self: start; height: calc(100dvh - 32px); overflow: auto; }
.brand { display: flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; font-size: 13px; letter-spacing: -0.02em; padding: 0 6px; }
.brand:hover { text-decoration: none; }
.brand svg { color: var(--accent); }
.brand .sahi { color: var(--accent); }
/* Organisation switcher: a quiet field with a tiny label */
.org-switch { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.org-switch:empty { display: none; }
.org-switch small { font-size: 10px; color: var(--ink-3); }
.org-switch select { width: 100%; padding: 0 18px 0 0; border: 0; border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238a877f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center; appearance: none; -webkit-appearance: none; font: inherit; font-weight: 500; font-size: 11.5px; color: var(--ink); text-overflow: ellipsis; box-shadow: none; }
.org-name { font-weight: 500; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Navigation: a quiet list, the active item in ink */
.pillnav { display: flex; flex-direction: column; gap: 1px; }
.pillnav a { display: block; padding: 6px 10px; border-radius: 6px; color: var(--ink-2); font-weight: 500; font-size: 11.5px; white-space: nowrap; transition: background var(--t), color var(--t); }
.pillnav a:hover { color: var(--ink); text-decoration: none; background: var(--surface-2); }
.pillnav a.active { background: var(--ink); color: #fff; }
.more { position: relative; margin-top: -14px; }
.more summary { list-style: none; cursor: pointer; padding: 6px 10px; border-radius: 6px; color: var(--ink-3); font-size: 11.5px; font-weight: 500; user-select: none; }
.more summary::-webkit-details-marker { display: none; }
.more summary:hover, .more[open] summary { color: var(--ink); background: var(--surface-2); }
.more-menu { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 0; }
.more-menu a { padding: 6px 10px; border-radius: 6px; color: var(--ink-2); font-size: 11.5px; font-weight: 500; }
.more-menu a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.more-menu a.active { background: var(--ink); color: #fff; }
/* The person, pinned to the foot of the sidebar, as a small menu */
.umenu { position: relative; }
.umenu summary { list-style: none; cursor: pointer; display: block; padding: 6px 4px 6px 36px; border-radius: 7px; position: relative; }
.umenu summary::-webkit-details-marker { display: none; }
.umenu summary:hover, .umenu[open] summary { background: var(--surface-2); }
.umenu-list { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); display: flex; flex-direction: column; gap: 1px; padding: 6px; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-glass); }
.umenu-list a, .umenu-list button { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font-size: 11.5px; font-weight: 500; cursor: pointer; }
.umenu-list a:hover, .umenu-list button:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.fb { position: fixed; left: 24px; bottom: 24px; z-index: 25; width: min(340px, calc(100vw - 48px)); padding: 16px; background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-glass); display: flex; flex-direction: column; gap: 10px; }
.fb p { font-size: 12px; font-weight: 600; }
.fb textarea { resize: vertical; font-size: 13px; }

.bar-user { margin-top: auto; }
.bar-name { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-name::before { content: attr(data-initials); position: absolute; left: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; }

.bar-name:hover { text-decoration: none; }
.bar-out { border: 0; background: transparent; color: var(--ink-3); font-size: 10.5px; cursor: pointer; padding: 4px 0; }
.bar-out:hover { color: var(--ink); }
/* The canvas: breadcrumb bar, then the page */
.canvas { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 14px 28px 0; }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-3); min-width: 0; flex-wrap: wrap; }
.crumb i { width: 5px; height: 5px; border-right: 1px solid var(--ink-3); border-top: 1px solid var(--ink-3); transform: rotate(45deg); }
.crumb strong { color: var(--ink); font-weight: 600; font-size: 12px; }
.crumb-tag { padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 10px; font-weight: 500; }
.bar-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 0 0 auto; }
.bar-right .btn { padding: 6px 12px; font-size: 11.5px; border-radius: 7px; }
.bar-right .chip { font-size: 10px; }
.main { width: 100%; max-width: 1100px; margin: 0; padding: 18px 28px 48px; }

/* Page header */
.page-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.page-head h1 { font-size: 22px; letter-spacing: -0.03em; }
.page-head .cy { color: var(--ink-2); max-width: 70ch; font-size: 13px; }
.page-head .cy::before { content: none; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; align-items: center; }

/* Controls */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; border: 0; background: var(--surface-2); color: var(--ink); font-weight: 500; font-size: 13px; cursor: pointer; transition: background var(--t), color var(--t); white-space: nowrap; box-shadow: none; }
.btn:hover { background: var(--canvas-2); text-decoration: none; transform: none; box-shadow: none; }
.btn:active { transform: none; }
.btn.primary { background: var(--ink); color: var(--canvas); }
.btn.primary:hover { background: var(--accent); }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn.danger { color: var(--crit); }
.btn:disabled { opacity: .5; cursor: default; }
input[type=text], input[type=number], input[type=password], input[type=email], input[type=date], select, textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line-s); border-radius: var(--r-inner); background: var(--surface); color: var(--ink); font: inherit; transition: border-color var(--t), box-shadow var(--t); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: none; }
label { display: block; font-weight: 500; font-size: 12.5px; color: var(--ink-2); margin-bottom: 5px; }
.help { color: var(--ink-3); font-size: 12.5px; margin-top: 6px; }

/* Cards and lists: no boxes inside the canvas. A card is a section opened by a hairline. */
.card { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 18px 0 20px; box-shadow: none; }
.card + .card { margin-top: 0; }
.grid-2 > .card, .grid-3 > .card, .stack > .card, .steps > .card { margin-top: 0; }
.stack { display: flex; flex-direction: column; gap: 0; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
.section { margin-top: 36px; }
.section > h2 { margin-bottom: 10px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.section-note { color: var(--ink-2); margin: -4px 0 12px; max-width: 70ch; font-size: 13px; }

/* Chips: small, flat, grey unless the state means something */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.chip.accent { background: var(--accent-soft); color: var(--accent-ink); }
.chip.crit { background: var(--crit-soft); color: var(--crit); }
.chip.high { background: var(--high-soft); color: var(--ink-2); }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.mono { background: transparent; padding: 0; font-weight: 400; font-size: 11.5px; color: var(--ink-3); white-space: normal; max-width: 100%; text-align: left; }

/* Instrument tiles */
.tile { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; transition: opacity var(--t); }
.tile.on { box-shadow: none; }
.tile.off { opacity: .6; }
.tile.unsure { border-top: 1px dashed var(--line-s); }
.tile .t-title { font-weight: 600; }
.tile .t-sub { color: var(--ink-2); font-size: 13px; grid-column: 1 / -1; }
.tile .t-why { grid-column: 1 / -1; font-size: 13px; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
.tile .t-cite { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tiles { display: flex; flex-direction: column; gap: 0; }

/* Tables: hairline rows, tiny pale heads */
table.list { width: 100%; border-collapse: separate; border-spacing: 0; background: transparent; border-radius: 0; overflow: hidden; box-shadow: none; }
table.list th { text-align: left; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); background: transparent; font-weight: 500; }
table.list td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list tr:last-child td { border-bottom: 0; }
table.list tr:hover td { background: var(--surface-2); }
.table-wrap { overflow-x: auto; }

/* Status marks: green is covered; the rest are greys and one red */
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 12.5px; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mis); }
.status.covered::before { background: var(--ok); }
.status.partial::before { background: var(--high); }
.status.missing::before { background: var(--mis); }

/* Intake */
.intake { max-width: 640px; }
.q { padding: 24px 0; border-bottom: 1px solid var(--line); }
.q:last-child { border-bottom: 0; }
.q h3 { font-size: 16px; margin-bottom: 4px; }
.q .help { margin-bottom: 12px; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; font-weight: 500; font-size: 13.5px; box-shadow: none; transition: border-color var(--t), background var(--t); }
.opt:hover { transform: none; border-color: var(--line-s); }
.opt.on { border-color: var(--ink); background: var(--surface); color: var(--ink); }
.opt input { margin: 3px 0 0; accent-color: var(--ink); }
.opt small { display: block; color: var(--ink-3); font-weight: 400; font-size: 12px; margin-top: 2px; }
.opts.one { grid-template-columns: 1fr; }
.side-panel { position: sticky; top: 24px; padding: 0; }
.side-panel h3 { margin-bottom: 4px; }
.side-panel .faint { margin-bottom: 12px; display: block; }
.side-panel .tile { box-shadow: none; background: var(--surface-2); }

/* Welcome */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; }
.steps.four { grid-template-columns: repeat(4, 1fr); }
.step { padding: 18px 0; }
.step-n { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; background: var(--ink); color: var(--canvas); font-weight: 600; font-size: 12px; margin-bottom: 14px; }
.step h3 { margin-bottom: 6px; }

/* Document kinds */
.kind { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 6px 24px; align-items: start; }
.kind .k-what { color: var(--ink-2); font-size: 13px; }
.kind .k-inst { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.kind .k-side { display: flex; flex-direction: column; gap: 8px; }
.kind details { grid-column: 1 / -1; margin-top: 4px; }
.kind summary { cursor: pointer; color: var(--ink-2); font-weight: 500; font-size: 12.5px; }
.kind .k-list { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }

/* Calendar */
.timeline { display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tl-item:last-child { border-bottom: 0; }
.tl-item .when { font-size: 12.5px; color: var(--ink-3); }
.tl-item .when b { display: block; color: var(--ink); font-weight: 600; font-size: 13.5px; }
.tl-item.past { opacity: .55; }
.tl-item.soon .when b { color: var(--crit); }

/* Coverage meter: thin, green for covered, greys for the rest, always beside a legend */
.meter { display: flex; gap: 1.5px; height: 6px; border-radius: 2px; overflow: hidden; background: var(--mis); }
.meter span { display: block; height: 100%; }
.meter .m-cov { background: var(--ok); } .meter .m-par { background: var(--high); } .meter .m-mis { background: var(--mis); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }

/* Empty state and drop zone */
div.empty { padding: 32px 0; text-align: center; border-top: 1px solid var(--line); color: var(--ink-2); }
div.empty h3 { margin-bottom: 6px; }
.drop { padding: 32px 24px; text-align: center; border: 1px dashed var(--line-s); border-radius: 10px; background: var(--surface); transition: border-color var(--t), background var(--t); cursor: pointer; }
.drop.over { border-color: var(--ink); background: var(--surface-2); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px); background: var(--ink); color: var(--canvas); padding: 10px 18px; border-radius: 8px; font-weight: 500; font-size: 13px; box-shadow: var(--shadow-glass); opacity: 0; transition: opacity var(--t), transform var(--t); pointer-events: none; z-index: 20; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Access gate: the same white window on the bone page, the brand set as the site header sets it */
.gate { position: fixed; inset: 0; display: grid; place-items: center; z-index: 30; background: var(--canvas); padding: 24px 16px; overflow: auto; }
.gate-card { width: min(460px, 100%); padding: 40px 44px 34px; display: flex; flex-direction: column; gap: 8px; background: var(--surface); border-radius: var(--r-panel); box-shadow: var(--shadow-glass); }
.gate-brand { font-size: 18px; gap: 10px; padding: 0; margin-bottom: 26px; }
.gate-brand svg { width: 26px; height: 26px; }
.gate-card h1 { font-size: 30px; letter-spacing: -0.04em; }
.gate-card p { color: var(--ink-2); margin-bottom: 16px; font-size: 13.5px; line-height: 1.55; max-width: 40ch; }
.gate-card label { margin-top: 10px; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.gate-card input { padding: 10px 12px; }
.gate-type { border: 0; padding: 0; margin: 4px 0 6px; display: flex; flex-direction: column; gap: 6px; }
.gate-type legend { font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; padding: 0; }
.gate-card .gate-type .opt { margin: 0; text-transform: none; letter-spacing: 0; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.gate-type .opt:has(input:checked) { border-color: var(--ink); }
.gate-type .opt input { padding: 0; }
.gate-error { color: var(--crit); font-weight: 500; font-size: 13px; margin: 6px 0 0 !important; }
.gate-card .btn { margin-top: 18px; justify-content: center; padding: 11px 16px; font-size: 14px; }
.gate-switch { margin: 16px 0 0 !important; text-align: left; }
.gate-switch a { color: var(--ink); border-bottom: 1px solid var(--line-s); }
.gate-switch a:hover { text-decoration: none; border-color: var(--ink); }
.gate-foot { margin-top: 22px !important; padding-top: 16px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--ink-3); text-align: left; }
.gate-foot a { color: var(--ink-3); }

/* Where to go next: two or three plain paths at the top of a page, one recommended */
.paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 26px; }
.path { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 10px; background: var(--surface-2); color: var(--ink); transition: background var(--t); }
.path:hover { text-decoration: none; background: var(--canvas-2); }
.path.primary { background: var(--ink); color: #fff; }
.path.primary:hover { background: var(--accent); }
.path-label { font-weight: 600; font-size: 13px; letter-spacing: -0.01em; }
.path-note { font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }
.path.primary .path-note { color: rgba(255, 255, 255, 0.72); }
.path-label::after { content: " \2192"; }

/* Detail one click away: a quiet fold */
.fold { border-top: 1px solid var(--line); }
.fold > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0; font-weight: 600; font-size: 13.5px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: ""; width: 7px; height: 7px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); flex: 0 0 auto; margin-left: auto; }
.fold[open] > summary::after { transform: rotate(225deg); }
.fold > :not(summary) { padding-bottom: 16px; }

/* A gap: one line closed, the clause and the hand mark open */
.gap { border-top: 1px solid var(--line); }
.gap > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 0; font-size: 13px; }
.gap > summary::-webkit-details-marker { display: none; }
.gap-title { font-weight: 500; }
.gap-sev { font-size: 10px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.gap-sev.critical { color: var(--crit); }
.gap-sev.high { color: var(--ink-2); }
.gap-body { padding: 2px 0 14px 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.gap-set { width: auto; padding: 5px 28px 5px 10px; font-size: 12px; }

/* A policy's one state, as a word with a small mark */
.pstate { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.pstate::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--mis); flex: 0 0 auto; }
.pstate.a::before { background: var(--ok); }
.pstate.c::before { background: var(--accent-glow); }
.pstate.d::before, .pstate.p::before { background: var(--high); }
.pstate.a, .pstate.c { color: var(--ok); }

/* A short tally line under a page head */
.rv-sum { display: flex; gap: 18px; flex-wrap: wrap; margin: -8px 0 22px; font-size: 12.5px; color: var(--ink-2); }
.rv-sum b { font-weight: 600; color: var(--ink); font-size: 14px; }
.rv-sum .crit b { color: var(--crit); }
.rv-list { display: flex; flex-direction: column; }
.rv-why { margin-top: 4px; }
.rv-why > summary { list-style: none; cursor: pointer; font-size: 12px; }
.rv-why > summary::-webkit-details-marker { display: none; }
.rv-why > summary::after { content: " \2193"; }
.rv-why[open] > summary::after { content: " \2191"; }
.rv-fields { margin: 6px 0 0 1.1em; padding: 0; font-size: 12.5px; color: var(--ink-2); }
.rv-fields li { margin: 3px 0; }
.rv-obl { display: flex; flex-direction: column; }
.rv-o { padding: 10px 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.rv-o p { color: var(--ink); }
.rv-tpl ul { margin: 0 0 6px 1.1em; padding: 0; font-size: 12.5px; color: var(--ink-2); max-height: 50vh; overflow: auto; }
.rv-tpl li { margin: 4px 0; }
.pstate.m.crit, .pstate.crit { color: var(--crit); }
.pstate.crit::before { background: var(--crit); }

/* A segmented toggle */
.seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 7px; background: var(--surface-2); align-self: flex-start; }
.seg button { border: 0; background: transparent; padding: 4px 10px; border-radius: 5px; font-size: 11px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(20, 20, 18, 0.08); }

/* Entry motion: transform and opacity only */
@media (prefers-reduced-motion: no-preference) {
  .main > * { animation: rise 380ms cubic-bezier(.2,.7,.2,1) both; }
  .main > *:nth-child(2) { animation-delay: 40ms; } .main > *:nth-child(3) { animation-delay: 80ms; } .main > *:nth-child(4) { animation-delay: 120ms; } .main > *:nth-child(n+5) { animation-delay: 160ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* Print: the audit pack, flat and white */
@media print {
  .side, .topbar, .page-actions, .no-print { display: none !important; }
  .app { display: block; margin: 0; box-shadow: none; border-radius: 0; }
  body { background: #fff; font-size: 12px; }
  body::before { display: none; }
  .main { padding: 0; max-width: none; }
  .glass, .card, table.list, .tile { background: #fff !important; box-shadow: none !important; border: 1px solid #ddd; }
  .card, table.list { break-inside: avoid; }
  .main > * { animation: none !important; }
}

@media (max-width: 900px) {
  .app { margin: 8px; min-height: calc(100dvh - 16px); grid-template-columns: minmax(0, 1fr); }
  .side { min-width: 0; width: 100%; }
  .side { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .org-switch { flex: 1 1 120px; min-width: 0; order: 1; }
  .org-switch select, .org-name { max-width: 100%; }
  .umenu summary { padding: 4px 4px 4px 30px; }
  .umenu .bar-name { font-size: 0; }
  .umenu .bar-name::before { left: 0; }
  .brand { order: 0; }
  .bar-user { order: 2; margin: 0; }
  .umenu-list { bottom: auto; top: calc(100% + 6px); min-width: 160px; left: auto; right: 0; }
  .side { height: auto; overflow: visible; }
  .pillnav { order: 3; flex: 1 1 100%; flex-direction: row; overflow-x: auto; scrollbar-width: none; min-width: 0; max-width: 100%; }
  .more { order: 4; margin: 0; }
  .more-menu { flex-direction: row; flex-wrap: wrap; }
  .topbar { padding: 12px 16px 0; flex-wrap: wrap; }
  .main { padding: 14px 16px 40px; }
  .split, .grid-2, .grid-3, .opts, .steps, .steps.four, .kind, .paths { grid-template-columns: 1fr; }
  .gap > summary { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .gap-body { padding-left: 0; }
  .side-panel { position: static; }
  .tl-item { grid-template-columns: 1fr; gap: 4px; }
  .tile { grid-template-columns: 1fr; }
  .tile .chip, .page-actions .chip { white-space: normal; text-align: left; }
  h1 { font-size: 22px; }
  .gate-card { padding: 28px 22px 24px; }
}

/* Stage two: Calendar and Vendors lead with what is next and where things stand; the detail sits in folds */
.cal-next .tl-item { grid-template-columns: 150px minmax(0, 1fr); }
.cal-next .tl-item.overdue .when b { color: var(--crit); }
.cal-src { gap: 10px; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }
.cal-src a { font-size: 11.5px; }
.cal-group { margin: 18px 0 2px; font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.fold .gap > summary { grid-template-columns: minmax(96px, auto) minmax(0, 1fr) minmax(0, auto); }
.fold .section-note { margin-top: 0; }
.vd-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; padding: 0 0 22px; margin: -6px 0 0; }
.vd-form .full { grid-column: 1 / -1; }
.vd-lead { display: flex; flex-direction: column; gap: 6px; padding-bottom: 18px; }
.vd-topic > summary { font-size: 13.5px; justify-content: flex-start; }
.vd-topic > summary::after { margin-left: 12px; }
.vd-q { padding: 12px 0 14px; border-top: 1px solid var(--line); font-size: 13px; }
.vd-q:first-child { border-top: 0; padding-top: 2px; }
.vd-q .opts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; max-width: 560px; }
.vd-q .opt { padding: 7px 10px; font-size: 12.5px; }
@media (max-width: 900px) {
  .cal-next .tl-item { grid-template-columns: 1fr; }
  .vd-form, .vd-q .opts { grid-template-columns: 1fr; }
}

/* The demo: a quiet green strip above the page, saying it is fictional and how to start for real. */
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 16px 0; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 13px; color: var(--ink); }
.demo-bar[hidden] { display: none; }
.demo-bar p { margin: 0; }