/* * Phase 6a baseline styles for the Synesis P_success frontend. * * Card-based layout with progressive disclosure. Sections start hidden * (via the `hidden` HTML attribute) and main.js reveals them as the user * advances through the flow: setup → analysis → parameters / scenarios / * benchmarks / Monte Carlo. The full theme port from * `../SynesisLabs Platform/psuccess-platform.html` is still deferred — * this pass is the structural rework, with the visual upgrade staying * intentionally light so the markup is what we're committing to, not * the colours. */ /* === Tokens =============================================================== */ /* Single source of truth for the colour palette. Tweak here, not at */ /* per-component sites. The hex values stay close to the legacy brand */ /* so a future dark-theme port stays a colour swap, not a layout fight. */ :root, [data-theme="light"] { --bg: #f5f7fa; --surface: #ffffff; --surface-muted: #f7fafc; --border: #e2e8f0; --border-strong: #cbd5e0; --text: #1a202c; --text-muted: #4a5568; --text-subtle: #5d6a7d; --accent: #2b6cb0; --accent-strong: #1e3a5f; --accent-soft: rgba(43, 108, 176, 0.08); /* Foreground for text sitting ON an accent or danger FILL. A separate token because the right answer differs per theme: light's accent is dark enough for white text (5.42:1), dark's is a bright cyan where white measures 2.14:1 — a WCAG AA failure that shipped on the primary button, RUN PROJECT, and the active tab. Dark ink on the bright fill scores 8.79:1. Never hard-code #fff on a themed fill again. */ --accent-on: #ffffff; --bad-on: #ffffff; --good: #2f855a; --good-soft: #d1fae5; --warn: #b7791f; --warn-soft: #fef3c7; --bad: #c53030; --bad-soft: #fee2e2; /* Foreground for text sitting ON a *soft* semantic fill, as distinct from --accent-on / --bad-on above, which cover text on a SOLID fill. The split is needed because this theme's soft fills are pale enough that the base semantic tone misses WCAG AA on them: measured 4.00:1 (good), 3.27:1 (warn) and 4.48:1 (bad) against the 4.5:1 that normal-size text requires. Each value below holds its hue and drops lightness only as far as 4.6:1, so the palette darkens as little as accessibility allows. The dark theme needs no such split -- its semantic tones already clear 4.7:1 on the same fills -- but defines the tokens anyway so no component ever branches on theme to pick a foreground. */ --good-on-soft: #2b7952; --warn-on-soft: #946219; --bad-on-soft: #c12f2f; --orange: #f97316; --modal-backdrop: rgba(15, 23, 42, 0.28); --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-dialog: 0 8px 16px rgba(15, 23, 42, 0.10), 0 28px 64px rgba(15, 23, 42, 0.26); } /* Dark-theme token overrides. Same variable names, different values — * every component reads via `var(--*)` so swapping the attribute on * `` swaps the whole UI without touching any per-component CSS. * Soft variants use rgba alpha so coloured backgrounds blend onto the * dark surfaces correctly; light mode's pastel solids would look * garish on a dark card. */ [data-theme="dark"] { --bg: #0b1120; --surface: #131c30; --surface-muted: #1c2740; --border: #2a3656; --border-strong: #475569; --text: #e7ecf3; --text-muted: #cbd5e0; --text-subtle: #8c9ab2; --accent: #38bdf8; --accent-strong: #7dd3fc; --accent-soft: rgba(56, 189, 248, 0.14); /* Dark ink on the bright fills — see the light block. 8.79:1 on --accent, 11.29:1 on --accent-strong, 6.81:1 on --bad (#f87171, where white was 2.77:1). */ --accent-on: #0b1120; --bad-on: #0b1120; --good: #34d399; --good-soft: rgba(52, 211, 153, 0.18); --warn: #fbbf24; --warn-soft: rgba(251, 191, 36, 0.18); --bad: #f87171; --bad-soft: rgba(248, 113, 113, 0.18); /* See the light block. These already clear AA on their own soft fills (6.10:1, 6.90:1 and 4.74:1 measured over --surface), so they are the base tones unchanged. The tokens exist so a component can reference one name in both themes. */ --good-on-soft: #34d399; --warn-on-soft: #fbbf24; --bad-on-soft: #f87171; --orange: #fb923c; --modal-backdrop: rgba(0, 0, 0, 0.42); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5); --shadow-dialog: 0 8px 16px rgba(0, 0, 0, 0.45), 0 28px 64px rgba(0, 0, 0, 0.70); } /* Smooth-but-not-distracting transition when the user toggles. Picks * the properties that actually change so the page doesn't animate * unrelated layout shifts. */ html { transition: background-color 0.15s linear; } body { transition: background-color 0.15s linear, color 0.15s linear; } /* === Page-level ========================================================== */ /* Constrained reading column, neutral background, consistent type ramp. */ * { box-sizing: border-box; } /* The `hidden` attribute must always win over a component's own `display` rule. Several shell elements set `display` (`.login-wrap` → flex, `.app-body` → grid, `.app-menu` / `.menu-item` → flex) which would otherwise override the UA `[hidden] { display: none }` and leave "hidden" elements rendered. This guard (the HTML5-boilerplate idiom) keeps `el.hidden = true` authoritative everywhere it's used. */ [hidden] { display: none !important; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; } main { max-width: 880px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; } /* === App header ========================================================== */ /* Sticks to the top of the page (no scroll detach). Title on the left, */ /* account chip on the right; the chip is hidden when no session exists. */ .app-header { display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--border); } .app-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); } .app-title .title-accent { color: var(--accent); } .app-header-actions { display: flex; align-items: center; gap: 0.75rem; } /* NOTE: `.app-header`, `.app-title`, `.app-header-actions` and `.title-accent` * above are retained because the admin SPA (`admin.html`) still uses that * header layout. The main app's header was replaced by the shell top bar in * UI-overhaul phase U0 (see the "Shell" sections near the end of this file). */ .theme-icon { display: block; pointer-events: none; } /* Default (light theme): show moon glyph, hide sun. Dark theme flips. */ .theme-icon-sun { display: none; } [data-theme="dark"] .theme-icon-moon { display: none; } [data-theme="dark"] .theme-icon-sun { display: block; } /* === Card system ========================================================= */ /* Every major section sits inside a .card. The visible heading is in .card-header > .card-title, with optional .card-subtitle copy. Actions live in .card-footer at the bottom. Cards stack vertically with consistent spacing so the page reads as a top-down checklist. */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; } .card-header { margin-bottom: 1rem; } .card-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--accent-strong); } .card-subtitle { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--text-muted); line-height: 1.45; } .card-footer { margin-top: 1rem; } /* Section headings — "SUMMARY", "EXECUTIVE SUMMARY", and the Parameters group headings below, which share the colour. Record Ink rather than Marginalia Grey: these name the section, and a heading painted in the caption colour reads as a caption. The uppercase micro-label voice is unchanged, so the weight comes from ink, not from size. */ .section-subtitle { margin: 1rem 0 0.5rem; font-size: 0.95rem; color: var(--text); font-weight: 700; } /* In a .tab-head the heading shares the row with RE-RUN, so it drops the stacked-heading margins and lets the row own the spacing. */ .tab-head .section-subtitle { margin: 0; } .prose { line-height: 1.55; color: var(--text); } .prose strong { color: var(--accent-strong); } /* === Form controls ======================================================= */ /* Inputs span the card width by default. Labels stack above inputs. */ label { display: block; margin: 0.85rem 0 0.3rem; font-weight: 600; font-size: 0.9rem; color: var(--text); } label .label-hint { font-weight: 400; color: var(--text-subtle); } input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea { width: 100%; padding: 0.55rem 0.7rem; font-size: 0.95rem; font-family: inherit; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--text); box-sizing: border-box; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } textarea { resize: vertical; min-height: 5rem; font-family: inherit; } .checkbox-label { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; font-weight: 500; font-size: 0.9rem; } .checkbox-label input { width: auto; margin: 0; } /* === Buttons ============================================================= */ /* Four visual roles: primary (the headline action — RUN MODEL, Log in), */ /* secondary (RUN scenarios / RUN benchmarks / Run MC), ghost (Log out, */ /* modal close, anything that shouldn't compete for attention), and danger */ /* (the confirm button of a destructive dialog, and nothing else). */ button { font-family: inherit; cursor: pointer; border: 0; border-radius: 6px; font-weight: 600; padding: 0.5rem 1rem; font-size: 0.95rem; transition: filter 0.12s, background-color 0.12s; } button:disabled { opacity: 0.55; cursor: not-allowed; } .btn-primary { background: var(--accent); color: var(--accent-on); } .btn-primary:hover:not(:disabled) { background: var(--accent-strong); } .btn-secondary { background: var(--surface-muted); color: var(--text); border: 1px solid var(--border-strong); } /* Hover was `#edf2f7`, a hard-coded light grey that painted a near-white fill under light text in dark mode. --accent-soft is the themed equivalent and agrees with the accent border/text this rule already sets. */ .btn-secondary:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } /* Destructive confirmations: privacy's Clear History and the scenario / benchmark delete dialog (issue #56). It sat beside the privacy panel's rules while that was its only caller; a second caller elsewhere in the app moved it up here to the shared button block. */ .btn-danger { background: var(--bad); color: var(--bad-on); } .btn-danger:hover:not(:disabled) { filter: brightness(0.92); } .btn-ghost { background: transparent; color: var(--text-muted); padding: 0.35rem 0.65rem; font-weight: 500; } .btn-ghost:hover:not(:disabled) { color: var(--text); background: var(--surface-muted); } .btn-large { padding: 0.75rem 1.5rem; font-size: 1rem; } .btn-small { padding: 0.3rem 0.55rem; font-size: 0.85rem; } /* Horizontal group of buttons inside a card-footer (e.g. Export + Generate report). Wraps on narrow screens; the gap keeps them from touching. */ .button-row { display: flex; flex-wrap: wrap; gap: 0.6rem; } /* Visually hidden, still announced. The API chip shows its verdict as a colour, which is not readable by everyone; #apiStatusText carries the same verdict as text inside the chip's `role="status"` region, where a screen reader announces it on change. Clip-based rather than `display:none` or `visibility:hidden` — both of those remove the node from the accessibility tree entirely, which would defeat the purpose. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* === Status + error lines ================================================ */ /* Monospace so a status string's width doesn't jitter as it updates. Used by #reportStatus and the admin page; the two tab loading fields moved to .snake-field (issue #47). */ .status-line { margin: 0.6rem 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92rem; color: var(--accent); } .error { color: var(--bad); margin: 0.5rem 0 0; } .meta-status { text-align: center; color: var(--text-muted); font-style: italic; margin: 1rem 0; } /* === Sign-in (Clerk) ===================================================== */ /* * The sign-in screen is just a centering wrapper around Clerk's own card — we * intentionally don't wrap it in our .card (that produced a redundant outer box * the Clerk card overflowed). Clerk is themed to our palette via clerkAppearance() * in app/clerk.js. */ .login-wrap { display: flex; /* Column so the admin-only notice (when revealed) stacks above the Clerk card rather than sitting beside it; align-items keeps the card centred exactly as the old row layout did. */ flex-direction: column; align-items: center; margin: 3rem auto; padding: 0 1rem; } /* Warning banner shown on admin-only deployments (branch trial stacks) after a non-admin's sign-in is refused server-side — see auth:admin-only in app/main.js. Uses the theme's "bad" colour at low opacity so it reads as a warning in both light and dark. */ .login-notice { max-width: 25rem; margin: 0 0 1.25rem; padding: 0.75rem 1rem; border: 1px solid var(--bad); border-radius: 6px; color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); font-size: 0.92rem; } .card-title { margin: 0; } /* === Upload zone ========================================================= */ .upload-zone { border: 1.5px dashed var(--border-strong); border-radius: 6px; padding: 1rem 0.75rem; text-align: center; font-size: 0.9rem; color: var(--text-muted); cursor: pointer; background: var(--surface-muted); transition: border-color 0.12s, color 0.12s, background-color 0.12s; } .upload-zone:hover, .upload-zone:focus { border-color: var(--accent); color: var(--accent); outline: none; } .upload-zone.dragging { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .upload-hint { margin-top: 0.25rem; font-size: 0.75rem; color: var(--text-subtle); } .file-list { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; } .file-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.55rem; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 4px; font-size: 0.85rem; } .file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .file-badge { font-size: 0.75rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--border); color: var(--text-muted); } .file-badge-parsing { background: var(--border); color: var(--text-muted); } .file-badge-ok { background: var(--good-soft); color: var(--good); } .file-badge-unsupported { background: var(--warn-soft); color: var(--warn); } .file-badge-error { background: var(--bad-soft); color: var(--bad); } .file-remove { background: transparent; color: var(--text-subtle); border: 0; padding: 0 0.4rem; font-size: 1.1rem; line-height: 1; cursor: pointer; font-weight: 700; } .file-remove:hover { color: var(--bad); } /* The old six-cell diagnostic result strip (.result-strip / .result-cell / .result-label / .result-value) was replaced by the headline metrics strip in UI-overhaul phase U0 — see the "Shell: headline strip" section below. */ /* ========================================================================= * * Parameters tab: the Ink Ledger * * The fourteen parameters as one ruled ledger, read left to right: name and * evidence state | figure over a two-mark scale | the case, then its sources. * Built on Vercel's Geist system: ink on near-white, one grey ramp, hairline * rules, Geist for words and Geist Mono for figures, sources and state. * * PILOT SCOPE. This is the first surface in the world the whole app will move * to. Its tokens are scoped to the Parameters tab panel * (.tab-panel[data-tab="parameters"]) so the other tabs keep their current * look until they migrate; lifting these tokens to :root is that migration's * first step. * * COLOUR RULE. Colour marks evidence state only -- an uncited claim, in amber. * The value itself is never coloured: a green or red figure reads as a * verdict, and the scoring model is unvalidated. * * FORMULA RULE. Every scale has the same geometry and the rows stay in their * taxonomy order. Nothing here sizes, orders or weights a parameter by its * influence on P_success. * * FONT COST. Two variable woff2 files, ~70 KB each, self-hosted under * vendor/geist (see vendor/README.md). `font-display: swap`, so text renders * in the system stack first and never waits on the font. * ========================================================================= */ @font-face { font-family: "Geist"; src: url("vendor/geist/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("vendor/geist/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* Tokens and ground. The world owns the whole Parameters tab panel: its tokens are scoped to the panel, and the panel is painted as one sheet on the ledger's own ground -- #fafafa, or a neutral near-black in dark. The ledger used to sit straight on the app's page ground (#f5f7fa, and navy in dark), whose blue tint pulled against the neutral inks. The sheet is padded and hairline-edged so that ground edge reads as deliberate: it is the pilot seam between this world and the tabs that have not migrated yet. Every text colour clears 4.5:1 on the ground in both themes, and the scale line, a UI boundary, clears 3:1. Lines are translucent ink rather than fixed greys, so the ratios hold on whatever surface this sheet later moves onto. */ .tab-panel[data-tab="parameters"] { --il-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --il-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --il-ground: #fafafa; /* Floating surfaces (the definition popover) sit one step above the ground. */ --il-raised: #ffffff; --il-ink: #171717; --il-body: #4d4d4d; --il-mute: #666666; --il-rule: rgba(23, 23, 23, 0.10); --il-rule-strong: rgba(23, 23, 23, 0.50); --il-link: #0761d1; --il-warn: #a1510a; --il-focus: #0761d1; --il-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.10); /* The native range thumb's width. Marks are placed along the thumb's travel, which starts and ends half a thumb in from each edge of the input. */ --il-thumb: 10px; /* The ledger's cell geometry, shared by the rows, the column head and the group headings. They are tokens because the wide layouts further down place copies of the column labels and range words by adding these widths up: if the name column changed width and a copy's offset did not, the range words would drift off their scales. */ --il-name-col: 11rem; --il-scale-col: 14rem; --il-cell-gap: 1.5rem; /* Between two ledger columns on a wide screen: twice the gap between cells, so a row's own cells never read as belonging to its neighbour. */ --il-column-gap: 3rem; padding: 1.25rem 1.5rem; border: 1px solid var(--il-rule); border-radius: 8px; background: var(--il-ground); font-family: var(--il-sans); color: var(--il-ink); } [data-theme="dark"] .tab-panel[data-tab="parameters"] { --il-ground: #0a0a0a; --il-raised: #161616; --il-ink: #ededed; --il-body: #c7c7c7; --il-mute: #a3a3a3; --il-rule: rgba(237, 237, 237, 0.12); --il-rule-strong: rgba(237, 237, 237, 0.50); --il-link: #6cb4ff; --il-warn: #f5a623; --il-focus: #6cb4ff; --il-shadow: 0 1px 2px rgba(0, 0, 0, 0.40), 0 10px 28px rgba(0, 0, 0, 0.55); } /* The ledger lays itself out against its own width, not the viewport: the sidebar takes a variable share of the screen, so the tab's width is the number that decides how many columns fit. */ #slidersSection { container: ledger / inline-size; } #slidersSection ::selection { background: var(--il-ink); color: var(--il-ground); } /* Visually hidden, still read by screen readers. */ .ledger-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* --- Coverage line: the tab's lead ------------------------------------- */ .ledger-coverage { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1rem; padding: 0.25rem 0 1.25rem; border-bottom: 1px solid var(--il-rule); } .ledger-coverage-figure { font-family: var(--il-sans); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--il-ink); } /* Only the counts are figures; the words around them are prose. */ .ledger-num { font-family: var(--il-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; } .ledger-coverage-detail { font-family: var(--il-mono); font-size: 0.875rem; font-variant-numeric: tabular-nums; color: var(--il-body); } .ledger-coverage-detail .is-unsourced { color: var(--il-warn); } .ledger-legend { display: flex; gap: 1.25rem; margin-left: auto; font-size: 0.75rem; color: var(--il-mute); } .ledger-legend-item { display: inline-flex; align-items: center; gap: 0.45rem; } /* --- One grid, shared by the column head, group headings and rows ------- */ /* The middle column is a FIXED width, so every scale in the ledger has the same geometry: any two parameters compare by eye, and a range shared by a whole group can be set once over the column instead of on every row. The column head holds one set of labels per ledger column (see sliders.js#buildColumnHead); each set is the row grid, so its labels sit over the cells they name. */ .ledger-head-set, .ledger-group, .param-row { display: grid; grid-template-columns: var(--il-name-col) var(--il-scale-col) minmax(0, 1fr); column-gap: var(--il-cell-gap); } .ledger-head { padding: 0.75rem 0 0.25rem; font-size: 0.75rem; font-weight: 500; color: var(--il-mute); } /* Copies of the column labels and of a group's range words, for a second and third ledger column. Hidden until the tab is wide enough to lay those columns out; the "Wide tabs" container queries reveal them. */ .ledger .ledger-twin { display: none; } /* Group headings stick to the top of the scroller while their rows pass beneath. The elasticities' range words ("low risk / high risk") live only on their heading, so without this they scrolled out of sight after the first few rows -- and range words must stay visible. */ #slidersSection h2.ledger-group { position: sticky; /* `top: 0`, not an offset. Which element scrolls depends on width: the inner `.content` scroller (20px padding-top) on desktop, but the whole `main.shell-main` (no padding) once the shell stacks on phones. A negative offset tuned for the first clipped the heading by 20px on the second (measured at 390px). The ::before band below handles the strip `.content`'s padding leaves above a heading pinned on desktop. */ top: 0; z-index: 4; align-items: end; row-gap: 0.3rem; margin: 2.25rem 0 0; padding: 0.6rem 0; background: var(--il-ground); border-bottom: 1px solid var(--il-ink); font-family: var(--il-sans); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; color: var(--il-ink); } /* A band of ground above each heading, as tall as `.content`'s padding-top. On desktop a pinned heading sits at the scroller's padding edge, 20px below its top edge, and rows passing through that strip showed above the heading; the band covers them. Unpinned, it lies inside the heading's own top margin, over nothing but ground. On phones, where nothing pads the scroller, it sits above the screen edge. It also takes the pointer there, so a click on the strip can never reach a row hidden beneath it. */ #slidersSection h2.ledger-group::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.25rem; background: var(--il-ground); } /* 1.5rem, not 1.25rem: the band above must clear the coverage line's rule. */ #slidersSection .ledger-coverage + h2.ledger-group { margin-top: 1.5rem; } /* The title takes the whole row: inside the 11rem name column it wrapped as "Internal Factors / (Project Strengths)". It is a button, because the heading is also the group's disclosure: clicking the title folds the group away and back (sliders.js#groupHeading). It keeps the heading's type, and carries the sidebar accordions' chevron -- pointing up while the group is open, down once it is folded -- so both kinds of fold read the same. */ .ledger-group-toggle { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: left; cursor: pointer; } .ledger-group-toggle .chev { border-color: var(--il-mute); } .ledger-group-toggle:hover .chev { border-color: var(--il-ink); } .ledger-group-toggle[aria-expanded="true"] .chev { transform: rotate(-135deg); } .ledger-group-toggle:focus-visible { outline: 2px solid var(--il-focus); outline-offset: 4px; border-radius: 4px; } /* A folded group's shared range words describe scales that are no longer on screen, so they fold with it. */ #slidersSection h2.ledger-group[data-collapsed] .param-group-caption { display: none; } .param-group-caption { grid-column: 2; grid-row: 2; display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 400; letter-spacing: 0; color: var(--il-mute); } /* --- A row -------------------------------------------------------------- */ .param-row { grid-template-areas: "name setting case" "evidence setting case"; grid-template-rows: auto 1fr; row-gap: 0.35rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--il-rule); } .param-row:last-child { border-bottom: none; } /* Name + definition trigger. The ⓘ is the label's SIBLING -- see sliders.js#buildLabelCell. */ .param-label { grid-area: name; display: flex; align-items: center; gap: 0.4rem; min-width: 0; /* The name leads the row, so it is never smaller than the figure. */ font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--il-ink); } .param-label-name { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; } /* Evidence state, read as a column down the left edge. */ .param-evidence { grid-area: evidence; font-family: var(--il-mono); font-size: 0.75rem; font-weight: 500; color: var(--il-body); } .param-row[data-evidence="unsourced"] .param-evidence { color: var(--il-warn); } .param-row[data-evidence="pending"] .param-evidence { color: var(--il-mute); } /* An unassessed row's figure is the range midpoint, not anything the model concluded. It is set quiet and its mark hollow, so a default never reads with the weight of an evidenced setting. This is evidence state, not a judgement of the value, so it keeps to the colour rule. */ .param-row[data-evidence="pending"] .param-figure { font-weight: 400; color: var(--il-mute); } .param-row[data-evidence="pending"] .param-mark-setting { box-sizing: border-box; border: 1.5px solid var(--il-mute); background: var(--il-ground); } /* Setting: the figure, the scale, the range words, the adjustment note. */ .param-value { grid-area: setting; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; } .param-figure { font-family: var(--il-mono); font-size: 1rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--il-ink); } /* The scale. The drawn parts are presentational; the real range input lies over the whole box at opacity 0, so drag, keyboard and the accessible name all come from the native control. */ .param-scale { position: relative; height: 1.25rem; border-radius: 4px; } .param-scale-line { position: absolute; top: 50%; /* Inset by half a thumb, so the end ticks sit exactly on min and max. */ left: calc(var(--il-thumb) / 2); right: calc(var(--il-thumb) / 2); height: 1px; background: var(--il-rule-strong); } /* End ticks: a measured range has marked ends. */ .param-scale-line::before, .param-scale-line::after { content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--il-rule-strong); } .param-scale-line::before { left: 0; } .param-scale-line::after { right: 0; } /* The gap between the model's proposal and the current setting. Drawn only once the two differ -- the ledger's one authored motion. */ .param-gap { position: absolute; top: 50%; left: calc(var(--il-thumb) / 2 + (100% - var(--il-thumb)) * var(--p, 0)); width: calc((100% - var(--il-thumb)) * var(--dp, 0)); /* 3px, a clear step up from the 1px line: the departure should read as a departure, not as a slightly thicker stretch of line. */ height: 3px; transform: translateY(-50%); background: var(--il-ink); opacity: 0; transition: opacity 0.16s cubic-bezier(0.22, 1, 0.36, 1); } .param-row[data-adjusted] .param-gap { opacity: 1; } .param-mark { position: absolute; top: 50%; /* `--p` (0-1) is set by sliders.js#placeMark. Mapping it onto the thumb's travel keeps the dot under the pointer at the ends of the scale, where a plain 0-100% placement drifted by half the thumb's width. */ left: calc(var(--il-thumb) / 2 + (100% - var(--il-thumb)) * var(--p, 0)); transform: translate(-50%, -50%); pointer-events: none; } .param-mark-setting { z-index: 2; width: 10px; height: 10px; border-radius: 999px; background: var(--il-ink); } .param-mark-proposal { z-index: 1; width: 8px; height: 8px; border: 1.5px solid var(--il-body); background: var(--il-ground); transform: translate(-50%, -50%) rotate(45deg); } /* In the key, the marks sit in the text flow instead of on a scale. */ .ledger-legend .param-mark { position: relative; top: auto; left: auto; transform: none; } .ledger-legend .param-mark-proposal { transform: rotate(45deg); } .param-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 3; /* A known thumb width, so the marks can be mapped onto the same travel. The browser default (16px in Chromium) is not something CSS can read. */ -webkit-appearance: none; appearance: none; background: transparent; } .param-input::-webkit-slider-runnable-track { height: 100%; background: transparent; } .param-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--il-thumb); height: 100%; border: 0; background: transparent; } .param-input::-moz-range-track { height: 100%; background: transparent; } .param-input::-moz-range-thumb { width: var(--il-thumb); height: 100%; border: 0; border-radius: 0; background: transparent; } /* The input is invisible, so keyboard focus is drawn around the whole scale. */ .param-scale:focus-within { outline: 2px solid var(--il-focus); outline-offset: 4px; } /* Range words, held level at each end of the scale. */ .param-range { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; color: var(--il-mute); } .param-adjusted { margin: 0; font-family: var(--il-mono); font-size: 0.75rem; color: var(--il-body); /* One line, always. "Adjusted from the estimated 0.62" is 230px in Geist Mono against the 224px (14rem) setting column, so it wrapped -- and since the note holds its space even while hidden, every assessed internal factor grew a line taller. Unwrapped, it runs at most ~6px into the 1.5rem gap before the case column, which it never reaches. */ white-space: nowrap; /* Always holds its line, so revealing it never moves the rows below. Hidden with visibility, which also takes it out of the accessibility tree while the setting still matches the proposal. It fades in with the gap as one authored moment. */ visibility: hidden; opacity: 0; transition: opacity 0.16s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.16s; } .param-row[data-adjusted] .param-adjusted { visibility: visible; opacity: 1; transition: opacity 0.16s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; } /* Case: the model's reasoning, then the sources behind it. */ .param-rationale { grid-area: case; min-width: 0; } .param-rationale-text { margin: 0; /* Capped measure: prose unbounded ran to 131 characters on a wide screen. */ max-width: 68ch; font-size: 0.875rem; line-height: 1.55; color: var(--il-body); text-wrap: pretty; /* The model writes this text and sometimes pastes a raw URL into it. A URL with no hyphen gives the browser no break point: one measured 219-441px past its cell -- into the neighbouring column on a wide screen, off the edge on a phone. Break inside such a token only when it cannot otherwise fit; ordinary words still wrap between words. The source line below does the same. */ overflow-wrap: anywhere; } .param-sources { margin: 0.3rem 0 0; max-width: 68ch; font-family: var(--il-mono); font-size: 0.75rem; line-height: 1.5; color: var(--il-mute); overflow-wrap: anywhere; } .param-sources a { color: var(--il-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; } .param-sources a:hover { text-decoration-color: currentColor; } .param-rationale-nosrc { margin: 0.3rem 0 0; font-family: var(--il-mono); font-size: 0.75rem; color: var(--il-warn); } /* The definition trigger and popover, in the ledger's hand. The popover is anchored to the trigger's bottom edge rather than a fixed `top: 1.5em`, so the shared 0.5em hover bridge closes the gap at ANY trigger size -- which matters because touch screens enlarge the trigger (see the coarse-pointer rule below). */ .ledger .slider-info { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; margin-left: 0; font-size: 0.875rem; color: var(--il-mute); } .ledger .slider-info svg { flex: none; width: 1em; height: 1em; } .ledger .slider-info:hover, .ledger .slider-info:focus { color: var(--il-ink); } .ledger .slider-info:focus { outline: 2px solid var(--il-focus); outline-offset: 2px; border-radius: 999px; } .ledger .rationale-tip { border: 1px solid var(--il-rule-strong); border-radius: 8px; background: var(--il-raised); top: calc(100% + 0.25em); box-shadow: var(--il-shadow); font-family: var(--il-sans); font-size: 0.875rem; color: var(--il-ink); } .ledger .rationale-tip > strong { color: var(--il-ink); font-weight: 600; } .ledger .rationale-tip .rt-info { color: var(--il-body); } @media (prefers-reduced-motion: reduce) { .param-gap, .param-adjusted, .param-row[data-adjusted] .param-adjusted, .ledger-group-toggle .chev { transition: none; } } /* Touch: the drawn scale stays slim, but the box the range input fills grows to 44px and the definition trigger to about 24px. Measured at phone width, they were 20px and 14px -- below what a finger can reliably hit. */ @media (pointer: coarse) { .param-scale { height: 2.75rem; } .ledger .slider-info { width: 1.75em; height: 1.75em; } } /* --- Wide tabs: parameters stand side by side --------------------------- */ /* With one row per line a large monitor left most of the tab empty: the case text stops at 68ch, so at 2560px every row ended about 60% of the way across. Once the tab can hold two whole rows abreast it does, and three on an ultrawide. Rows still flow in taxonomy order, left to right and then down, which is also their DOM and Tab order. The column a parameter lands in is only where the order wraps -- never a ranking. Each threshold is a row's narrowest comfortable width times the number of columns, plus the gaps between them. A row needs its name and scale columns, two cell gaps and at least 24rem of case text (about 55 characters a line): 11 + 14 + 3 + 24 = 52rem. Two columns therefore need 2 x 52 + 3 = 107rem and three need 3 x 52 + 2 x 3 = 162rem. Container queries cannot read custom properties, so these are literals: change them together with the geometry tokens. The renderer emits label copies for up to three columns (LEDGER_MAX_COLUMNS in sliders.js), and tests/ledger-wide-columns.test.mjs fails if a step here outgrows it. */ @container ledger (min-width: 107rem) { .ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--il-column-gap); } /* The lead, the column head and the group headings run across every column, so a sticky heading still pins over all of them. */ .ledger > .ledger-coverage, .ledger > .ledger-head, .ledger > .ledger-group { grid-column: 1 / -1; } /* The column head and the headings take the ledger's own columns, so each copy of the labels lands over its own column of rows. */ .ledger-head, #slidersSection h2.ledger-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--il-column-gap); } /* One pair of range words per column, on the heading's second line, pushed in by the name column and a cell gap so each pair sits exactly over its column's scales -- where the single pair sits in one column. */ .param-group-caption { grid-column: auto; grid-row: 2; width: var(--il-scale-col); margin-inline-start: calc(var(--il-name-col) + var(--il-cell-gap)); } .ledger .ledger-head-set[data-col="2"] { display: grid; } .ledger .param-group-caption[data-col="2"] { display: flex; } /* Every row keeps its closing rule. Side by side, the last row is rarely alone on its line, and a rule missing under one of two level rows reads as a gap rather than an ending. Rows sharing a line already stretch to the taller one (the ledger's default alignment), so their rules meet. */ .ledger > .param-row:last-child { border-bottom: 1px solid var(--il-rule); } } @container ledger (min-width: 162rem) { .ledger, .ledger-head, #slidersSection h2.ledger-group { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ledger .ledger-head-set[data-col="3"] { display: grid; } .ledger .param-group-caption[data-col="3"] { display: flex; } } /* --- Narrower tabs: the case drops under the name and setting ----------- */ @container ledger (max-width: 50rem) { .ledger-head { display: none; } .ledger-group, .param-row { grid-template-columns: var(--il-name-col) minmax(0, 1fr); } .param-row { grid-template-areas: "name setting" "evidence setting" "case case"; row-gap: 0.6rem; } } /* --- Narrowest: one column, in reading order ---------------------------- */ @container ledger (max-width: 30rem) { .ledger-group { grid-template-columns: 1fr; row-gap: 0.3rem; } .param-group-caption { grid-column: 1; } .param-row { grid-template-columns: 1fr; grid-template-areas: "name" "evidence" "setting" "case"; } .ledger-legend { margin-left: 0; } } /* === Source badges ======================================================= */ /* Inline chips above the analysis summary: "web research used" / */ /* "N documents". */ .source-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; } .source-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.78rem; background: var(--border); color: var(--text-muted); } .source-badge.active { background: var(--good-soft); color: var(--good); } .source-badge.inactive { background: var(--surface-muted); color: var(--text-subtle); } /* === Scenario cards (U3) ================================================= */ /* Collapsible ScenarioCards: header row (id chip, direction arrow, title, Δpp badge, ✎/× icon buttons) + an expandable drawer (description, the shifted-params table, outcome line, Adopt, FOLD UP). Rendered by app/scenarios.js. All colours come from the existing tokens so both themes work unchanged. */ .scenarios-list { margin-top: 0.85rem; display: flex; flex-direction: column; gap: 0.6rem; } .scenarios-hint { margin: 0 0 0.25rem; font-size: 0.8rem; color: var(--text-subtle); font-style: italic; } .scenario-card { background: var(--surface-muted); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: 6px; overflow: hidden; } .scenario-card.scenario-up { border-left-color: var(--good); } .scenario-card.scenario-down { border-left-color: var(--bad); } /* Adopted card: accent-tinted ring so the user can see which entry currently drives the sliders (shared visual language with .benchmark-card.adopted). */ .scenario-card.adopted { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; } /* Header row — the expand/collapse affordance. */ .scenario-card-head { display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.85rem; cursor: pointer; font-weight: 600; font-size: 0.95rem; } .scenario-card-head:hover { background: var(--surface); } .scenario-card-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .scenario-id-chip { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.78rem; font-weight: 700; color: var(--accent); } .scenario-up .scenario-arrow { color: var(--good); } .scenario-down .scenario-arrow { color: var(--bad); } /* Title takes the slack so the Δpp badge + icons sit flush right. */ .scenario-card-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Projected Δpp vs baseline (filled async from /score/batch). */ .scenario-pp { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.82rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; } .scenario-pp.pos { color: var(--good); } .scenario-pp.neg { color: var(--bad); } /* ✎ / × icon buttons (shared style with the benchmark cards). */ .scenario-card-actions, .benchmark-card-actions { display: inline-flex; gap: 0.15rem; } .scenario-icon-btn, .benchmark-icon-btn { background: none; border: 0; padding: 0.1rem 0.3rem; font-size: 0.9rem; line-height: 1; color: var(--text-subtle); cursor: pointer; border-radius: 4px; } .scenario-icon-btn:hover, .benchmark-icon-btn:hover { color: var(--accent); background: var(--accent-soft); } /* --- Drawer ------------------------------------------------------------- */ .scenario-drawer, .benchmark-drawer { padding: 0.75rem 0.85rem 0.85rem; border-top: 1px solid var(--border); cursor: auto; } .scenario-desc, .benchmark-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; } .scenario-desc p, .benchmark-desc p { margin: 0 0 0.4rem; } /* Shared shifted-params / comparison table pattern. Column widths are fixed for the numeric cells; the wrapper scrolls horizontally on narrow screens (min-width on the rows) so the cards never overflow the panel. */ .scenario-table, .benchmark-table { margin-top: 0.75rem; overflow-x: auto; } .scenario-table-head, .scenario-tr, .benchmark-table-head, .benchmark-tr { display: flex; align-items: center; gap: 0.5rem; min-width: 30rem; /* horizontal scroll instead of squashing at ~900px */ border-bottom: 1px solid var(--border); padding: 0.3rem 0; } .scenario-table-head, .benchmark-table-head { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-subtle); } .scenario-th.col-name, .scenario-td.col-name, .benchmark-th.col-name, .benchmark-td.col-name { flex: 1; min-width: 0; } .scenario-th.col-num, .scenario-td.col-num { width: 6.5rem; flex: none; } .benchmark-th.col-num, .benchmark-td.col-num { width: 6.5rem; flex: none; } .scenario-tr, .benchmark-tr { font-size: 0.85rem; } .scenario-td-code, .benchmark-td-code { color: var(--text-subtle); font-size: 0.72rem; } .scenario-td.mono, .benchmark-td.mono { font-family: ui-monospace, SFMono-Regular, monospace; } .scenario-td.strong, .benchmark-td.strong { font-weight: 700; } .scenario-td.muted, .benchmark-td.muted { color: var(--text-muted); } /* Favourability colouring: pos = favourable move, neg = unfavourable (an elasticity DECREASE is favourable — computed in JS per param direction). */ .scenario-td.pos, .benchmark-td.pos { color: var(--good); } .scenario-td.neg, .benchmark-td.neg { color: var(--bad); } /* Outcome line: Baseline P_success X% → Scenario P_success Y%. */ .scenario-outcome { margin-top: 0.75rem; font-size: 0.88rem; } .scenario-outcome strong { font-family: ui-monospace, SFMono-Regular, monospace; } .scenario-outcome strong.pos { color: var(--good); } .scenario-outcome strong.neg { color: var(--bad); } /* Adopt button row + FOLD UP footer (shared with benchmark cards). */ .scenario-adopt-row, .benchmark-adopt-row { margin-top: 0.6rem; display: flex; justify-content: flex-end; } .scenario-adopt-btn, .benchmark-adopt-btn { font-size: 0.78rem; font-weight: 700; padding: 0.45rem 1.1rem; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; } .scenario-adopt-btn:hover, .benchmark-adopt-btn:hover { border-color: var(--accent); color: var(--accent); } /* Adopted state: filled accent + revert affordance in the label. */ .scenario-adopt-btn.active, .benchmark-adopt-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-on); } .scenario-foldup, .benchmark-foldup { margin-top: 0.75rem; width: 100%; border: 1px solid var(--border-strong); border-radius: 6px; background: none; padding: 0.45rem; text-align: center; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; color: var(--text-muted); cursor: pointer; } .scenario-foldup:hover, .benchmark-foldup:hover { border-color: var(--accent); color: var(--accent); } /* === Benchmark cards (U4) ================================================ */ /* Collapsible BenchmarkCards: #rank / title / p_success% header + drawer (rationale, Sources line, comparison line, Adopt, full 14-param table). Rendered by app/peers.js; most drawer styles are shared with the scenario selectors above. */ .peers-list { margin-top: 0.85rem; display: flex; flex-direction: column; gap: 0.6rem; } .benchmark-card { background: var(--surface-muted); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .benchmark-card.adopted { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; } .benchmark-card-head { display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.85rem; cursor: pointer; font-weight: 600; font-size: 0.95rem; } .benchmark-card-head:hover { background: var(--surface); } .benchmark-card-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .benchmark-rank { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.78rem; color: var(--text-subtle); } .benchmark-card-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .benchmark-prob { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.85rem; font-weight: 700; color: var(--accent); white-space: nowrap; } /* Muted "Sources: …" line under the description; only http(s) entries are links (escaping + URL vetting happens in peers.js#buildSourcesLine). */ .benchmark-sources { margin-top: 0.4rem; font-size: 0.78rem; color: var(--text-subtle); overflow-wrap: anywhere; /* long URLs must not overflow the card */ } .benchmark-sources a { color: var(--text-subtle); text-decoration: underline; } .benchmark-sources a:hover { color: var(--accent); } /* " X% vs Your baseline Y% (you trail/lead by N pp)" line. */ .benchmark-compare { margin-top: 0.75rem; font-size: 0.88rem; } .benchmark-compare .cmp-name { font-weight: 700; } .benchmark-compare strong { font-family: ui-monospace, SFMono-Regular, monospace; } .benchmark-compare .cmp-pos { color: var(--good); } .benchmark-compare .cmp-neg { color: var(--bad); } .benchmark-compare .cmp-neutral { color: var(--text-muted); } /* === Monte Carlo trigger + modal ========================================= */ /* The trigger is the flagship action in its section, and now says so with the system's own accent rather than an orange-to-red gradient. What it was: `linear-gradient(135deg, #f97316, #dc2626)` with `!important` on three declarations. That broke the visual system in four ways at once — it was the only gradient in the stylesheet, it hard-coded two colours so neither theme reached it, it introduced a second accent hue, and white on its lighter stop measured ~2.4:1. It also read as an alarm on a control that merely opens a sensitivity analysis. The `!important` flags existed only to beat the `.btn-*` class it ships alongside; matching that specificity instead removes the need for them. */ .mc-trigger { background: var(--accent); color: var(--accent-on); border: 0; font-weight: 700; } .mc-trigger:hover:not(:disabled) { background: var(--accent-strong); } /* === Dialogs: the shared shell ============================================ */ /* Depth and radius for every