/* Schedule Review — design system.
Tokens, typography and components taken from the design handoff.
Two rules carry most of the look:
1. IBM Plex Mono for EVERY number, ID, date and status chip; IBM Plex Sans
for prose. The split is load-bearing — it is what makes the columns align
and the values scannable. Never set a numeric value in the sans face.
2. No shadows in the app chrome, 1px `line` borders everywhere, and exactly
one arrival transition. Elevation exists only on the export popover, the
publish modal, and the active mode-switch segment. */
/* Accessibility note on the greys.
The handoff's `ink-4` (#8A96A2) measured 3.02:1 on white and 2.84:1 on the
table-header fill — below the 4.5:1 WCAG 2.2 AA floor for normal text, and it
carries all the meta, kicker and note text at 9.5–10.5px. Section 508 adopts
WCAG AA and this tool is government-facing, so the greys below are darkened to
the minimum that clears the threshold, along the same hue. `ink-5` keeps its
original lightness because what it colours — disabled controls and decorative
glyphs — is explicitly exempt from the contrast requirement; the two jobs it
was doing that are NOT exempt (placeholder text, control boundaries) moved to
their own tokens. Verified ratios are in the comments. */
:root {
/* F6: the colour of a value the AI proposed and no person has confirmed,
on the document's paper. The instrument's copy is in theme.css. */
--ai: #1B4FD8; --ai-tint: #E8EEFB; --ai-line: #C9D6F5;
/* ink — UI-refresh palette (design handoff, warm paper) */
--ink: #14181D; /* 17.4:1 on white */
--ink-2: #3D434B; /* 9.4:1 — body-2 */
--ink-3: #5F6067; /* 5.9:1 — muted */
--ink-4: #6C6D74; /* 4.9:1 — mono labels */
--ink-5: #B3ADA2; /* decorative + disabled only — exempt */
--ink-placeholder: #6C6D74; /* placeholder is real text */
--control-line: #8A8880; /* 3.0:1 min — WCAG 1.4.11 non-text contrast */
--dash: #6C6D74; /* "no data" carries meaning */
--faint: #8A8880; /* 3.4:1 — large mono footers only */
/* lines & surfaces — warm rules on paper */
--line: #DED9D0;
--line-2: #EDE9E2;
--line-3: #F2EFEA;
--paper: #FBFAF8; /* page background; cards stay white */
--surface: #FFFFFF;
--surface-2: #F6F4F0;
--surface-3: #F7F5F1;
--surface-4: #F9F7F3;
--input-line: #D8D3CA;
/* accent — primary actions are ink-black; selection is warm */
--accent: #14181D;
--accent-hover: #2E3238;
--accent-tint: #EFEBE3;
--accent-tint-line: #D8D3CA;
--accent-ink: #14181D;
--link: #1B4FD8;
--focus: #1B4FD8;
/* the handoff's editorial accents */
--brand-accent: #B4531A; /* burnt orange: active nav, TASK MODE */
--kicker-fg: #8A6A3C; /* mono eyebrow labels on paper */
/* Primavera P6 standard colours (N21).
Her exact values: "Those are the colors that P6 uses all the time and it's
standardized." They are used the way P6 uses them — as BAR FILLS and CELL
HIGHLIGHTS, with dark text on top.
They are deliberately not used for coloured text. Measured against white,
green 0,255,0 is 1.37:1 and yellow 255,255,0 is 1.07:1; as text those are
invisible, and a gain rendered in P6 green would be unreadable to
everyone, not only to readers with low vision. Text keeps the accessible
status colours below, which carry the same meanings at legible contrast.
Against these fills, near-black text measures 13:1 and 17:1. */
--p6-red: rgb(235, 0, 0);
--p6-blue: rgb(0, 0, 255);
--p6-green: rgb(0, 255, 0);
--p6-yellow: rgb(255, 255, 0);
/* Ink to place on any P6 fill. */
--p6-on-fill: #12161B;
/* status — severity fg + dot pairs from the handoff */
--danger: #9A2C23;
--danger-dot: #C2372D;
--danger-tint: #FBF1EF;
--danger-tint-2: #FDF8F7;
--danger-line: #F0D9D5;
--danger-line-2: #E4C9C4;
--warn: #7A5410;
--warn-dot: #B4781A;
--warn-tint: #FDF6E9;
--warn-line: #EFE1C2;
--warn-ink: #4A3A14;
--warn-ink-2: #6B5B33;
--warn-ink-3: #5B3E10;
--ok: #1B5E42;
--ok-dot: #1E7A54;
--ok-tint: #EFF6F1;
--ok-line: #CFE4D6;
--neutral: #4A5563;
--neutral-dot: #98A2B3;
/* sidebar */
--sidebar-bg: #14181D;
--sidebar-bg-2: #23272C;
--sidebar-line: #262A2F;
--sidebar-line-2: #33373C;
--sidebar-text: #E9E7E2;
--sidebar-text-2: #BAB8B1;
--sidebar-text-3: #918F88; /* on the project card */
--sidebar-label: #918F88;
--sidebar-dot: #5A5C60;
--sidebar-dot-on: #fff;
--sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
font-family: var(--sans);
color: var(--ink);
background: var(--paper);
font-size: 12.5px;
-webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: 600; }
button { font-family: inherit; cursor: pointer; }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* The one animation. Do not add others. */
/* The arrival transition lives in core/shell.js now, not here. As a class it
could not restart -- #screen already carried it after the first navigation,
so re-assigning the same string animated nothing and every click was an
instant hard cut. Script can always start an animation; a class cannot. */
/* Focus rings were not in the design; added deliberately — this is a
government-facing tool and keyboard access is a real requirement. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: 2px; }
/* F6: the AI colour rule. A value the AI proposed and no person has yet
confirmed carries `.ai-val`: the AI colour, and a small "AI" mark on
hover. Confirmed or edited, the class goes and the value is ink. */
.ai-val { color: var(--ai); position: relative; }
select.ai-val, input.ai-val, button.ai-val { color: var(--ai); border-color: var(--ai-line); }
.ai-val::after {
content: "AI"; position: absolute; top: -.75em; right: -1.4em; font-family: var(--mono, monospace);
font-size: 8.5px; font-weight: 600; letter-spacing: .06em; color: var(--ai); background: var(--ai-tint);
border: 1px solid var(--ai-line); border-radius: 3px; padding: 0 3px; opacity: 0; pointer-events: none;
transition: opacity 120ms ease;
}
.ai-val:hover::after { opacity: 1; }
p.ai-val::after, div.ai-val::after, label.ai-val::after { right: 0; top: -.2em; }
select.ai-val::after, button.ai-val::after, input.ai-val::after { display: none; }
.ai-placeholder::placeholder { color: var(--ai); opacity: .85; }
.ai-legend { font-size: 11px; color: var(--ink-3); }
.ai-legend::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--ai); margin-right: 7px; vertical-align: -1px; }
/* ============================== shell ============================== */
.app { display: flex; height: 100vh; overflow: hidden; }
.sidebar {
width: 232px; flex: none; background: var(--sidebar-bg);
display: flex; flex-direction: column; overflow-y: auto;
}
.sb-org {
height: 54px; flex: none; display: flex; align-items: center; gap: 9px;
padding: 0 12px; border-bottom: 1px solid var(--sidebar-line);
}
.sb-mark {
width: 26px; height: 26px; flex: none; border-radius: 6px; background: var(--brand-accent);
color: #fff; font-family: var(--mono); font-weight: 600; font-size: 11px;
display: grid; place-items: center;
}
.sb-org-name { font-weight: 600; font-size: 12px; color: #fff; line-height: 1.2; }
.sb-org-kicker {
font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em;
color: var(--sidebar-label); text-transform: uppercase;
}
.sb-group { padding: 12px 10px 4px; }
.sb-kicker {
font-weight: 500; font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase;
color: var(--sidebar-label); padding: 0 10px 7px;
}
.sb-item {
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 8px 11px; border: 0; background: none; border-radius: 7px;
color: var(--sidebar-text-2); font-size: 13px; line-height: 1.2; text-align: left;
}
.sb-item .dot { width: 5px; height: 5px; flex: none; background: var(--sidebar-dot); }
.sb-item .sb-count {
margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--sidebar-text-3);
}
.sb-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.sb-item.on { background: var(--brand-accent); color: #fff; font-weight: 600; }
.sb-item[aria-current="page"] { cursor: default; }
.sb-item.on .dot { background: var(--sidebar-dot-on); }
.sb-item.on .sb-count { color: #fff; }
.sb-item .pill {
margin-left: auto; background: var(--brand-accent); color: #fff; border-radius: 4px;
font-family: var(--mono); font-size: 9.5px; padding: 1px 5px;
}
.sb-item.on .pill { background: rgba(255,255,255,.22); }
.sb-footer {
margin-top: auto; padding: 12px; border-top: 1px solid var(--sidebar-line);
}
.sb-footer .k {
font-weight: 500; font-size: 9.5px; letter-spacing: .11em; text-transform: uppercase;
color: var(--sidebar-label); margin-bottom: 4px;
}
.sb-footer .v { font-family: var(--mono); font-size: 11px; color: var(--sidebar-text); }
/* which build you are looking at */
.sb-build {
margin-top: 8px; font-family: var(--mono); font-size: 9.5px;
color: var(--sidebar-text-3); letter-spacing: .02em;
}
/* the server is serving older engine code than the files on disk */
.stalebar {
flex: none; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
padding: 9px 20px; background: var(--danger-tint); border-bottom: 2px solid var(--danger);
color: var(--danger); font-size: 11.5px; line-height: 1.5;
}
.stalebar .k { font-family: var(--mono); font-weight: 600; font-size: 9.5px; letter-spacing: .08em; flex: none; }
.stalebar .f { font-family: var(--mono); font-size: 10px; color: var(--warn-ink-3); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
height: 54px; flex: none; display: flex; align-items: center; gap: 12px;
padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.crumbs { display: flex; align-items: center; gap: 9px; font-size: 12px; min-width: 0; }
.crumb {
border: 0; background: none; padding: 0; font-size: 12px; color: var(--ink-3);
max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crumb:hover { color: var(--accent); }
.crumb.now { font-weight: 500; color: var(--ink); cursor: default; }
/* Presentational, but an auditor with a colour picker will still flag it —
ink-4 passes and stays lighter than the ink-3 crumb labels, so the visual
hierarchy is unchanged. */
.crumb-sep { color: var(--ink-4); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.topbar-div { width: 1px; height: 24px; background: var(--line); }
.usermenu {
display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px;
border: 1px solid transparent; border-radius: 3px; background: none;
}
.usermenu:hover { border-color: var(--line); background: var(--surface-2); }
.avatar {
width: 24px; height: 24px; border-radius: 2px; background: var(--line-2);
border: 1px solid var(--line); font-family: var(--mono); font-weight: 600;
font-size: 10px; display: grid; place-items: center; color: var(--ink-2);
}
.user-name { font-weight: 500; font-size: 11px; line-height: 1.2; }
.user-role {
font-family: var(--mono); font-size: 9px; letter-spacing: .04em;
color: var(--ink-4); text-transform: uppercase;
}
.pane { flex: 1; overflow-y: auto; padding: 0 20px 64px; }
.pageblock { flex: none; padding: 18px 20px 14px; }
.pagehead { display: flex; align-items: flex-start; gap: 16px; }
h1 { font-size: 19px; letter-spacing: -.011em; line-height: 1.2; }
.subline { margin: 5px 0 0; font-size: 12px; color: var(--ink-3); }
.pagehead-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.code-chip {
font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
background: var(--surface-2); border: 1px solid var(--line);
border-radius: 2px; padding: 2px 6px; vertical-align: 3px; margin-left: 8px;
}
/* ============================== buttons ============================== */
.btn {
height: 31px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--input-line);
background: var(--surface); color: #2E3238; font-size: 12.5px; font-weight: 500;
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
/* Work in flight: a ring in the button, not three dots after the verb. The
themed section restates this for `.t2 .btn`; this is the same ring for a
button outside a themed box -- the sheet's head, the topbar. */
.btn.busy { pointer-events: none; }
.btn.busy::before {
content: ""; width: 12px; height: 12px; border-radius: 50%; flex: none;
border: 2px solid currentColor; border-right-color: transparent; opacity: .8;
animation: spin .6s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .btn.busy::before { animation: busy-pulse 1.2s ease-in-out infinite; } }
@keyframes busy-pulse { 50% { opacity: .3; } }
.btn:hover { border-color: var(--ink-5); background: var(--surface); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.sm { height: 24px; padding: 0 9px; font-size: 11px; }
.btn.md { height: 27px; padding: 0 10px; font-size: 11px; }
.btn:disabled, .btn.off {
background: var(--line-2); border-color: var(--line-2); color: var(--ink-5);
cursor: not-allowed;
}
.btn.danger-h:hover { color: var(--danger); border-color: var(--danger-line-2); background: var(--danger-tint-2); }
.btn.ghost { border-color: transparent; }
.btn.ghost:hover { border-color: var(--line); }
.search {
height: 30px; display: flex; align-items: center; border: 1px solid var(--line);
border-radius: 3px; overflow: hidden; background: var(--surface);
}
.search .k {
font-family: var(--mono); font-size: 11px; color: var(--ink-4); padding: 0 9px;
border-right: 1px solid var(--line-2); height: 100%; display: flex; align-items: center;
}
.search input { border: 0; outline: 0; padding: 0 10px; font: inherit; font-size: 11.5px; width: 190px; }
.search input::placeholder { color: var(--ink-placeholder); }
/* ============================== cards & tables ============================== */
/* No overflow clipping here: the sticky table headers inside cards stick to
the pane's scrollport, and any non-visible overflow on an ancestor would
quietly turn them off. The head rounds its own corners instead. */
.card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.card + .card { margin-top: 14px; }
.card-head {
display: flex; align-items: center; gap: 10px; padding: 10px 14px;
background: var(--surface-3); border-bottom: 1px solid var(--line);
border-radius: 9px 9px 0 0;
}
.card-title { font-weight: 600; font-size: 12.5px; line-height: 1.3; }
.card-note { margin-left: auto; font-size: 10.5px; color: var(--ink-4); }
.card-body { padding: 12px 14px 18px; }
table.grid { width: 100%; border-collapse: collapse; }
table.grid thead th {
background: var(--surface-2); border-bottom: 1px solid var(--line);
font-weight: 600; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-3); padding: 9px 10px; text-align: left; white-space: nowrap;
/* Hold the labels while the rows scroll. A 49-update schedule series runs
several screens deep, and past the first column every cell is a bare
number — finish slip, CP slip, exec change — which is unreadable once the
header has scrolled off. In collapse mode the border belongs to the table
rather than the cell, so it does not travel with a stuck th; the inset
shadow redraws the same 1px rule in place. */
position: sticky; top: 0; z-index: 2;
box-shadow: inset 0 -1px 0 var(--line);
}
table.grid tbody td {
border-bottom: 1px solid var(--line-2); padding: 9px 10px;
font-size: 12px; color: var(--ink-2); vertical-align: top;
/* An activity description is whatever the scheduler typed, and a long one
with no spaces (a path, an ID string) has no break opportunity — the cell
grew until it pushed the table out of its card and off the screen. Break
inside the word rather than let one row destroy the layout; `anywhere`
only takes effect when there is no better break. */
overflow-wrap: anywhere;
}
table.grid tbody tr:last-child td { border-bottom: 0; }
table.grid .r { text-align: right; }
table.grid td.num, table.grid th.num { text-align: right; font-family: var(--mono); font-size: 11.5px; }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--surface-2); }
tr.sel td { background: var(--accent-tint); }
tr.muted td { background: var(--surface-3); color: var(--ink-4); cursor: default; }
.dash { color: var(--dash); }
.legend { display: flex; gap: 16px; align-items: center; margin-top: 10px; font-size: 10.5px; color: var(--ink-4); }
.legend .sw { width: 8px; height: 8px; display: inline-block; margin-right: 5px; }
.legend .right { margin-left: auto; }
/* score / progress bars */
.bar { display: inline-flex; align-items: center; gap: 7px; justify-content: flex-end; }
.bar .track { width: 26px; height: 4px; background: var(--line-2); position: relative; }
.bar.wide .track { width: 40px; }
.bar .fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); }
.bar .v { font-family: var(--mono); font-weight: 500; font-size: 12px; }
.q-ok { color: var(--ok); } .q-warn { color: var(--warn); } .q-bad { color: var(--danger); }
/* Slip status: gain green, no movement black, slip red (N04).
"Holds" is near-black, not grey — grey reads as absent data next to a
column where a missing value is already an em-dash.
The table-scoped selectors are not redundant. `table.grid tbody td` carries
one class and three type selectors, so it outranks a bare `.f-bad` on the
type count and paints every one of these cells --ink-2 instead. The colours
were in the stylesheet and had never once rendered inside a table, which is
most of where they appear. */
.f-ok { color: var(--ok); } .f-flat { color: var(--ink); } .f-bad { color: var(--danger); }
table.grid tbody td.f-ok { color: var(--ok); }
table.grid tbody td.f-flat { color: var(--ink); }
table.grid tbody td.f-bad { color: var(--danger); }
/* chips */
.chip {
display: inline-block; font-family: var(--mono); font-weight: 600; font-size: 9.5px;
line-height: 1.6; letter-spacing: .06em; border-radius: 4px; padding: 1px 6px;
/* A chip is one word. In a squeezed table cell "DRAFT" wrapped to one letter
per line and read as a vertical column of characters. */
white-space: nowrap;
}
/* the controls beside a chip must not be squeezed into it either */
.btn.sm { white-space: nowrap; }
.chip.hi { background: var(--danger-tint); color: var(--danger); }
.chip.med { background: var(--warn-tint); color: var(--warn); }
.chip.low { background: var(--line-2); color: #3A4754; }
/* Restated at (0,2,0) rather than relying on `.chip` alone. The success-message
block used to be called `.ok` and, being declared later at equal specificity,
won border, radius, padding and font-size here -- which shipped the one GOOD
state as a bordered panel twice the height of every chip beside it: "on track"
on the portfolio, PUBLISHED on schedules, RESOLVED on findings, MATCHED on
costs, "complete" on the critical path. That block is `.msg-ok` now, so this
is belt and braces; it stays because `ok` is a state word many components
want, and the next one to want it should not have to find this out. */
.chip.ok {
background: var(--ok-tint); color: var(--ok);
border: 0; border-radius: 4px; padding: 1px 6px; font-size: 9.5px; margin: 0;
}
.chip.draft { background: var(--warn-tint); color: var(--warn); }
.chip.none { background: var(--line-2); color: var(--ink-4); }
.chip.ms { font-size: 8.5px; background: var(--line-2); color: var(--ink-3); }
/* Path state on an activity ID (N14). Smaller than a status chip: it annotates
the ID it sits beside rather than competing with it. */
.chip.cp { font-size: 8.5px; letter-spacing: .04em; margin-left: 4px; }
/* ============================== tabs & switches ============================== */
.tabrow {
height: 36px; flex: none; display: flex; align-items: stretch; gap: 18px;
padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.tab {
border: 0; background: none; padding: 0 1px; font-size: 12.5px; color: var(--ink-3);
border-bottom: 2px solid transparent; margin-bottom: -1px;
display: inline-flex; align-items: center; gap: 6px;
}
.tab:hover { color: var(--ink); }
.tab.on { font-weight: 600; color: var(--ink); border-bottom-color: var(--accent); }
.tab .n { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.tab .n.hi { background: var(--danger-tint); color: var(--danger); border-radius: 2px; padding: 1px 5px; font-weight: 600; }
.tab .n.warn { color: var(--warn); }
.tabrow .right { margin-left: auto; display: flex; align-items: center; }
.switch { display: inline-flex; background: var(--line-2); border-radius: 4px; padding: 2px; gap: 2px; }
.switch button {
height: 26px; padding: 0 12px; border: 0; background: none; border-radius: 3px;
font-size: 11.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px;
}
.switch button.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(18,22,27,.14); }
.switch .pill { background: var(--danger-tint); color: var(--danger); font-family: var(--mono); font-size: 9.5px; border-radius: 2px; padding: 1px 5px; font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.seg button {
height: 27px; padding: 0 11px; border: 0; background: var(--surface);
font-size: 11px; color: var(--ink-3); border-right: 1px solid var(--line);
}
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--accent); color: #fff; font-weight: 600; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-2); cursor: pointer; }
.toggle .track { width: 26px; height: 15px; border-radius: 8px; background: #C9CFD6; position: relative; transition: none; }
.toggle input { display: none; }
.toggle .knob { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.toggle input:checked + .track { background: var(--accent); }
.toggle input:checked + .track .knob { left: 13px; }
.cbx {
width: 15px; height: 15px; border-radius: 2px; border: 1.5px solid var(--control-line);
background: var(--surface); display: inline-grid; place-items: center; flex: none;
color: transparent; font-size: 9px; font-weight: 700;
}
.cbx.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.cbx.lg { width: 16px; height: 16px; }
/* ============================== screen: schedules ============================== */
.selbar {
display: flex; align-items: center; gap: 12px; padding: 9px 12px;
border: 1px solid var(--line); border-bottom: 0; border-radius: 3px 3px 0 0;
background: var(--surface-2);
}
.selbar.armed { background: var(--accent-tint); border-color: var(--accent-tint-line); }
.selbar .k {
font-family: var(--mono); font-weight: 600; font-size: 9.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink-4);
}
.selbar.armed .k { color: var(--accent); }
.selbar .msg { font-size: 12px; color: var(--ink-3); }
.selbar.armed .msg { color: var(--accent-ink); }
.selbar .right { margin-left: auto; display: flex; gap: 8px; }
.selbar + table.grid { border: 1px solid var(--line); border-top: 0; }
.sub-note { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; color: var(--warn); }
.sched-name { font-weight: 600; font-size: 12.5px; color: var(--ink); }
.sched-meta { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); margin-top: 2px; }
.note-panel {
margin-top: 14px; background: var(--surface-2); border: 1px solid var(--line);
border-radius: 3px; padding: 11px 13px; display: flex; gap: 12px;
}
.note-panel .k {
font-family: var(--mono); font-weight: 600; font-size: 9.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink-4); flex: none;
}
.note-panel p { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--ink-3); }
/* ========================= data screens: list surface ================== A list screen is one object: a toolbar that narrows the set, a grid that shows
it, and a bar that acts on what is ticked. Before this the grid was the whole
screen — 49 rows with no way to search, filter or sort them, and every row
action drawn at full strength on every row, so the eye had no quiet ground to
read the numbers against.
Opt-in by class. `table.grid` is shared by a dozen screens; `.grid.data` is
the denser, sortable variant, so a screen joins this as it is reworked rather
than all of them changing at once. */
/* ---- the frame: toolbar, grid and footer read as one card ---- */
/* `clip`, never `hidden`. Both keep the table's square corners inside the card's
radius, but `hidden` also makes this box a scroll container — and a sticky
binds to its nearest scroll container, so the column labels would scroll
away with the rows. `clip` is not one. The two values look interchangeable,
which is exactly why this is spelled out. */
.dlist {
border: 1px solid var(--line); border-radius: 8px;
background: var(--surface); overflow: clip;
}
/* Below this the fixed columns would eat the name column rather than the table
admitting it has run out of room. It scrolls instead, under the drawn
indicator, and every column keeps the width it needs to be read. */
.dlist table.grid.data { min-width: 820px; }
/* `overflow-x: auto` makes a box a scroll container on BOTH axes — CSS turns a
`visible` on the other axis into `auto` — so the wrap, not the pane, was what
the sticky bound to. It has no height of its own, so the header had
nowhere to stick and the column labels scrolled away with the rows: 49
updates of unlabelled numbers, which is the exact failure the sticky header
exists to prevent.
Above this width the 820px table always fits the pane, so the wrap does not
need to scroll and `clip` takes it out of the way — the header then binds to
the pane and holds. Narrower than this, horizontal scroll is the more
valuable of the two and comes back. */
@media (min-width: 1120px) {
.dlist > .tablewrap { overflow-x: clip; }
}
.dtoolbar {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 8px 10px; background: var(--surface-3);
border-bottom: 1px solid var(--line); border-radius: 7px 7px 0 0;
}
.dtoolbar .spacer { margin-left: auto; }
.dtoolbar .count {
font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); white-space: nowrap;
}
/* Search. The magnifier is drawn in the box rather than set as a placeholder
word, so the field reads as a control at a glance and the placeholder can say
what is actually searched. */
.dsearch {
display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 9px;
border: 1px solid var(--input-line); border-radius: 6px; background: var(--surface);
min-width: 230px;
}
.dsearch:focus-within { border-color: var(--focus); box-shadow: 0 0 0 2px rgba(27,79,216,.14); }
.dsearch svg { width: 12px; height: 12px; flex: none; color: var(--ink-4); }
.dsearch input { border: 0; outline: 0; padding: 0; font: inherit; font-size: 12px; width: 100%; background: none; }
.dsearch input::placeholder { color: var(--ink-placeholder); }
.dsearch .clr {
border: 0; background: none; color: var(--ink-4); font-size: 14px; line-height: 1;
padding: 0 1px; flex: none;
}
.dsearch .clr:hover { color: var(--ink); }
/* Filter pills. A segmented control rather than a : three states that
each carry a count are worth the width, and the count is the thing that tells
you whether the filter is worth applying. */
.dfilter { display: inline-flex; background: var(--line-2); border-radius: 6px; padding: 2px; gap: 2px; }
.dfilter button {
height: 24px; padding: 0 10px; border: 0; background: none; border-radius: 4px;
font-size: 11.5px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px;
}
.dfilter button:hover { color: var(--ink); }
.dfilter button.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(18,22,27,.14); }
.dfilter button .n { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.dfilter button.on .n { color: var(--ink-3); }
/* ---- the grid ---- */
/* Fixed, not auto. Under auto layout a `width` is only a hint, and the browser
settles every column on its content: the value cells here are an em-dash or
four mono characters, so each numeric column collapsed to its own header's
longest WORD and `DCMA pass rate` broke into three lines, setting the height
of the header row. Fixed layout honours the widths below exactly and gives
the remainder to the one column with no width — the schedule name. */
table.grid.data { table-layout: fixed; }
/* The header is pinned on the , not on its cells.
`table.grid thead th` has carried `position: sticky; top: 0` for a long time
and it has never once held: a table in `border-collapse: collapse` gives its
cells no box of their own to stick with, so the declaration was inert and the
column labels scrolled away with the rows — 49 updates of unlabelled numbers,
the exact thing it was written to prevent. The row group does have a box. */
table.grid.data thead { position: sticky; top: 0; z-index: 3; }
table.grid.data thead th {
font-size: 10px; letter-spacing: .04em; padding: 7px 8px;
background: var(--surface-2); color: var(--ink-3);
/* Two-word labels wrap rather than set the column's minimum width. `Held
plan` on one line is 93px of header for a column whose values are four
characters wide, and eleven columns priced that way overflowed a 1120px
window into a horizontal scroll the data never needed. */
white-space: normal; line-height: 1.25; vertical-align: bottom;
}
table.grid.data thead th.sortable {
cursor: pointer; user-select: none;
/* The marker is lifted out of the text flow and its space reserved as
padding. Inline, it was 13px of the label's own line box: `DCMA pass rate`
in a 100px column then had 63px to wrap into and broke into three lines,
which set the height of the whole header row. */
position: relative; padding-right: 18px;
}
table.grid.data thead th.sortable:hover { background: var(--line-3); color: var(--ink); }
table.grid.data thead th.sorted { color: var(--ink); }
/* Reserved whether or not this column is the sorted one, so turning sorting on
and off does not shift every label sideways. */
.sortmark { position: absolute; right: 6px; bottom: 8px; font-size: 8px; color: var(--accent); }
table.grid.data tbody td { padding: 8px 10px; vertical-align: middle; }
/* Zebra under the hairlines. Ten columns of bare numbers is a long way for the
eye to travel; the banding is barely visible on its own and is what keeps a
row together across that distance. */
table.grid.data tbody tr:nth-child(even) td { background: var(--surface-4); }
table.grid.data tbody tr:hover td { background: var(--surface-2); }
table.grid.data tbody tr.sel td,
table.grid.data tbody tr.sel:hover td { background: var(--accent-tint); }
table.grid.data tbody tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
table.grid.data tbody td.tight { padding-top: 6px; padding-bottom: 6px; }
/* The name cell: one strong line, one quiet line, nothing else. */
.d-name { font-weight: 600; font-size: 12.5px; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.d-name .link { cursor: pointer; }
.d-name .link:hover { text-decoration: underline; text-underline-offset: 2px; }
/* One line, always. Wrapping it made the row two or three units tall depending
on how long the description happened to be, so the list had no rhythm and a
verbose row pushed the next one out of view. A secondary line is allowed to
run out of room; it is not allowed to change the height of the row. */
.d-sub {
font-size: 11px; color: var(--ink-4); margin-top: 2px;
display: flex; align-items: center; gap: 6px;
white-space: nowrap; overflow: hidden;
}
.d-sub > span { overflow: hidden; text-overflow: ellipsis; }
.d-sub .sep, .d-sub .d-tag { flex: none; }
.d-sub .sep { color: var(--ink-5); }
/* A fact about the row, stated at the weight of a fact. These used to be warn
orange at the same size as the value they annotate, so "SHARED DATE" read as
loudly as the date itself on every row that carried one. */
.d-tag {
font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase;
color: var(--ink-4); background: var(--line-3); border: 1px solid var(--line-2);
border-radius: 3px; padding: 0 4px; white-space: nowrap;
}
.d-tag.warn { color: var(--warn); background: var(--warn-tint); border-color: var(--warn-line); }
.d-tag.accent { color: var(--brand-accent); background: var(--accent-tint); border-color: var(--accent-tint-line); }
/* ---- status lozenge ---- */
.lozenge {
display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono);
font-weight: 600; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
border: 1px solid transparent; border-radius: 3px; padding: 2px 7px; white-space: nowrap;
}
.lozenge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.lozenge.pub { background: var(--ok-tint); color: var(--ok); border-color: var(--ok-line); }
/* Draft is neutral, not a warning. Every schedule starts as one — painting all
49 of them in warn yellow made the column shout a fact that is simply the
default state of the object. */
.lozenge.draft { background: var(--surface-2); color: var(--ink-3); border-color: var(--line); }
/* ---- row actions ---- */
.rowact { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.iconbtn {
width: 26px; height: 26px; border-radius: 6px; border: 1px solid transparent;
background: none; color: var(--ink-3); display: inline-grid; place-items: center; flex: none;
}
.iconbtn svg { width: 14px; height: 14px; }
.iconbtn:hover { background: var(--surface); border-color: var(--line); color: var(--ink); }
.iconbtn[aria-expanded="true"] { background: var(--surface); border-color: var(--control-line); color: var(--ink); }
/* Quiet until the row is under the pointer or holds focus — but never removed
from the accessibility tree, and never `visibility:hidden`, so a keyboard
walks onto it and it appears. */
.rowact .on-hover { opacity: 0; transition: opacity .08s linear; }
tr:hover .rowact .on-hover,
.rowact .on-hover:focus-visible,
.rowact:focus-within .on-hover { opacity: 1; }
@media (hover: none) { .rowact .on-hover { opacity: 1; } }
.rowmenu {
position: fixed; z-index: 50; width: 226px; background: var(--surface);
border: 1px solid var(--line); border-radius: 7px; padding: 4px;
box-shadow: 0 10px 30px -10px rgba(18,22,27,.34);
}
.rowmenu button {
display: block; width: 100%; text-align: left; border: 0; background: none;
border-radius: 5px; padding: 7px 9px; font: inherit; font-size: 12px; color: var(--ink-2);
}
.rowmenu button:hover { background: var(--surface-2); color: var(--ink); }
.rowmenu button .n { display: block; font-size: 10.5px; color: var(--ink-4); margin-top: 1px; }
.rowmenu button:hover .n { color: var(--ink-3); }
.rowmenu button.danger { color: var(--danger); }
.rowmenu button.danger:hover { background: var(--danger-tint-2); }
.rowmenu .rule { height: 1px; background: var(--line-2); margin: 4px 2px; }
.rowmenu .head {
font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-4); padding: 6px 9px 4px;
}
/* ---- the selection bar ----
Positioned against the SCREEN, not against the scrolled content: the slot is
a sibling of the pane with no height of its own, and the bar floats on the
bottom edge of it. So it holds the same place whether the list is three rows
or three hundred, and it never takes a strip of the page away from the rows
when nothing is selected. The pane's own 64px tail is what keeps the last
row from sitting under it. */
.t2.scr { position: relative; }
.t2 .selectbar-slot {
position: absolute; left: 0; right: 0; bottom: 16px; z-index: 14;
display: flex; justify-content: center; pointer-events: none;
}
.t2 .selectbar { pointer-events: auto; margin: 0; }
/* The pair, as slots. Each names its own data date, because the arrow between
them is data-date order and not the order they were ticked. */
/* The pair takes the room between the count and the buttons, and each slot
takes half of it. A slot's LABEL is the part that gives way -- it shrinks
to an ellipsis -- and its DATE never does: the date is the fact the arrow
rests on. `auto auto` tracks with nowrap text could not shrink at all, so a
long schedule name pushed its date clean out of the slot's box. */
.t2 .selectbar > .sb-pair { flex: 1 1 auto; }
.t2 .sb-pair { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.t2 .sb-slot {
display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto;
align-items: baseline; gap: 0 8px; padding: 4px 11px; border-radius: var(--radius-md);
background: var(--inverse-wash); min-width: 0; flex: 1 1 0; overflow: hidden;
}
.t2 .sb-slot .r {
grid-column: 1 / -1; font-size: var(--type-caption-size); line-height: 14px;
color: var(--inverse-muted); letter-spacing: .02em;
}
.t2 .sb-slot .l {
font-size: var(--type-body-size); font-weight: var(--weight-strong); color: var(--inverse-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.t2 .sb-slot .d { font-size: var(--type-caption-size); color: var(--inverse-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the slot still to fill: an outline, so the bar shows what it is waiting for */
.t2 .sb-slot.empty {
background: none; box-shadow: inset 0 0 0 1px var(--inverse-wash-2); place-items: center;
border-radius: var(--radius-md);
}
.t2 .sb-slot.empty .l { color: var(--inverse-muted); font-weight: var(--weight-regular); }
.t2 .sb-arr { display: grid; place-items: center; color: var(--inverse-muted); flex: none; }
.t2 .sb-arr svg { width: 15px; height: 15px; }
.t2 .selectbar .sb-x { color: var(--inverse-text-3); width: 30px; height: 30px; }
.t2 .selectbar .sb-x:hover { background: var(--inverse-wash-2); color: var(--inverse-text); border-color: transparent; }
.t2 .selectbar .sb-x svg { width: 14px; height: 14px; }
/* ---- the selection bar (base) ----
Present only when something is ticked, and it holds the bottom of the pane so
a selection made at row 3 is still actionable at row 40. Ink, because it is
the one thing on the screen that is about to do something. */
/* The slot, not the bar, is the sticky element. A sticky box is confined to its
parent's content box, so putting it on `.selectbar` pinned the bar inside a
wrapper exactly its own height — which is to say, not at all. The slot is the
last child of the pane and spans it, so the bar rides the bottom of the
scrollport for the whole length of the list. */
.selectbar-slot { position: sticky; bottom: 12px; z-index: 14; }
.selectbar {
margin: 12px 0 0;
display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 14px;
background: var(--sidebar-bg); color: var(--sidebar-text); border-radius: 8px;
box-shadow: 0 12px 30px -12px rgba(18,22,27,.6);
}
.selectbar .n {
font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .04em;
background: rgba(255,255,255,.12); border-radius: 4px; padding: 3px 7px; flex: none;
}
.selectbar .msg { font-size: 12px; color: var(--sidebar-text-2); min-width: 0; }
.selectbar .msg b { color: #fff; font-weight: 600; }
.selectbar .right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.selectbar .btn {
background: transparent; border-color: var(--sidebar-line-2); color: var(--sidebar-text-2);
}
.selectbar .btn:hover { border-color: var(--sidebar-text-3); color: #fff; background: rgba(255,255,255,.06); }
.selectbar .btn.primary { background: #fff; border-color: #fff; color: var(--ink); }
.selectbar .btn.primary:hover { background: var(--sidebar-text); border-color: var(--sidebar-text); color: var(--ink); }
.selectbar .btn:disabled { background: rgba(255,255,255,.08); border-color: transparent; color: var(--sidebar-dot); }
/* Nothing matched the filter. Says which control is hiding the rows, and offers
to undo it — an empty grid with no explanation reads as data loss. */
.dempty { padding: 44px 20px; text-align: center; }
.dempty .t { font-size: 13px; font-weight: 600; color: var(--ink); }
.dempty .s { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.dempty .btn { margin-top: 12px; }
/* ============================== screen: report ============================== */
.reporthead { flex: none; padding: 16px 20px 12px; }
.rh-row1 { display: flex; align-items: center; gap: 14px; }
.rh-row1 .right { margin-left: auto; display: flex; gap: 8px; position: relative; }
.pairstrip {
margin-top: 12px; min-height: 36px; display: flex; align-items: center; gap: 10px;
border: 1px solid var(--line); border-radius: 3px; background: var(--surface-3);
padding: 6px 12px;
}
.pairstrip .a { font-weight: 500; color: var(--ink-3); }
.pairstrip .b { font-weight: 600; color: var(--ink); }
.pairstrip .d { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.pairstrip .arrow { color: var(--ink-5); }
.pairstrip .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.badge {
display: inline-flex; align-items: center; gap: 6px; border-radius: 3px;
padding: 4px 9px; background: var(--surface-2); border: 1px solid var(--line);
}
.badge .l { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.badge .v { font-family: var(--mono); font-weight: 600; font-size: 13px; }
.badge.warn { background: var(--warn-tint); border-color: var(--warn-line); }
.badge.warn .l { color: var(--warn); }
.report-wrap { max-width: 1010px; }
/* overview */
.kpi-card { display: grid; grid-template-columns: 308px 1fr; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.slip { background: var(--warn-tint); padding: 14px 16px; }
.kicker { font-family: var(--mono); font-weight: 600; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-4); }
.slip .kicker { color: var(--warn-ink-2); }
.slip .big { font-family: var(--mono); font-weight: 600; font-size: 34px; letter-spacing: -.03em; line-height: 1; margin: 8px 0 6px; color: var(--warn-ink-3); }
.slip .big .u { font-size: 14px; font-weight: 500; margin-left: 5px; }
.slip .dates { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; }
.slip .was { text-decoration: line-through; color: #7A6A45; }
.slip .now { background: var(--surface); border: 1px solid var(--warn-line); border-radius: 3px; padding: 2px 7px; }
.slip .ms { margin-top: 9px; font-size: 11px; color: var(--warn-ink); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); }
.kpi { padding: 14px 14px; border-left: 1px solid var(--line-2); }
.kpi:first-child { border-left: 0; }
.kpi-head { display: flex; align-items: baseline; gap: 8px; }
.kpi-head .fix { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--accent); border: 0; background: none; padding: 0; }
.kpi .n { font-family: var(--mono); font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: -.02em; margin: 8px 0 6px; }
.kpi .n .sub { font-size: 15px; color: var(--ink-4); }
.kpi .note { font-size: 10.5px; color: var(--ink-4); line-height: 1.5; }
.sevchips { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: nowrap; white-space: nowrap; }
.ai-chip { background: var(--warn-tint); color: var(--warn); }
.narr { padding: 14px 16px; max-width: 790px; }
.narr p { margin: 0 0 12px; font-size: 13px; line-height: 1.75; color: var(--ink); }
/* F6: the draft the AI wrote and nobody confirmed keeps the AI colour here,
where `.narr p` would otherwise outrank `.ai-val`. */
.narr p.ai-val { color: var(--ai); }
.narr p:last-child { margin-bottom: 0; }
.narr[contenteditable="true"]:focus { background: #FCFDFE; outline: none; }
.cpgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.cpcol { border-right: 1px solid var(--line); }
.cpcol:last-child { border-right: 0; }
.cphead {
padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line);
font-family: var(--mono); font-weight: 600; font-size: 9.5px; letter-spacing: .08em;
text-transform: uppercase; color: var(--ink-3);
}
.cpcol.b .cphead { background: var(--accent-tint); color: var(--accent); }
.cprow { display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--line-3); font-size: 12px; }
.cprow:last-child { border-bottom: 0; }
.cprow .id { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
.cprow .fin { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
/* column header — the date column had none, so nothing said which date it was */
.cprow.cpcolhead {
background: var(--surface-2); border-bottom: 1px solid var(--line);
font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
font-weight: 600; color: var(--ink-4);
}
.cprow.cpcolhead .id, .cprow.cpcolhead .fin { font-family: var(--sans); font-size: 9.5px; color: var(--ink-4); }
/* a date borrowed from the other schedule, because the activity is not in this one */
.cprow .fin.borrowed { color: var(--ink-5); font-style: italic; }
.cprow.gone { background: var(--danger-tint-2); }
.cprow.gone .id { color: var(--danger); }
.cprow.gone .nm { color: #7A2222; }
.cprow.joined { background: var(--accent-tint); }
.cprow.fin-ms { font-weight: 600; border-top: 1px solid var(--line); }
.cpnone { padding: 9px 12px; background: var(--surface-3); font-size: 11.5px; color: var(--ink-4); }
/* changes */
.filterbar {
display: flex; align-items: center; gap: 14px; padding: 9px 12px;
border: 1px solid var(--line); border-radius: 3px; background: var(--surface-3);
margin-bottom: 14px; flex-wrap: wrap;
}
.filterbar .k { font-weight: 600; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.filterbar .live { font-size: 11px; color: var(--ink-4); }
.secrow {
display: grid; grid-template-columns: 1fr 34px 1fr 18px; gap: 12px; align-items: center;
min-height: 36px; padding: 6px 14px; border-bottom: 1px solid var(--line-2);
background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left;
}
.secrow:last-of-type { border-bottom: 0; }
.secrow:hover:not(.empty) { background: var(--surface-2); }
.secrow .t { font-size: 12px; font-weight: 500; color: var(--ink); }
.secrow .c { font-family: var(--mono); font-size: 11.5px; text-align: right; color: var(--accent); }
.secrow .s { font-family: var(--mono); font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secrow .caret { color: var(--ink-5); font-size: 9px; text-align: right; }
.secrow.empty { background: var(--surface-3); cursor: default; }
.secrow.empty .t { color: var(--ink-4); font-weight: 400; }
.secrow.empty .c { color: var(--ink-4); }
.secrow.empty .s { color: var(--ink-4); }
.secbody { border-bottom: 1px solid var(--line-2); padding: 0 14px 12px; }
table.nested { width: 100%; border-collapse: collapse; border: 1px solid var(--line-2); }
table.nested th {
background: var(--surface-2); font-weight: 500; font-size: 9px; letter-spacing: .08em;
text-transform: uppercase; color: var(--ink-4); padding: 6px 8px; text-align: left;
border-bottom: 1px solid var(--line-2);
}
table.nested td { padding: 6px 8px; font-size: 11.5px; border-bottom: 1px solid var(--line-3); color: var(--ink-2);
overflow-wrap: anywhere; } /* see table.grid tbody td */
table.nested tr:last-child td { border-bottom: 0; }
table.nested td.id { font-family: var(--mono); color: var(--ink-2); }
table.nested td.id.added { color: var(--ok); }
table.nested td.id.removed { color: var(--danger); text-decoration: line-through; }
table.nested td.num { font-family: var(--mono); text-align: right; }
table.nested td.delta.bad { color: var(--danger); }
table.nested td.delta.good { color: var(--ok); }
/* findings */
.findrow {
display: grid; grid-template-columns: 30px 62px 1fr auto auto; gap: 10px; align-items: center;
min-height: 36px; padding: 6px 14px; border-bottom: 1px solid var(--line-2);
background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left;
}
.findrow:hover { background: var(--surface-2); }
.findrow .n { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
.findrow .t { font-size: 12px; font-weight: 500; color: var(--ink); }
.findrow.done { background: #FCFDFC; }
.findrow.done .t { color: var(--ink-4); text-decoration: line-through; }
.findrow .traces { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.acode {
font-family: var(--mono); font-size: 10px; color: var(--accent);
background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 2px; padding: 1px 5px;
}
.findrow .spec { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.findbody { padding: 0 14px 14px 67px; border-bottom: 1px solid var(--line-2); }
.findbody p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
.whyfix { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.wf { border-radius: 10px; padding: 11px 13px; }
.wf.why { background: var(--warn-tint); border: 1px solid var(--warn-line); }
.wf.fix { background: var(--ok-tint); border: 1px solid var(--ok-line); }
.wf .k { font-family: var(--mono); font-weight: 600; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--warn); margin-bottom: 6px; }
.wf.fix .k { color: var(--ok); }
.wf p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.wf.fix p { color: var(--ink-2); }
/* health */
tr.review td { background: #FEFCF7; }
.floatchart { display: flex; align-items: flex-end; gap: 22px; height: 190px; padding: 16px 14px 0; }
.fbar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.fbar .v { font-family: var(--mono); font-size: 11px; color: var(--ink-2); margin-bottom: 5px; }
.fbar .b { width: 100%; background: var(--accent); min-height: 2px; }
.fbar .l { font-size: 9.5px; color: var(--ink-4); margin-top: 7px; text-align: center; }
/* the band's rule, always under its title (N23) — the title alone misleads */
.fbar .l.sub { font-size: 8.5px; color: var(--ink-5); margin-top: 2px; }
/* ============================== task mode ============================== */
.taskwrap { flex: 1; display: flex; min-height: 0; }
.queue { width: 392px; flex: none; border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden; }
.queue-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--line-2); }
.queue-head h2 { font-size: 14px; }
.queue-sub { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); margin-top: 3px; }
.ring-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.ring { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ring .core { width: 29px; height: 29px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 11px; }
.ring-label { font-size: 11px; color: var(--ink-3); line-height: 1.35; }
.queue-list { flex: 1; overflow-y: auto; }
.qrow { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line-2); border-left: 2px solid transparent; cursor: pointer; }
.qrow:hover { background: var(--surface-2); }
.qrow.on { background: var(--accent-tint); border-left-color: var(--accent); }
.qrow .meta { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.qrow .t { font-weight: 600; font-size: 12.5px; color: var(--ink); line-height: 1.35; }
.qrow.done .t { color: var(--ink-4); text-decoration: line-through; }
.qrow .traces { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.detail { flex: 1; overflow-y: auto; padding: 22px 26px 70px; }
.detail-inner { max-width: 820px; }
.detail-top { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.detail-top .of { margin-left: auto; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-4); }
.detail h2 { font-size: 24px; letter-spacing: -.016em; line-height: 1.25; }
.detail .body { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin: 12px 0 18px; }
.traces-panel { margin-top: 14px; border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px; }
.tracecards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tracecard { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 3px; padding: 7px 10px; }
.tracecard:hover { border-color: var(--accent); }
.tracecard .id { font-family: var(--mono); font-size: 11.5px; color: var(--accent); }
.tracecard .nm { font-size: 12px; }
.tracecard .mt { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.actions { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.actions .right { margin-left: auto; }
.allclear { background: var(--ok-tint); border: 1px solid #CBE3D5; border-radius: 3px; padding: 12px 14px; color: var(--ok); font-size: 12.5px; }
.empty-state { padding: 40px 20px; text-align: center; color: var(--ink-4); font-size: 12.5px; }
.empty-state h3 { font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
/* ============================== popover & modal ============================== */
.popover {
position: absolute; top: 36px; right: 0; z-index: 40; width: 290px;
background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
box-shadow: 0 8px 24px -8px rgba(18,22,27,.28);
/* The section list once went from five rows to thirteen and ran off the
bottom of the window, taking the template row and the last two sections
with it — controls present, reachable by keyboard, and invisible. Both
lists have since moved to the composer and this is a short menu again, but
the cap stays: it costs nothing and it is what stopped that happening. */
max-height: calc(100vh - 56px); overflow-y: auto; overscroll-behavior: contain;
}
/* The popover's read-only note on what the document rows will carry. It
replaced a section list and a template picker that duplicated the composer's,
so it must not look like either: a statement, and one way out to the place
the choice is actually made. */
.popover .pf-sum { font-size: 11.5px; color: var(--ink-2); line-height: 1.5; }
.popover .pf-note {
font-size: 11px; color: var(--ink-4); line-height: 1.45; margin-top: 3px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.popover .pf-change {
margin-top: 7px; padding: 0; border: 0; background: none; cursor: pointer;
font: inherit; font-size: 11.5px; color: var(--accent);
}
.popover .pf-change:hover { text-decoration: underline; }
/* The group heading inside the export popover */
.popover .ph2 {
font-weight: 600; font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
color: var(--ink-4); padding: 2px 0 4px;
}
.popover .ph {
padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line);
font-weight: 600; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4);
}
/* Under a section shown alone: the group heading that starts the whole-
document rows, and a note that stands in for rows a section cannot have. */
.popover .ph2.sep { padding: 9px 12px 4px; border-top: 1px solid var(--line); background: var(--surface-3); }
.popover .pf-note.wide { display: block; -webkit-line-clamp: none; padding: 9px 12px; margin: 0; border-bottom: 1px solid var(--line-2); }
.popover .pr { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
.popover .pr:hover { background: var(--surface-2); }
.popover .pr:disabled { cursor: default; }
.popover .pr:disabled:hover { background: none; }
.popover .pr:disabled .l { color: var(--ink-4); }
.popover .pr .l { font-weight: 500; font-size: 12px; color: var(--ink); }
.popover .pr .n { font-size: 10.5px; color: var(--ink-4); margin-top: 2px; }
.popover .pf { padding: 9px 12px; }
.scrim {
position: fixed; inset: 0; background: rgba(20,24,29,.32); z-index: 60;
display: grid; place-items: center; padding: 20px;
/* The column, pinned to the scrim rather than to what is in it. Left implicit
it sized to the modal's own 600px, so the modal's `max-width: 100%` was
100% of a track the modal had just defined -- it clamped nothing, and on a
390px viewport 230px of the dialog sat off the right edge. */
grid-template-columns: minmax(0, 1fr);
backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.modal {
width: 600px; max-width: 100%; max-height: 100%; overflow-y: auto;
background: var(--surface); border-radius: 14px; box-shadow: 0 24px 64px rgba(20,24,29,.32);
}
.modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 12px; }
.modal-head h2 { font-size: 15px; }
.modal-head .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.modal-x { margin-left: auto; width: 26px; height: 26px; border: 0; background: none; color: var(--ink-4); font-size: 16px; border-radius: 3px; }
.modal-x:hover { background: var(--surface-2); color: var(--ink); }
.modal-body { padding: 0 18px 16px; }
/* A modal with enough in it to outgrow a laptop screen. The body scrolls and
the head and foot stay put, so the primary action is always visible -- it
carries the validation message in its disabled state, and a publisher should
not have to scroll to find out why they cannot publish yet. */
.modal.tall { display: flex; flex-direction: column; max-height: min(100%, 760px); }
.modal.tall .modal-head, .modal.tall .modal-foot { flex: 0 0 auto; }
.modal.tall .modal-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.modal-foot {
display: flex; align-items: center; gap: 10px; padding: 12px 18px;
background: var(--surface-3); border-top: 1px solid var(--line);
}
.modal-foot .right { margin-left: auto; display: flex; gap: 8px; }
.msect { margin-bottom: 16px; }
/* Publish modal — the credential fields under an access mode that uses one.
Inset and ruled on the left so they read as belonging to the option above
them, rather than as a second, independent question. */
/* Theme picker thumbnails — a miniature page drawn in CSS beside each option.
Suggestive, not a screenshot: the density of the rules and the face of the
cover glyph are what distinguish the three, and that much CSS can say
honestly. aria-hidden in the markup; the words beside it carry the meaning. */
/* The miniature's slot is the width of the WIDEST miniature, not of the
portrait ones: `register` draws a landscape sheet, and a 46px column silently
ran it under its own label. Each thumb is centred in the slot, so every card's
text still starts on the same line however its page is shaped. */
.radio-card.theme-card { grid-template-columns: 16px 60px 1fr; }
.radio-card.theme-card .tthumb { justify-self: center; }
.tthumb {
width: 46px; height: 60px; display: block; position: relative; overflow: hidden;
background: var(--surface); border: 1px solid var(--line); border-radius: 2px;
box-shadow: 0 1px 2px rgba(18, 22, 27, .06);
}
.radio-card.on .tthumb { border-color: var(--accent-tint-line); }
.tthumb::before, .tthumb::after { content: ""; position: absolute; }
/* submittal: a heavy cover rule over dense body text */
.tthumb-submittal::before { left: 6px; right: 6px; top: 7px; height: 2px; background: var(--ink); }
.tthumb-submittal::after {
left: 6px; right: 6px; top: 13px; bottom: 6px;
background: repeating-linear-gradient(to bottom, var(--ink-5) 0 1px, transparent 1px 4px);
}
/* brief: a hairline head and fewer, airier lines */
.tthumb-brief::before { left: 6px; right: 16px; top: 8px; height: 3px; background: var(--ink-3); }
.tthumb-brief::after {
left: 6px; right: 6px; top: 18px; bottom: 8px;
background: repeating-linear-gradient(to bottom, var(--ink-5) 0 2px, transparent 2px 8px);
}
/* executive: a serif cover glyph over the title-page double rule */
.tthumb-executive::before {
content: "Aa"; left: 0; right: 0; top: 6px; text-align: center;
font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
font-size: 15px; line-height: 1; color: var(--ink);
}
.tthumb-executive::after {
left: 8px; right: 8px; top: 28px; height: 5px;
border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink);
}
/* register: a landscape sheet ruled into columns */
.tthumb-register { width: 60px; height: 46px; }
.tthumb-register::before {
left: 5px; right: 5px; top: 6px; height: 2px; background: var(--ink);
}
.tthumb-register::after {
left: 5px; right: 5px; top: 12px; bottom: 5px;
background:
repeating-linear-gradient(to right, var(--ink-5) 0 1px, transparent 1px 12px),
repeating-linear-gradient(to bottom, var(--ink-5) 0 1px, transparent 1px 5px);
}
/* markup: body text with an empty margin down the right for notes */
.tthumb-markup::before {
left: 6px; right: 24px; top: 7px; height: 2px; background: var(--ink-3);
}
.tthumb-markup::after {
left: 6px; right: 24px; top: 14px; bottom: 6px;
background: repeating-linear-gradient(to bottom, var(--ink-5) 0 1px, transparent 1px 6px);
border-right: 1px dashed var(--ink-5);
box-shadow: 14px 0 0 -13px var(--ink-5);
}
/* compact: the same page, more lines on it */
.tthumb-compact::before {
left: 5px; right: 5px; top: 5px; height: 1px; background: var(--ink);
}
.tthumb-compact::after {
left: 5px; right: 5px; top: 9px; bottom: 4px;
background: repeating-linear-gradient(to bottom, var(--ink-5) 0 1px, transparent 1px 2.5px);
}
/* The publish step's read-only summary of what it is about to freeze. A
definition list rather than a form: nothing here is editable, and it should
not look as though a click might change it. The one control is the way back
to the composer. */
.pubsum { display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; margin: 0; }
.pubsum dt {
font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
color: var(--ink-4); align-self: baseline;
}
.pubsum dd { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.msect > .btn.sm { margin-top: 10px; }
/* #11 · personal report links. A row per reader: who, what happened, and the
two controls that matter -- give me the link, and take it back. */
.recips { margin-top: 4px; }
.recip {
display: flex; align-items: center; gap: 12px;
padding: 9px 0; border-bottom: 1px solid var(--line-2);
}
.recip:last-child { border-bottom: 0; }
/* A withdrawn reader stays on the list -- who was sent a report and when it
was taken back is part of the record -- but reads as past tense. */
.recip.off .recip-who { color: var(--ink-4); }
.recip.off .recip-name { text-decoration: line-through; }
.recip-who { flex: 1; min-width: 0; }
.recip-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Fixed rather than min-width: three rows whose status column starts in three
different places reads as three unrelated facts, and the column exists to be
scanned down. */
.recip-state { flex: 0 0 120px; text-align: right; }
.recip-state .sched-meta { margin-top: 3px; }
.recip-acts { display: flex; gap: 6px; flex-shrink: 0; }
.recip-add { display: flex; gap: 6px; margin-top: 12px; }
.recip-add .credinput { flex: 1; min-width: 0; }
@media (max-width: 560px) {
.recip { flex-wrap: wrap; }
.recip-state { flex: 1 0 auto; text-align: left; }
.recip-add { flex-wrap: wrap; }
}
.credbox {
margin: 4px 0 14px; padding: 2px 0 12px 13px;
border-left: 2px solid var(--accent-tint-line);
}
.credrow { display: flex; gap: 8px; align-items: center; }
.credrow .credinput { flex: 1; }
.credinput {
font: inherit; font-size: 12.5px; width: 100%;
padding: 7px 10px; border: 1px solid var(--control-line);
border-radius: 3px; background: var(--surface); color: var(--ink);
}
textarea.credinput { resize: vertical; min-height: 58px; font-family: var(--mono); font-size: 11.5px; }
.credinput:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.credbox .hint, .msect .hint { font-size: 11px; color: var(--ink-4); margin-top: 6px; line-height: 1.5; }
.msect > .kicker { margin-bottom: 8px; }
.radio-card { display: grid; grid-template-columns: 16px 1fr; gap: 11px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 3px; margin-bottom: 8px; cursor: pointer; align-items: start; }
.radio-card.on { background: var(--accent-tint); border-color: var(--accent); }
.radio { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--control-line); display: grid; place-items: center; margin-top: 1px; }
.radio-card.on .radio { border-color: var(--accent); }
.radio .core { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.radio-card.on .radio .core { background: var(--accent); }
.radio-card .l { font-weight: 500; font-size: 12px; display: block; }
.radio-card .n { display: block; font-size: 10.5px; color: var(--ink-4); margin-top: 2px; line-height: 1.5; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cbrow { display: flex; align-items: center; gap: 9px; font-size: 12px; cursor: pointer; padding: 6px 0; }
/* A section row in the export composer: the name takes the width, the two
move buttons sit at the end and stay the same size whether or not they are
available, so the list does not shuffle as it is reordered. */
.cbrow.secrow { gap: 8px; padding: 4px 0; }
.movebtn {
width: 20px; height: 20px; flex: none; padding: 0; line-height: 1;
border: 1px solid var(--line); border-radius: 3px; background: var(--surface);
color: var(--ink-3); font-size: 11px; cursor: pointer;
}
.movebtn:hover:not(:disabled) { border-color: var(--control-line); color: var(--ink); }
.movebtn:disabled { opacity: .35; cursor: default; }
.field { margin-bottom: 12px; }
.field label { display: block; font-weight: 500; font-size: 11.5px; margin-bottom: 5px; }
.field input, .field select, .field textarea {
width: 100%; height: 32px; border: 1px solid var(--input-line); border-radius: 8px;
padding: 0 10px; font: inherit; font-size: 12.5px; background: var(--surface);
}
/* One focus language, everywhere a text control is themed. This was
`:focus` plus a border-colour change: weaker than the 3px accent ring the
file control and the step rail already used, on the majority of the app's
controls, and triggered by the mouse as well as the keyboard. Text controls
match `:focus-visible` on click too, so nothing is lost by asking for it. */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
outline: none; border-color: var(--brand-accent);
box-shadow: 0 0 0 3px rgba(180, 83, 26, .12);
}
.field textarea { height: auto; padding: 8px 10px; resize: vertical; font-size: 12px; line-height: 1.6; }
.field .hint { font-size: 10.5px; color: var(--ink-4); margin-top: 4px; }
.err {
color: var(--danger); background: var(--danger-tint); border: 1px solid var(--danger-line);
border-radius: 3px; padding: 8px 10px; font-size: 11.5px; margin: 10px 0;
}
/* The same shape as .err in the affirmative — "a link is on its way" needs the
same weight on the page as "that did not work", or a form that succeeded
quietly reads as a form that did nothing.
Named `msg-ok`, not `ok`. As `.ok` it collided with every component that uses
`ok` as a STATE modifier — `chip ok`, and the switcher's health dot — because
both selectors were (0,1,0) and this one is declared later, so it won padding,
border and font-size. That shipped "on track" as a bordered panel across eight
screens and, before this rename, blew the switcher's 7px dot up to 27px. One
element carries this class; a state word and a component name are now
different things. */
.msg-ok {
color: var(--ok); background: var(--ok-tint); border: 1px solid var(--ok);
border-radius: 3px; padding: 8px 10px; font-size: 11.5px; margin: 10px 0;
}
/* ============================== unlock ============================== */
/* --- browser surfaces -------------------------------------------------------
The parts nobody draws still carry the design. Selection, the caret, the
focus ring and the numerals ship with browser defaults that belong to no
design system, and leaving them is the clearest tell that a page was
assembled rather than built. Themed once, globally, from the same palette. */
::selection { background: rgba(180, 83, 26, .16); color: var(--ink); }
input, textarea, select { caret-color: var(--brand-accent); }
/* Every figure in this product is a measurement that gets compared down a
column, so the numerals line up everywhere by default, not per table. */
input[type="number"], .mono, .num, table.grid td, table.grid th {
font-variant-numeric: tabular-nums;
}
/* --- the sign-in surface ---------------------------------------------------
Page one of the document this tool issues, set in the same hand as every
page after it: paper, one ink rule, and type doing the structural work. The
card is gone on purpose. A 380px panel floating in the middle of a 1440px
screen is the arrangement every product ships, and it said nothing about
this one. What signals the craft here is precision -- optical centring, a
real focus system, themed selection and caret, tabular figures -- not
ornament, and none of it is decoration that could be removed without the
page getting worse. */
/* Two materials meeting, full bleed, no page margin: the sidebar's ink on the
left, the report's paper on the right. The split is roughly 70/30, with the
form column held at 420px minimum so the card never has to shrink -- at 1440
that lands at 68/32 and at 1920 at 68/32 again, the column capped by its own
content rather than by the percentage. */
.unlock {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr minmax(440px, 33%);
background: var(--paper);
}
/* A9: locked, not signed out. The sign-in surface lies over the page rather
than replacing it, so what the person was doing is visibly still there --
dimmed, inert, and exactly where they left it. */
body.locked #app { filter: blur(2px) saturate(.7); pointer-events: none; user-select: none; }
body.locked .unlock {
position: fixed; inset: 0; z-index: 900; min-height: 100vh;
background: color-mix(in srgb, var(--paper) 86%, transparent);
backdrop-filter: blur(1px);
}
.unlock-col {
display: grid; place-items: center;
/* Optically centred: a column reads centred when it sits slightly above
true centre, because the eye weights the space beneath it more. 40/112
puts it 36px high on a 1440x900 screen -- the 40/72 it started at measured
16px, which is a lift you can only find with a ruler. */
padding: 40px 28px 112px;
}
.unlock-card { width: 100%; max-width: 420px; }
/* --- the ink panel ---------------------------------------------------------
Head, drawing, foot. No link and no control lives here: everything actionable
is in the paper column, so nothing on this side can take focus away from the
form or give a keyboard user somewhere pointless to land.
The two halves share one structural gesture in opposite inks. The paper side
closes its masthead with a 2px rule in --ink; this side closes its head with
a 2px rule in the sidebar's own text colour, and both sides stand their foot
on a 1px hairline. Same weights, inverted material. */
/* Exactly one viewport tall, and sticky so a long form on the paper side scrolls
past it instead of stretching it. A sign-in page that scrolls to show its own
decoration has put the decoration ahead of the sign-in. */
.unlock-panel {
display: flex; flex-direction: column;
gap: 34px; min-width: 0; overflow: hidden;
height: 100vh; position: sticky; top: 0;
padding: 48px clamp(36px, 3.6vw, 56px);
background: var(--sidebar-bg); color: var(--sidebar-text);
}
/* One measure for all three blocks, so the head rule, the drawing and the foot
rule share an edge at every width instead of the rules outrunning the art on
a wide monitor. */
.up-head, .up-art, .up-foot { max-width: 820px; }
.up-head { border-bottom: 2px solid var(--sidebar-text); padding-bottom: 24px; }
.up-line {
margin: 0; max-width: 26ch;
font-size: 30px; font-weight: 500; line-height: 1.34; letter-spacing: -.025em;
color: var(--sidebar-text); text-wrap: balance;
}
/* The drawing takes whatever height the head and foot leave and letterboxes
itself into it, anchored to the panel's left edge. Sized off its own width it
ran 505px tall and pushed the whole page past the viewport. */
.up-art {
flex: 1 1 auto; min-height: 0;
display: flex; flex-direction: column; justify-content: center; gap: 18px;
min-width: 0;
}
.up-plot { flex: 0 1 auto; min-height: 0; display: block; width: 100%; height: 100%; }
.up-cap {
margin: 0; font-size: 12px; line-height: 1.5; color: var(--sidebar-label);
}
.up-foot {
border-top: 1px solid var(--sidebar-line-2); padding-top: 22px;
display: flex; flex-direction: column; gap: 12px;
}
.up-claim {
margin: 0; max-width: 52ch;
font-size: 13px; line-height: 1.65; color: var(--sidebar-text-2);
text-wrap: pretty;
}
.up-stamp {
margin: 0; font-family: var(--mono); font-size: 12px;
color: var(--sidebar-label);
}
/* WHO gets the panel is a question about the device, not the window.
It used to leave below 1280 wide OR 800 tall, to keep the specimen's labels
at 12px or more. The height half caught nearly every laptop: a 1440x900
screen loses about 120px to tabs and the address bar, so the surface this
page was designed as only ever appeared on a desktop monitor.
Now: every laptop keeps it, down to small ones and short windows, and
readability is held by the layout tiers below rather than by leaving. The
drawing was narrowed (viewBox 700 -> 610) so its labels come out larger at
the same width. Tablets and phones lose it -- by pointer as well as width,
because an iPad in landscape is 1366 wide and width alone cannot tell it
from a laptop. */
/* Narrower laptop windows: the form column gives 40px back and the gutters
tighten, which is exactly the width the drawing needs to keep its labels. */
@media (max-width: 1279px) {
.unlock { grid-template-columns: minmax(0, 1fr) 400px; }
.unlock-panel { padding-left: 28px; padding-right: 28px; }
.unlock-col { padding-left: 24px; padding-right: 24px; }
}
/* Short laptop screens: the head and the gaps give height back to the
drawing, which takes whatever the head and foot leave. */
@media (max-height: 820px) {
.unlock-panel { padding-top: 32px; padding-bottom: 32px; gap: 22px; }
.up-head { padding-bottom: 14px; }
.up-line { font-size: 22px; line-height: 1.3; max-width: 34ch; }
.up-art { gap: 12px; }
.up-foot { padding-top: 14px; gap: 8px; }
.up-claim { max-width: 72ch; }
.unlock-col { padding-top: 32px; padding-bottom: 48px; }
}
/* The shortest laptop windows. The headline already makes the claim the foot
repeats, so the foot is what goes; the caption stays, because "not client
data" is the one sentence the drawing cannot do without. */
@media (max-height: 680px) {
.up-foot { display: none; }
}
/* Tablets and phones -- a coarse primary pointer, or narrower than a laptop --
and a window too short to be a laptop screen at all. The paper column takes
the whole page, which is the layout this surface already shipped. */
@media (max-width: 1023px), (hover: none) and (pointer: coarse), (max-height: 579px) {
.unlock { grid-template-columns: 1fr; }
.unlock-panel { display: none; }
.unlock-col { padding: 40px 24px 112px; }
}
/* The masthead stacks -- device, then title, then descriptor -- rather than
sitting the mark beside the title. Inline, the mark pushed the title and the
subtitle 41px in from the edge every label, field and button on the page
starts at, and a half-indent reads as a mistake, not a hierarchy. One left
edge from the mark to the last line of the foot is the whole claim. */
.unlock-brand {
display: block;
/* The page's single structural gesture: the 2px ink rule this product's
report sets under every section head, at full column width, closing the
masthead. It is what makes this page one of the document rather than a
sign-in screen wearing the document's colours. */
border-bottom: 2px solid var(--ink);
padding-bottom: 15px; margin-bottom: 20px;
}
.unlock-brand .sb-mark {
width: 30px; height: 30px; border-radius: 7px; font-size: 12px;
margin-bottom: 13px;
}
.unlock h1 {
font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1;
text-wrap: balance;
}
.unlock .sub { font-size: 13.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.45; }
.pin-inputs { display: flex; gap: 10px; justify-content: center; margin: 20px 0 16px; }
.pin-digit {
width: 58px; height: 68px; text-align: center; font-family: var(--mono);
font-size: 26px; font-weight: 600; color: var(--ink);
border: 1px solid var(--line); border-radius: 3px; background: var(--surface);
}
.pin-digit:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(27,79,138,.12); }
/* alignment guard */
/* A callout carried a 3px coloured stripe down its left edge. This world marks
severity with a tint and a hairline in the same family -- the way .verify-bar
already does -- and a thick coloured rule is the one device it never uses
anywhere else. The colour now runs the whole border, so the object reads as
one thing rather than a neutral box wearing a badge. */
.align-notice { border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px; margin-bottom: 14px; }
.align-notice.high { border-color: var(--danger-line); background: var(--danger-tint-2); }
/* `warn` as well as `warning`: trends.js has always passed the short name, and
the rule it aimed at did not exist, so those callouts rendered neutral. */
.align-notice.warning, .align-notice.warn { border-color: var(--warn-line); background: #FFFDF8; }
.align-notice.info { border-color: var(--accent-tint-line); background: var(--surface-3); }
.align-notice .t { font-weight: 600; font-size: 12.5px; margin-bottom: 5px; }
.align-notice .m { font-size: 12px; line-height: 1.65; color: var(--ink-2); }
.align-ev { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.align-ev .k { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.align-ev .v { font-family: var(--mono); font-weight: 600; font-size: 12px; }
.align-ev .n { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); }
.unverified { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .06em; color: var(--danger); background: var(--danger-tint); border: 1px solid var(--danger-line); border-radius: 2px; padding: 2px 6px; margin-left: 10px; vertical-align: 3px; }
.muted { color: var(--ink-4); font-size: 12px; padding: 10px 0; }
.spinner { width: 16px; height: 16px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: flex; align-items: center; gap: 10px; padding: 30px 0; color: var(--ink-4); font-size: 12.5px; }
/* The contract-completion card is gone: its overrun, dates, completion
activity, float basis and the engine's own sentence are a Measures row and
its detail panel now. Removing its `.ccd` block also ends a collision that
was never intended — the Gantt's contract-completion rule carries the same
class (`pg-rule ccd`) and was picking up the card's border, padding and
background. The two `.pg-rule.ccd` rules below are the real ones. */
/* the assessment strip — present only when the conclusion actually moved */
.assess {
display: flex; gap: 13px; align-items: flex-start; margin-bottom: 14px;
padding: 11px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent);
border-radius: 3px; background: var(--accent-tint);
}
.assess .lbl {
flex: none; font-weight: 600; font-size: 9.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--accent-ink); padding-top: 2px; white-space: nowrap;
}
.assess p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
/* ---------------- drivers — "why", from payload.priorities (C1) ----------------
Three cards, equal width, one column below 1000px. Three is a hard cap: the
ranking holds twelve entries and showing them all would restate the findings
list, which is one tab away and better at that job. */
.drivers {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px;
}
.driver { padding: 13px 15px; display: flex; flex-direction: column; gap: 6px; }
.driver-meta { display: flex; align-items: center; gap: 7px; }
.driver-rank {
font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .06em;
color: var(--ink-4);
}
.driver h3 { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.driver p { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }
@media (max-width: 1000px) { .drivers { grid-template-columns: 1fr; } }
/* ------- critical-path change reasoning (C2) — cause, under effect -------
Sits inside the critical-path card, below the two before/after columns, so a
reader meets the explanation immediately after the thing it explains. Marked
as AI-written: it is prose about computed facts, and which is which has to be
legible without being loud. */
.cpwhy { border-top: 1px solid var(--line-2); padding: 12px 14px 14px; background: var(--surface-3); }
.cpwhy-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.cpwhy p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); max-width: 82ch; }
.cpwhy-drivers { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
.cpwhy-drivers .k {
font-weight: 600; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-4); margin-right: 2px;
}
.cpwhy-unverified {
margin-top: 9px; font-size: 11px; line-height: 1.6; color: var(--warn-ink-3);
background: var(--warn-tint); border: 1px solid var(--warn-line);
border-radius: 3px; padding: 7px 10px;
}
/* ------- material vs benign description changes (C3) -------
A renamed activity is either the same work reworded or a different feature of
work wearing the same id. The engine classifies which; these cards say so. */
.matgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; padding: 12px 14px 16px; }
.matcard { border: 1px solid var(--line); border-radius: 3px; padding: 11px 13px; background: var(--surface-3); }
.matcard.material { border-left: 3px solid var(--warn); background: var(--warn-tint); }
.mat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mat-flag {
font-family: var(--mono); font-weight: 600; font-size: 9px; letter-spacing: .08em;
border-radius: 2px; padding: 2px 6px; background: var(--line-2); color: var(--ink-3);
}
.matcard.material .mat-flag { background: var(--warn); color: var(--surface); }
.mat-desc { font-size: 11.5px; line-height: 1.6; color: var(--ink); }
.mat-desc .arw { color: var(--ink-5); margin: 0 5px; }
.mat-work { margin-top: 6px; font-size: 11px; color: var(--ink-3); font-family: var(--mono); }
.mat-reason { margin: 7px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-2); }
.mat-unverified {
margin-top: 7px; font-size: 10.5px; line-height: 1.55; color: var(--warn-ink-3);
background: var(--surface); border: 1px solid var(--warn-line);
border-radius: 2px; padding: 6px 8px;
}
@media (max-width: 1000px) { .matgrid { grid-template-columns: 1fr; } }
/* ---------------- change vs condition charts (C4) ----------------
Two single-series charts, never one chart with two meanings. Each carries one
colour for its whole series — colour here says "which chart", not "which
category", so a bar is never coloured by its rank.
Palette note: --accent and --warn were checked with the palette validator
against a white surface. CVD separation dE 20.0 (protan) / 18.9 (tritan) and
normal-vision dE 23.5 both clear their thresholds, and both clear 3:1 contrast.
The validator's lightness band flags --accent, which is a cross-series harmony
rule for one categorical set; these are two independent single-series charts,
and --accent is the product's established accent token. */
.chartcard + .chartcard { margin-top: 12px; }
.ch-head { display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px 0; }
.ch-head .t { font-weight: 600; font-size: 12.5px; line-height: 1.3; }
.ch-head .sub { margin-top: 3px; font-size: 10.5px; line-height: 1.55; color: var(--ink-4); max-width: 62ch; }
.ch-head .tbtn {
margin-left: auto; flex: none; height: 24px; padding: 0 9px; font-size: 11px;
border: 1px solid var(--line); border-radius: 3px; background: var(--surface);
color: var(--ink-2);
}
.ch-head .tbtn:hover { border-color: var(--control-line); }
.ch-body { padding: 10px 14px 14px; }
.hbar-row { display: grid; grid-template-columns: 148px 1fr 46px; align-items: center; gap: 10px; height: 26px; }
.hbar-lbl { font-size: 11.5px; color: var(--ink-2); text-align: right;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { position: relative; height: 100%; display: flex; align-items: center; }
.hbar-track::before {
content: ""; position: absolute; left: 0; right: 0; top: 50%;
border-top: 1px solid var(--line-2);
}
.hbar-fill {
position: relative; height: 14px; border-radius: 0 4px 4px 0; min-width: 1px;
background: var(--accent);
}
.conditions .hbar-fill { background: var(--warn); }
.hbar-fill.zero { background: var(--line); width: 2px !important; border-radius: 0; }
.hbar-val { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--ink); }
.hbar-val.dim { color: var(--ink-4); font-weight: 400; }
.ch-foot { padding: 0 14px 12px; font-size: 10.5px; line-height: 1.55; color: var(--ink-4); }
.ch-filternote {
margin: 8px 14px 12px; padding: 7px 10px; border-radius: 3px;
background: var(--warn-tint); border: 1px solid var(--warn-line);
font-size: 10.5px; line-height: 1.55; color: var(--warn-ink-3);
}
.chartgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.chartgrid .chartcard + .chartcard { margin-top: 0; }
@media (max-width: 1000px) { .chartgrid { grid-template-columns: 1fr; } }
/* ---------------- evidence panel (D2) ----------------
Slides over; never navigates. A reviewer who loses their place to see why a
number says what it says will stop asking, which defeats the point. */
.ev-scrim {
position: fixed; inset: 0; background: rgba(18, 22, 27, .28); z-index: 90;
}
/* F3: the activity panel. The evidence drawer's frame, with the facts under
the code, a tab row, and a four-column table whose changed rows carry a
left stripe and whose unchanged rows are muted. */
.actp-host .ev-scrim { z-index: 95; }
.ev.actp { width: 640px; z-index: 100; }
.ev.actp .ev-h .val .unit { display: block; margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }
.actp-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.actp-fact { display: inline-flex; align-items: baseline; gap: 5px; font-size: 11.5px; }
.actp-fact .k { color: var(--ink-4); }
.actp-fact .v { font-family: var(--mono); color: var(--ink); }
.actp-fact.hi .v { color: var(--danger); font-weight: 600; }
.actp-fact.warn .v { color: var(--warn); }
.actp-nav { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.actp-nav .n { font-size: 11px; color: var(--ink-4); margin-left: 4px; }
.actp-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 12px; }
.actp-tabs .tab {
border: 0; background: none; font: inherit; font-size: 12px; padding: 6px 9px; color: var(--ink-3); cursor: pointer;
border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 5px;
}
.actp-tabs .tab:hover { color: var(--ink); }
.actp-tabs .tab.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.actp-tabs .tab .cnt { font-family: var(--mono); font-size: 10px; color: var(--danger); }
.ev .actp-table { margin-bottom: 18px; }
.ev .actp-table th.v { font-family: var(--mono); text-transform: none; letter-spacing: 0; }
.ev .actp-table td { padding: 5px 8px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.ev .actp-table td.f { color: var(--ink-2); }
.ev .actp-table td.v { font-size: 11px; }
.ev .actp-table td.d { font-family: var(--mono); font-size: 10.5px; white-space: nowrap; text-align: right; }
.ev .actp-table td.d.on { color: var(--danger); font-weight: 600; }
.ev .actp-table td.d.off { color: var(--ink-5); }
.ev .actp-table tr.same td { color: var(--ink-4); }
.ev .actp-table tr.same td.v { color: var(--ink-4); }
.ev .actp-table tr.chg td.f { box-shadow: inset 3px 0 0 var(--danger); padding-left: 10px; }
.ev .actp-table tr.grp td { font-weight: 600; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); padding-top: 12px; border-bottom: 0; }
.ev .actp-table td .n { font-size: 11px; color: var(--ink-3); }
.ev .actp-table td .chip.cp { margin-left: 6px; }
.actp-finding { cursor: pointer; background: none; font: inherit; }
.actp-finding .rb { font-family: var(--mono); font-size: 10px; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--line); color: var(--ink-3); }
.actp-foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.actp-foot .n { font-size: 10.5px; color: var(--ink-4); }
.ev {
position: fixed; top: 0; right: 0; bottom: 0; width: 560px; max-width: 94vw;
background: var(--surface); border-left: 1px solid var(--line);
z-index: 100; display: flex; flex-direction: column;
animation: evslide .18s cubic-bezier(.4, 0, .2, 1);
}
@keyframes evslide { from { transform: translateX(18px); opacity: .4; } to { transform: none; opacity: 1; } }
.ev-h { padding: 16px 20px 14px; border-bottom: 1px solid var(--line); position: relative; }
.ev-h .lbl { font-size: 11.5px; color: var(--ink-4); padding-right: 30px; }
.ev-h .val {
font-family: var(--mono); font-weight: 600; font-size: 27px; line-height: 1.1;
letter-spacing: -.02em; margin-top: 4px;
}
.ev-h .unit { font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--ink-3); margin-left: 7px; }
.ev-x {
position: absolute; top: 12px; right: 14px; border: 0; background: none;
color: var(--ink-4); font-size: 17px; line-height: 1; padding: 5px 7px; border-radius: 3px;
}
.ev-x:hover { background: var(--surface-2); color: var(--ink); }
.ev-b { padding: 16px 20px; overflow-y: auto; flex: 1; }
.ev-meta { display: grid; grid-template-columns: 88px 1fr; gap: 9px 14px; font-size: 11.5px; margin-bottom: 18px; }
.ev-meta dt { color: var(--ink-4); }
.ev-meta dd { margin: 0; color: var(--ink-2); line-height: 1.6; }
.ev-meta dd.mono { font-family: var(--mono); font-size: 10.5px; }
.ev-rows-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ev-rows-h .k {
font-weight: 600; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
color: var(--ink-4);
}
.ev-rows-h .btn { margin-left: auto; }
.ev-note {
margin-bottom: 10px; padding: 8px 10px; border-radius: 3px;
background: var(--warn-tint); border: 1px solid var(--warn-line);
font-size: 10.5px; line-height: 1.55; color: var(--warn-ink-3);
}
.ev table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ev th {
text-align: left; font-weight: 500; font-size: 10px; letter-spacing: .04em;
text-transform: uppercase; color: var(--ink-4); padding: 5px 8px;
border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface);
}
.ev th button { border: 0; background: none; padding: 0; font: inherit; color: inherit;
letter-spacing: inherit; text-transform: inherit; }
.ev th button:hover { color: var(--ink); }
.ev td { padding: 5px 8px; border-bottom: 1px solid var(--line-2); color: var(--ink-2); }
.ev td.id { font-family: var(--mono); color: var(--ink); }
.ev td.num { text-align: right; font-family: var(--mono); }
.ev-f {
padding: 10px 20px; border-top: 1px solid var(--line);
font-size: 10.5px; color: var(--ink-4); display: flex; justify-content: space-between; gap: 12px;
}
.ev-f .src { font-family: var(--mono); }
/* Activity inspector: the shared slate theme, with a fixed header and tabs
around one scrolling comparison. Values and change flags remain server-led. */
.actp-host { font: var(--type-body); color: var(--ink); }
.actp-host .ev-scrim { background: color-mix(in srgb, var(--ink) 28%, transparent); }
.actp-host .ev.actp {
width: min(760px, calc(100vw - 24px)); max-width: none; height: 100dvh;
background: var(--surface); border-left-color: var(--line); box-shadow: var(--shadow-4);
overflow: hidden; outline: none; animation: actp-enter var(--t-med) var(--ease) both;
}
@keyframes actp-enter { from { transform: translateX(24px); } to { transform: translateX(0); } }
.actp-host .actp .ev-h { padding: 14px 24px 18px; border: 0; flex: none; }
.actp-host .actp-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.actp-host .actp-eyebrow { font: var(--type-caption); color: var(--ink-4); white-space: nowrap; }
.actp-host .actp-tools, .actp-host .actp-step { display: flex; align-items: center; gap: 6px; }
.actp-host .actp-step { padding-right: 12px; margin-right: 6px; border-right: 1px solid var(--line-2); }
.actp-host .actp-step .n { margin-right: 6px; font: var(--type-caption); font-variant-numeric: tabular-nums; color: var(--ink-4); white-space: nowrap; }
.actp-host .actp .ev-x {
position: static; display: grid; place-items: center; width: 30px; height: 30px;
padding: 0; border: 0; border-radius: var(--radius-sm); font: var(--type-heading);
background: transparent; color: var(--ink-4); flex: none;
}
.actp-host .actp .ev-x:hover { background: var(--surface-2); color: var(--ink); }
.actp-host .actp .ev-h .lbl {
font: var(--type-caption); color: var(--ink-4); padding: 0; margin-bottom: 8px;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.actp-host .actp .ev-h .val { margin: 0; font: var(--type-body); letter-spacing: 0; }
.actp-host .actp-code { display: block; font: var(--type-caption); font-family: var(--mono); color: var(--ink-3); margin-bottom: 5px; overflow-wrap: anywhere; }
.actp-host .actp .ev-h .val .unit {
margin: 0; font: var(--type-title); letter-spacing: var(--type-title-tracking); color: var(--ink);
overflow-wrap: anywhere;
}
.actp-host .actp-facts { display: grid; grid-template-columns: .9fr 1.25fr .85fr 1.25fr; gap: 12px 20px; margin-top: 16px; }
.actp-host .actp-fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.actp-host .actp-fact .k { font: var(--type-caption); color: var(--ink-4); }
.actp-host .actp-fact .v { font: var(--type-body); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; color: var(--ink-2); overflow-wrap: anywhere; }
.actp-host .actp-fact.hi .v { color: var(--danger); }
.actp-host .actp-fact.warn { grid-column: 1 / -1; flex-direction: row; gap: 8px; }
.actp-host .actp-fact.warn .v { color: var(--warn); }
.actp-host .actp-tabs {
flex: none; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 0 20px;
border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line);
overflow-x: auto; background: var(--surface); scrollbar-width: thin;
}
.actp-host .actp-tabs .tab {
flex: none; min-height: 42px; margin: 0; padding: 9px 8px;
font: var(--type-caption); color: var(--ink-4); white-space: nowrap;
border-bottom: 2px solid transparent; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.actp-host .actp-tabs .tab:hover { color: var(--ink); background: var(--surface-4); }
.actp-host .actp-tabs .tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: var(--weight-strong); }
.actp-host .actp-tabs .tab .cnt {
display: inline-grid; place-items: center; min-width: 18px; padding: 1px 4px;
border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-3);
font: var(--type-caption); font-variant-numeric: tabular-nums;
}
.actp-host .actp-tabs .tab.on .cnt { background: var(--accent-tint); color: var(--accent); }
.actp-host .actp .ev-b { min-height: 0; padding: 0 24px 20px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--input-line) transparent; }
.actp-host .actp-table { margin: 0 0 20px; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.actp-host .actp-fields th:first-child { width: 24%; }
.actp-host .actp-fields th:nth-child(2), .actp-host .actp-fields th:nth-child(3) { width: 27%; }
.actp-host .actp-fields th:last-child { width: 22%; text-align: right; }
.actp-host .actp-table th, .actp-host .actp-table th.v {
position: sticky; top: 0; z-index: 1; padding: 12px 10px; background: var(--surface);
border-bottom: 1px solid var(--line); font: var(--type-caption); font-weight: var(--weight-strong);
color: var(--ink-2); text-transform: none; letter-spacing: 0; vertical-align: bottom; overflow-wrap: anywhere;
}
.actp-host .actp-file-kind { display: block; font: var(--type-caption); color: var(--ink-4); margin-bottom: 3px; }
.actp-host .actp-column-label { display: block; }
.actp-host .actp-table td, .actp-host .actp-table td.v, .actp-host .actp-table td.d {
padding: 9px 10px; border-bottom: 1px solid var(--line-2); font: var(--type-body);
font-variant-numeric: tabular-nums; vertical-align: top; overflow-wrap: anywhere; white-space: normal;
}
.actp-host .actp-table td.f { color: var(--ink-2); }
.actp-host .actp-table td.v { color: var(--ink-3); }
.actp-host .actp-table td.current { color: var(--ink); font-weight: var(--weight-medium); }
.actp-host .actp-table td.d { text-align: right; }
.actp-host .actp-table td.d.off, .actp-host .actp-table tr.same td, .actp-host .actp-table tr.same td.v { color: var(--ink-4); }
.actp-host .actp-table tr.chg td { background: var(--surface-4); }
.actp-host .actp-table tr.chg td.f { box-shadow: inset 2px 0 0 var(--accent); padding-left: 10px; }
.actp-host .actp-table tr.chg td.current { background: var(--accent-wash); }
.actp-host .actp-table .actp-delta { display: inline-block; }
.actp-host .actp-table td.d.on .actp-delta {
padding: 1px 6px; border-radius: var(--radius-sm); background: var(--danger-tint-2);
color: var(--danger); font: var(--type-caption); font-weight: var(--weight-strong); white-space: nowrap;
}
.actp-host .actp-table tr.grp td {
padding: 16px 10px 8px; border: 0; background: var(--surface); color: var(--ink-3);
font: var(--type-caption); font-weight: var(--weight-strong); text-transform: none; letter-spacing: 0;
}
.actp-host .actp-table tbody tr:not(.grp):hover td { background: var(--surface-2); }
.actp-host .actp-table td .n { display: block; font: var(--type-body); color: var(--ink-3); margin-top: 4px; }
.actp-host .actp-rels .actp-table th:first-child { width: 50%; }
.actp-host .actp-rels .actp-table th:nth-child(2) { width: 25%; }
.actp-host .actp-rels .actp-table th:last-child { width: 25%; text-align: right; }
.actp-host .actp .ev-rows-h { margin: 20px 0 10px; }
.actp-host .actp .ev-rows-h .k { font: var(--type-caption); font-weight: var(--weight-strong); color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.actp-host .actp .secnote { font: var(--type-caption); color: var(--ink-4); padding: 0 0 8px; background: none; border: 0; }
.actp-host .actp .tracecard { gap: 8px; padding: 10px 12px; border-color: var(--line-2); border-radius: var(--radius-sm); font: var(--type-body); }
.actp-host .actp .tracecard .nm { font: var(--type-body); color: var(--ink-2); }
.actp-host .actp .tracecard .mt { font: var(--type-caption); color: var(--ink-4); }
.actp-host .actp .btn { min-height: 30px; height: auto; font: var(--type-caption); padding: 5px 10px; border-radius: var(--radius-sm); }
.actp-host .actp .actp-step .btn { box-shadow: none; background: var(--surface); }
.actp-host .actp-foot { flex: none; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 0; padding: 12px 24px; background: var(--surface); border-top: 1px solid var(--line); }
.actp-host .actp-nav { margin: 0; flex-wrap: wrap; gap: 8px; }
.actp-host .actp-nav .actp-why { color: var(--accent); background: var(--accent-tint); border-color: var(--accent-tint-line); box-shadow: none; }
.actp-host .actp-foot .n { width: 100%; font: var(--type-caption); color: var(--ink-4); }
.actp-host .actp button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (max-width: 600px) {
.actp-host .ev.actp { width: 100vw; border-left: 0; }
.actp-host .actp .ev-h { padding: 10px 16px 14px; }
.actp-host .actp-topline { gap: 6px; margin-bottom: 12px; }
.actp-host .actp-step { padding-right: 6px; margin-right: 0; gap: 4px; }
.actp-host .actp .actp-step .btn { padding: 4px 6px; }
.actp-host .actp-step .n { margin-right: 2px; }
.actp-host .actp-facts { grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 12px; }
.actp-host .actp-tabs { padding: 0 10px; }
.actp-host .actp .ev-b { padding: 0 10px 16px; }
.actp-host .actp-table th, .actp-host .actp-table th.v, .actp-host .actp-table td,
.actp-host .actp-table td.v, .actp-host .actp-table td.d { padding: 9px 6px; font: var(--type-caption); }
.actp-host .actp-file-kind { font-size: var(--mark-size); }
.actp-host .actp-fields th:first-child { width: 25%; }
.actp-host .actp-fields th:nth-child(2), .actp-host .actp-fields th:nth-child(3) { width: 26%; }
.actp-host .actp-fields th:last-child { width: 23%; }
.actp-host .actp-table td.d.on .actp-delta { padding: 1px 3px; white-space: normal; }
.actp-host .actp-foot { padding: 10px 16px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.actp-host .ev.actp { animation: none; }
}
/* the affordance (D3) — a number you can open */
.numlink {
border: 0; background: none; padding: 2px 1px; font: inherit; color: inherit;
border-bottom: 1px dashed var(--control-line); cursor: pointer;
min-height: 24px; line-height: inherit;
}
.numlink:hover { border-bottom-style: solid; border-bottom-color: var(--accent); color: var(--accent); }
.numlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* section kind + disclosed basis (BUG 3 / BUG 8) */
.kindtag {
margin-left: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .06em;
text-transform: uppercase; color: var(--warn); background: var(--warn-tint);
border-radius: 2px; padding: 1px 5px;
}
.kindtag.view { color: var(--ink-4); background: var(--line-2); }
.basis { font-size: 10.5px; color: var(--ink-4); margin-top: 2px; }
.rollup-src { font-size: 10px; color: var(--ink-4); margin-top: 2px; font-family: var(--mono); }
.cbrow.disabled { opacity: .55; cursor: not-allowed; }
/* schedule provenance — what the file says about itself */
.provenance { display: grid; grid-template-columns: 150px 1fr; gap: 7px 16px; font-size: 11.5px; margin: 0; }
.provenance dt { color: var(--ink-4); }
.provenance dd { margin: 0; color: var(--ink-2); }
.provenance dd.mono { font-family: var(--mono); font-size: 11px; color: var(--ink); }
.prov-rule { grid-column: 1 / -1; border-top: 1px solid var(--line-2); margin: 4px 0; }
/* what the report does not know, stated before any of its numbers */
.completeness {
flex: none; display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
padding: 8px 20px; background: var(--surface-2); border-bottom: 1px solid var(--line);
font-size: 11px; line-height: 1.5;
}
.completeness.warn { background: var(--warn-tint); border-bottom-color: var(--warn-line); }
.completeness .cf { display: inline-flex; align-items: baseline; gap: 6px; }
.completeness .k {
font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4);
}
.completeness .v { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.completeness .cf.bad .v { color: var(--danger); font-weight: 600; }
.completeness .cf.note { flex: 1 1 100%; color: var(--warn-ink-3); font-family: var(--sans); }
.sub-note.gap { color: var(--ink-4); }
/* the section note — what this section counts, and how it differs from its neighbours */
.secnote {
font-size: 10.5px; line-height: 1.6; color: var(--ink-3); margin-bottom: 10px;
padding: 8px 10px; background: var(--surface-2); border-left: 2px solid var(--line);
border-radius: 0 2px 2px 0; max-width: 96ch;
}
/* a section note that qualifies its own number (N-round QA: retype halves) */
.secnote.warnnote { color: var(--warn); }
/* Python's own account of the slip, above the model's prose */
.cpwhy-computed {
font-size: 12px; line-height: 1.65; color: var(--ink); margin-bottom: 10px;
padding: 9px 11px; background: var(--surface); border: 1px solid var(--line);
border-left: 3px solid var(--accent); border-radius: 0 2px 2px 0; max-width: 82ch;
}
.cpwhy-legend { margin-top: 9px; font-size: 10.5px; line-height: 1.55; color: var(--ink-4); max-width: 82ch; }
/* budget movement: the subtraction the report never showed */
.costrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.costcell { border: 1px solid var(--line); border-radius: 3px; padding: 11px 13px; background: var(--surface-3); }
.costcell .v { font-family: var(--mono); font-weight: 600; font-size: 19px; letter-spacing: -.02em; margin: 6px 0 3px; }
.costcell .n { font-size: 10.5px; color: var(--ink-4); }
.costcell.net { border-left: 3px solid var(--warn); background: var(--warn-tint); }
.costcell.net.flat { border-left-color: var(--ok); background: var(--ok-tint); }
.costcell.net.flat .v { color: var(--ok); }
.costpairs { margin-top: 14px; border-top: 1px solid var(--line-2); padding-top: 11px; }
.costpair { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11.5px; }
.costpair .amt { font-family: var(--mono); font-size: 11px; font-weight: 600; }
.costpair .amt.up { color: var(--ok); }
.costpair .amt.dn { color: var(--danger); }
.costpair .arw { color: var(--ink-5); }
/* what a grouped finding's count actually counts */
.findsub { display: block; font-weight: 400; font-size: 10.5px; color: var(--ink-4); margin-top: 2px; }
.tracecard.done { opacity: .5; text-decoration: line-through; }
/* a DCMA status that is not the plain value-vs-threshold result, and a pass that
is only a consequence of another metric's failure */
.dcma-override, .dcma-note {
font-size: 10.5px; line-height: 1.55; margin-top: 5px; padding: 6px 8px;
border-radius: 2px; max-width: 62ch;
}
.dcma-override { color: var(--warn-ink-3); background: var(--warn-tint); border: 1px solid var(--warn-line); }
.dcma-note { color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); }
.overridden {
display: block; margin-top: 4px; font-size: 9px; letter-spacing: .06em;
text-transform: uppercase; color: var(--ink-4);
}
/* the DCMA checks this comparison does not compute */
.uncomputed { margin-top: 8px; display: grid; gap: 7px; }
.uncomputed-row { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.uncomputed-row .n {
font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-4);
text-align: right; padding-top: 1px;
}
.uncomputed-row .m { font-size: 11.5px; font-weight: 500; color: var(--ink-2); }
.uncomputed-row .why { font-size: 10.5px; line-height: 1.55; color: var(--ink-4); margin-top: 2px; max-width: 72ch; }
.chart-note { font-size: 11.5px; line-height: 1.6; color: var(--ink-2); }
/* --- an activity code you can ask a question of ------------------------- *
* Every activity ID in the report answers "where else is this counted?".
* The affordance has to be quiet: these sit inside dense tables and chip rows
* where a button that looks like a button would swamp the data. Underline on
* hover and focus only, and the code keeps whatever type its context gives it. */
button.codelink {
font: inherit; color: inherit; background: none; border: 0; padding: 0;
margin: 0; cursor: pointer; text-align: inherit;
}
button.codelink:hover { text-decoration: underline; }
button.codelink:focus-visible {
outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 2px;
}
button.acode.codelink {
font-family: var(--mono); font-size: 10px; color: var(--accent);
background: var(--surface-2); border: 1px solid var(--line-2);
border-radius: 2px; padding: 1px 5px;
}
button.id.codelink { font-family: var(--mono); font-size: 11.5px; color: var(--accent); }
button.codeplain.codelink { font: inherit; color: inherit; }
/* --- narrative footer: when it was written, and what can be done to it --- */
.narr-foot {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 10px 14px; border-top: 1px solid var(--line-2); background: var(--surface-3);
}
.narr-acts { display: flex; gap: 6px; margin-left: auto; }
/* --- narrative "by section" bullets (N09) --------------------------------
* The bullet is a button because it does something on click: it opens the
* rows underneath it, in place. "Open section" is the separate jump, kept
* separate because a jump costs the reader their place in the narrative and
* the two are not interchangeable. */
.narr-secs { border-top: 1px solid var(--line-2); background: var(--surface-3); padding: 4px 0 6px; }
.narr-secs-h {
font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
color: var(--ink-4); padding: 6px 14px 4px;
}
.narr-sec {
display: flex; align-items: flex-start; gap: 8px;
padding: 4px 14px; border-top: 1px solid var(--line);
}
.narr-sec:first-of-type { border-top: 0; }
.narr-sec input[type="checkbox"] { margin-top: 3px; flex: none; }
.narr-sec-t {
flex: 1; text-align: left; background: none; border: 0; padding: 1px 0;
font: inherit; font-size: 12px; line-height: 1.5; color: var(--ink-2); cursor: pointer;
}
.narr-sec-t:hover:not(:disabled) { color: var(--ink); text-decoration: underline; }
.narr-sec-t:disabled { cursor: default; color: var(--ink-4); }
.narr-sec-t .n {
font-family: var(--mono); font-size: 10px; color: var(--ink-4);
border: 1px solid var(--line-2); border-radius: 2px; padding: 0 4px; margin-left: 6px;
white-space: nowrap;
}
.narr-sec-jump { flex: none; }
.narr-sec.dropped .narr-sec-t { text-decoration: line-through; color: var(--ink-5); }
.narr-sec-rows { padding: 0 14px 8px 36px; overflow-x: auto; }
.narr-sec-rows .grid { font-size: 11px; }
/* --- critical path as one aligned diff ---------------------------------- *
* Was two columns of unequal length, unaligned after the first difference,
* with the change carried by colour alone. */
.cpbar {
display: flex; align-items: center; gap: 14px;
padding: 10px 14px; border-bottom: 1px solid var(--line-2); background: var(--surface-3);
}
table.cpdiff td.cpmark {
font-family: var(--mono); font-weight: 700; text-align: center; color: var(--ink-4);
}
table.cpdiff tr.gone td { color: var(--ink-3); }
table.cpdiff tr.gone td.cpmark { color: var(--danger); }
table.cpdiff tr.gone td.id { text-decoration: line-through; }
table.cpdiff tr.joined td.cpmark { color: var(--accent); }
table.cpdiff td.num.tf { font-family: var(--mono); }
table.cpdiff td.num.tf.neg { color: var(--danger); }
table.cpdiff td.num.tf.zero { color: var(--warn); }
.chip.drv {
margin-left: 6px; font-family: var(--mono); font-size: 9px; letter-spacing: .04em;
color: var(--accent); background: var(--accent-tint); border: 1px solid var(--accent-tint-line);
}
/* Total float wherever it appears, one shape. */
.tracecard .mt.tf.neg, .mt.tf.neg { color: var(--danger); }
.tracecard .mt.tf.zero, .mt.tf.zero { color: var(--warn); }
.tracecard .mt { margin-left: auto; }
/* The import confirmation screen carries a per-file table; it needs the room. */
.modal.wide { max-width: 980px; width: calc(100vw - 64px); }
.modal.wide .modal-body { max-height: 70vh; overflow-y: auto; }
/* The decision log on a schedule: when, who, what. */
.auditrow { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-2); }
.auditrow .when { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); min-width: 108px; }
/* A reason travels with a review decision; the history of one sits under it. */
.reasonbox { margin: 14px 0 4px; }
.reasonbox input { width: 100%; }
.histbox:not(:empty) { margin: 12px 0 4px; padding-top: 4px; }
/* Which way a DCMA metric moved since the last update. */
.dcma-dir { font-size: 10px; margin-left: 4px; }
.dcma-dir.improved { color: var(--ok); }
.dcma-dir.worsened { color: var(--danger); }
/* Disposition: whether a finding becomes a comment the government issues. */
.dispbox { margin: 16px 0 4px; padding: 12px 13px; border: 1px solid var(--line);
border-radius: 3px; background: var(--surface-3); }
.dispbtns { display: flex; gap: 6px; margin: 8px 0; }
.dispbtns .btn.on { color: var(--accent); border-color: var(--accent);
background: var(--accent-tint); }
.dispbox textarea { width: 100%; }
/* The comment list: the reviewer's own deliverable. */
.cmtitem { padding: 13px 14px; border-bottom: 1px solid var(--line-2); }
.cmthead { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.cmthead .ref { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--accent); }
.cmthead .t { font-size: 12.5px; font-weight: 500; }
.cmthead .spec { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
.cmtitem p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }
.cmtnote { border-left: 2px solid var(--accent); padding-left: 10px; margin: 8px 0; }
.cmtnote .k { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 3px; }
/* A control the role may not use is not shown as a disabled button; where the
shape has to stay (the queue checkbox) it reads as a state, not an offer. */
.cbx.readonly { cursor: default; opacity: .45; }
.respbox { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.respbox textarea { width: 100%; }
/* Delete, per project row. Always visible: it was hover-only, which means a
control nobody can find and nobody can reach by keyboard scan. Quiet in
weight, not hidden — the confirmation is what makes it safe, not obscurity. */
.rowdel {
font-size: 11px; line-height: 1; color: var(--ink-4);
background: none; border: 1px solid var(--line-2); padding: 4px 8px;
border-radius: 3px; cursor: pointer; transition: color .12s, border-color .12s;
}
.rowdel:hover {
color: var(--danger); border-color: var(--danger); background: var(--danger-tint);
}
.rowdel:focus-visible { outline: 2px solid var(--danger); outline-offset: 1px; }
/* The project's own destructive section, at the bottom of its settings. */
.card.danger-card { border-color: #E7C9C9; }
.card.danger-card .card-title { color: var(--danger); }
/* The storage picker: a folder can hold fifty updates, so it scrolls and carries
a select-all header that stays put. */
.picklist { max-height: 300px; overflow-y: auto; margin-top: 8px;
border: 1px solid var(--line-2); border-radius: 3px; }
.picklist-head {
position: sticky; top: 0; z-index: 1;
display: flex; align-items: center; gap: 12px;
padding: 8px 10px; background: var(--surface-3);
border-bottom: 1px solid var(--line-2);
}
.picklist-head .live { margin-left: auto; }
.picklist .cbrow { padding: 7px 10px; }
.picklist .cbrow.disabled { opacity: .5; }
/* --- sign in / create organization --------------------------------------- */
/* 5px inside the group, 18px between groups. At 6/14 a hint sat almost as far
from its own field as from the next label and belonged to neither. */
.unlock-card .field { margin-bottom: 18px; }
.unlock-card .field label {
display: block; font-size: 12px; font-weight: 500; color: var(--ink-2);
margin-bottom: 6px; letter-spacing: -.005em;
}
.unlock-card input {
width: 100%; height: 40px; padding: 0 12px; font-size: 13.5px;
background: var(--surface);
/* --input-line is 1.49:1 on white; --control-line is the file's own
WCAG 1.4.11 token at 3.55:1, and a boundary you cannot see is not a
boundary. Scoped to this surface so the app shell is untouched. */
border: 1px solid var(--control-line); border-radius: 8px;
color: var(--ink); transition: border-color .12s ease, box-shadow .12s ease;
}
.unlock-card input::placeholder { color: var(--ink-placeholder); }
.unlock-card input:hover { border-color: var(--ink-2); }
/* The focus ring is the brand's, not the browser's blue: on warm paper a
#1B4FD8 halo is the one element that announces it was never looked at. */
.unlock-card input:focus,
.unlock-card input:focus-visible {
outline: none; border-color: var(--brand-accent);
box-shadow: 0 0 0 3px rgba(180, 83, 26, .16);
}
/* 12px, not 11.5: these hints carry a real requirement ("At least 8
characters."), and functional text on this surface sits at or above the
12px floor. */
.unlock-card .field .hint { font-size: 12px; color: var(--ink-4); margin-top: 5px; }
/* The mode switch sits under the ink rule and marks the live side with a 1px
underline, not a second 2px one. Two ink marks of the same weight compete,
and the earlier arrangement spent the report's section rule on a tab
indicator; 2px section over 1px live-mode is a hierarchy that reads at a
glance and still gives a tab the affordance it needs. No container hairline
either -- the rule above already closed the masthead. */
.auth-seg {
display: flex; width: 100%; gap: 20px; margin: 0 0 24px;
border: 0; border-radius: 0; background: none; overflow: visible;
}
.auth-seg button {
flex: none; justify-content: flex-start; padding: 0 0 5px;
background: none; border: 0; border-bottom: 1px solid transparent;
border-radius: 0;
font-size: 13.5px; font-weight: 500; color: var(--ink-4);
transition: color .12s ease, border-color .12s ease;
}
.auth-seg button:hover {
background: none; color: var(--ink-2); border-bottom-color: var(--line);
}
.auth-seg button.on {
background: none; color: var(--ink); font-weight: 600;
border-bottom-color: var(--ink);
}
.auth-seg button:focus-visible {
outline: 2px solid var(--brand-accent); outline-offset: 3px; border-radius: 3px;
}
.unlock-card .btn.primary { height: 40px; font-size: 13.5px; border-radius: 8px; }
.unlock-card .btn.primary:disabled { background: var(--ink-5); border-color: var(--ink-5); }
/* This page has no card, no fill and no shadow anywhere, so its error cannot
arrive as a tinted rounded panel -- that was the single object on the surface
contradicting the world. It arrives the way a document flags an exception:
in words, on the same left edge, in the ink reserved for it. --danger is
7.3:1 on paper, so nothing is lost by dropping the tint. */
.unlock-card .err, .unlock-card .msg-ok {
background: none; border: 0; border-radius: 0; padding: 0;
margin: 0 0 16px; font-size: 12.5px; font-weight: 500; line-height: 1.5;
}
.auth-or {
display: flex; align-items: center; gap: 12px;
margin: 22px 0 14px; color: var(--ink-4); font-size: 12px;
}
.auth-or::before, .auth-or::after {
content: ""; flex: 1; height: 1px; background: var(--line);
}
/* Same WCAG 1.4.11 correction as the fields above it, and it matters more here:
this control's white fill is ~1.03:1 against the paper, so its border is its
only boundary. Inherited from .btn it was --input-line at 1.49:1, which left
the weaker of the column's two boundaries on the click target. .btn:hover
goes to --ink-5, LIGHTER than the resting value, so hover moves with it. */
.unlock-card .google-btn {
width: 100%; height: 40px; justify-content: center; gap: 9px;
text-decoration: none; font-weight: 500; border-radius: 8px;
border-color: var(--control-line);
}
.unlock-card .google-btn:hover { border-color: var(--ink-2); }
/* The account menu hangs off the top bar, so that corner has to be a
positioning context — otherwise the popover anchors to the page. */
.topbar-right { position: relative; }
.popover.usermenu-pop { width: 268px; }
.popover.usermenu-pop .pf { border-bottom: 1px solid var(--line-2); }
/* "Forgot your password?" / "Back to sign in" — the quiet way off a form.
Left, with everything else: a centred line under a left-aligned column is
the one place the page stopped being precise. */
.auth-alt { margin: 14px 0 0; text-align: left; font-size: 12.5px; }
/* ink-2/500, above the free-tool exit below it: "Forgot your password?" is the
second-most-used control on a sign-in page and was reading as the quietest
thing in the column. */
.auth-alt a {
color: var(--ink-2); font-weight: 500; text-decoration: none;
border-bottom: 1px solid var(--line); padding-bottom: 1px;
transition: color .12s ease, border-color .12s ease;
}
.auth-alt a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.auth-alt a:focus-visible {
outline: 2px solid var(--brand-accent); outline-offset: 3px; border-radius: 2px;
}
/* Unconfirmed-address strip. Warn, not danger: nothing is broken and nothing is
blocked, so it must not wear the same colour as a stale-analysis error. */
.verify-bar {
flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 8px 20px; background: var(--warn-tint); border-bottom: 1px solid var(--warn-line);
color: var(--warn-ink); font-size: 11.5px; line-height: 1.5;
}
.verify-bar span { flex: 1; min-width: 200px; }
.btn.small { height: 24px; padding: 0 9px; font-size: 11px; }
.btn.ghost { background: none; border-color: transparent; color: var(--ink-3); }
.btn.ghost:hover { border-color: var(--line); background: var(--surface); }
/* A way out of the sign-in page for someone who has no account yet. */
.auth-free {
margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
font-size: 12px; line-height: 1.6; color: var(--ink-4); text-align: left;
text-wrap: pretty;
}
.auth-free a {
color: var(--ink-2); font-weight: 500;
border-bottom: 1px solid var(--line); padding-bottom: 1px;
transition: color .12s ease, border-color .12s ease;
}
.auth-free a:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* What a schedule deletion takes with it, listed before it happens. */
.del-scope { margin: 0; padding-left: 18px; }
.del-scope li { margin: 0 0 7px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.del-scope li:last-child { margin-bottom: 0; color: var(--ink-3); }
.del-scope b { color: var(--ink); }
/* --------------------------------------------------------- P6 fills (N21) */
/* Bar and cell fills in Primavera's standard palette. Applied as backgrounds,
never as text colour — see the note beside the tokens. */
.p6-fill-red { background: var(--p6-red); color: #fff; }
.p6-fill-blue { background: var(--p6-blue); color: #fff; }
.p6-fill-green { background: var(--p6-green); color: var(--p6-on-fill); }
.p6-fill-yellow { background: var(--p6-yellow); color: var(--p6-on-fill); }
/* Cell highlights for the change tables (N13). Same palette, softened only by
the text sitting on top rather than by diluting the hue — she asked for the
P6 values, not for an interpretation of them. */
/* the legend naming what the fills mean (N13) -- a colour scheme without a
* legend is a private code */
.hl-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 3px;
background: var(--surface-3); margin-bottom: 10px; font-size: 11px; }
.hl-legend .k { font-size: 9px; font-weight: 600; letter-spacing: .06em;
text-transform: uppercase; color: var(--ink-4); }
.hl-item { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.hl-item .sw { width: 14px; height: 11px; border: 1px solid var(--line-2);
border-radius: 2px; display: inline-block; }
td.hl-new, .sw.hl-new { background: var(--p6-yellow); color: var(--p6-on-fill); }
td.hl-durchg, .sw.hl-durchg { background: var(--p6-green); color: var(--p6-on-fill); }
td.hl-cp-both, .sw.hl-cp-both { background: var(--p6-red); color: #fff; }
td.hl-cp-was, .sw.hl-cp-was { background: var(--p6-green); color: var(--p6-on-fill); }
td.hl-cp-new, .sw.hl-cp-new { background: var(--p6-blue); color: #fff; }
/* the activity-id BUTTON inside a filled cell must not keep its link colour --
* accent blue on her red fill is unreadable */
td.hl-cp-both .codelink, td.hl-cp-new .codelink { color: #fff; }
td.hl-cp-was .codelink, td.hl-new .codelink, td.hl-durchg .codelink { color: var(--p6-on-fill); }
/* A float band opened to the activities in it (N19). */
.fbar.on .b { outline: 2px solid var(--accent); outline-offset: 1px; }
.fbar-detail { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.fbar-detail-h {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: .06em; color: var(--ink-3); margin-bottom: 7px;
}
.fbar-detail table.grid td { font-size: 12px; padding: 4px 8px; }
/* ------------------------------------------------ assessments (N40/N42/N36) */
.assess-group { border-top: 1px solid var(--line-2); }
.assess-group:first-of-type { border-top: 0; }
.assess-head {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 11px 14px; border: 0; background: none; text-align: left; cursor: pointer;
}
.assess-head:hover { background: var(--surface-2); }
.assess-head.on { background: var(--surface-2); }
.assess-head .t { font-weight: 600; font-size: 13px; }
.assess-head .n { margin-left: auto; font-size: 11.5px; color: var(--ink-4); }
.assess-head .caret { color: var(--ink-4); font-size: 11px; }
.assess-body { padding: 0 14px 14px; }
.assess-body .chart-note { margin-bottom: 9px; }
.assess-body table.grid td { font-size: 12px; vertical-align: top; }
.assess-body .sub-note { font-size: 10.5px; color: var(--ink-4); margin-top: 2px; line-height: 1.4; }
/* ------------------------------------------------- category roll-up (N50) */
.catrow {
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line-2);
background: var(--surface-3); text-align: left; cursor: pointer;
font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
color: var(--ink-3); font-weight: 600;
}
.catrow:hover { background: var(--line-3); color: var(--ink); }
.catrow .caret { color: var(--ink-4); font-size: 10px; letter-spacing: 0; }
.catrow .n {
margin-left: auto; text-transform: none; letter-spacing: 0;
font-weight: 400; font-size: 11px; color: var(--ink-4);
}
.catrow.closed { border-bottom-color: var(--line); }
/* ------------------------------- unchanged runs in the path list (N30) */
tr.cprun td { padding: 0 !important; background: var(--surface-2); }
.cprun-btn {
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 7px 14px; border: 0; background: none; cursor: pointer;
font-size: 11.5px; color: var(--ink-3); text-align: left;
}
.cprun-btn:hover { background: var(--line-3); color: var(--ink); }
.cprun-btn .caret { color: var(--ink-4); font-size: 10px; }
.cprun-btn .r { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); }
/* --- the P6-style critical-path Gantt (N20) ------------------------------ *
* Bar colours are her P6 defaults (N21 pins the exact values); they are FILLS
* here, never text colours -- yellow on white measures 1.07:1 as text. */
.pgantt { position: relative; border: 1px solid var(--line-2); border-radius: 3px;
background: var(--surface); overflow: hidden; }
.pg-rules { position: absolute; inset: 0; pointer-events: none; }
.pg-rule { position: absolute; top: 0; bottom: 0; width: 0;
border-left: 1.5px dashed var(--ink-3); }
.pg-rule.ccd { border-left-color: var(--danger); border-left-style: solid; }
.pg-rule .lab { position: absolute; top: 2px; left: 3px; font-family: var(--mono);
font-size: 8.5px; color: var(--ink-3); background: var(--surface);
padding: 0 3px; white-space: nowrap; }
.pg-rule.ccd .lab { color: var(--danger); }
.pg-wbs { display: flex; align-items: baseline; gap: 8px; padding: 5px 10px;
background: var(--surface-2); border-top: 1px solid var(--line-2);
font-size: 11px; font-weight: 600; cursor: pointer; position: relative; z-index: 1; }
.pg-wbs:first-child { border-top: 0; }
.pg-wbs:hover { background: var(--line-3); }
.pg-wbs .caret { color: var(--ink-4); font-size: 9px; }
.pg-wbs .n { font-family: var(--mono); font-size: 9.5px; font-weight: 400; color: var(--ink-4); }
.pg-row { display: grid; grid-template-columns: 110px 1fr; align-items: center;
min-height: 22px; border-top: 1px solid var(--line); }
.pg-row .lab { padding: 2px 8px; font-size: 10px; overflow: hidden; white-space: nowrap; }
.pg-row .lane { position: relative; height: 22px; }
.pg-bar { position: absolute; top: 7px; height: 8px; border-radius: 1px;
border: 1px solid rgba(0,0,0,.25); }
.pg-actual, .sw.pg-actual { background: var(--p6-blue); }
.pg-remaining, .sw.pg-remaining { background: var(--p6-green); }
.pg-late, .sw.pg-late { background: var(--p6-yellow); }
.pg-summary { background: var(--ink-3); top: 8px; height: 6px; }
.pg-dia { position: absolute; top: 1px; font-size: 12px; line-height: 20px;
transform: translateX(-50%); color: var(--ink); }
.pg-dia.late { color: var(--p6-yellow); text-shadow: 0 0 1px var(--ink-3); }
.hl-legend .pg-dia { position: static; transform: none; line-height: 1; }
.pg-endlab { position: absolute; top: 3px; font-size: 8.5px; color: var(--ink-3);
white-space: nowrap; max-width: 40%; overflow: hidden;
text-overflow: ellipsis; line-height: 16px; }
/* --- contractor-narrative cross-check (N10) ------------------------------ */
.cnr { border: 1px solid var(--line-2); border-left-width: 3px; border-radius: 3px;
padding: 8px 11px; margin-bottom: 7px; }
.cnr.addressed { border-left-color: var(--ok); }
.cnr.unaddressed { border-left-color: var(--danger); background: var(--surface-3); }
.cnr.narrative_only { border-left-color: var(--line-2); }
.cnr .t { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px; font-weight: 600; }
.cnr .t .n { font-family: var(--mono); font-size: 10px; font-weight: 400; color: var(--ink-4); }
.cnr .t .chip { margin-left: auto; }
.cnr .d { font-size: 11.5px; line-height: 1.5; color: var(--ink-2); margin-top: 3px; }
.cnr-h { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
color: var(--ink-4); margin: 12px 0 6px; }
/* an import row that is importable but worth reading first (encoding damage) */
.err.warn-soft { color: var(--warn); }
/* --- Costs tab (feature 1a) ---------------------------------------------- */
.cost-headline { font-size: 12.5px; line-height: 1.55; margin-bottom: 6px; }
.cost-figures { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 10px; }
.cost-fig .k { font-size: 9px; font-weight: 600; letter-spacing: .07em;
text-transform: uppercase; color: var(--ink-4); }
.cost-fig .v { font-family: var(--mono); font-size: 16px; margin-top: 3px; color: var(--ink); }
.cost-fig .v.bad { color: var(--danger); }
.cost-sub { font-size: 10px; font-weight: 600; letter-spacing: .06em;
text-transform: uppercase; color: var(--ink-4); margin: 12px 0 5px; }
.cost-rule { border: 1px solid var(--line-2); border-left-width: 3px; border-radius: 3px;
padding: 8px 11px; margin-bottom: 7px; }
.cost-rule .t { display: flex; align-items: baseline; gap: 8px; font-size: 11.5px;
font-weight: 600; }
.cost-rule .t .chip { margin-left: auto; }
.cost-rule .d { font-size: 11.5px; line-height: 1.5; color: var(--ink-2); margin-top: 3px; }
.cost-billing { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 9px 11px; background: var(--surface-3);
border: 1px solid var(--line-2); border-radius: 3px; margin-bottom: 10px; }
.cost-billing label { font-size: 11px; color: var(--ink-3); }
.cost-billing input { width: 170px; }
.cost-billing .chart-note { flex-basis: 100%; margin: 0; }
/* --- methodology page (app level) ---------------------------------------- */
.meth-ver { font-family: var(--mono); font-size: 11px; color: var(--ink-4);
align-self: center; }
.meth-p { font-size: 12.5px; line-height: 1.65; color: var(--ink-2);
margin: 0 0 9px; max-width: 92ch; }
.meth-p:last-child { margin-bottom: 0; }
/* =============================================================== UI REFRESH (design handoff) — the report as a scrollable document, and
project settings as a six-row summary list with modal editors.
Reskin only: everything below styles what app.js already computes.
====================================================================== */
/* ---- the report document ---- */
.doc-outer { display: flex; justify-content: center; }
.doc { width: 100%; max-width: 880px; padding: 30px 0 80px; }
.doc-kicker {
font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
text-transform: uppercase; color: var(--kicker-fg);
}
.doc h1.doc-verdict {
margin: 16px 0 0; font-size: 34px; font-weight: 600; line-height: 1.18;
letter-spacing: -.03em; max-width: 26ch; text-wrap: pretty;
}
.doc .doc-lede {
margin: 18px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2);
max-width: 62ch; text-wrap: pretty;
}
.doc .doc-lede strong { font-weight: 600; color: var(--ink); }
/* the head of a single-section view: which section, and the two ways on */
.doc .doc-focus { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 14px 0 0; }
.doc .doc-focus .k { font-family: var(--mono); font-size: 11px; color: var(--kicker-fg); letter-spacing: .04em; }
.doc .doc-focus h1.t { margin: 0; font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.doc .doc-focus .acts { margin-left: auto; display: flex; gap: 8px; align-self: center; }
/* metadata definition grid under the lede */
.doc-meta {
margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
display: grid; grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
gap: 15px 26px;
}
.doc-meta dt {
font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
text-transform: uppercase; color: var(--ink-4);
}
.doc-meta dd { margin: 5px 0 0; font-family: var(--mono); font-size: 12.5px; color: var(--ink); }
.doc-meta dd.bad { color: var(--danger); }
.doc-meta dd.meta-note { margin: 3px 0 0; font-family: var(--sans); font-size: 11.5px; color: var(--ink-4); line-height: 1.4; }
/* F1: the pair as a sentence, its earlier side a control that opens the
series. The document's own hand -- mono for the two names, a hairline under
the one that can change -- rather than a themed select on the paper. */
.doc-compare-with dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.doc-compare-with .cw-b { font-weight: 600; }
.doc-compare-with .cw-pick {
font: inherit; color: var(--ink); background: none; border: 0; padding: 0 2px; cursor: pointer;
border-bottom: 1px solid var(--control-line); font-weight: 600;
}
.doc-compare-with .cw-pick:hover { border-bottom-color: var(--ink); }
.doc-compare-with .cw-pick .chev { margin-left: 4px; font-size: 10px; color: var(--ink-4); }
.doc-compare-with .cw-pick[aria-expanded="true"] .chev { display: inline-block; transform: rotate(180deg); }
/* F2: the scope switch over sections 06 and 07, and the chip that names a
custom path. The document's own segmented control, in its own hand. */
.scope-switch { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.scope-switch .seg { display: inline-flex; border: 1px solid var(--control-line); border-radius: 6px; overflow: hidden; background: var(--surface, #fff); }
.scope-switch .seg button {
font: inherit; font-size: 12.5px; padding: 5px 11px; border: 0; background: none; color: var(--ink-2); cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
}
.scope-switch .seg button + button { border-left: 1px solid var(--line); }
.scope-switch .seg button:hover { background: var(--surface-2); color: var(--ink); }
.scope-switch .seg button.on { background: var(--ink); color: var(--paper, #fff); }
.scope-switch .seg button .cnt { font-family: var(--mono); font-size: 10.5px; opacity: .8; }
.scope-chip {
display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px 3px 9px; border-radius: 999px;
border: 1px solid var(--accent-tint-line); background: var(--accent-tint); color: var(--ink); font-size: 12px;
}
.scope-chip .k { color: var(--ink-4); }
.scope-chip b { font-family: var(--mono); font-size: 11.5px; }
.scope-chip .n, .scope-chip .d { color: var(--ink-3); }
.scope-chip .x { border: 0; background: none; color: var(--ink-4); cursor: pointer; font-size: 12px; padding: 0 3px; border-radius: 999px; }
.scope-chip .x:hover { color: var(--danger); background: var(--surface); }
/* F4: the exception chips. Multi-select pills with their count; the master
toggle applies every one. An empty chip stays, greyed, so the reader can
see the exception was looked for. */
.exc-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 14px; }
.exc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.exc-chip {
display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
border: 1px solid var(--line); background: var(--surface, #fff); color: var(--ink-2); font: inherit; font-size: 11.5px; cursor: pointer;
}
.exc-chip:hover { border-color: var(--control-line); color: var(--ink); }
.exc-chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper, #fff); }
.exc-chip .n { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); }
.exc-chip.on .n { color: inherit; opacity: .8; }
.exc-chip.empty { color: var(--ink-5); }
.exc-chip.empty .n { color: var(--ink-5); }
.exc-master { font-size: 11.5px; }
.exc-clear { border: 0; background: none; font: inherit; font-size: 11.5px; color: var(--ink-3); text-decoration: underline; cursor: pointer; }
/* at-a-glance numbers band */
.glance {
display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
margin-top: 30px; border-top: 2px solid var(--ink);
}
.gcell {
padding: 16px 18px 18px 0; border-bottom: 1px solid var(--line);
}
.gcell:hover { background: var(--surface-2); }
/* the label is the jump control; the value below it opens the evidence */
.glance button.gl {
display: block; border: 0; background: transparent; padding: 0; text-align: left;
font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
text-transform: uppercase; color: var(--ink-4); cursor: pointer;
}
.glance button.gl:hover { color: var(--ink); }
.glance .gv {
display: block; font-family: var(--mono); font-size: 26px; font-weight: 500;
letter-spacing: -.02em; margin-top: 9px; font-variant-numeric: tabular-nums;
}
/* an evidence-bearing figure keeps the product's one affordance, at this size */
.glance .gv .numlink { font: inherit; color: inherit; padding: 0; }
.glance .gn { display: block; font-size: 12px; color: var(--ink-3); margin-top: 7px; line-height: 1.45; text-wrap: pretty; }
/* numbered sections */
.doc-sec { margin-top: 46px; }
.doc-sec-head {
display: flex; align-items: baseline; gap: 12px; padding-bottom: 12px;
border-bottom: 2px solid var(--ink);
}
.doc-sec-head .no { font-family: var(--mono); font-size: 11px; color: var(--kicker-fg); }
.doc-sec-head h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.018em; }
.doc-sec-head .spacer { flex: 1; }
.doc-sec-head .count { font-family: var(--mono); font-size: 11px; color: var(--ink-4); white-space: nowrap; }
.doc-sec-head .workbtn {
height: 27px; padding: 0 11px; border: 1px solid var(--input-line); background: var(--surface);
border-radius: 999px; font-family: inherit; font-size: 12px; font-weight: 600;
color: #2E3238; cursor: pointer; white-space: nowrap;
}
.doc-sec-head .workbtn:hover { border-color: var(--ink); color: var(--ink); }
.doc-sec-note {
margin: 14px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
max-width: 68ch; text-wrap: pretty;
}
.doc-sec-body { margin-top: 14px; }
.doc-sec-body > .card { margin-top: 12px; }
.doc-sec-body > .card:first-child { margin-top: 0; }
.doc-empty { padding: 28px 0 32px; border-bottom: 1px solid var(--line); }
.doc-empty .t { font-size: 14.5px; font-weight: 600; }
.doc-empty .x { font-size: 13.5px; color: var(--ink-2); margin-top: 6px; max-width: 58ch; line-height: 1.55; }
.doc-more {
margin-top: 12px; height: 30px; padding: 0 12px; border: 1px solid var(--input-line);
background: var(--surface); border-radius: 999px; font-family: inherit; font-size: 12px;
font-weight: 500; color: var(--ink-2); cursor: pointer;
}
.doc-more:hover { border-color: var(--faint); color: var(--ink); }
/* the measures table — the design's document table */
.doc table.doctab { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.doc table.doctab th {
text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line);
font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .11em;
text-transform: uppercase; color: var(--ink-4); white-space: nowrap;
}
.doc table.doctab th.r { text-align: right; }
.doc table.doctab td {
padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line-2);
font-size: 13.5px; vertical-align: top;
}
.doc table.doctab td.r { text-align: right; }
.doc table.doctab tr.click:hover td { background: var(--surface-2); }
.doc table.doctab td .sub { display: block; font-size: 12px; color: var(--ink-3); margin-top: 5px; line-height: 1.5; }
/* severity/status pills on the document: a dot, never a filled chip */
.pd {
display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono);
font-size: 10px; font-weight: 600; letter-spacing: .08em; white-space: nowrap;
color: var(--neutral);
}
.pd::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--neutral-dot); }
.pd.hi { color: var(--danger); } .pd.hi::before { background: var(--danger-dot); }
.pd.med { color: var(--warn); } .pd.med::before { background: var(--warn-dot); }
.pd.ok { color: var(--ok); } .pd.ok::before { background: var(--ok-dot); }
.pd.na::before { background: var(--ink-5); }
/* document footer + signature block */
.doc-foot {
margin-top: 46px; padding-top: 16px; border-top: 2px solid var(--ink);
display: flex; gap: 16px; flex-wrap: wrap;
font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
text-transform: uppercase; color: var(--ink-4);
}
.doc-foot .spacer { flex: 1; }
.doc-sign { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; gap: 40px; flex-wrap: wrap; }
.doc-sign > div { flex: 1 1 220px; }
.doc-sign .rule { height: 34px; border-bottom: 1px solid var(--ink); }
.doc-sign .lab {
font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
text-transform: uppercase; color: var(--ink-4); margin-top: 7px;
}
/* the report's header actions, beside the crumbs in the topbar */
.ctx-extras { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.ctx-extras:empty { display: none; }
.btn.primary { border-radius: 7px; }
/* ---- scroll minimap ---- */
.minimap { position: fixed; top: 128px; right: 0; z-index: 55; padding: 18px 10px 18px 22px; }
.minimap .ticks { display: flex; flex-direction: column; align-items: flex-end; gap: 11px; }
.minimap .tick { display: block; height: 4px; border-radius: 2px; width: 20px; background: #A9A59C; transition: width .16s, background .16s; }
.minimap .tick.on { width: 34px; background: var(--ink); }
.minimap .panel {
width: 248px; background: var(--sidebar-bg); border-radius: 12px;
box-shadow: 0 14px 36px rgba(20,24,29,.32); padding: 8px; color: var(--sidebar-text);
}
.minimap .panel button {
display: flex; align-items: center; gap: 11px; width: 100%; min-height: 36px;
padding: 0 10px; border: 0; border-radius: 8px; background: transparent;
font-family: inherit; font-size: 13px; color: var(--sidebar-text-2);
cursor: pointer; text-align: left;
}
.minimap .panel button:hover { background: rgba(255,255,255,.09); color: #fff; }
.minimap .panel button.on { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
.minimap .panel .mtick { display: block; width: 16px; height: 3px; border-radius: 2px; background: var(--sidebar-dot); flex: 0 0 16px; }
.minimap .panel button.on .mtick { background: #fff; }
.minimap .panel .mlab { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minimap .panel .mcount { font-family: var(--mono); font-size: 10px; color: var(--sidebar-text-3); }
.minimap .panel button.on .mcount { color: rgba(255,255,255,.7); }
/* ---- overlays: task mode + drawers ---- */
/* ---- the comparison's sheet (core/shell.js openCompareModal) ----
The report opens over the Schedules screen in a sheet that fills the
window, rather than as a screen of its own. Its head carries the pair and
the report's three actions; its body is the paint host renderCompare
fills exactly as it filled #screen. Below the composer, the publish dialog
(.scrim, 60), the chooser (60) and the review workspace (70), all of which
open on top of it; above the topbar and the list beneath.
Not in the theme-2 section: the comparison is the one screen not on the
theme, and this is its frame. */
.cmp-host { position: fixed; inset: 0; z-index: 45; }
/* F0: the report, the review queue and the comment list are rail entries,
so the rail stays reachable while a sheet is up -- the sheet takes the
main column, not the window. It starts where the rail ends (244px open,
64px folded) and, on the strip layout, below the strip. Setup's sheet
keeps the window: the app is inert beneath it by design. */
@media (min-width: 820px) {
.app.shell2 ~ .cmp-host:not(.kind-setup),
.app.shell2 ~ .cmp-host:not(.kind-setup) .ov-scrim { left: 244px; }
.app.shell2.rail-min ~ .cmp-host:not(.kind-setup),
.app.shell2.rail-min ~ .cmp-host:not(.kind-setup) .ov-scrim { left: 64px; }
}
@media not all and (min-width: 820px) {
.app.shell2 ~ .cmp-host:not(.kind-setup),
.app.shell2 ~ .cmp-host:not(.kind-setup) .ov-scrim { top: 47px; }
}
.cmp-scrim { position: absolute; inset: 0; background: rgba(20,24,29,.42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.cmp-modal {
position: absolute; inset: 14px; display: flex; flex-direction: column; overflow: hidden;
background: var(--paper); border-radius: 14px;
box-shadow: 0 0 0 1px rgba(27,36,48,.12), 0 32px 80px -20px rgba(20,24,29,.55);
}
.cmp-head {
flex: none; display: flex; align-items: center; gap: 12px; min-height: 56px;
padding: 0 14px 0 22px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.cmp-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex-wrap: wrap; }
.cmp-title .k { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--kicker-fg); white-space: nowrap; }
.cmp-title .pair { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--ink-2); min-width: 0; }
.cmp-title .pair b { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32ch; }
.cmp-title .pair .arr { color: var(--ink-4); }
.cmp-title .pair .sub { font-size: 12.5px; color: var(--ink-4); white-space: nowrap; }
/* Trends in the sheet: the head names the screen, so the page's own
heading block (h1 + subline) is not drawn a second time beneath it. */
.cmp-host.kind-trends .cmp-body .pageblock, .cmp-host.kind-reports .cmp-body .pageblock { display: none; }
.cmp-extras { margin-left: auto; position: relative; display: flex; align-items: center; gap: 8px; flex: none; }
.cmp-x {
flex: none; width: 32px; height: 32px; border: 0; background: none; border-radius: 6px;
color: var(--ink-4); font-size: 15px; cursor: pointer;
}
.cmp-x:hover { background: var(--surface-2); color: var(--ink); }
.cmp-body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
/* The minimap is pinned to the sheet's edge, not the window's. */
.cmp-body .minimap { position: absolute; top: 64px; }
@media (max-width: 720px) { .cmp-modal { inset: 0; border-radius: 0; } .cmp-title .k { display: none; } }
@media (prefers-reduced-motion: no-preference) {
@keyframes cmp-sheet-in { from { opacity: .6; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes cmp-scrim-in { from { opacity: 0; } to { opacity: 1; } }
.cmp-scrim { animation: cmp-scrim-in 160ms ease-out; }
.cmp-modal { animation: cmp-sheet-in 240ms cubic-bezier(.2, .8, .2, 1); }
.cmp-host.out { transition: opacity 130ms ease-out; opacity: 0; pointer-events: none; }
.cmp-host.out .cmp-modal { transition: transform 130ms ease-out; transform: translateY(8px) scale(.99); }
}
@media (prefers-reduced-motion: reduce) { .cmp-host.out { display: none; } }
.ov-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(20,24,29,.34); }
.ov-panel {
position: fixed; top: 0; bottom: 0; right: 0; z-index: 71;
width: min(940px, 96vw); background: var(--surface);
box-shadow: -18px 0 44px rgba(20,24,29,.26); display: flex; overflow: hidden;
}
.ov-panel .taskwrap { flex: 1; min-height: 0; }
.ov-panel .queue { width: 316px; background: var(--surface-3); border-right: 1px solid var(--line); }
.ov-kicker {
font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
text-transform: uppercase; color: var(--kicker-fg);
}
.ov-x {
width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
border: 0; background: transparent; border-radius: 7px; color: var(--ink-3);
font-size: 15px; cursor: pointer;
}
.ov-x:hover { background: var(--line-3); color: var(--ink); }
/* task-mode queue restyle (design: TASK MODE header, ring, filter pills) */
.queue-head .ov-kicker { display: block; margin-bottom: 4px; }
.qfilters { display: flex; gap: 4px; margin-top: 12px; flex-wrap: wrap; }
.qfilters button {
height: 26px; padding: 0 9px; border: 1px solid var(--input-line); border-radius: 999px;
background: var(--surface); font-family: inherit; font-size: 11.5px; font-weight: 600;
color: var(--ink-2); cursor: pointer;
}
.qfilters button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.ring { background: conic-gradient(var(--brand-accent) 0deg, #E2DED6 0deg); }
.ring .core { background: var(--surface-3); }
.qrow { border-left: 0; }
.qrow.on { background: var(--accent-tint); }
/* ---- settings: the six-row summary list ---- */
.settings-doc { width: 100%; max-width: 760px; }
.settings-list { margin-top: 30px; border-top: 2px solid var(--ink); }
.srow {
display: flex; align-items: center; gap: 16px; width: 100%;
padding: 17px 4px 17px 0; border: 0; border-bottom: 1px solid var(--line);
background: transparent; cursor: pointer; text-align: left; font-family: inherit;
}
.srow:hover { background: var(--surface-2); }
.srow .sdot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; margin-left: 2px; }
.srow .sdot.set { background: var(--ok-dot); }
.srow .sdot.attn { background: var(--warn-dot); }
.srow .sdot.danger { background: var(--danger-dot); }
.srow .stitle { flex: 0 0 208px; min-width: 0; }
.srow .stitle .t { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.srow .stitle .t.danger { color: var(--danger); }
.srow .stitle .k {
display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--faint); margin-top: 4px;
}
.srow .svalue { flex: 1; min-width: 0; }
.srow .svalue .v { display: block; font-size: 13px; color: var(--ink); line-height: 1.45; }
.srow .svalue .w { display: block; font-size: 12px; color: var(--warn); margin-top: 3px; line-height: 1.45; }
.srow .chev { flex: 0 0 14px; color: var(--ink-5); }
.settings-foot { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-top: 16px; }
/* settings modal: centered, blurred backdrop, footer save bar */
.smodal-scrim {
position: fixed; inset: 0; z-index: 70; background: rgba(20,24,29,.32);
backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.smodal {
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 71;
width: min(640px, 94vw); max-height: min(84vh, 780px); background: var(--surface);
border-radius: 14px; box-shadow: 0 24px 64px rgba(20,24,29,.32);
display: flex; flex-direction: column; overflow: hidden;
}
.smodal-head { display: flex; align-items: center; gap: 10px; padding: 15px 22px; border-bottom: 1px solid var(--line-2); }
.smodal-head .tt { flex: 1; }
.smodal-head h2 { margin: 4px 0 0; font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.smodal-body { flex: 1; overflow-y: auto; padding: 20px 22px; }
.smodal-body .field label {
font-family: var(--mono); font-weight: 600; font-size: 9.5px; letter-spacing: .13em;
text-transform: uppercase; color: var(--ink-4);
}
.smodal-foot { display: flex; gap: 10px; align-items: center; padding: 13px 22px 16px; border-top: 1px solid var(--line-2); }
.smodal-foot .hint { flex: 1; font-size: 11.5px; color: var(--faint); line-height: 1.45; margin: 0; }
.smodal-foot input { flex: 1; height: 34px; padding: 0 11px; border: 1px solid var(--input-line); border-radius: 8px; font: inherit; font-size: 12.5px; }
.smodal-foot input.miss { border-color: var(--danger-dot); }
/* confirm-before-rerun dialog — stacks above the settings modal */
.confirm-scrim {
position: fixed; inset: 0; z-index: 80; background: rgba(20,24,29,.36);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.confirm-box {
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 81;
width: min(420px, 90vw); background: var(--surface); border-radius: 12px;
box-shadow: 0 24px 64px rgba(20,24,29,.36); padding: 20px 22px;
}
.confirm-box h3 { margin: 8px 0 0; font-size: 15.5px; font-weight: 600; letter-spacing: -.012em; }
.confirm-box p { margin: 9px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.55; text-wrap: pretty; }
.confirm-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
/* On the report document, severity/status chips render as the design's dot
pills — a 6px dot + mono label, no filled background. Chips elsewhere
(schedules table, portfolio) keep their filled form. Special annotation
chips (.cp, .drv, .ms, .ai-chip) are exempt. */
.doc .chip.hi, .doc .chip.med, .doc .chip.low, .doc .chip.ok,
.doc .chip.none, .doc .chip.draft {
background: transparent; padding: 0; border-radius: 0;
font-size: 10px; letter-spacing: .08em;
display: inline-flex; align-items: center; gap: 5px;
}
.doc .chip.hi::before, .doc .chip.med::before, .doc .chip.low::before,
.doc .chip.ok::before, .doc .chip.none::before, .doc .chip.draft::before {
content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
}
.doc .chip.hi::before { background: var(--danger-dot); }
.doc .chip.med::before, .doc .chip.draft::before { background: var(--warn-dot); }
.doc .chip.low::before { background: var(--neutral-dot); }
.doc .chip.low { color: var(--neutral); }
.doc .chip.ok::before { background: var(--ok-dot); }
.doc .chip.none::before { background: var(--ink-5); }
/* an unmeasured headline figure: stated, not styled as a result */
.glance .gv.gv-muted { font-size: 15px; color: var(--ink-4); letter-spacing: 0; }
/* the measures table's detail panel: the evidence panel's chrome, with the
design's kicker above the label */
.ev-h .ov-kicker { margin-bottom: 6px; padding-right: 30px; }
/* ---- the findings list on the document ---- */
.doc table.findtab td { vertical-align: top; }
.doc table.findtab td.findno { color: var(--faint); font-size: 12px; padding-top: 14px; }
.findtitle { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.doc table.findtab .findsub {
display: block; font-size: 12px; color: var(--ink-3); margin-top: 5px; line-height: 1.5;
}
.findmeta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.findmore { font-family: var(--mono); font-size: 10px; color: var(--faint); }
/* a rule every one of whose findings has been cleared: still listed, visibly done */
.doc table.findtab tr.cleared .findtitle { color: var(--ink-3); }
.doc table.findtab tr.cleared td { background: var(--surface-3); }
/* the filter bar sits inside the document, not in a card */
.doc .filterbar { margin: 0 0 14px; border-radius: 10px; }
/* which rules profile version judged this list (2a-3) */
.findrules {
font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
color: var(--faint); margin: 0 0 12px;
}
/* E0-05-3: the numbers a reviewer chose, on the face of the line that names the
rulebook. Mono because each one is a MEASURED limit the findings were judged
against, and quieter than the rulebook itself, which is still the heading. */
.findrules .fr-set { color: var(--ink-2); font-weight: 500; }
/* ---- rulebook badges: which rulebooks cite a finding ----
Quiet by design. They sit in a row that already carries a severity pill and
activity codes, so they read as references rather than as a second status.
HEALTH CHECK is deliberately the plainest of the three: it marks a finding
the specification never asked for, and must not look like a citation. */
.rb {
font-family: var(--mono); font-size: 9.5px; font-weight: 600;
letter-spacing: .06em; white-space: nowrap; border-radius: 4px;
padding: 1px 6px; border: 1px solid var(--line);
background: var(--surface-2); color: var(--ink-3);
}
button.rb { cursor: pointer; }
button.rb:hover { border-color: var(--ink); color: var(--ink); }
.rb-dcma { color: var(--accent-ink); border-color: var(--accent-tint-line); background: var(--accent-tint); }
.rb-spec { color: var(--kicker-fg); border-color: var(--warn-line); background: var(--warn-tint); }
.rb-health { color: var(--ink-3); border-color: var(--line); background: var(--surface-2); }
/* V-11: a clause number the standard section supplied, not this job's uploaded
specification. The dashed edge is the whole difference between a citation a
contractor can look up and one they cannot -- drawn, because the two rendered
identically and the tooltip alone is not a difference anybody sees. */
.rb-unverified { border-style: dashed; }
/* the workspace's rulebook row, under the severity pills */
.rbfilters { margin-top: 6px; }
/* the detail pane's "cited by" line */
.rb-basis { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.rb-basis .k {
font-family: var(--mono); font-weight: 600; font-size: 9.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink-4);
}
.rb-basis .cw { font-size: 11.5px; color: var(--ink-3); }
/* ---- the panel behind a chart bar ----
Same two-pane shape as the review workspace, because it is the same job:
pick a thing on the left, work it on the right. */
.ov-panel.diffpanel { width: min(1040px, 97vw); }
.diffrail { width: 268px; }
.diffcat {
display: block; width: 100%; text-align: left; border: 0; background: none;
padding: 10px 16px; border-bottom: 1px solid var(--line-2); cursor: pointer;
}
.diffcat:hover { background: var(--surface-2); }
.diffcat.on { background: var(--accent-tint); }
.diffcat .t { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.diffcat.zero .t { font-weight: 500; color: var(--ink-3); }
.diffcat .n {
display: block; font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); margin-top: 3px;
}
.diffrail-sep {
padding: 12px 16px 6px; font-family: var(--mono); font-size: 9px;
letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
border-bottom: 1px solid var(--line-2);
}
.diffdetail { padding: 16px 20px 60px; }
.diffdetail .detail-top { align-items: baseline; }
.diffdetail .detail-top h2 { font-size: 17px; }
.diffdetail .filterbar { margin-bottom: 12px; }
.diffdetail .secrow { padding-left: 0; padding-right: 0; }
.diffdetail .secbody { padding-left: 0; padding-right: 0; }
.diff-none { padding: 22px 0; color: var(--ink-3); font-size: 12.5px; }
/* a bar is a control */
button.hbar-row { width: 100%; border: 0; background: none; padding: 0; font: inherit;
text-align: left; cursor: pointer; }
button.hbar-row:hover .hbar-lbl { color: var(--ink); text-decoration: underline; }
button.hbar-row:hover .hbar-fill { filter: brightness(.92); }
/* ---- slip waterfall: where the period's days came from ----
Every colour is an existing token: a component that pushed the finish later
wears --danger, one that pulled it back wears --ok, and the opening and
closing totals wear --accent, which is this theme's neutral ink. No new hue,
radius, font or shadow. */
.wf-card .card-head .ov-kicker { margin-bottom: 3px; }
/* The plot gets the document's full column and the three summary cards sit
under it. The reference puts them beside the chart, but it has 2000px to
spend; this document column is 880, and beside the chart they left the plot
580px for ten columns — which reads as a squeezed, vertical chart rather
than the landscape sequence it is. Same parts, arranged for this width. */
.wf-body { display: block; }
.wf-warn { grid-column: 1 / -1; margin-bottom: 0; }
.wf-main { min-width: 0; }
.wf-plot { position: relative; padding: 22px 0 0; overflow-x: auto; }
.wf-grid { position: absolute; inset: 22px 0 auto 0; height: 168px; pointer-events: none; }
.wf-gridline { position: absolute; left: 34px; right: 0; border-top: 1px solid var(--line-2); }
.wf-gridlabel {
position: absolute; left: -34px; top: -7px; width: 28px; text-align: right;
font-family: var(--mono); font-size: 9.5px; color: var(--ink-4);
}
/* Ten columns — seven causes plus opening, unattributed and closing — have to
fit the document's 880px column without a scrollbar. Past that (a future
cause category) the plot scrolls rather than squeezing them illegibly. */
.wf-cols { display: flex; gap: 6px; padding-left: 34px; min-width: 470px; }
.wf-col { flex: 1 1 0; min-width: 42px; }
.wf-rail { position: relative; }
.wf-bar {
position: absolute; left: 12%; right: 12%; border: 0; padding: 0;
border-radius: 2px; background: var(--ink-5);
}
button.wf-bar { cursor: pointer; }
button.wf-bar:hover { filter: brightness(.92); }
button.wf-bar.on { outline: 2px solid var(--ink); outline-offset: 1px; }
.wf-bar.up { background: var(--danger-dot); }
.wf-bar.down { background: var(--ok-dot); }
.wf-bar.fixed { background: var(--accent); }
.wf-bar.residual { background: var(--ink-5); }
.wf-bar.flat { background: var(--line); }
/* F7: the cause colours, one class per engine cause (compare/causes.js). */
.cause-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: 0; background: var(--cause-residual); }
.cause-data-date-push { background: var(--cause-data-date-push); }
.cause-unfinished-work { background: var(--cause-unfinished-work); }
.cause-actual-dates { background: var(--cause-actual-dates); }
.cause-remaining-duration-change { background: var(--cause-remaining-duration-change); }
.cause-original-duration-change { background: var(--cause-original-duration-change); }
.cause-logic-change { background: var(--cause-logic-change); }
.cause-constraint-change { background: var(--cause-constraint-change); }
.cause-calendar-change { background: var(--cause-calendar-change); }
.cause-mixed { background: var(--cause-mixed); }
.cause-residual { background: var(--cause-residual); }
.cause-none { background: var(--cause-residual); }
.wf-val {
position: absolute; left: 0; right: 0; text-align: center;
font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink);
}
.wf-val.up { color: var(--danger); }
.wf-val.down { color: var(--ok); }
.wf-conn {
position: absolute; left: 88%; right: -10px;
border-top: 1px dashed var(--ink-5);
}
.wf-lab {
margin-top: 9px; font-size: 10.5px; line-height: 1.3; color: var(--ink-2);
text-align: center; overflow-wrap: anywhere;
}
.wf-group {
font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
text-transform: uppercase; color: var(--faint); text-align: center; margin-top: 2px;
}
.wf-sum { margin-top: 16px; display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.wf-tick { color: var(--ok); font-weight: 600; }
.wf-residual { margin-top: 6px; font-size: 11.5px; line-height: 1.6; color: var(--warn); max-width: 78ch; }
/* the two halves of the slip, and what did not classify */
.wf-side { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.wf-group-card { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.wf-group-card.attention { border-color: var(--warn-line); background: var(--warn-tint); }
.wf-group-card .k {
font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink-4);
}
.wf-group-card .v {
font-family: var(--mono); font-size: 21px; font-weight: 600; letter-spacing: -.02em;
margin: 5px 0 4px; color: var(--ink);
}
.wf-group-card .v.up { color: var(--danger); }
.wf-group-card .v.down { color: var(--ok); }
.wf-group-card .n { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }
/* the activities behind a selected bar */
.wf-detail { border-top: 1px solid var(--line-2); }
.wf-detail-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.wf-detail-head .k { font-size: 12.5px; font-weight: 600; }
/* Narrow: keep every column rather than scrolling the total out of view, and
let the three summary cards stack. */
@media (max-width: 900px) {
.wf-cols { min-width: 400px; gap: 4px; }
.wf-col { min-width: 34px; }
.wf-lab { font-size: 10px; }
.wf-group { font-size: 8px; }
.wf-side { grid-template-columns: 1fr; }
}
/* ---- 05 critical path: the chain ----
Every colour is an existing token. The lag hatch and the unexplained-gap
outline are the warning and error dots drawn as a pattern and a dashed
stroke rather than as new hues. */
.cp-strip { display: grid; grid-template-columns: repeat(5, 1fr); overflow: hidden; }
.cp-sc { padding: 11px 13px; border-right: 1px solid var(--line-2); }
.cp-sc:last-child { border-right: 0; }
.cp-sv {
font-family: var(--mono); font-size: 17px; font-weight: 500;
margin: 6px 0 3px; letter-spacing: -.01em; color: var(--ink);
}
.cp-sv.ok { color: var(--ok); }
.cp-sv.bad { color: var(--danger); }
.cp-sd { font-size: 11px; color: var(--ink-3); line-height: 1.4; }
.cp-basis {
margin: 12px 0 14px; padding-left: 12px; border-left: 2px solid var(--line);
font-size: 12.5px; line-height: 1.6; color: var(--ink-3); max-width: 88ch;
}
.cp-basis b { color: var(--ink); font-weight: 600; }
.cp-figure .cp-fig { padding: 10px 14px 4px; overflow-x: auto; }
.cp-fig svg { display: block; }
.cp-block { cursor: pointer; }
.cp-block:focus-visible, .cp-pinmark:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cp-gap, .cp-pinmark { cursor: help; }
.cp-legend {
display: flex; gap: 15px; flex-wrap: wrap; align-items: center;
margin: 0 14px; padding: 9px 0 11px; border-top: 1px solid var(--line-2);
font-family: var(--mono); font-size: 10px; color: var(--ink-4);
}
.cp-legend span { display: flex; gap: 6px; align-items: center; }
.cp-key { width: 16px; height: 9px; border-radius: 2px; display: inline-block; }
.cp-closes { margin-left: auto; color: var(--ink); font-size: 11px; }
.cp-closes b { color: var(--ok); }
.cp-drill, .cp-flags { margin-top: 12px; }
.cp-pin {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 50%; color: #fff;
font-family: var(--mono); font-size: 9px; font-weight: 600;
background: var(--neutral-dot);
}
.cp-pin.high { background: var(--danger-dot); }
.cp-pin.medium { background: var(--warn-dot); }
/* the section's own hover card: the report has no tooltip component, and an
SVG rect cannot carry four lines in a title attribute */
.cp-tip {
position: fixed; z-index: 130; pointer-events: none; opacity: 0;
transition: opacity .1s; background: var(--sidebar-bg); color: var(--sidebar-text);
border-radius: 8px; padding: 8px 11px; font-family: var(--mono); font-size: 11px;
line-height: 1.55; max-width: 260px; box-shadow: 0 24px 64px rgba(20,24,29,.32);
}
.cp-tip.on { opacity: 1; }
.cp-tip b { color: #fff; font-weight: 600; }
@media (max-width: 900px) { .cp-strip { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .cp-tip { transition: none; } }
/* E1-01 — the out-of-date mark on rollup screens. Small, and it earns its
colour: these numbers are not wrong, they answer a question that has since
been re-asked. */
.stale-dot {
display: inline-block;
margin-left: 6px;
color: var(--warn, #9C5606);
font-size: 15px;
line-height: 1;
cursor: help;
vertical-align: middle;
}
.stale-note {
font-family: var(--mono, monospace);
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--warn, #9C5606);
}
/* E1-03 — decisions whose finding no longer exists. Quiet: nothing here is
wrong, it is work that has been set aside and was previously invisible. */
.orphan-box {
border: 1px solid var(--rule, #E6E2DA);
border-left: 3px solid var(--warn, #9C5606);
background: var(--card, #fff);
padding: 12px 14px;
margin: 0 0 18px;
}
.orphan-head { display: flex; align-items: baseline; gap: 10px; }
.orphan-why {
margin-top: 5px;
font-size: 13px;
line-height: 1.5;
color: var(--soft, #6E7883);
max-width: 70ch;
}
.orphan-row {
display: flex; gap: 10px; align-items: baseline;
margin-top: 7px; font-size: 12.5px;
}
.orphan-row .k { min-width: 190px; color: var(--ink, #14181D); }
.orphan-row .v {
font-family: var(--mono, monospace);
font-size: 11.5px;
color: var(--soft, #6E7883);
overflow-wrap: anywhere;
}
.orphan-box .btn { margin-top: 11px; }
/* E6-01 — how many updates this finding has survived. Quiet by default and
warmer once it has been asked three times, because at that point the fact
the contractor has not addressed it IS the finding. */
.chip.rec {
background: var(--card, #fff);
border-color: var(--rule-2, #D8D2C6);
color: var(--soft, #6E7883);
cursor: help;
}
.chip.rec.hot {
color: var(--kicker, #8A6A3C);
border-color: var(--kicker, #8A6A3C);
}
/* E1-04 — a review held because the file pair moved. Warmer than the orphan
block: nothing is lost, but a comment number already issued to a contractor
is being withheld, and that needs answering rather than noting. */
.orphan-box.retarget { border-left-color: var(--hot, #A6402C); }
.orphan-box.retarget .stale-note { color: var(--hot, #A6402C); }
/* ---- UI-01 Intake: three states that never look alike ------------------- */
/* One box for every mark, so a column of them lines up with itself -- which a
run of Unicode glyphs never did, being sized by the text ramp rather than by
the mark's own geometry. */
.ic { display: inline-grid; place-items: center; width: 10px; height: 10px; flex: none; }
.ic svg { width: 10px; height: 10px; display: block; }
/* Geometry only. The columns are declared once, with the redesign, at the foot
of this file -- they used to be declared here as well, and the two rules 560
lines apart is how a live one and a dead one sat in the same stylesheet
without either being obviously wrong. */
.ik-head { display: grid; gap: 10px; }
.ik-value { overflow-wrap: anywhere; }
/* The narrow-viewport rule that used to live here is now with the rest of the
redesign, at the foot of this file. It had stopped working: the block down
there restates `.ik-head`'s columns unconditionally, at the same specificity
and later in the cascade, so this one lost every match it won. Measured at a
1000px viewport with the override in place: the check title -- the row's
primary reading element -- was allotted 28px and set one character per line.
Two same-named rules on either side of 500 lines is how that hid. */
.ik-title { font-weight: 600; }
.ik-state { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; font-weight: 600; }
.ik-value { text-align: right; font-size: 12px; }
.ik-sub { margin: 4px 0 0 20px; font-size: 12px; color: var(--ink-3); }
/* The only place in the app that used --link, which is #1B4FD8 -- a browser
blue on warm paper, and the same tell as an unthemed focus ring. Links here
are set the way every other link in this world is: ink, on a hairline that
strengthens under the cursor. */
.sheet-link {
color: var(--ink-2); text-decoration: none; font-weight: 500;
border-bottom: 1px solid var(--line); padding-bottom: 1px;
transition: color .12s ease, border-color .12s ease;
}
.sheet-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.sheet-link:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; border-radius: 2px; }
.ik-pass .ic, .ik-pass .ik-state { color: var(--ok); }
.ik-raise .ic, .ik-raise .ik-state { color: var(--warn-dot); }
.ik-raise { background: var(--warn-tint); }
.ik-np .ic, .ik-np .ik-state { color: var(--ink-4); }
.ik-np .ik-value { color: var(--ink-4); font-style: italic; }
.pill.ik-pass { color: var(--ok); border-color: var(--ok-line); }
.pill.ik-raise { color: var(--warn); border-color: var(--warn-line); background: var(--warn-tint); }
.pill.ik-np { color: var(--ink-4); }
/* The mark track and gap are the check row's, to the pixel. They were 18px/8px
against the row's 10px/10px, which put the packet's titles at x+26 and the
checks' at x+20. Beside each other in two columns nobody reads that; stacked
one under the other, as they are on any window under ~1000px, it is two lists
of marked rows that do not share a left edge. */
.ik-file { display: grid; grid-template-columns: 10px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line-2); }
/* The first item sat under the card head's own rule with a rule of its own:
two hairlines, one gap. The head rule is the only rule above the first item. */
.ik-file:first-child { border-top: 0; }
.ik-file.present .ic { color: var(--ok); }
.ik-file.absent .ic { color: var(--ink-4); }
.ik-file.absent .ik-title { color: var(--ink-4); }
.skel, .ik-skel { height: 14px; margin: 12px 0; border-radius: 3px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: ik-shimmer 1.2s linear infinite; }
@keyframes ik-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel, .ik-skel { animation: none; } }
/* ---- UI-02 Setup rail --------------------------------------------------- */
/* The old Setup rail and panel lived here: six bordered buttons, each a
rounded box with a 1px border and a Unicode ring for a mark, and the open
step inside a `.card`. Both are gone -- the replacement is at the foot of
this file, on the shared sheet components Intake also uses. */
/* One authored entrance, on the surface that has exactly one thing to say.
It starts from a VISIBLE default and settles -- nothing here is parked at
opacity 0 waiting on a script, so the page is correct with JS broken, with
motion reduced, and in a screenshot taken before it finishes. */
@media (prefers-reduced-motion: no-preference) {
.unlock-card { animation: auth-settle .5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes auth-settle {
from { opacity: .55; transform: translateY(7px); }
to { opacity: 1; transform: none; }
}
}
/* ============================ portfolio dashboard ================== The workspace's one at-a-glance screen. Every selector here is .pf-scoped:
the pane, the card and the grid table are shared by every other screen and
are deliberately left alone.
Two things drove the layout. The stat cards were sized by their own content,
so four boxes of four different widths sat stranded in the left half of a
page whose table used the full width. And the pane has no measure at all, so
on a wide monitor a seven-column table ran from bezel to bezel. Both are
fixed by giving the page one measure that the band and the table share. */
.pf {
max-width: 1240px; margin: 0 auto;
/* One left edge for the whole page. The table's first column is the row
disclosure, so the edge is that column's width — the heading, the stat
band and every project's code all start on it. */
--pf-g: 26px;
}
.pf .pagehead { padding: 0 var(--pf-g) 0 var(--pf-g); }
/* One object, four equal cells divided by hairlines — not four cards. Equal
columns are the point: these are four readings of the same portfolio, and
sizing each box to its own label made them look like four unrelated things. */
.pf-stats {
display: grid; grid-template-columns: repeat(4, 1fr);
border: 1px solid var(--line); border-radius: 10px;
background: var(--surface); overflow: clip; margin-bottom: 14px;
}
.pf-stat { padding: 15px 20px 14px var(--pf-g); border-left: 1px solid var(--line); min-width: 0; }
.pf-stat + .pf-stat { padding-left: 20px; }
.pf-stat:first-child { border-left: 0; }
.pf-stat .n {
font-family: var(--mono); font-size: 30px; font-weight: 600;
line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.pf-stat .kicker { display: block; margin-top: 8px; }
/* The count that is nothing to worry about stays ink; the two that are stay in
their own semantic colour, so the band is scannable without reading a word. */
.pf-stat.bad .n { color: var(--danger); }
.pf-stat.warn .n { color: var(--warn); }
/* Both screens' identity treatments in one cell: the code leads, as it did on
Projects, and the name reads under it, as it did on the dashboard. */
.pf-code {
font-family: var(--mono); font-weight: 600; font-size: 12px; color: var(--accent);
line-height: 1.4;
}
.pf-code.off { color: var(--ink-4); }
.pf-name { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.35; }
.pf-name.off { color: #6B7684; }
.pf-clause { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); }
.pf-clause::before { content: " · "; }
.pf-meta {
font-family: var(--mono); font-size: 10.5px; color: var(--ink-4);
margin-top: 3px; letter-spacing: .01em;
}
.pf-row td { padding-top: 11px; padding-bottom: 11px; vertical-align: middle; }
/* Findings arrived as "41 (7 H)". Same two numbers, but the high-severity count
now reads as the thing it is rather than as a parenthetical. */
.pf-fh { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); }
.pf-fh.on { color: var(--danger); font-weight: 600; }
/* A separator, because "6" and "0 H" set side by side read as "60 H". */
.pf-fh::before { content: "·"; margin: 0 5px; color: var(--ink-5); font-weight: 400; }
/* The disclosure column IS the left gutter: no padding of its own, exactly the
page's edge wide, so the identity cell after it starts on that edge and the
chevron sits in the gutter rather than pushing the row in. */
.pf .card table.grid th.pf-x,
.pf .card table.grid td.pf-x { width: var(--pf-g); padding: 0; }
.pf .card table.grid tr > *:nth-child(2) { padding-left: 0; }
.pf .card table.grid th:last-child,
.pf .card table.grid td:last-child { padding-right: 20px; }
/* The state definitions the health words come from. Four equal columns on the
table's own edges: the chip, then its sentence under it, so a definition is
read as a definition instead of as a caption squeezed beside a pill. */
.pf-legend {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line);
}
.pf-legend-item .chip { margin-bottom: 6px; }
.pf-legend-item p {
margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--ink-4);
text-wrap: pretty;
}
@media (max-width: 1080px) {
.pf-stats, .pf-legend { grid-template-columns: repeat(2, 1fr); }
.pf-stat:nth-child(3) { border-left: 0; }
.pf-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
/* --- the row disclosure and the delivery figures behind it ------------------
Sixteen columns do not fit on any screen worth designing for, so the row
carries the health read and opens for the delivery read. A button, not a
click on the row: the row already means "open this project", and one gesture
cannot mean two things. */
.pf-exp {
display: grid; place-items: center; width: var(--pf-g); height: 30px;
background: none; border: 0; padding: 0; cursor: pointer;
color: var(--ink-5); transition: color .12s ease;
}
.pf-exp svg { width: 10px; height: 10px; transition: transform .16s ease; }
.pf-exp:hover { color: var(--ink-2); }
.pf-exp:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; border-radius: 3px; }
.pf-row.open .pf-exp { color: var(--ink-2); }
.pf-row.open .pf-exp svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .pf-exp svg { transition: none; } }
.pf-detail > td {
background: var(--surface-3); border-bottom: 1px solid var(--line);
padding: 14px var(--pf-g) 16px;
}
.pf-dgrid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px 24px;
}
.pf-dk {
font-family: var(--mono); font-weight: 600; font-size: 9.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink-4);
}
/* A label carrying the sentence that defines it. It was a before the
merge; losing the cursor would lose the only definition these measures have. */
.pf-dk.has-t { cursor: help; border-bottom: 1px dotted var(--line); display: inline-block; }
.pf-dv {
margin-top: 5px; font-size: 12.5px; color: var(--ink);
font-variant-numeric: tabular-nums;
}
.pf-dv .bar { justify-content: flex-start; }
/* Which schedule the figures came from. It existed only inside the UNPUBLISHED
chip's tooltip, so a published row could never see it at all. */
.pf-basis {
margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line);
font-size: 11.5px; color: var(--ink-4);
}
.pf-bandleg { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); align-items: flex-start; }
@media (max-width: 1080px) { .pf-dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* `table.grid tbody td` sets vertical-align:top at (0,1,2) and beat the (0,1,1)
rule that tried to centre these; a two-line identity cell left every chip and
figure floating at the top of its row. */
table.grid.pf-table tbody td { vertical-align: middle; }
table.grid.pf-table tbody .pf-detail > td { vertical-align: top; }
/* "Delete" broke to "Dele / te" once the column carried the page's right padding. */
.rowdel { white-space: nowrap; }
/* ============================ project switcher ===================== Sits between the organization header and the nav, where the thing you are
inside belongs. The control is the sidebar's own material; the popover it
opens is paper, because the list it shows is the page's content and not part
of the rail. */
.sb-switch { position: relative; padding: 10px; }
.sb-sw {
width: 100%; display: flex; align-items: center; gap: 9px; text-align: left;
padding: 7px 9px; border-radius: 7px; cursor: pointer;
background: var(--sidebar-bg-2); border: 1px solid var(--sidebar-line-2);
color: var(--sidebar-text); transition: border-color .12s ease, background .12s ease;
}
.sb-sw:hover { border-color: #4A4E54; }
.sb-sw:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 1px; }
.sb-sw-av {
flex: none; width: 24px; height: 24px; border-radius: 6px; display: grid;
place-items: center; font-family: var(--mono); font-weight: 600; font-size: 11px;
background: #33373C; color: var(--sidebar-text-2); letter-spacing: .02em;
}
.sb-sw-t { min-width: 0; flex: 1; display: block; }
.sb-sw-n {
display: block; font-size: 12px; font-weight: 600; color: var(--sidebar-text);
line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-sw-s {
display: block; font-size: 10.5px; color: var(--sidebar-label); line-height: 1.3;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-sw-c { flex: none; width: 10px; height: 10px; color: var(--sidebar-label); }
.sb-sw[aria-expanded="true"] .sb-sw-c { transform: rotate(180deg); }
/* Fixed, not absolute. .sidebar scrolls (overflow-y: auto), so a positioned
child of it is clipped at the rail's bounds and scrolls away with it — with
enough projects, or on a short screen, the list was cut off by its own
container. Fixed takes it out of that box; the coordinates come from the
button on open.
The shadow is tighter than the house popover's 8/24. That one lifts paper off
paper and needs the spread; this one lands on the sidebar's ink, where the
value contrast already does the separating and a wide soft halo only reads as
generic elevation. Different ground, different lift. */
.sb-sw-pop {
position: fixed; z-index: 60;
background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
box-shadow: 0 4px 12px -4px rgba(18, 22, 27, .34);
padding: 8px; display: flex; flex-direction: column;
}
.sb-sw-q { flex: none; padding: 2px 2px 8px; }
.sb-sw-q input {
width: 100%; height: 30px; padding: 0 9px; font-size: 12px; color: var(--ink);
background: var(--surface); border: 1px solid var(--control-line); border-radius: 6px;
}
.sb-sw-q input:focus {
outline: none; border-color: var(--brand-accent);
box-shadow: 0 0 0 3px rgba(180, 83, 26, .12);
}
.sb-sw-list { overflow-y: auto; min-height: 0; }
.sb-sw-row {
width: 100%; display: flex; align-items: center; gap: 9px; text-align: left;
padding: 6px 7px; border: 0; border-radius: 6px; background: none; cursor: pointer;
}
.sb-sw-row:hover { background: var(--surface-2); }
.sb-sw-row.on { background: var(--accent-tint); }
.sb-sw-row:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; }
.sb-sw-av.sm { background: var(--line-2); color: var(--ink-2); }
.sb-sw-rt { min-width: 0; flex: 1; }
.sb-sw-rn {
display: block; font-size: 12.5px; font-weight: 500; color: var(--ink);
line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-sw-rc {
display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-4);
line-height: 1.35;
}
.sb-sw-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.sb-sw-dot.hi { background: var(--danger-dot); }
.sb-sw-dot.med { background: var(--warn-dot, var(--warn)); }
.sb-sw-dot.ok { background: var(--ok); }
.sb-sw-dot.none { background: var(--ink-5); }
.sb-sw-empty { margin: 4px 7px 8px; font-size: 11.5px; color: var(--ink-4); }
.sb-sw-foot {
flex: none; margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--line-2);
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.sb-sw-act {
width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
padding: 6px 7px; border-radius: 6px; font-size: 12px; color: var(--ink-2);
}
.sb-sw-act:hover { background: var(--surface-2); color: var(--ink); }
.sb-sw-act.new { color: var(--brand-accent); font-weight: 600; }
.sb-sw-act:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; }
/* --- the journey's state on the rail ---------------------------------------
The dot each item already had, now carrying where the project is. Advisory
only: a waiting item keeps its click and its title says what it waits on,
because a stage waits on a fact -- a file, a second data date -- and refusing
the screen would neither create that fact nor explain it.
Scoped with :not(.on) so the active item keeps its white dot. */
.sb-item:not(.on) .dot.j-done { background: var(--ok); }
/* The one stage the journey proposes next. Exactly one item carries it. */
.sb-item:not(.on) .dot.j-next { background: var(--brand-accent); }
/* Workable, but not the suggestion: the rail's ordinary state. */
.sb-item:not(.on) .dot.j-ready { background: var(--sidebar-dot); }
.sb-item:not(.on) .dot.j-optional { background: var(--sidebar-dot); }
.sb-item:not(.on) .dot.j-waiting {
background: none; box-shadow: inset 0 0 0 1px var(--sidebar-dot);
}
.sb-item.j-waiting:not(.on) { color: var(--sidebar-text-3); }
/* --- one measure for the working screens ------------------------------------
The pane has none, so a screen runs from bezel to bezel on a wide monitor.
Compare already sets its own; this is the same width for the screens that
had never been given one. */
.measure { max-width: 1240px; margin: 0 auto; }
/* --- the next-step strip ----------------------------------------------------
Where this project is and what to do next, on every one of its screens.
Sibling to .verify-bar in structure -- a hairline-footed band under the top
bar -- but neutral rather than warning: this is orientation, not an alert.
One sentence, one control, nothing else. It is painted from the journey the
project payload carries, so a screen cannot disagree with it. */
.next-strip {
flex: none; display: flex; align-items: center; gap: 12px;
padding: 8px 20px; background: var(--surface-3);
border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2);
line-height: 1.45;
}
.next-strip .ns-dot {
width: 7px; height: 7px; flex: none; border-radius: 2px;
background: var(--brand-accent);
}
.next-strip .ns-txt { flex: 1; min-width: 0; }
.next-strip .ns-go {
flex: none; height: 26px; padding: 0 11px; border-radius: 6px; cursor: pointer;
font-size: 12px; font-weight: 600; color: #fff;
background: var(--accent); border: 1px solid var(--accent);
transition: background .12s ease, border-color .12s ease;
}
.next-strip .ns-go:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.next-strip .ns-go:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
/* --- wide tables scroll in their own container ------------------------------
DESIGN.md: a wide structure scrolls inside its own container; the page never
scrolls sideways. The Schedules table had no such container, so at 1180 its
STATE column and row actions were simply off-canvas and dates broke at the
hyphen. The wrapper scrolls; the dates hold their line. */
.tablewrap {
overflow-x: auto; position: relative;
/* Thin and in the control line where a platform draws a scrollbar at all.
Not relied on: macOS overlay scrollbars hide at rest, and once
scrollbar-width is set Chromium ignores ::-webkit-scrollbar entirely --
so the visible-at-rest affordance is the drawn indicator below. */
scrollbar-width: thin; scrollbar-color: var(--control-line) transparent;
}
/* The clipped edge is a rule, not a shadow. A 1px hairline down the inside of
the right edge says "continues" in the one device this world uses for
structure, and unlike the gradient it replaces it does not dissolve the row
rules 28px short of their frame. */
.tablewrap.is-overflowing { box-shadow: inset -1px 0 0 var(--line); }
/* The drawn indicator: a hairline track under the table and a thumb in the
control line, positioned by schedules.js from scrollLeft. Present at rest,
on every platform, only while the table actually overflows. */
.tw-bar { position: relative; height: 2px; margin: 6px 12px 8px; background: var(--line-2); display: none; }
.tablewrap.is-overflowing + .tw-bar { display: block; }
.tw-thumb { position: absolute; top: 0; height: 2px; background: var(--control-line); border-radius: 1px; }
/* Inside a scrolling table nothing set in mono breaks: a date, an ID, a count.
The data-date cell is a .mono div in a plain td -- neither .num nor .date --
which is why the first rule here matched nothing and "31-Jul-" / "26" still
wrapped at 1180. The container scrolls; the value holds its line. */
.tablewrap table.grid td.num, .tablewrap .mono { white-space: nowrap; }
/* The account-menu caret, drawn. It was a Unicode ▼ at 8px -- whatever glyph
the reader's font supplied, sized by the text ramp. Same box as every other
mark in the app. */
.usermenu .ic { color: var(--ink-4); }
/* ============================ new project ========================= One door into a project: you arrive with files, not with a form. The modal
is therefore almost entirely one target, and the only thing it says back is
a count -- what was found INSIDE the files belongs to the setup step that
owns it, not to a preview here.
Everything below is .np-scoped. `.scrim`, `.modal`, `.modal-head`,
`.modal-body` and `.modal-foot` are shared by every other overlay in the
app and are left exactly as they are. */
.modal.np { width: 560px; }
.modal.np .modal-head { padding: 20px 22px 14px; }
.modal.np .modal-head h2 { font-size: 17px; letter-spacing: -.01em; }
.modal.np .modal-head .sub { font-size: 12px; line-height: 1.5; max-width: 42ch; }
.modal.np .modal-body { padding: 0 22px 18px; }
/* The target. A dashed edge, because the boundary is an invitation and not a
container -- and one that does not move: the border width, the padding and
the radius are identical in every state, so nothing reflows when a drag
enters. Only colour changes. */
.np-zone {
border: 1.5px dashed var(--line);
border-radius: 12px;
background: var(--paper);
padding: 34px 20px;
text-align: center;
cursor: default;
transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.np-zone-in { display: grid; gap: 5px; place-items: center; }
.np-d1 { font-size: 14.5px; font-weight: 600; color: var(--ink); letter-spacing: -.005em; }
.np-d2 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); }
.np-d3 { margin-top: 9px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center; }
/* Hover is a hint that the whole panel is live, not just the three links. */
.np-zone:hover { border-color: var(--ink-5); background: var(--surface-2); }
/* Drag. The one moment in this screen worth colour: the burnt orange that
already means "active" everywhere else in the app. */
.np-zone.on {
border-color: var(--brand-accent);
border-style: solid;
background: #FBF6F4; /* the accent at 5% over white, resolved */
box-shadow: 0 0 0 3px rgba(180, 83, 26, .12);
}
.np-zone.on .np-d1 { color: var(--brand-accent); }
/* Reading. The target stops being a target, and says so by going quiet --
no spinner: the count line underneath is already narrating. */
.np-zone.busy { opacity: .6; pointer-events: none; border-style: dotted; }
/* Three plain-text choices, not three buttons. Buttons here would compete with
Continue, which is the only real action in the footer. */
.np-link {
border: 0; background: none; padding: 0;
font: inherit; font-size: 12px; font-weight: 500;
color: var(--ink-2); cursor: pointer;
border-bottom: 1px solid var(--line);
transition: color .14s ease, border-color .14s ease;
}
.np-link:hover { color: var(--brand-accent); border-bottom-color: var(--brand-accent); }
.np-link:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; border-radius: 2px; }
.np-sep { color: var(--ink-5); font-size: 11px; user-select: none; }
/* The count. Mono, because it is a reading of the files and not prose about
them; and it arrives rather than appears, so the modal does not jump. */
.np-count {
margin-top: 14px;
font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
color: var(--ink-3);
padding-left: 11px;
border-left: 2px solid var(--line);
}
.modal.np .err { margin-top: 12px; }
@media (prefers-reduced-motion: no-preference) {
/* Same entrance as the unlock card, and for the same reason: it starts from
a VISIBLE default and settles. Nothing is parked at opacity 0 waiting on a
script, so the modal is correct in a screenshot taken mid-animation. */
.modal.np { animation: auth-settle .34s cubic-bezier(.16, 1, .3, 1) both; }
.np-count { animation: np-count-in .28s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes np-count-in {
from { opacity: .4; transform: translateY(-3px); }
to { opacity: 1; transform: none; }
}
}
@media (max-width: 640px) {
.modal.np { width: 100%; }
.np-zone { padding: 26px 14px; }
.np-d3 { gap: 5px; }
}
/* ============================ intake, redesigned =================== The cover sheet of the review: what arrived, on what date, and what could not
be checked, before a number is read. It was a stack of cards with a tinted
callout on top; it is set as the document now, in the same hand as the
sign-in and the report itself. */
/* Narrower than the portfolio's 1240: this page is read, not scanned across. */
.sheet-meas { max-width: 1080px; }
/* The verdict, as the report's own section head.
It was `.align-notice` -- a tinted callout with a 3px coloured stripe down its
left edge, the one device this world refuses outright. And the verdict is not
an aside on this page; it is the sentence the page exists to say. Severity is
carried by the words and the marks, which were already doing it. */
.sheet-verdict {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px;
align-items: start;
padding-bottom: 16px; margin-bottom: 4px;
border-bottom: 2px solid var(--ink);
}
.sheet-words {
font-size: 26px; font-weight: 600; letter-spacing: -.025em; line-height: 1.22;
text-wrap: balance;
}
.sheet-verdict.bad .sheet-words { color: var(--danger); }
.sheet-line {
margin-top: 9px; font-size: 13px; line-height: 1.65; color: var(--ink-2);
max-width: 70ch; text-wrap: pretty;
}
/* Four readings, in the mono this product prints every measured value in. */
.sheet-counts {
grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 20px; margin-top: 15px;
}
.sheet-count {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em;
}
/* The readings' own modifiers. They were `ik-pass` / `ik-raise` / `ik-np`,
which is the prefix that lies this promotion exists to stop: `.sheet-count`
is shared, so Setup was rendering an Intake-prefixed class to say "confirmed".
The row states in `.ik-row` keep theirs -- those really are Intake's. */
.sheet-count.ok .ic { color: var(--ok); }
.sheet-count.raise .ic { color: var(--warn-dot); }
.sheet-count.mute, .sheet-count.mute .ic { color: var(--ink-4); }
/* The action, beside the verdict. "Is this reviewable" and "what do I do about
it" are one thought; this control was at the foot of a side panel. */
.sheet-act { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.sheet-act .hint { max-width: 32ch; text-align: right; }
/* `.hint` is the caption class this screen has always used -- under each packet
item, under the action, under the receipt fields -- and NOTHING IN THE
STYLESHEET EVER MATCHED IT. Every rule for it is scoped to somewhere else
(`.field .hint`, `.smodal-foot .hint`, `.credbox .hint`), so here it inherited
12.5px in full ink: the same size and the same colour as the `.ik-title`
directly above it. Measured: title 12.5px rgb(20,24,29), caption 12.5px
rgb(20,24,29). On an absent packet item it read as an inversion, the title
greyed to --ink-4 and its own caption left darker than it.
Scoped to this screen rather than given the bare `.hint` the app never had:
a global rule would newly restyle every unmatched `.hint` in twelve screens
nobody has looked at, which is a different change than this one. */
/* `.sheet-block .field .hint` is named explicitly so this wins on SPECIFICITY
rather than on source order: `.field .hint` sets 10.5px at the same weight of
selector, and a caption inside a block resolving correctly only because this
rule happens to come later is the fragility this build spent two rounds
removing from the container queries. */
.sheet-block .hint, .sheet-act .hint,
.sheet-block .field .hint { font-size: 11.5px; line-height: 1.5; color: var(--ink-4); }
.ik-file .hint { margin-top: 2px; }
.sheet-body > .hint { margin-top: 8px; }
/* Blocks on rules, not cards. A card inside a card was the shape this page had. */
.sheet-block { min-width: 0; }
.sheet-head {
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
padding-bottom: 8px; margin: 26px 0 0; border-bottom: 1px solid var(--ink);
}
.sheet-block > .sheet-head:first-child { margin-top: 20px; }
.sheet-t { font-size: 13px; font-weight: 600; letter-spacing: -.005em; }
.sheet-n { font-size: 11.5px; color: var(--ink-4); margin-left: auto; text-wrap: pretty; }
.sheet-body { padding: 12px 0 0; }
.sheet-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 11px; }
.sheet-two label { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 5px; }
.sheet-two input {
width: 100%; height: 32px; padding: 0 9px; font-size: 12.5px; color: var(--ink);
background: var(--surface); border: 1px solid var(--control-line); border-radius: 6px;
}
.sheet-two input:focus {
outline: none; border-color: var(--brand-accent);
box-shadow: 0 0 0 3px rgba(180, 83, 26, .12);
}
/* The month's schedule, in the create modal's own language -- the same dashed
edge, the same burnt orange on drag, the same refusal to move under the
cursor: border width, padding and radius are identical in every state. */
.ik-drop {
border: 1.5px dashed var(--line); border-radius: 10px; background: var(--paper);
padding: 16px 12px; display: grid; gap: 7px; place-items: center; text-align: center;
transition: border-color .16s ease, background-color .16s ease;
}
.ik-drop:hover { border-color: var(--ink-5); background: var(--surface-2); }
.ik-drop.on { border-color: var(--brand-accent); border-style: solid; background: #FBF6F4; }
.ik-drop.busy { opacity: .6; pointer-events: none; border-style: dotted; }
.ik-drop-t { font-size: 12.5px; font-weight: 600; color: var(--ink); }
/* The eight rows, on hairlines rather than inside a card. The raise tint bleeds
into the block's own gutter so the text still starts on the page's left edge. */
.ik-row { padding: 11px 12px; margin: 0 -12px; border-top: 1px solid var(--line-2); }
.ik-row:first-child { border-top: 0; }
/* The row's four columns, declared once. The value column is a FIXED width
rather than `minmax(120px, auto)`: sized to its content it re-widthed on
every row and the state word landed at a different x in each of the eight --
a column of marks lining up beside labels that did not. A long value wraps
inside its column instead of pushing it. */
.ik-head { grid-template-columns: 10px minmax(0, 1fr) 104px 240px; align-items: baseline; }
/* ---- how this page gives way when it is not given the room ---------------
Keyed on the WIDTH OF THE COLUMN, not the width of the window. The two are
not the same here and the difference is the whole bug: the shell's rail is a
fixed 232px that never collapses, so at a 375px viewport this page is asked
to set itself in 103px while `@media (max-width: …)` still reads 375 and
picks a layout for a width the page does not have. Container queries ask the
only question that has ever mattered to these rows -- how wide am I -- and
answer it the same way whether the room was taken by the viewport, by the
rail, or by something added later. */
.sheet-meas { container-type: inline-size; container-name: sheet; }
/* The two columns, as a class rather than a cssText string in the render
function. It was inline -- `minmax(0,1fr) 300px` set on the element -- which
no query of any kind can reach, so the page had exactly one layout at every
width. Measured at a 1000px viewport: the 300px rail and the row's 354px of
fixed track left 28px for the check title, which set one character per line. */
.ik-console {
display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
align-items: start;
}
/* Every ruled block on this page is its own query container, so a check row
answers to the width of the block it is in rather than to the page's. The
declaration named the direct children of the grid; the blocks sit inside a
column wrapper now, and a container that stops being an ancestor takes its
two step-downs with it silently -- the title then wrapped one word per line
while the 104px state and 240px value tracks held their full width. */
/* The checks are BANDS of one board now, not blocks of a column, so the band
is the unit a check row answers to. Declared on the band and on the cards
that are still cards -- the rail's, and the decision under the console. */
.ik-band,
.ik-screen > .sheet-block,
.ik-rail > .sheet-block { container-type: inline-size; container-name: sheetblock; }
/* The rail cannot sit beside the checks below this: 300px of rail plus the gap
leaves the checks under 360px, where the title wraps whatever the row does.
It goes under them, in the order it already had -- receipt, this month's
file, the packet. */
@container sheet (max-width: 700px) {
.ik-console { grid-template-columns: minmax(0, 1fr); gap: 4px; }
/* Full width is right for the drop zone. It is not right for two date-sized
fields, which would set 600px wide and read as a different control. */
.sheet-two { grid-template-columns: repeat(2, minmax(0, 190px)); justify-content: start; }
}
/* The verdict and its action are one thought, so they hold one line for as long
as one line holds both. */
@container sheet (max-width: 560px) {
.sheet-verdict { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.sheet-act { align-items: flex-start; }
.sheet-act .hint { text-align: left; }
.sheet-words { font-size: 22px; }
/* Stacked, the grid runs in source order and wedges the action between the
verdict and its own readings, so the masthead stops being one unit at the
width where the reader has least context. The readings close the verdict;
the action follows them. */
.sheet-verdict > *:first-child { order: 1; }
.sheet-counts { order: 2; margin-top: 13px; }
.sheet-act { order: 3; margin-top: 15px; }
}
/* Below this the row cannot hold four columns and still give the title the
~260px it needs to set on one or two lines. Derived from the row, not rounded
to a device: 10 + 10 + 260 + 10 + 104 + 10 + 240 = 644. */
@container sheetblock (max-width: 643px) {
/* The value leaves the header line and sets under the title, still in mono,
still the measured reading -- the way the issued report sets a value that
will not fit beside its label. The title keeps the whole first line.
The state track stays FIXED, never `auto`. Sized to its own text it is 27px
on a PASS row and 79px on a NOT PROVIDED one, so the eight state words
start at three different x positions and the column stops being a column.
Measured with `auto` in place: 637 / 631 / 584. */
.ik-head { grid-template-columns: 10px minmax(0, 1fr) 104px; }
.ik-value { grid-column: 2 / -1; text-align: left; margin-top: 3px; }
}
/* And here even that is more than the column has. The mark keeps the title
company; the state word and the value stack under it. This is the shape the
page takes inside the 103px the shell leaves it on a phone -- cramped, but
set, rather than a title column computed to zero. */
@container sheetblock (max-width: 313px) {
.ik-head { grid-template-columns: 10px minmax(0, 1fr); }
.ik-state { grid-column: 2 / -1; margin-top: 4px; }
.ik-value { grid-column: 2 / -1; margin-top: 2px; }
.ik-sub { margin-left: 20px; }
}
/* The empty project, and the file the drop zone refuses ------------------- */
.ik-empty {
padding: 18px 0 4px; font-size: 13px; line-height: 1.6;
color: var(--ink-2); max-width: 62ch; text-wrap: pretty;
}
/* Progress and refusal shared one `.hint`, so "those are not .xer files"
arrived at 11.5px in the lightest ink on the page -- the treatment of a
caption, for the one sentence on the block that says something went wrong. */
.sheet-refuse {
margin-top: 8px; font-size: 12.5px; font-weight: 500; line-height: 1.5;
color: var(--danger);
}
.sheet-body > .btn { margin-top: 8px; }
/* The date control. It is the one element on this page that belongs to no
design system: the platform's own picker, sitting beside a themed transmittal
field in the page's most document-like block. Replacing it outright means
building a date picker, which is a different piece of work; what is in scope
is stopping it reading as a foreign object -- the digits set in the mono this
product prints every measured value in, and the platform glyph toned off its
default blue-grey onto the page's ink. */
.sheet-two input[type="date"] { font-family: var(--mono); font-size: 12px; letter-spacing: .01em; }
.sheet-two input[type="date"]::-webkit-calendar-picker-indicator {
opacity: .4; cursor: pointer; transition: opacity .16s ease;
}
.sheet-two input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: .85; }
@media (prefers-reduced-motion: reduce) {
.sheet-two input[type="date"]::-webkit-calendar-picker-indicator { transition: none; }
}
/* ---- the shell's rail, on a narrow window --------------------------------
`width: 232px; flex: none` with no rule anywhere that narrowed it. On a
375px phone that is 62% of the screen and the content column is 103px --
every screen, not only this one, and the reason the intake capture at that
width was unshippable however well the page set itself in the room it had.
It becomes the strip it already is in miniature: the org mark, the project
switcher, and the same nav items in the same order, scrolling sideways in
their own container. No new control, no menu to open, no JavaScript --
nothing above 820px changes by a pixel. The group labels and the footer's
reference block are what a strip cannot carry; both are stated elsewhere in
the product, and neither is a way to get anywhere. */
@media (max-width: 819px) {
.app { flex-direction: column; }
.sidebar {
width: auto; flex: none; flex-direction: row; align-items: center; gap: 4px;
padding: 0; overflow-x: auto; overflow-y: hidden;
border-bottom: 1px solid var(--sidebar-line-2);
scrollbar-width: thin;
}
/* The mark and the switcher hold the left edge while the nav scrolls behind
them. Without this the strip scrolls the project's identity off screen to
bring the active item into view, and on a phone -- where the breadcrumb is
hidden too -- nothing on the page would say which project it is. */
.sb-org {
height: 46px; margin-right: 0;
border-bottom: 0; border-right: 1px solid var(--sidebar-line);
position: sticky; left: 0; z-index: 2; background: var(--sidebar-bg);
/* The strip carries no horizontal padding of its own at this width: a
padded scroll container leaves a gutter the sticky block cannot cover,
and nav labels scrolled through it -- a stray letter at x=0, beside the
mark. The two sticky blocks own their own insets instead. */
padding: 0 10px 0 8px;
}
.sb-org-kicker { display: none; }
.sb-switch {
flex: none; padding: 6px 0;
/* Flush against the mark's block, at rest AND once stuck. The strip's own
4px flex gap sat between the two painted backgrounds, and a sticky
element pins its MARGIN box, so the gap could not be closed by margin
alone -- it stayed a transparent seam a scrolling glyph shows through
for the first 4px of travel. The negative margin cancels the gap so the
natural position is already 52; `left` then holds it there. Both numbers
are the mark block's measured right edge: padding 8 + mark 26 + padding
8 + rule 1 + ... = 52. */
position: sticky; left: 52px; margin-left: -4px;
/* Above the topbar (5), not just above its siblings in the strip. Sticky
makes this element a STACKING CONTEXT, so the switcher's panel is sealed
inside it and its own z-index counts for nothing outside: at 2 the panel
opened underneath the topbar, which ate the top 55px of it -- the whole
search field, invisible, while the rows below it showed fine. */
z-index: 20; background: var(--sidebar-bg);
}
.sb-sw { width: 190px; }
.sb-group { display: flex; align-items: center; gap: 3px; padding: 0; flex: none; }
.sb-kicker { display: none; }
.sb-item { width: auto; flex: none; padding: 7px 10px; white-space: nowrap; }
/* The last item needs the gutter the container gave up. */
.sb-group:last-of-type { padding-right: 8px; }
.sb-item .sb-count, .sb-item .pill { margin-left: 4px; }
.sb-footer { display: none; }
.main { min-height: 0; }
}
/* Narrower still: a phone. Two things were taking the strip's whole width
before a single nav item appeared -- the organization's name, which on a long
one is 180px, and a breadcrumb repeating what the switcher and the page's own
h1 already say. The mark keeps the organization's identity; the switcher
keeps the project's; and the nav starts on screen instead of behind a
sideways scroll with nothing to say it is there. */
@media (max-width: 599px) {
.sb-org-name { display: none; }
.sb-org { padding-right: 8px; }
.sb-sw { width: 148px; }
.crumbs { display: none; }
/* With the crumbs gone the topbar was 54px of nothing with the account chip
pinned right -- and it kept the hairline that used to separate the two, a
divider with nothing on its left. Both are chrome the phone cannot afford:
stacked under the 56px strip it was ~110px before the page began, on the
one viewport this whole rule exists to give room to. */
.topbar { height: 42px; padding: 0 12px; }
.topbar-div { display: none; }
}
/* ================= intake: the cover sheet, by who has to act ====== Nine check rows used to arrive in one list in three states, and two of those
states looked alike while meaning opposite things -- a grey row is either
"they never sent it" or "we never configured it", and those take opposite
responses. They are ruled blocks now, ordered so the owner of the work
changes exactly once, and everything that passed is a count that opens.
The components are the ones this world already records: the page verdict,
the ruled block, the check row, the drop zone. What is added here is only
what Intake genuinely needed and did not have -- a row for a document that
did not arrive, a row for a setting nobody made, and the series as a list of
places. No card, no tint that a state has not earned, no numbered section. */
.ik-bands, .ik-rail { min-width: 0; }
.ik-rail > .sheet-block + .sheet-block { margin-top: 26px; }
/* A row that raised keeps the check row it always was: the wash bleeds into
the block's gutter so the text still starts on the page's left edge. */
.ik-row.ik-raise { background: var(--warn-tint); margin: 0 -12px; }
.ik-row.ik-raise .ik-title { color: var(--ink); }
.ik-row.ik-raise .ik-state { color: var(--warn); }
.ik-row.ik-raise .ik-value { color: var(--warn); }
.ik-row.ik-raise .ic { color: var(--warn-dot); }
/* A document that did not arrive, and a check nobody configured. Two facts
that read alike in one list and do not belong in one: the first is the
contractor's to send, the second is the reviewer's to set. Both are rows on
the block's own hairline, not boxes -- the difference is said in the block
each sits in and in the word on its right. */
.ik-miss, .ik-gap {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px;
align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line-2);
}
.ik-miss:first-child, .ik-gap:first-child { border-top: 0; }
.ik-miss .t, .ik-gap .t { grid-column: 1; font-size: 12.5px; font-weight: 500; overflow-wrap: anywhere; }
.ik-miss .s, .ik-gap .s { grid-column: 2; font-size: 11.5px; color: var(--ink-4); text-align: right; }
.ik-miss .d, .ik-gap .d {
grid-column: 1 / -1; font-size: 12px; line-height: 1.55; color: var(--ink-3); max-width: 74ch;
}
/* What passed, or what arrived. Evidence behind a count, never rows of equal
weight with the things that need doing. */
.ik-fold { margin-top: 12px; }
.ik-fold summary {
cursor: pointer; font-size: 12px; color: var(--ink-3); list-style: none;
padding: 7px 0; border-top: 1px solid var(--line-2);
}
.ik-fold summary::-webkit-details-marker { display: none; }
.ik-fold summary::before { content: "\25B8\00a0"; color: var(--ink-5); }
.ik-fold[open] summary::before { content: "\25BE\00a0"; }
.ik-fold summary:hover { color: var(--ink); }
.ik-fold summary:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; border-radius: 3px; }
.ik-plist { padding-bottom: 4px; }
.ik-prow {
display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px;
align-items: baseline; padding: 7px 0; font-size: 12px; color: var(--ink-2);
}
.ik-prow .ic { color: var(--ok); position: relative; top: 1px; }
.ik-prow .t { min-width: 0; overflow-wrap: anywhere; }
.ik-prow .v { font-family: var(--mono); font-size: 11.5px; color: var(--ink-4); text-align: right; }
.ik-none { font-size: 12.5px; line-height: 1.6; color: var(--ink-3); max-width: 72ch; }
.ik-none + .ik-gap, .ik-none + .ik-miss { margin-top: 12px; }
/* The series, set the way this world sets a list of places: rows on hairlines,
no box and no fill in any state. Where-you-are is ink and weight. */
.ik-file-row {
display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px;
align-items: baseline; width: 100%; text-align: left;
padding: 9px 10px; margin: 0 -10px; border: 0; border-top: 1px solid var(--line-2);
background: none; font: inherit; color: var(--ink-3); cursor: pointer;
transition: color .16s ease;
}
.ik-file-row:first-of-type { border-top: 0; }
.ik-file-row:hover { color: var(--ink); }
.ik-file-row:hover .ic { color: var(--ink-2); }
.ik-file-row .nm { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ik-file-row .dt { font-size: 11.5px; color: var(--ink-4); }
.ik-file-row.on { color: var(--ink); }
.ik-file-row.on .nm { font-weight: 500; }
.ik-file-row.on .ic { color: var(--ok); }
.ik-file-row:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; border-radius: 3px; }
/* The month's file is the first block of the rail and a drop zone at rest: on
the project's front door the commonest act of the month is receiving a
schedule, and it was a small button at the foot of the page. */
.ik-rail .ik-drop { padding: 22px 14px; }
@container sheet (max-width: 700px) {
.ik-rail > .sheet-block + .sheet-block { margin-top: 22px; }
}
/* ---- the six, as a ribbon ---- */
.su-ribbon { display: flex; flex-wrap: wrap; gap: 2px; padding: 12px 34px 0; }
.su-tab {
display: flex; align-items: center; gap: 9px; flex: 0 1 194px; min-width: 0;
padding: 9px 12px 12px; margin-bottom: -1px;
border: 0; border-bottom: 2px solid transparent; background: transparent;
font: inherit; color: var(--ink-3); cursor: pointer; text-align: left;
transition: color .18s ease, border-color .2s ease;
}
.su-tab:hover { color: var(--ink); }
.su-tab.on { color: var(--ink); border-bottom-color: var(--brand-accent); }
.su-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 3px; }
.su-glyph {
width: 21px; height: 21px; flex: none; border-radius: 50%;
display: grid; place-items: center;
background: var(--surface-2); color: var(--ink-3);
font-family: var(--mono); font-size: 10.5px;
transition: background-color .2s ease, color .2s ease;
}
.su-tab.on .su-glyph { background: var(--brand-accent); color: #fff; }
.su-tab.done .su-glyph { background: var(--ok-tint); color: var(--ok); }
.su-tab.done .su-glyph .ic { color: var(--ok); }
.su-tab.blocked .su-glyph { color: var(--ink-5); }
.su-tab .su-t {
font-size: 13px; font-weight: 500;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.su-tab .su-sub {
margin-top: 1px; font-size: 11.5px; color: var(--ink-4);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.su-tab .su-sub.ok { color: var(--ok); }
/* ---- scrolling body ---- */
.su-body { flex: 1 1 auto; display: flex; justify-content: center; padding: 34px; }
/* OUTER: persists across steps, never replaced, owns the width transition.
Replacing this node would kill the transition and the column would jump
between 660 and 880 instead of gliding.
Anchored to the measure's left edge, not centred in it. Centred, its left
edge moved 110px inward and outward as the width changed -- the content
swinging left, right, left across the six steps. The right edge extends and
the left one stays put, which is how a document widens a column. */
.su-col {
width: 100%; min-width: 0; max-width: 660px; margin-right: auto;
transition: max-width .3s cubic-bezier(.22, .9, .2, 1);
}
.su-col.w660 { max-width: 660px; }
.su-col.w880 { max-width: 880px; }
.su-col.w900 { max-width: 900px; }
/* The step's own heading, its state, and the sentence under it. */
.su-lead { margin-bottom: 26px; }
.su-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.su-h h1 { margin: 0; font-size: 27px; font-weight: 600; letter-spacing: -.022em; text-wrap: balance; }
.su-blurb {
margin: 8px 0 0; font-size: 14.5px; line-height: 1.55;
color: var(--ink-3); max-width: 70ch; text-wrap: pretty;
}
/* ---- sticky footer ---- */
.su-foot {
position: sticky; bottom: 0; z-index: 25;
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 14px 34px;
background: color-mix(in srgb, var(--paper) 94%, transparent);
backdrop-filter: blur(10px); border-top: 1px solid var(--line);
}
.su-foot .sp { flex: 1 1 auto; }
/* ---- underline fields ----
On a step whose job is confirming what the files already said, a box invites
typing where a line invites reading. Same control, same focus ring the rest
of the app uses; only the frame is gone. */
.setup-screen input.st-under {
width: 100%; max-width: 440px; padding: 0 0 8px;
border: 0; border-bottom: 2px solid var(--input-line); border-radius: 0;
background: transparent; font-size: 21px; font-weight: 500; letter-spacing: -.015em;
transition: border-color .16s ease;
}
/* The handoff drew this at 180px for a short number. This product's own
identifier field takes 300 characters (walk-log #1) and a real contract
number clipped at 180; it is sized to the value it holds. */
.setup-screen input.st-under.narrow { max-width: 24ch; }
.setup-screen input.st-under:focus,
.setup-screen input.st-under:focus-visible {
outline: 0; border-bottom-color: var(--brand-accent); box-shadow: none;
}
/* A control is sized by its KIND, never by the column it lands in: step 2 and
step 4 widen to 880px and a text field has no business being 880px wide. */
.setup-screen .field > input:not(.st-under):not(.st-file) { max-width: 460px; }
.st-lstand { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.st-lstand .sp { flex: 1 1 auto; }
/* Setup's own toast carries an Undo, because three of its actions are
reversible. The shared toast is untouched. */
/* The shared toast declares its own look inline, from script; this one is a
class, because a declaration no query can reach is the defect this screen
spent a stage removing. */
.su-toast {
display: inline-flex; align-items: center; gap: 12px;
max-width: 100%; padding: 6px 14px; border-radius: 999px;
pointer-events: auto; box-shadow: 0 10px 28px rgba(20, 24, 29, .14);
color: var(--ok); background: var(--ok-tint); border-color: var(--ok-line);
}
.su-undo {
border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px;
color: inherit; text-decoration: underline; cursor: pointer;
}
/* The shape that arrives, in the same task as the click. */
.su-skel .su-tab .skel { width: 74%; height: 21px; }
.su-skel .su-col .skel { width: 72%; }
.su-skel .su-col .skel:nth-child(2) { width: 88%; }
.su-skel .su-col .skel:nth-child(3) { width: 60%; }
.su-skel .su-col .skel:nth-child(4) { width: 80%; }
@media (prefers-reduced-motion: reduce) {
.su-col, .su-tab, .su-glyph { transition: none; }
}
/* Native checkboxes, in step 6 and in step 4's value pickers: on the page that
decides what the issued review prints, six of them arrived in the platform's
blue. Themed, not replaced. */
.su-check input[type="checkbox"], .sheet-body input[type="checkbox"] {
accent-color: var(--ink); width: 13px; height: 13px;
}
.st-ev .st-fact,
.st-ev .st-none { background: var(--surface); padding: 12px 14px; }
.st-none { font-size: 12px; line-height: 1.6; color: var(--ink-3); max-width: 62ch; padding: 4px 0; }
.sheet-counts { overflow: hidden; }
.np-label { width: 100%; height: 28px; padding: 0 8px; font: inherit; font-size: 12px; border: 1px solid var(--input-line); border-radius: 4px; }
/* Intake saying its answers are the pinned ones. Every other surface that
shows a stored number already says so; this screen showed nothing. */
.sheet-line.stale-line {
display: flex; align-items: baseline; gap: 7px;
margin-top: 9px; color: var(--warn); max-width: 74ch;
}
/* The prose is ONE flex item that wraps inside itself. Without this the mark
takes its share of the row and the sentence is squeezed into whatever is
left; `min-width: 0` lets it use the measure instead of its shrink-to-fit
minimum. */
.sheet-line.stale-line .stale-words { flex: 1 1 auto; min-width: 0; }
/* The panel answers against the selections, which may not be what is stored. */
.sheet-n.f-warn { color: var(--warn); }
/* ---- the last of the platform's chrome ---------------------------------
Four selects on this screen rendered as native controls -- native chevron,
native metrics, native box -- beside inputs the page themes carefully, and
one of them is the control step 4 exists for. The same call the checkboxes
and the file control already took here: themed, not replaced. The chevron is
drawn at the icon system's own weight (1.4 on a 10x10 field), not borrowed
from a glyph. */
.sheet-body select {
appearance: none; -webkit-appearance: none;
width: 100%; height: 32px; padding: 0 30px 0 10px;
font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer;
background-color: var(--surface); border: 1px solid var(--input-line); border-radius: 8px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.6 4 L5 6.6 L7.4 4' fill='none' stroke='%235F6067' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 9px center; background-size: 10px 10px;
transition: border-color .14s ease;
}
.sheet-body select:hover { border-color: var(--ink-5); }
.sheet-body select:focus-visible {
outline: none; border-color: var(--brand-accent);
box-shadow: 0 0 0 3px rgba(180, 83, 26, .12);
}
@media (prefers-reduced-motion: reduce) { .sheet-body select { transition: none; } }
/* A control's width is a property of the control, not of the column it happens
to sit in. Scoped to the whole step interior rather than to the full-measure
blocks: with the cap on `.st-block` alone, step 3's upload was 460px directly
beneath a full-width template select in the same step, and the step's two
states -- margin present, margin collapsed -- disagreed about how wide a
control is. `.sheet-body .field` reaches Setup and nothing else: Intake
shares the `sheet-` vocabulary but builds no fields, and the sign-in page's
fields are outside this block. */
.sheet-body .field > input, .sheet-body .field > select, .sheet-body .field > .st-pick {
max-width: 460px;
}
/* The textarea takes the same measure, not a wider one. A 600px cap looked
like generosity and was a second rule: the claim column is narrower than
that while the margin is present, so the box filled its column in one state
and hit its cap in the other, and step 3 disagreed with itself. 460px at
12px is about 76 characters, which is the measure this system already sets
prose to. */
.sheet-body .field > textarea { max-width: 460px; }
/* And the caption belongs to the control, not to the page. Left at the full
1150px it ran ~150 characters a line and passed under the fold rule, so the
block read as a wide paragraph with a small control tucked into it. Same
76ch the step's own sentence takes. */
.sheet-body .field .hint { max-width: 76ch; }
/* One caption tier on this surface, 11.5px, the same one `.su-blurb`,
`.su-note` and `.st-unver` take. The ledger first shipped its refusal
sentences at 11px and its column words at 10.5px -- sizes on no tier, and
the 11px ones carry requirement text: WHY a limit is refused, and what runs
instead. A value earns its place by being legible, not by being small enough
that a rule stops noticing it. */
/* ---- step 3: the binding ledger ----------------------------------------
Which rule is bound to which paragraph of this contract, and what that
paragraph says. The browser always had this -- `spec.citations` carries the
paragraph, the sentence and the document for every bound rule -- and the
screen was rendering its cardinality ("6 checks cited") and discarding the
rest, so nowhere in the product could a reviewer learn which rule cited
which clause. */
.st-lstand {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px;
padding-bottom: 12px; margin-bottom: 2px;
}
/* `inline-flex` eats the space the text carries between the numeral and its
word, so the gap is drawn rather than typed. */
.st-lcount { display: inline-flex; align-items: baseline; gap: 5px; color: var(--ink-4); }
.st-lcount .n { font-size: 15px; font-weight: 500; color: var(--ink-2); letter-spacing: -.01em; }
.st-lcount .w { font-size: 11.5px; }
.st-lcount.ok .n { color: var(--ok); }
.st-lcount.raise .n { color: var(--warn); }
.st-ledger { margin-top: 2px; }
/* One word for the one column that cannot name itself. Not a table head: the
rule and the paragraph say what they are, and step 3 drawing a header row
would make it the only one of the six that does. Dropped entirely, with the
column, when no paragraph in the ledger states a number. */
.st-lhead {
display: grid; grid-template-columns: 10px minmax(0, 1fr) 108px 74px; gap: 14px;
padding: 0 12px 6px; margin: 0 -12px;
font-size: 11.5px; color: var(--ink-4);
}
.st-lhead > span { grid-column: 4; text-align: right; }
/* One block per BINDING: the paragraph, the rules it binds, the limit it
states, and its sentence once. The same spine grammar as step 2's series and
step 5's record -- no table, no header row. */
.st-bind {
padding: 11px 12px; margin: 0 -12px; border-top: 1px solid var(--line-2);
transition: background-color .14s ease;
}
.st-bind:first-of-type { border-top: 0; }
.st-bind:hover { background: var(--surface-2); }
.st-bind:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; border-radius: 3px; }
.st-bind .h {
display: grid; grid-template-columns: 10px minmax(0, 1fr) 108px 74px; gap: 3px 14px;
align-items: baseline;
}
.st-ledger.nolimit .st-bind .h { grid-template-columns: 10px minmax(0, 1fr) 108px; }
.st-bind .nms { min-width: 0; }
.st-bind .nm { font-size: 12.5px; font-weight: 500; }
.st-bind .nm + .nm { margin-top: 2px; }
/* Left-aligned on a fixed track, so the ¶ glyph is the column's own standing
label and the numbers align on their first level rather than their last.
Right-aligned, "¶ 1.6.4" and "¶ 1.10.1.5.6" started at different x and the
mark that names the column wandered down the page. */
.st-bind .pa { font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }
.st-bind .th { font-size: 11.5px; color: var(--ink); font-weight: 500; text-align: right; }
/* The column's word travels with the value, and shows only where the header
above cannot follow it. */
.st-bind .th .w { display: none; }
.st-bind .th.none { color: var(--ink-5); font-weight: 400; }
/* The sentence that binds them, as the document has it -- heading and all,
because this screen prints the string a finding will cite. Sans, not mono:
this is prose, and mono in this world means a measured value. The heading
takes the label tier so the quotation opens at the sentence. */
.st-bind .q {
margin: 5px 0 0 24px; font-size: 11.5px; line-height: 1.55; color: var(--ink-3);
max-width: 84ch; text-wrap: pretty;
}
.st-bind .q .hd { font-weight: 600; color: var(--ink-4); margin-right: 6px; }
.st-bind .cf, .st-bind .nap, .st-bind .src { margin: 5px 0 0 24px; max-width: 84ch; }
.st-bind .cf, .st-bind .nap { font-size: 11.5px; line-height: 1.5; color: var(--warn); }
/* Two words, on a mixed ledger only: which of the two sections binds this row. */
.st-bind .src { font-size: 11.5px; color: var(--ink-4); }
/* Bound to the standard section rather than to this contract: the block sits
back, because none of it has been verified against the document that governs
this job. */
.st-bind.template .nm, .st-bind.template .pa { color: var(--ink-3); }
.st-bind.template .ic { color: var(--ink-5); }
.st-bind.contract .ic { color: var(--ok); }
/* A limit stated in more than one paragraph. Tint and a hairline, which is how
this system says severity -- never a coloured bar down the side. */
.st-bind.raised { background: var(--warn-tint); }
.st-bind.raised:hover { background: var(--warn-tint); }
.st-bind.raised .ic { color: var(--warn-dot); }
/* And the sentence itself, once, under the ledger. */
.st-unver {
margin-top: 14px; font-size: 11.5px; line-height: 1.55; color: var(--ink-4);
max-width: 80ch; text-wrap: pretty;
}
@media (prefers-reduced-motion: reduce) { .st-bind { transition: none; } }
/* A limit the section was searched for and does not state in a usable form.
It has no paragraph, so it belongs to no row above -- and it is the most
specific thing this screen can say, so it is not dropped. */
.st-loose { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-3); }
.st-loose .gh {
font-size: 11.5px; font-weight: 600; color: var(--ink-3);
margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line-3);
}
.st-loose .l {
display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 3px 12px;
align-items: baseline; padding: 6px 0; max-width: 640px;
}
.st-loose .l .ic { color: var(--ink-5); }
.st-loose .nm { font-size: 12px; color: var(--ink-2); }
.st-loose .v { font-size: 11.5px; color: var(--ink); }
.st-loose .why { grid-column: 2 / -1; font-size: 11.5px; line-height: 1.5; color: var(--ink-4); max-width: 80ch; }
/* A number the document states and the engine will not use. Struck, not
hidden: the section said it, and the reviewer has to know it said it. */
.st-bind .th.off { color: var(--ink-4); }
.st-bind .th.off .v, .st-loose .v.off { text-decoration: line-through; }
/* What cites no clause: counted, and openable. 45 rows that all say the same
thing bury the six that do not. */
.st-unbound { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-3); }
.st-unbound .h { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.st-unbound .t { font-size: 11.5px; line-height: 1.55; color: var(--ink-4); max-width: 80ch; }
.st-unbound .t .n { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
/* Held to a measure. Across the full 1150px the rule and its DCMA reference sat
at opposite ends of the row and the eye could not connect them; a reference
that cannot be read against its rule is not a reference. */
.st-unlist:not(:empty) { margin: 12px 0 0 22px; max-width: 640px; }
.st-unlist .gh {
font-size: 11.5px; font-weight: 600; color: var(--ink-3);
margin: 12px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line-3);
}
.st-unlist .gh:first-child { margin-top: 0; }
.st-unlist .u {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px;
align-items: baseline; padding: 4px 0; font-size: 12px;
}
.st-unlist .u .nm { color: var(--ink-2); }
.st-unlist .u .d { font-size: 11.5px; color: var(--ink-4); }
/* ---- step 3: the summary line and the binding panel ----------------------
The two questions are the step; this one line states what they produced
and opens the ledger beneath it. A button set as a rule, not a card: the
fold's own device, so opening the detail does not read as a second page. */
.st-sumrow { margin-top: 22px; }
.st-sumline {
display: flex; gap: 14px; align-items: baseline; width: 100%; text-align: left;
padding: 10px 0; margin: 0; border: 0; border-top: 1px solid var(--line-3);
border-bottom: 1px solid var(--line-3); background: none; font: inherit;
color: var(--ink-2); cursor: pointer;
}
.st-sumline .t { flex: 1 1 auto; font-size: 12.5px; line-height: 1.5; }
.st-sumline .h { font-size: 11.5px; color: var(--ink-4); white-space: nowrap; }
.st-sumline:hover .h, .st-sumline:focus-visible .h { color: var(--ink); }
.st-sumline:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.st-preview { margin-top: 6px; }
.st-bindpanel { margin-top: 12px; }
/* ---- how Setup gives way, all of it, after the rules it overrides --------
Keyed on the column, not the window, for the reason recorded on Intake. */
/* The rail cannot sit beside the step below this: 232 + 20 leaves the panel
under 380px, where a paired field row breaks. So it stacks -- and the STEP
goes first, the rail under it. Stacked in source order the six pushed the
open step to ~675px of an 844px phone, so the page a reader opened to answer
a step began with a table of contents and every field of it sat below the
fold. Measured after: the step head at ~447px, its first field above.
The rail stays a COLUMN there rather than becoming a scrolling strip. That
was the first shape, and looking at it settled it: six full step names read
down the page in the room a phone has to spare, where a sideways strip would
hide four of them behind a scroll to save vertical space nothing wanted. */
@container sheet (max-width: 640px) {
.su-top-r1, .su-ribbon { padding-left: 16px; padding-right: 16px; }
.su-body { padding: 22px 16px; }
.su-foot { padding: 12px 16px; }
.su-h h1 { font-size: 22px; }
/* At 375px a 194px tab is one per row, and six rows of sticky header is
~250px before the page begins -- the same defect this screen fixed once
before, where the step a reader opened the page to answer sat below the
fold under a table of contents. The ribbon becomes ONE scrolling row
there: every step is still reachable, and the content gets the page. */
.su-ribbon {
flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
scrollbar-width: none;
}
.su-ribbon::-webkit-scrollbar { display: none; }
.su-tab { flex: 0 0 auto; max-width: 62vw; }
}
/* A rule, its paragraph and its limit stop fitting on one line: the paragraph
and the limit drop under the name they belong to, still in that order. */
@container sheet (max-width: 520px) {
.st-bind .h, .st-ledger.nolimit .st-bind .h { grid-template-columns: 10px minmax(0, 1fr); }
.st-bind .pa, .st-bind .th { grid-column: 2 / -1; text-align: left; }
.st-lhead { display: none; }
/* The column label goes with the column, and an em-dash with nothing to
align under it reads as a stray mark rather than as "no limit stated".
The absence is still said -- by the paragraph having no number beside it. */
.st-bind .th.none { display: none; }
/* And a value with no column left to head it says its own word. */
.st-bind .th .w { display: inline; font-family: var(--sans); font-weight: 400; color: var(--ink-4); }
.st-unbound .h { grid-template-columns: 10px minmax(0, 1fr); }
.st-unbound .h .btn { grid-column: 2 / -1; justify-self: start; margin-top: 8px; }
}
/* --- the export composer (Module A) --------------------------------------- *
* Controls on the left, the document on the right at the size it prints. The
* document is an iframe on purpose: `report.css` and `print.css` style the same
* `.doc-*` class names the comparison screen uses, so loading them into the app
* would restyle the page behind the composer. A frame gives the real
* stylesheets, in full, with nothing to isolate by hand. */
/* `.scrim` is a centring grid, which shrink-wraps its child — right for a
600px dialog, wrong for a working surface that wants the window. */
.compose-scrim { place-items: stretch; padding: 22px; }
.composer {
display: flex; flex-direction: column;
width: 100%; max-width: 1500px; height: 100%; margin: 0 auto;
background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
box-shadow: 0 24px 64px -24px rgba(18, 22, 27, .4); overflow: hidden;
}
.composer-head {
display: flex; align-items: center; gap: 14px; padding: 14px 18px;
border-bottom: 1px solid var(--line);
}
.composer-head h2 { margin: 2px 0 0; font-size: 17px; }
.composer-pages {
margin-left: auto; font-family: var(--mono); font-size: 10.5px;
letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4);
border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}
.composer-split { flex: 1; min-height: 0; display: flex; }
.composer-rail {
width: 320px; flex: none; overflow-y: auto; padding: 4px 16px 18px;
border-right: 1px solid var(--line); background: var(--surface-2);
}
.composer-group { padding: 14px 0 4px; border-bottom: 1px solid var(--line-2); }
.composer-group:last-child { border-bottom: 0; }
.composer-group .kicker { margin-bottom: 8px; }
.composer-group .hint { font-size: 11px; line-height: 1.5; margin-top: 8px; }
.composer-stage {
flex: 1; min-width: 0; overflow: auto; background: var(--surface-3);
padding: 20px; display: flex; justify-content: center; align-items: flex-start;
}
.composer-frame {
width: 100%; height: 100%; min-height: 600px; border: 0;
background: var(--surface); box-shadow: 0 2px 10px -4px rgba(18, 22, 27, .3);
}
.composer-foot {
display: flex; align-items: center; gap: 16px; padding: 12px 18px;
border-top: 1px solid var(--line); background: var(--surface-2);
}
.composer-foot .hint { font-size: 11px; max-width: 52ch; }
.composer-foot .right { margin-left: auto; display: flex; gap: 8px; }
/* A comment row: the issued reference keeps its own column so the titles line
up whether a comment has been given a number yet or not. */
.cmt-ref { font-size: 11px; color: var(--ink-4); min-width: 24px; flex: none; }
.cmt-name {
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
white-space: nowrap;
}
.cmt-depth { font-size: 10px; color: var(--ink-4); flex: none; }
/* #20: a masthead row in the composer -- the field's name, then what the
project holds for it, clipped like a comment's title. A blank one says so
in the caption tone rather than sitting as an empty cell. */
.mast-val {
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
text-align: right; font-size: 11px; color: var(--ink-3);
}
.mast-val.blank { color: var(--ink-4); font-style: normal; }
.movebtn.depthbtn { width: auto; padding: 0 6px; }
/* ---- History (E0-10) ------------------------------------------------------
A log is read down a column of times, so the time is the only thing set in
mono and the only thing aligned: it is the measured value on the row. The
date is a heading over the day's actions rather than a repeated field, and
the actor sits at the end because "what happened" is what the eye is
scanning for and "who" is what it stops on. */
.hi-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: 4px; }
/* `.field select` is width:100%, which in a flex row stretches to the whole
bar. The menus are named vocabularies, not free text, so they are sized to
read rather than to fill. */
.hi-filters .field { width: 220px; margin: 0; }
.hi-filters .btn { margin-bottom: 1px; }
.hi-day {
font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink-4);
margin: 18px 0 2px; padding-bottom: 5px; border-bottom: 1px solid var(--line);
}
.hi-day:first-child { margin-top: 2px; }
.hi-row {
display: grid; grid-template-columns: 58px minmax(0, 1fr) auto;
gap: 14px; align-items: baseline;
padding: 9px 0; border-top: 1px solid var(--line-2);
}
.hi-row:first-of-type { border-top: 0; }
.hi-when { font-family: var(--mono); font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.hi-label { font-size: 13px; }
.hi-detail { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.hi-who { text-align: right; font-size: 11.5px; color: var(--ink-3); }
.hi-role {
font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
text-transform: uppercase; color: var(--ink-4); margin-top: 1px;
}
.hi-paging { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.hi-range { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
/* The actor column is the first thing worth giving up: on a narrow column the
time and the action carry the row, and the name wraps under it rather than
squeezing the label into two words per line. */
@container sheet (max-width: 520px) {
.hi-row { grid-template-columns: 52px minmax(0, 1fr); }
.hi-who { grid-column: 2 / -1; text-align: left; margin-top: 3px; }
.hi-role { display: inline; margin-left: 6px; }
}
/* ---- step 3: unsure bindings and the reviewer's picker (walk-log #12) ----
An unsure row is the model saying "a paragraph mentions this and I could
not confirm it". The candidates are offered as the row's own actions; the
picker beside them reaches any paragraph. Nothing here blocks. */
.st-unsure { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-3); }
.st-unsure-row { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 12px; align-items: baseline;
padding: 10px 0; border-top: 1px solid var(--line); }
.st-unsure-row:first-of-type { border-top: 0; }
.st-unsure-row .nm { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.st-unsure-row .why { font-size: 11.5px; color: var(--ink-4); margin-top: 2px; max-width: 80ch; }
.st-unsure-row .cands { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.st-bindsel { font: inherit; font-size: 11.5px; padding: 3px 6px; margin-left: 10px; max-width: 34ch;
border: 1px solid var(--line-3); border-radius: 4px; background: var(--paper); color: var(--ink-2); }
.st-bind .q .pol { color: var(--ink-4); font-style: italic; }
.st-bind .q .by { font-size: 11px; color: var(--ink-4); }
.st-readline .su-blurb { flex: 1 1 40ch; margin: 0; }
/* ================================ theme 2 ============================== The redesigned screens. THIS SECTION HOLDS LAYOUT AND COMPONENTS ONLY.
Every font size, weight, family, colour, radius, shadow and timing it uses is
a token defined in `theme.css` — the one file to edit when the look needs to
change. A rule here that states a literal font size, weight, hex colour or
radius is a bug: `tests/test_theme_tokens.py` fails on it. (A few literals
are structural rather than stylistic — `font-size: 0` to hide a label in the
folded rail, `50%` for a circle, a 2px bar — and are allowed by name there.)
Scope, and how a screen joins: see the head of `theme.css`.
Nothing in this section computes, formats or reorders a value. It is paint. */
/* A screen wrap, as opposed to a strip of chrome: it owns the ground colour. */
.t2.scr {
background:
linear-gradient(180deg, var(--page-wash) 0, transparent 200px),
var(--paper);
}
/* ---- sidebar ----
Flat and light, in the idiom of the Stripe and Vercel dashboards: the rail is
the same family of grey as the page, separated from it by one hairline, and
everything on it is type, a 16px outline icon, and at most a grey pill. No
gradient, no glow, no dark mass — a dark or decorated rail was tried twice
and both times it was the loudest object on a screen whose job is a table.
What it keeps from those attempts is function: it folds to icons, and the
project's stages still read as a path. */
@media (min-width: 820px) {
.app.shell2 > .sidebar.t2 {
width: 244px; border-right: 1px solid var(--sidebar-line);
transition: width 200ms var(--ease); scrollbar-width: none;
}
.app.shell2 > .sidebar.t2::-webkit-scrollbar { display: none; }
}
.t2 .sb-org { height: 52px; padding: 0 10px 0 14px; border-bottom: 0; gap: 10px; position: relative; }
.t2 .sb-mark {
width: 24px; height: 24px; border-radius: var(--radius-sm); color: var(--on-accent); background: var(--ink);
font-family: var(--sans); font-weight: var(--weight-strong); font-size: var(--mark-size); letter-spacing: .02em;
transition: opacity var(--t-fast) var(--ease);
}
.t2 .sb-org-name { font-size: var(--type-body-size); font-weight: var(--weight-strong); color: var(--sidebar-text); letter-spacing: var(--type-heading-tracking); }
.t2 .sb-org-kicker { display: none; }
.t2 .sb-collapse {
margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: var(--radius-sm); border: 0; background: none;
color: var(--sidebar-text-3); display: grid; place-items: center;
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.t2 .sb-collapse svg { width: 16px; height: 16px; }
.t2 .sb-collapse:hover { background: var(--hover-wash); color: var(--ink); }
.t2 .sb-collapse:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* The switcher is the one raised object on the rail: a white control on the
grey, because it is the one thing here that opens rather than navigates. */
.t2 .sb-switch { padding: 2px 10px 10px; }
.t2 .sb-sw {
border-radius: var(--radius-md); padding: 6px 8px; gap: 9px; background: var(--surface);
border-color: var(--sidebar-line-2); box-shadow: 0 1px 2px var(--hover-wash);
transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.t2 .sb-sw:hover { border-color: var(--control-line); }
.t2 .sb-sw:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.t2 .sb-sw[aria-expanded="true"] { border-color: var(--focus); box-shadow: var(--ring); }
.t2 .sb-sw-av {
width: 24px; height: 24px; border-radius: var(--radius-sm); font-family: var(--sans); font-size: var(--mark-size); font-weight: var(--weight-strong);
background: var(--accent-tint); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-tint-line);
}
.t2 .sb-sw-av.sm { background: var(--line-3); color: var(--ink-2); box-shadow: none; }
.t2 .sb-sw-n { font-size: var(--type-body-size); font-weight: var(--weight-strong); color: var(--sidebar-text); }
.t2 .sb-sw-s { font-size: var(--type-caption-size); color: var(--sidebar-text-3); }
.t2 .sb-sw-c { color: var(--sidebar-text-3); }
.t2 .sb-group { padding: 8px 10px 4px; }
.t2 .sb-group + .sb-group { margin-top: 4px; }
.t2 .sb-kicker {
font-family: var(--sans); font-weight: var(--weight-medium); font-size: var(--type-caption-size); letter-spacing: 0; text-transform: none;
color: var(--sidebar-label); padding: 0 8px 6px; white-space: nowrap; overflow: hidden;
}
.t2 .sb-item {
position: relative; gap: 10px; border-radius: var(--radius-sm); padding: 0 8px; height: 32px;
font-size: var(--type-body-size); font-weight: var(--weight-medium); color: var(--sidebar-text-2); white-space: nowrap;
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.t2 .sb-item + .sb-item { margin-top: 1px; }
.t2 .sb-item:hover { background: var(--hover-wash); color: var(--ink); }
.t2 .sb-item.on { background: var(--active-wash); color: var(--ink); font-weight: var(--weight-strong); box-shadow: none; }
.t2 .sb-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.t2 .sb-item.j-waiting:not(.on) { color: var(--sidebar-text-3); }
/* The dot is an icon now, and still the dot: it is drawn as a MASK over the
dot's own background, so the journey rules that colour it — green when a
stage is done, copper on the one stage proposed next — tint the icon with no
change to them, to the markup, or to the script that sets them. */
.t2 .sb-item .dot {
width: 16px; height: 16px; border-radius: 0; background: var(--sidebar-dot); position: relative; z-index: 1;
-webkit-mask: var(--ic) center / 16px 16px no-repeat; mask: var(--ic) center / 16px 16px no-repeat;
transition: background var(--t-fast) var(--ease);
}
.t2 .sb-item:hover .dot, .t2 .sb-item.on .dot { background: var(--ink); }
.t2 .sb-item:not(.on) .dot.j-waiting { background: var(--sidebar-text-3); box-shadow: none; }
.t2 .sb-item:not(.on) .dot.j-done, .t2 .sb-item:not(.on):hover .dot.j-done { background: var(--ok-dot); }
.t2 .sb-item:not(.on) .dot.j-next, .t2 .sb-item:not(.on):hover .dot.j-next { background: var(--brand-accent); }
.t2 .sb-item .sb-count {
font-family: var(--sans); font-size: var(--type-caption-size); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums;
color: var(--sidebar-text-3); background: none; padding: 0;
}
.t2 .sb-item .sb-count:empty { display: none; }
.t2 .sb-item.on .sb-count { color: var(--sidebar-text); }
/* Setup's "n of 6" carries a ring drawn from the same two numbers (`--p`, set
beside the text). The count says how far; the ring lets it be read without
being read. */
.t2 #sb-setup-count { display: inline-flex; align-items: center; gap: 6px; }
.t2 #sb-setup-count:not(:empty)::before {
content: ""; width: 12px; height: 12px; border-radius: 50%; flex: none;
background: conic-gradient(var(--accent) calc(var(--p, 0) * 360deg), var(--line) 0);
-webkit-mask: radial-gradient(circle, transparent 3.4px, #000 3.9px); mask: radial-gradient(circle, transparent 3.4px, #000 3.9px);
}
.t2 .sb-item .pill {
font-family: var(--sans); font-size: var(--type-caption-size); font-weight: var(--weight-strong); border-radius: var(--radius-pill); padding: 0 7px; line-height: 18px;
background: var(--ink); color: var(--on-accent);
}
.t2 .sb-item.on .pill { background: var(--rail-mark); color: var(--sidebar-bg); }
.t2 .sb-footer { border-top: 1px solid var(--sidebar-line); padding: 12px 18px 14px; }
.t2 .sb-footer .k { font-family: var(--sans); font-size: var(--type-caption-size); font-weight: var(--weight-medium); letter-spacing: 0; text-transform: none; color: var(--sidebar-label); margin-bottom: 2px; }
.t2 .sb-footer .v { font-family: var(--sans); font-size: var(--type-body-size); font-weight: var(--weight-medium); color: var(--ink-2); }
.t2 .sb-build { font-family: var(--sans); font-size: var(--type-caption-size); color: var(--ink-5); letter-spacing: 0; margin-top: 8px; }
/* The collapsed rail keeps a 64px footprint. Hover temporarily reveals the
full navigation over the content, without changing the page width. */
@media (min-width: 820px) {
.app.shell2.rail-min { padding-left: 64px; box-sizing: border-box; position: relative; }
.app.shell2.rail-min > .sidebar.t2 { position: absolute; inset: 0 auto 0 0; width: 64px; z-index: 110; overflow-x: hidden; transition: width 220ms var(--ease), box-shadow 220ms var(--ease); }
.app.shell2.rail-min.rail-peek > .sidebar.t2 {
width: 244px;
box-shadow: 8px 0 24px rgba(15,23,42,.18);
}
.rail-min:not(.rail-peek) > .sidebar.t2 .sb-org { padding: 0; justify-content: center; }
.rail-min:not(.rail-peek) > .sidebar.t2 .sb-org > div:not(.sb-mark) { display: none; }
/* The mark holds the corner; the control takes its place under the pointer. */
.rail-min:not(.rail-peek) > .sidebar.t2 .sb-collapse { position: absolute; inset: 16px; margin: 0; opacity: 0; background: var(--rail-on); color: var(--sidebar-text); }
.rail-min:not(.rail-peek) > .sidebar.t2 .sb-org:hover .sb-collapse, .rail-min:not(.rail-peek) > .sidebar.t2 .sb-collapse:focus-visible { opacity: 1; }
.rail-min:not(.rail-peek) > .sidebar.t2 .sb-org:hover .sb-mark { opacity: 0; }
.rail-min:not(.rail-peek) > .sidebar.t2 .sb-collapse svg { transform: scaleX(-1); }
.rail-min:not(.rail-peek) > .sidebar.t2 .sb-switch { padding: 4px 12px 10px; }
.rail-min:not(.rail-peek) > .sidebar.t2 .sb-sw { padding: 6px; justify-content: center; }
.rail-min:not(.rail-peek) > .sidebar.t2 .sb-sw-t, .rail-min:not(.rail-peek) > .sidebar.t2 .sb-sw-c { display: none; }
/* Keep navigation rows at the same height during a hover reveal. */
.rail-min:not(.rail-peek) > .sidebar.t2 .sb-kicker { color: transparent; white-space: nowrap; overflow: hidden; }
.rail-min:not(.rail-peek) > .sidebar.t2 .sb-item { font-size: 0; gap: 0; padding: 0; justify-content: center; overflow: hidden; }
.rail-min:not(.rail-peek) > .sidebar.t2 .sb-item.on::before { left: -12px; }
/* The count rides the icon's shoulder. It has to sit INSIDE the item's box,
which clips — and at 64px that box is barely wider than the glyph, so the
chip necessarily lands ON the drawing. Two things make that legible rather
than a collision, and both were missing:
* it is anchored to the item's own top-right corner, not to `left: 18px`,
which was a number picked against one icon and landed mid-glyph on the
rest, and which walked further across the drawing as the count grew;
* it is OPAQUE and carries a ring in the rail's ink. Translucent, the
folder's outline ran straight through the digit — the "2" read as part
of the icon rather than a count on it. The ring is what turns a chip
drawn over artwork into a chip resting on it. */
.rail-min:not(.rail-peek) > .sidebar.t2 .sb-item .sb-count, .rail-min:not(.rail-peek) > .sidebar.t2 .sb-item .pill {
position: absolute; top: 2px; right: 2px; left: auto; margin: 0;
min-width: 9px; padding: 0 3px; line-height: 13px; text-align: center;
font-size: var(--mark-size); background: var(--rail-chip); color: var(--sidebar-text);
border-radius: var(--radius-pill); box-shadow: 0 0 0 2px var(--sidebar-bg);
}
.rail-min:not(.rail-peek) > .sidebar.t2 .sb-item .sb-count:empty { display: none; }
/* Setup's counter is not a count. It is "0 of 6" — 34px of text, which on a
64px rail is not a badge on the icon, it is a lid over it. This rule used
to hide the RING and keep the words, which is exactly the wrong half: the
ring was built for this ("the count says how far; the ring lets it be read
without being read") and is the only one of the two that fits. Folded, the
words go and the ring stays, on a disc of the rail's ink so it reads as
sitting on the glyph. The words are not lost — the folded rail's tooltip
carries them. */
.rail-min:not(.rail-peek) > .sidebar.t2 #sb-setup-count {
top: 2px; right: 2px; left: auto; padding: 2px; min-width: 0; gap: 0;
font-size: 0; line-height: 0; background: var(--sidebar-bg);
border-radius: 50%; box-shadow: none;
}
.rail-min:not(.rail-peek) > .sidebar.t2 #sb-setup-count:not(:empty)::before { display: block; width: 11px; height: 11px; }
.rail-min:not(.rail-peek) > .sidebar.t2 .sb-footer { visibility: hidden; }
}
/* ---- the spine's own look ----
Grouped by hairline rather than by a word, because at 64px there is no room
for the word and the rule says the same thing. */
.t2 .sb-org { height: 56px; padding: 0 0 0 19px; gap: 12px; }
.t2 .sb-mark { background: var(--rail-mark); color: var(--sidebar-bg); }
.t2 .sb-switch { padding: 4px 12px 10px 15px; }
.t2 .sb-sw { background: var(--rail-hover); border-color: transparent; box-shadow: none; padding: 6px; gap: 10px; }
.t2 .sb-sw:hover { background: var(--rail-on); border-color: transparent; }
/* Open, the button is the lit head of the panel below it -- not a focused form
control, which is what the page-palette ring made of it. */
.t2 .sb-sw[aria-expanded="true"] { background: var(--rail-on); border-color: transparent; box-shadow: none; }
.t2 .sb-sw-c { transition: transform var(--t-med) var(--ease), color var(--t-fast) var(--ease); }
.t2 .sb-sw[aria-expanded="true"] .sb-sw-c { color: var(--sidebar-text); }
.t2 .sb-sw-av { background: var(--rail-badge); color: var(--sidebar-text); box-shadow: none; flex: none; }
.t2 .sb-group { padding: 6px 12px 2px; }
.t2 .sb-group + .sb-group { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--sidebar-line); }
.t2 .sb-kicker { color: var(--sidebar-label); padding: 0 8px 5px; }
.t2 .sb-item {
position: relative; height: 38px; padding: 0 9px; gap: 13px; border-radius: var(--radius-md);
color: var(--sidebar-text-2); white-space: nowrap;
}
.t2 .sb-item:hover { background: var(--rail-hover); color: var(--sidebar-text); }
.t2 .sb-item.on { background: var(--rail-on); color: var(--sidebar-text); font-weight: var(--weight-strong); }
/* the one bright thing on the spine */
.t2 .sb-item.on::before {
content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px;
border-radius: 0 var(--radius-pill) var(--radius-pill) 0; background: var(--rail-mark);
}
.t2 .sb-item .dot { width: 20px; height: 20px; -webkit-mask-size: 20px 20px; mask-size: 20px 20px; background: var(--sidebar-dot); }
.t2 .sb-item:hover .dot, .t2 .sb-item.on .dot { background: var(--sidebar-dot-on); }
.t2 .sb-item .sb-count { color: var(--sidebar-text-3); }
.t2 .sb-item .pill { background: var(--rail-mark); color: var(--sidebar-bg); }
.t2 .sb-collapse { color: var(--sidebar-text-3); }
.t2 .sb-collapse:hover { background: var(--rail-hover); color: var(--sidebar-text); }
.t2 .sb-footer { border-top-color: var(--sidebar-line); }
.t2 .sb-footer .k { color: var(--sidebar-label); }
.t2 .sb-footer .v { color: var(--sidebar-text-2); }
.t2 .sb-build { color: var(--sidebar-text-3); }
.t2 #sb-setup-count:not(:empty)::before { background: conic-gradient(var(--rail-mark) calc(var(--p, 0) * 360deg), var(--rail-badge) 0); }
@media (prefers-reduced-motion: reduce) {
.app.shell2:not(.rail-pin) > .sidebar.t2 { transition: none; }
}
/* The tooltip that names a folded icon. It mounts on , so it carries the
theme scope itself. */
.rail-tip {
position: fixed; z-index: 140; pointer-events: none; white-space: nowrap;
background: var(--inverse-solid); color: var(--on-accent);
font-family: var(--sans); font-size: var(--type-caption-size); font-weight: var(--weight-medium);
padding: 5px 9px; border-radius: var(--radius-sm); box-shadow: var(--shadow-tip);
transform: translateY(-50%);
}
@media (prefers-reduced-motion: no-preference) {
@keyframes t2-tip { from { opacity: .4; transform: translate(-4px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
.rail-tip { animation: t2-tip 120ms var(--ease); }
}
/* ---- the rail's groups, and the update they are about (F0) ----
The heading of a group is its control: it folds the group and stays folded
per browser. Folded, the lit item alone stays, so where-you-are survives
the fold. On the 64px spine the heading is a rule and every item shows.
Everything here is the rail's own palette; nothing is a new colour. */
.t2 .sb-kicker {
display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none;
font: inherit; font-size: var(--type-caption-size); font-weight: var(--weight-medium);
color: var(--sidebar-label); text-align: left; cursor: pointer; border-radius: var(--radius-sm);
transition: color var(--t-fast) var(--ease);
}
.t2 .sb-kicker:hover { color: var(--sidebar-text-2); }
.t2 div.sb-kicker, .t2 div.sb-kicker:hover { cursor: default; color: var(--sidebar-label); }
.t2 .sb-kicker:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.t2 .sb-kicker .sb-fold {
width: 10px; height: 10px; flex: none; margin-left: auto; color: var(--sidebar-text-3);
transition: transform var(--t-med) var(--ease);
}
.t2 .sb-kicker[aria-expanded="false"] .sb-fold { transform: rotate(-90deg); }
.t2 .sb-group.folded > .sb-item { display: none; }
@media (min-width: 820px) {
.rail-min:not(.rail-peek) > .sidebar.t2 .sb-kicker .sb-fold { visibility: hidden; }
}
/* An entry the project cannot answer yet: greyed, not disabled -- it keeps
its click so it can say why. */
.t2 .sb-item.off { color: var(--sidebar-text-3); }
.t2 .sb-item.off .dot { background: var(--sidebar-text-3); }
/* The current update, at the top of the month's entries: the one control on
the rail after the switcher, in the same cut-in style. */
.t2 .sb-update { padding: 2px 12px 4px 15px; }
.t2 .sb-upd {
display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px; border: 0;
border-radius: var(--radius-md); background: var(--rail-hover); color: var(--sidebar-text-2);
font: inherit; text-align: left; cursor: pointer;
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.t2 .sb-upd:hover, .t2 .sb-upd[aria-expanded="true"] { background: var(--rail-on); color: var(--sidebar-text); }
.t2 .sb-upd:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.t2 .sb-upd-ic { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--rail-badge); color: var(--sidebar-text); }
.t2 .sb-upd-ic svg { width: 15px; height: 15px; }
.t2 .sb-upd-t { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.t2 .sb-upd-k { font-size: var(--mark-size); font-weight: var(--weight-medium); letter-spacing: .04em; text-transform: uppercase; color: var(--sidebar-label); }
.t2 .sb-upd-n { font-size: var(--type-body-size); font-weight: var(--weight-strong); color: var(--sidebar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t2 .sb-upd-d { font-size: var(--type-caption-size); color: var(--sidebar-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t2 .sb-upd-d:empty { display: none; }
.t2 .sb-upd-c { flex: none; width: 10px; height: 10px; color: var(--sidebar-text-3); transition: transform var(--t-med) var(--ease); }
.t2 .sb-upd[aria-expanded="true"] .sb-upd-c { transform: rotate(180deg); }
@media (min-width: 820px) {
.rail-min:not(.rail-peek) > .sidebar.t2 .sb-update { padding: 4px 12px 6px; }
.rail-min:not(.rail-peek) > .sidebar.t2 .sb-upd { padding: 6px; justify-content: center; }
.rail-min:not(.rail-peek) > .sidebar.t2 .sb-upd-t, .rail-min:not(.rail-peek) > .sidebar.t2 .sb-upd-c { display: none; }
}
@media (max-width: 819px) {
.sb-update { flex: none; padding: 0 4px; }
.sb-upd { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--sidebar-text-2); font: inherit; white-space: nowrap; }
.sb-upd-k, .sb-upd-d { display: none; }
.sb-kicker .sb-fold { display: none; }
}
/* ---- the target picker (F2): a search box over the file's activities ----
Mounts on with the theme scope, like the tooltip; floats from the
Custom path button above the document and the sheet. */
.scope-pick-host { position: fixed; z-index: 140; width: 372px; }
.scope-pick {
background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.scope-pick input {
width: 100%; height: 32px; padding: 0 10px; border: 1px solid var(--input-line); border-radius: var(--radius-sm);
font: inherit; color: var(--ink); background: var(--surface);
}
.scope-pick input:focus { outline: none; border-color: var(--focus); box-shadow: var(--ring); }
.scope-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.scope-list .row {
display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border: 0; background: none;
border-radius: var(--radius-sm); text-align: left; font: inherit; color: var(--ink-2); cursor: pointer;
}
.scope-list .row:hover, .scope-list .row:focus-visible { background: var(--line-3); color: var(--ink); outline: none; }
.scope-list .row b { font-family: var(--mono); font-size: var(--type-caption-size); font-weight: var(--weight-medium); color: var(--ink); flex: none; }
.scope-list .row .n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scope-list .row .chip { font-size: var(--mark-size); font-weight: var(--weight-strong); padding: 1px 6px; border-radius: var(--radius-pill); background: var(--line-3); color: var(--ink-4); flex: none; }
.scope-list .row .chip.cp { background: var(--danger-tint); color: var(--danger); }
.scope-hint { font-size: var(--type-caption-size); color: var(--ink-4); padding: 2px 8px 0; }
/* ---- the project switcher's menu ----
It belongs to the RAIL, so it is drawn in the rail's palette and it opens
INSIDE it: the panel is a static child under the button, and the list pushes
the nav down as it grows rather than floating over the page.
It used to be `position: fixed` on the page's paper -- a card that appeared
over the work, detached from the control that summoned it and lit from a
different world. The switcher is chrome. Chrome that behaves like a dialog
makes the reader place it twice: once to find it, once to work out that it
is still the sidebar talking.
`overflow: hidden` is load-bearing. The open and shut are a HEIGHT animation
driven from switcher.js, and the clip is what turns that into an unroll
instead of a squash. */
.t2 .sb-sw-pop {
/* `block`, not the base rule's flex column. Under a height animation a flex
column does not get clipped -- it COMPRESSES, because the list inside it
scrolls and will give up its height. The panel squashed shut and the rows
slid up inside it instead of the panel rolling down over them. Block flow
leaves the children at their natural size for `overflow: hidden` to cut. */
display: block;
position: static; z-index: auto; margin: 6px 0 0; padding: 0; overflow: hidden;
background: var(--rail-panel); border: 1px solid var(--sidebar-line-2);
border-radius: var(--radius-md); box-shadow: none;
}
.t2 .sb-sw-q { position: relative; padding: 8px 8px 6px; }
.t2 .sb-sw-qi {
position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
width: 14px; height: 14px; color: var(--sidebar-text-3); pointer-events: none;
}
/* The field is cut INTO the spine rather than laid on it: on ink, a white box
is a hole punched in the chrome, and it drags the eye off the list. */
.t2 .sb-sw-q input {
height: 32px; padding: 0 10px 0 30px; font-size: var(--type-body-size); color: var(--sidebar-text);
background: var(--rail-field); border: 1px solid var(--sidebar-line-2); border-radius: var(--radius-sm);
transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.t2 .sb-sw-q input:hover { border-color: var(--sidebar-text-3); }
.t2 .sb-sw-q input:focus { outline: 0; border-color: var(--rail-mark); background: var(--rail-hover); }
.t2 .sb-sw-q input::placeholder { color: var(--sidebar-text-3); }
.t2 .sb-sw-list { padding: 0 6px 6px; max-height: 264px; overflow-y: auto; scrollbar-width: thin; }
.t2 .sb-sw-row {
display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 7px;
border-radius: var(--radius-sm); background: none; border: 0; text-align: left;
transition: background var(--t-fast) var(--ease);
}
.t2 .sb-sw-row:hover, .t2 .sb-sw-row.cursor { background: var(--rail-hover); }
.t2 .sb-sw-row.on { background: var(--rail-on); }
.t2 .sb-sw-row .sb-sw-av.sm {
width: 26px; height: 26px; flex: none; border-radius: var(--radius-sm);
background: var(--rail-badge); color: var(--sidebar-text); box-shadow: none;
font-size: var(--mark-size); font-weight: var(--weight-strong);
}
/* The project you are in gets the rail's one bright value -- the same mark the
nav uses for "you are here", so the two agree. */
.t2 .sb-sw-row.on .sb-sw-av.sm { background: var(--rail-mark); color: var(--sidebar-bg); }
.t2 .sb-sw-rt { min-width: 0; flex: 1; display: block; }
.t2 .sb-sw-rn { display: block; font-size: var(--type-body-size); font-weight: var(--weight-medium); color: var(--sidebar-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t2 .sb-sw-row.on .sb-sw-rn, .t2 .sb-sw-row:hover .sb-sw-rn { color: var(--sidebar-text); }
.t2 .sb-sw-rc { display: block; font-size: var(--type-caption-size); color: var(--sidebar-text-3); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t2 .sb-sw-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.t2 .sb-sw-dot.hi { background: var(--danger-dot); box-shadow: 0 0 0 3px var(--rail-dot-ring); }
.t2 .sb-sw-dot.med { background: var(--warn-dot); box-shadow: 0 0 0 3px var(--rail-dot-ring); }
.t2 .sb-sw-dot.ok { background: var(--ok-dot); box-shadow: 0 0 0 3px var(--rail-dot-ring); }
.t2 .sb-sw-dot.none { background: var(--sidebar-text-3); }
/* waiting for the payloads: the shape of the answer, not a spinner over nothing */
.t2 .sb-sw-row.skel { pointer-events: none; }
.t2 .sb-sw-av.sk, .t2 .sk-line {
background: linear-gradient(90deg, var(--rail-skel) 25%, var(--rail-skel-hi) 37%, var(--rail-skel) 63%);
background-size: 400% 100%; animation: t2-shimmer 1.4s ease infinite; border-radius: var(--radius-xs);
}
.t2 .sk-line { display: block; height: 8px; margin: 3px 0; }
.t2 .sk-line.sm { height: 7px; }
@media (prefers-reduced-motion: reduce) { .t2 .sb-sw-av.sk, .t2 .sk-line { animation: none; } }
.t2 .sb-sw-empty { margin: 0; padding: 12px 14px 14px; font-size: var(--type-caption-size); color: var(--sidebar-text-3); text-align: center; }
.t2 .sb-sw-foot { padding: 5px; border-top: 1px solid var(--sidebar-line); background: var(--sidebar-bg); display: grid; gap: 1px; }
.t2 .sb-sw-act {
display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 7px; border: 0;
border-radius: var(--radius-sm); background: none; text-align: left;
font-size: var(--type-caption-size); font-weight: var(--weight-medium); color: var(--sidebar-text-2);
transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.t2 .sb-sw-act svg { width: 14px; height: 14px; flex: none; color: var(--sidebar-text-3); }
.t2 .sb-sw-act:hover { background: var(--rail-hover); color: var(--sidebar-text); }
.t2 .sb-sw-act:hover svg { color: var(--sidebar-text); }
.t2 .sb-sw-act.new { color: var(--sidebar-text); }
.t2 .sb-sw-act.new svg { color: var(--sidebar-text); }
.t2 .sb-sw-act:focus-visible { outline: 2px solid var(--rail-mark); outline-offset: -2px; }
/* ---- the rail as a strip (below 820px) ----
The base stylesheet lays the rail across the top at this width. The theme
supplies its colours there and nothing structural: no fixed width, no
collapse control. */
@media (max-width: 819px) {
.sidebar.t2 { border-bottom-color: var(--sidebar-line); }
.t2 .sb-collapse { display: none; }
.t2 .sb-org { height: 46px; padding: 0 10px 0 8px; border-right: 1px solid var(--sidebar-line); }
.t2 .sb-switch { padding: 6px 0; }
.t2 .sb-group, .t2 .sb-group + .sb-group { padding: 0; margin-top: 0; }
.t2 .sb-item { height: auto; padding: 7px 10px; }
.t2 .sb-item + .sb-item { margin-top: 0; }
/* The one width where the menu CANNOT open in place: the rail is a 56px
strip across the top, and there is no column under the button to unroll
into. It anchors below the strip instead -- still the rail's palette, so
it still reads as the rail speaking, and switcher.js places it and plays
the rise rather than the unroll. */
.t2 .sb-sw-pop {
position: fixed; z-index: 60; margin: 0;
box-shadow: var(--shadow-3); transform-origin: top center;
}
.t2 .sb-sw-list { max-height: none; }
}
.t2 [data-nav] { --ic: url("data:image/svg+xml;utf8,: no class the stylesheet knew, so twelve columns of
money ran together left-aligned at the browser's defaults. Figures are set
the way a ledger sets them -- right-aligned on tabular numerals so the
decimal points stack -- under a head that stays put, beside a first column
that stays put, because the table is wider than most windows. */
.t2 .pva-wrap { overflow: auto; max-height: 560px; margin: 0 -16px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.t2 .doc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--type-body-size); }
.t2 .doc-table th, .t2 .doc-table td { padding: 8px 14px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line-2); }
.t2 .doc-table td { color: var(--ink-2); font-family: var(--sans); font-variant-numeric: tabular-nums; line-height: var(--leading-snug); transition: background var(--t-fast) var(--ease); }
.t2 .doc-table th.num, .t2 .doc-table td.num { text-align: right; }
/* E6-04b. What the latest update said about a register subject is a sentence,
not a value: it wraps, and it is capped so it cannot push the row wider than
the card. The colour marks the three reasons that are NOT a fix. */
.t2 .doc-table td.reg-now { white-space: normal; max-width: 34ch; }
.t2 .reg-unmeasured { color: var(--warn); }
.t2 .doc-table thead th {
position: sticky; top: 0; z-index: 2; background: var(--head-bg); color: var(--ink-3);
font-size: var(--type-caption-size); font-weight: var(--weight-medium); border-bottom: 1px solid var(--line);
}
.t2 .doc-table tbody tr:hover td { background: var(--surface-3); }
.t2 .doc-table tbody tr:last-child td { border-bottom: 0; }
/* the two-level head: group labels over the columns they cover */
.t2 .doc-table.pva thead tr.grp th { top: 0; height: 30px; padding-top: 0; padding-bottom: 0; border-bottom: 0; text-align: center; color: var(--ink-2); font-weight: var(--weight-strong); }
.t2 .doc-table.pva thead tr.grp th.g { box-shadow: inset 0 -1px 0 var(--line), inset 1px 0 0 var(--line); }
.t2 .doc-table.pva thead tr:not(.grp) th { top: 30px; }
/* a rule where each group of five begins, so the eye knows which "Actual" it is on */
.t2 .doc-table.pva .g0 { box-shadow: inset 1px 0 0 var(--line); }
.t2 .doc-table.pva thead tr:not(.grp) th.g0 { box-shadow: inset 1px 0 0 var(--line); }
/* the update's name holds the left edge while the figures scroll under the head */
.t2 .doc-table.pva th:first-child, .t2 .doc-table.pva td:first-child { position: sticky; left: 0; z-index: 1; padding-left: 16px; }
.t2 .doc-table.pva td:first-child { background: var(--surface); font-weight: var(--weight-strong); color: var(--ink); }
.t2 .doc-table.pva tbody tr:hover td:first-child { background: var(--surface-3); }
.t2 .doc-table.pva thead th:first-child { z-index: 3; }
.t2 .doc-table.pva td:nth-child(2) { color: var(--ink-3); }
.t2 .pva-wrap + div { margin-top: 14px; color: var(--ink-2); line-height: var(--leading-relaxed); }
/* ---- Trends: notices, the KPI strip, a card's closing note ---- */
/* A notice that carries an action sets it beside its sentence, not under it. */
.t2 .align-notice { padding: 14px 16px; }
.t2 .align-notice:has(> .btn) { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.t2 .align-notice .t { color: var(--ink); }
.t2 .align-notice .m { margin-top: 4px; max-width: 96ch; }
.t2 .align-notice + .align-notice, .t2 .align-notice + .card, .t2 .card + .align-notice { margin-top: 16px; }
/* dates that carry two files: the date, the files, what is published -- as rows */
.t2 .shared-list { margin-top: 12px; border-top: 1px solid var(--line-2); }
.t2 .shared-row {
display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 16px;
padding: 9px 0; border-bottom: 1px solid var(--line-2);
}
.t2 .shared-row:last-child { border-bottom: 0; padding-bottom: 0; }
.t2 .shared-row .d { font-weight: var(--weight-strong); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.t2 .shared-row .files { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.t2 .shared-row .st { font-size: var(--type-caption-size); color: var(--ink-4); white-space: nowrap; }
.t2 .shared-row .st.ok { color: var(--ok); font-weight: var(--weight-medium); }
.t2 .d-tag.ok { background: var(--ok-tint); border-color: var(--ok-line); color: var(--ok); }
/* headline figures in the strip */
.t2 .kpi-v { margin-top: 3px; font-size: var(--type-title-size); font-weight: var(--weight-strong); letter-spacing: var(--type-title-tracking); color: var(--ink); white-space: nowrap; }
.t2 .kpi-v.f-bad { color: var(--danger); } .t2 .kpi-v.f-ok { color: var(--ok); }
.t2 .kpi-big {
padding: 16px 16px 14px; font-size: var(--type-display-size); font-weight: var(--weight-strong);
letter-spacing: var(--type-display-tracking); line-height: var(--type-display-leading); font-variant-numeric: tabular-nums;
}
.t2 .kpi-big.f-bad { color: var(--danger); } .t2 .kpi-big.f-ok { color: var(--ok); }
/* A note appended straight into a card, after its table, had no padding of its
own: it ran from the card's left border to its right and sat on the bottom
edge. It is the card's footer, and is set as one. */
.t2 .card > .hint {
margin: 0; padding: 12px 16px 14px; border-top: 1px solid var(--line-2); background: var(--surface-3);
border-radius: 0 0 var(--radius-lg) var(--radius-lg); max-width: none;
}
.t2 .card > .hint:not(:last-child) { border-radius: 0; }
/* a table that is a card's whole body lines its edge columns up with the head */
.t2 .card > table.grid th:first-child, .t2 .card > table.grid td:first-child,
.t2 .card > .tablewrap > table.grid th:first-child, .t2 .card > .tablewrap > table.grid td:first-child { padding-left: 16px; }
.t2 .card > table.grid th:last-child, .t2 .card > table.grid td:last-child,
.t2 .card > .tablewrap > table.grid th:last-child, .t2 .card > .tablewrap > table.grid td:last-child { padding-right: 16px; }
.t2 .card > table.grid td:last-child .btn { float: right; }
.t2 .card > table.grid tbody td { vertical-align: middle; }
/* ---- where a chart sits in its card ----
The server draws every chart at 880 units wide and caps the at 880px
inline, so on a wide window it hugged the left of its card with the right
half of the card empty. The drawing is not touched -- the same SVG goes into
the report and the evidence pack -- it is only sized and placed here.
Centred, and allowed to grow with the card, but not without limit: an SVG
scales its type with its width, and at the full width of a 1600px card the
11-unit axis labels would set at 20px. 1180px is where they reach ~15px.
`!important` because the cap being lifted is an inline style. */
.t2 .card-body > svg[role="img"] {
width: 100%; max-width: 1180px !important; height: auto; margin-left: auto; margin-right: auto;
}
.t2 .card-body > svg[role="img"] + .hint, .t2 .card-body > svg[role="img"] ~ .hint { max-width: 1180px; margin-left: auto; margin-right: auto; }
/* ---- the chart read-out ---- */
.chart-guide { stroke: var(--ink-4); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-ring { fill: var(--surface); stroke-width: 2.5; }
.chart-tip {
position: fixed; z-index: 150; pointer-events: none; min-width: 210px; max-width: 340px; padding: 10px 12px;
background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-3);
font-size: var(--type-caption-size); color: var(--ink-2);
}
.chart-tip .blk + .blk { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.chart-tip .hd { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 7px; }
.chart-tip .hd .t { font-size: var(--type-body-size); font-weight: var(--weight-strong); color: var(--ink); }
.chart-tip .hd .s { color: var(--ink-4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-tip .row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 2px 0; }
.chart-tip .row .sw { width: 8px; height: 8px; border-radius: 50%; }
.chart-tip .row .n { color: var(--ink-3); }
.chart-tip .row .v { font-weight: var(--weight-strong); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-tip .row .v.bad { color: var(--danger); }
.chart-tip .row .v.ok { color: var(--ok); }
/* ---- overlays: menus, dialogs ---- */
.t2 .rowmenu, .rowmenu.t2 { border-radius: var(--radius-lg); border: 0; padding: 5px; box-shadow: var(--shadow-3); width: 236px; }
.t2 .rowmenu button, .rowmenu.t2 button { font-size: var(--type-body-size); font-weight: var(--weight-medium); border-radius: var(--radius-sm); padding: 7px 9px; color: var(--ink); transition: background 80ms linear; }
.t2 .rowmenu button:hover, .rowmenu.t2 button:hover { background: var(--line-3); }
.t2 .rowmenu button .n, .rowmenu.t2 button .n { font-size: var(--type-caption-size); font-weight: var(--weight-regular); color: var(--ink-4); }
.t2 .rowmenu .head, .rowmenu.t2 .head { font-family: var(--sans); font-size: var(--type-caption-size); font-weight: var(--weight-medium); letter-spacing: 0; text-transform: none; color: var(--ink-4); padding: 6px 9px 3px; }
.rowmenu.t2 button.danger { color: var(--danger); }
.rowmenu.t2 button.danger:hover { background: var(--danger-tint); }
/* ---- the chooser (core/chooser.js) ----
Where Compare and Trends can land: the whole document first, then its
sections by name. Anchored to the button that opened it -- it rises from
the selection bar at the bottom of the pane and drops from the Trends
button in the head -- and it is a table of contents, so a section reads as
its number, its title and the one line it says about itself. */
.chooser.t2 {
position: fixed; z-index: 60; width: 292px; padding: 5px;
background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box;
}
.chooser.t2 .head { font-size: var(--type-caption-size); font-weight: var(--weight-medium); color: var(--ink-4); padding: 7px 9px 3px; }
.chooser.t2 .rule { height: 1px; background: var(--line-2); margin: 3px 4px; }
.chooser.t2 .item {
display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px;
width: 100%; text-align: left; border: 0; background: none; border-radius: var(--radius-sm);
padding: 5px 9px; font: inherit; color: var(--ink); cursor: pointer;
transition: background 80ms linear;
}
.chooser.t2 .item.numbered { grid-template-columns: auto minmax(0, 1fr) auto; }
.chooser.t2 .item:hover, .chooser.t2 .item:focus-visible { background: var(--line-3); outline: 0; }
.chooser.t2 .item:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.chooser.t2 .item .no {
font-family: var(--mono); font-size: var(--type-caption-size); color: var(--ink-4);
font-variant-numeric: tabular-nums; min-width: 18px;
}
.chooser.t2 .item .t { font-size: var(--type-body-size); font-weight: var(--weight-medium); line-height: var(--leading-snug); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chooser.t2 .item .note { font-size: var(--type-caption-size); font-weight: var(--weight-regular); color: var(--ink-5); white-space: nowrap; }
/* The whole document: the first line, and the one the reader most often wants. */
.chooser.t2 .item.primary { background: var(--accent-tint); margin-bottom: 2px; }
.chooser.t2 .item.primary:hover, .chooser.t2 .item.primary:focus-visible { background: var(--accent-tint-line); }
.chooser.t2 .item.primary .t { color: var(--accent-ink); font-weight: var(--weight-strong); }
/* A card the page cannot draw for this project yet: kept in the list, so
the reader learns what exists, and greyed with the reason beside it. */
.chooser.t2 .item:disabled { cursor: default; color: var(--ink-5); background: none; }
.chooser.t2 .item:disabled .t, .chooser.t2 .item:disabled .no { color: var(--ink-5); }
/* The chevron on a button that opens one. */
.t2 .btn .chev { width: 12px; height: 12px; margin-left: -2px; opacity: .8; transition: transform var(--t-fast) var(--ease); }
.t2 .btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.t2 .selectbar .btn .chev { margin-left: 0; color: currentColor; opacity: .7; }
/* The head's Compare button while one schedule is ticked: how far along. */
.t2 .btn .cnt { font-size: var(--type-caption-size); font-weight: var(--weight-medium); color: var(--ink-4); background: var(--line-3); border-radius: var(--radius-pill); padding: 1px 7px; margin-left: 2px; font-variant-numeric: tabular-nums; }
.t2 .btn.off { cursor: default; }
.t2 .btn.off .chev { opacity: .5; }
/* The head of a single-section view of Trends: which card this is, and the
two ways on -- the whole page, or another card. */
.t2 .tr-focus { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.t2 .tr-focus .k { font-size: var(--type-caption-size); font-weight: var(--weight-medium); color: var(--ink-4); }
.t2 .tr-focus .t { margin: 0; font-size: var(--type-heading-size); font-weight: var(--weight-strong); color: var(--ink); letter-spacing: var(--type-heading-tracking); }
.t2 .tr-focus .acts { margin-left: auto; display: flex; gap: 8px; }
.t2 .scrim { background: var(--scrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.t2 .modal { border-radius: var(--radius-xl); box-shadow: var(--shadow-4); }
.t2 .modal-head { padding: 20px 22px 12px; }
.t2 .modal-head h2 { font-size: var(--type-heading-size); font-weight: var(--weight-strong); letter-spacing: var(--type-heading-tracking); display: block; }
.t2 .modal-head .sub { font-size: var(--type-body-size); margin-top: 3px; color: var(--ink-4); }
.t2 .modal-body { padding: 0 22px 18px; font-size: var(--type-body-size); }
.t2 .modal-foot { padding: 12px 22px; background: var(--surface-3); border-top-color: var(--line-2); justify-content: flex-end; border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.t2 .modal-x { border-radius: var(--radius-sm); width: 28px; height: 28px; font-size: var(--type-title-size); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.t2 .modal-x:hover { background: var(--line-3); }
/* Inside a dialog: a definition list that reads as a record, and form controls
that look like the rest of the product's. The receipt fields were bare