/* ─────────────────────────────────────────────────────────────── common.css — petricor design system Acid Lab v3 in a single Outfit type system (BRD-3) with a mineral moss secondary palette woven through. Same selector contract — drop-in. Cream paper ground, hairline rules, chartreuse acid CTA preserved. Lowercase is reserved for the wordmark; everything else keeps case. One family on one scale: pick a --type-* tier, never a raw px/family. ─────────────────────────────────────────────────────────────── */ /* ── Fonts (BRD-4: self-hosted, no third-party CDN) ── Outfit served from petricor's own origin (/fonts/*.woff2) — no render-blocking call to Google's font CDN. One variable WOFF2 carries the whole 300–700 wght axis; subset to the rendered glyph set (Latin-1 + Latin Extended-A + combining marks + the punctuation/arrows/✓ Outfit actually covers). Pages preload this file in their ; the glyphs Outfit lacks (Greek, box-drawing, geometric) fall back to system fonts exactly as before. */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; /* variable wght axis (we use 300–700) */ font-display: swap; src: url('/fonts/outfit-subset.woff2') format('woff2'); } /* ── 1a. Design tokens ── */ :root { /* Surfaces — light cream-grey paper */ --bg: #F2F1EC; --bg-dark: #E5E4DD; --bg-light: #F7F6F1; --surface: #FFFFFF; --bg-2: #ECEBE5; /* Borders & rules — numeric scale canonical; semantic name aliases */ --line: #DDDCD4; --line-2: #C7C6BC; --border-muted: var(--line-2); /* Ink scale — numeric canonical; semantic names alias */ --ink: #15170F; --ink-2: #3D403A; --ink-3: #6E7167; --ink-4: #9C9E92; --ink-soft: var(--ink-2); --ink-muted: var(--ink-3); /* Accent — chartreuse acid (preserved from Acid Lab v3). --acid family is canonical; --accent aliases for legacy compat. */ --acid: #E8FF00; --acid-deep: #C8DD00; --acid-soft: #F4FF80; --acid-glow: rgba(232, 255, 0, 0.55); --acid-print: #C8DD00; /* projector/PDF/screenshot-safe; semantic alias for compressed-export contexts where #E8FF00 may degrade to banana-yellow */ --accent: var(--acid); --accent-deep: var(--acid-deep); --accent-soft: var(--acid-soft); --accent-line: var(--acid-glow); --accent-glow: var(--acid-glow); /* Mineral moss palette — petricor secondary tones. Used for quiet emphasis: review verbs, conjectural edges, section-break rules, and the watch-item border. */ --moss: #5E7050; --moss-deep: #2F3A28; --lichen: #A4B098; --rain: #B8C2BE; --moss-bg: rgba(94, 112, 80, 0.08); --moss-border: rgba(94, 112, 80, 0.32); /* Status colors */ --red: #D2401F; --red-bg: rgba(210, 64, 31, 0.10); --red-border: rgba(210, 64, 31, 0.35); --green: #2E7A3A; --green-bg: rgba(46, 122, 58, 0.10); --green-border: rgba(46, 122, 58, 0.35); --amber: #B07A1A; --amber-bg: rgba(176, 122, 26, 0.10); --amber-border: rgba(176, 122, 26, 0.35); /* Compatibility extras */ --gray: #6E7167; --blue: #3F6BB0; --blue-bg: rgba(63, 107, 176, 0.06); --orange: #C46A1A; --orange-bg: rgba(196, 106, 26, 0.06); /* Geometry */ --radius: 4px; --radius-sm: 3px; --radius-lg: 6px; /* Shadows */ --shadow: 0 1px 0 var(--line), 0 1px 2px rgba(0,0,0,0.02); --shadow-md: 0 1px 0 var(--line), 0 8px 24px rgba(0,0,0,0.04); --shadow-subtle: 0 1px 0 var(--line); --shadow-raised: 0 1px 0 var(--line), 0 8px 24px rgba(0,0,0,0.04); --shadow-raised-lg: 0 1px 0 var(--line), 0 12px 32px rgba(0,0,0,0.06); --shadow-raised-xl: 0 1px 0 var(--line), 0 16px 40px rgba(0,0,0,0.08); --shadow-inset: inset 0 0 0 1px var(--line); /* Acid Lab signature retained */ --shadow-acid: 6px 6px 0 var(--acid), 6px 6px 0 1.5px var(--ink); /* Petricor mossy alternate — quieter, for secondary surfaces */ --shadow-moss: 6px 6px 0 var(--lichen), 6px 6px 0 1.5px var(--moss-deep); /* Type scale (BRD-3) — one family, one scale. Pick a tier, never a px. Regular text = 400, emphasis + labels = 600. Numbers use .tnum so columns still align. Reference impl: today.html (2026-06-13). */ --type-display: 600 28px/1.2 'Outfit', sans-serif; /* page h1 */ --type-title: 600 17px/1.3 'Outfit', sans-serif; /* card + section titles */ --type-body: 400 14px/1.5 'Outfit', sans-serif; /* sentences, actual/expected line */ --type-meta: 400 13px/1.45 'Outfit', sans-serif; /* rows, drawers, tables, secondary */ --type-label: 600 11px/1 'Outfit', sans-serif; /* chips, badges, buttons, section/table headers */ --ls-label: 0.08em; } /* ── 1b. Reset & body base ── */ * { margin: 0; padding: 0; box-sizing: border-box; } /* tabular figures wherever digits must line up under Outfit (BRD-3) */ .tnum { font-variant-numeric: tabular-nums; } body { font-family: 'Outfit', system-ui, sans-serif; font-weight: 400; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; line-height: 1.6; background-image: radial-gradient(900px 500px at 88% -10%, rgba(232,255,0,0.10), transparent 60%), radial-gradient(700px 480px at 4% 110%, rgba(94,112,80,0.06), transparent 60%); } /* ── 1c. Wordmark (the only lowercase moment in the system) ── */ .petricor-wordmark { font-family: 'Outfit', sans-serif; font-weight: 300; letter-spacing: -0.018em; text-transform: lowercase; color: var(--ink); } /* ── 1d. Page header ── */ .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 32px; } .page-header > div:first-child { flex: 1 1 auto; min-width: 0; } .page-header h1 { font: 600 30px/1 'Outfit', sans-serif; letter-spacing: -0.025em; color: var(--ink); margin: 14px 0 0; } .page-header .ident { font: var(--type-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center; gap: 10px; } .page-header .ident::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 2px rgba(232,255,0,0.25), 0 0 12px var(--acid-glow); } .page-header .meta-block { flex: 0 0 auto; text-align: right; } .page-header .page-meta, .page-header .meta { font: var(--type-meta); color: var(--ink-3); letter-spacing: 0.04em; } .page-header .page-meta b, .page-header .meta b { color: var(--ink-2); font-weight: 500; } .page-header .page-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 12px; } /* ── 1e. Section scaffold ── */ .section { margin-top: 46px; margin-bottom: 0; } .section + .section { margin-top: 46px; } .section-label { font: var(--type-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .section-label::before { content: ""; flex: 0 0 24px; height: 1px; background: var(--line-2); } .section-label::after { content: ""; flex: 1; height: 1px; background: var(--line); } .section-count { background: var(--acid); color: var(--ink); padding: 3px 8px; border-radius: 3px; font: var(--type-label); letter-spacing: 0.06em; } /* ── 1f. Pills & buttons ── */ .view-pill { display: inline-block; font: 500 13px/1 'Outfit', sans-serif; padding: 8px 16px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; transition: all 0.15s ease; } .view-pill:hover { color: var(--ink); border-color: var(--ink); } .view-pill.active { background: var(--ink); color: var(--acid); border-color: var(--ink); } .filter-pill, .pill { font: var(--type-label); letter-spacing: 0.06em; padding: 6px 10px; border-radius: 3px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; color: var(--ink-2); transition: all 0.12s ease; white-space: nowrap; text-transform: uppercase; } .filter-pill:hover, .pill:hover { border-color: var(--ink); color: var(--ink); } .filter-pill.active, .pill.active { background: var(--ink); color: var(--acid); border-color: var(--ink); } .filter-pill .count, .pill .ct { font-weight: 400; opacity: 0.6; margin-left: 0.3em; } .filter-pill.active .count, .pill.active .ct { color: rgba(232, 255, 0, 0.6); } .btn { font: var(--type-label); letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 18px; border-radius: 4px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer; transition: all 0.14s; } .btn:hover { border-color: var(--ink); background: var(--bg-2); } .btn.primary { background: var(--acid); color: var(--ink); border-color: var(--acid-deep); box-shadow: 0 0 0 0 var(--acid-glow); } .btn.primary:hover { background: var(--acid-deep); border-color: var(--acid-deep); box-shadow: 0 0 0 4px var(--acid-glow); } .btn.primary[disabled] { background: var(--bg-2); color: var(--ink-4); border-color: var(--line); cursor: not-allowed; box-shadow: none; } .btn.ghost { border-color: transparent; background: transparent; color: var(--ink-3); } .btn.ghost:hover { color: var(--ink); background: transparent; border-color: transparent; } /* moss-tinted secondary CTA — for review/defer when emphasis is wanted without acid */ .btn.moss { background: var(--moss-bg); color: var(--moss-deep); border-color: var(--moss-border); } .btn.moss:hover { background: var(--moss); color: #fff; border-color: var(--moss); } /* ── 1g. Badges ── */ .confidence-badge { display: inline-block; font: var(--type-label); text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 8px; border-radius: 3px; vertical-align: middle; } .confidence-badge.high { background: var(--green-bg); color: var(--green); box-shadow: inset 0 0 0 1px var(--green-border); } .confidence-badge.structural { background: var(--ink); color: var(--acid); box-shadow: inset 0 0 0 1px var(--ink); } .confidence-badge.medium { background: var(--amber-bg); color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber-border); } .confidence-badge.low { background: var(--bg-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); } .owner-badge { display: inline-block; font: var(--type-label); text-transform: uppercase; letter-spacing: 0.3px; padding: 4px 8px; border-radius: 3px; background: var(--bg-2); color: var(--ink-3); border: 1px solid var(--line); vertical-align: middle; margin-left: 4px; } /* ── 1h. Card ── */ .card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 22px 24px; margin-bottom: 14px; transition: border-color .15s, transform .15s, box-shadow .15s; } .card:hover { border-color: var(--line-2); box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(0,0,0,0.04); } .card.resolved { opacity: 0.45; } .card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; font: var(--type-label); letter-spacing: 0.12em; text-transform: uppercase; } .card-top > * { white-space: nowrap; } .card-headline { font: 500 22px/1.3 'Outfit', sans-serif; letter-spacing: -0.018em; color: var(--ink); margin: 0 0 12px; } .card-reco { font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 14px; } .card-shape-hint { display: inline-block; white-space: nowrap; font: var(--type-label); color: var(--ink-2); letter-spacing: 0.06em; margin: -2px 0 16px; padding: 6px 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 3px; text-transform: uppercase; } .card-shape-hint.one-way { color: var(--red); border-color: var(--red); background: var(--red-bg); } .card-band-note, .card-regime-note { font: var(--type-meta); color: var(--red); margin: -4px 0 14px; letter-spacing: 0.02em; text-transform: uppercase; } .card-regime-note { color: var(--amber); } .card-rec-path { font: var(--type-label); color: var(--ink-3); letter-spacing: 0.06em; margin: 0 0 12px; text-transform: uppercase; } .card-rec-path .path-arrow { color: var(--ink-4); margin: 0 6px; } .card-rec-path .path-node { color: var(--ink-2); } /* CAL-1 Phase C — calibration drift chip on recommendation cards. Renders only when one or more edges in the recommended path carry a driftSignal. Informational, not blocking — `conviction-over-confidence` says be wrong fast, not hedge-everything. */ .cal-drift { margin-top: 12px; padding: 8px 10px 8px 10px; border-left: 2px solid var(--ink-3); background: var(--bg-2); font: 400 13px/1.5 'Outfit', sans-serif; color: var(--ink-2); } .cal-drift-chip { display: inline-block; margin-right: 4px; font-size: 14px; } .cal-drift-edge { display: inline; margin-right: 6px; } .cal-drift-edge b { color: var(--ink); font-weight: 600; } /* BET-2 Phase B.2 — predicted-Δ chip on recommendation cards. Renders the system-proposed bet shape (target + magnitude + lag + confidence) inline so the operator sees the prediction before committing. Mirrors `.cal-drift` line weight; one short sentence. */ .card-predicted-delta { font: 400 13px/1.5 'Outfit', sans-serif; color: var(--ink-2); margin: 0 0 12px; } .card-predicted-delta .pd-label { color: var(--ink-3); font-weight: 600; margin-right: 4px; } .card-predicted-delta b { color: var(--ink); font-weight: 600; } .card-predicted-delta .pd-conf { color: var(--ink-3); font-style: italic; margin-left: 4px; } /* MDL-3 Phase C — coverage caption on surfaces that consume propagation predictions (brief reco cards, scenario impacts, bet drawer). Renders when measuredFraction < 0.8 to disclose that the prediction rests on mostly-unmeasured edges. Shared so threshold/copy tuning lands in one place. */ .mdl3-coverage-caption { font: var(--type-meta); color: var(--ink-3); margin-top: 3px; font-weight: normal; } /* AWB-1 Phase F.1 — "marker, not a lever" callout. Renders in place of the predicted-Δ chip + Stage/Investigate CTAs when the path to the target runs through a marker/confounded edge: the association is real but acting on the source won't move the target (the L+ self-selection case). Amber caution palette (shared) — this is a stop sign, not a recommendation. */ .card-marker-note { font: 400 13px/1.5 'Outfit', sans-serif; color: var(--ink-2); margin: 0 0 12px; padding: 8px 12px; background: var(--amber-bg); border-left: 3px solid var(--amber-border); border-radius: 3px; } .card-marker-note b { color: var(--amber); font-weight: 600; } /* BET-2 Phase B.3 + B.4 — inline bet drawer on the recommendation card. Hidden until .open. Mirrors the .reason-form shape (border-left rule, stacked rows, inline labels). Shift% live-rescales predicted Δ. */ .bet-form { display: none; margin-top: 12px; padding: 12px 14px; border-left: 2px solid var(--ink-2); background: var(--bg-2); font: 400 13px/1.5 'Outfit', sans-serif; } .bet-form.open { display: block; } .bet-form-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .bet-form-label { font-weight: 600; color: var(--ink-2); min-width: 110px; } .bet-form-label b { color: var(--ink); font-weight: 600; } .bet-form-hint { color: var(--ink-3); font-weight: 400; font-style: italic; margin-left: 4px; font-size: 12px; } .bet-form input[type="number"], .bet-form input[type="text"] { font: 400 13px/1.4 'Outfit', sans-serif; padding: 4px 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 3px; min-width: 90px; } .bet-form input[type="text"] { min-width: 240px; } .bet-form .bet-unit { color: var(--ink-3); } .bet-rescaled-hint { color: var(--ink-3); font-style: italic; font-size: 12px; margin-left: 4px; } .bet-form-actions { display: flex; gap: 8px; margin-top: 4px; } .bet-form-error { color: var(--red); margin-bottom: 8px; font-size: 12.5px; } .bet-committed { display: inline-flex; align-items: center; gap: 10px; } .bet-committed-label { font: var(--type-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); } .bet-committed-label::before { content: '✓'; margin-right: 6px; color: var(--green); } /* GOV-2 Phase C — peer-authored / proposal-pending variants suppress the ✓ since the bet's state is no longer "settled-and-mine". */ .bet-committed[data-gov2-state="peer-mine-proposed"] .bet-committed-label::before, .bet-committed[data-gov2-state="peer-third-proposed"] .bet-committed-label::before { content: '◌'; color: var(--amber); } .bet-disagree-btn { padding: 4px 10px; font-size: 12px; } /* GOV-2 Phase C — yellow review band on the author's own bet when a peer has filed a supersede proposal. Sits in place of the committed indicator. */ .bet-review-band { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--amber-bg); border-left: 3px solid var(--amber); border-radius: 4px; margin-top: 6px; } .bet-review-summary { display: flex; flex-direction: column; gap: 4px; } .bet-review-head { color: var(--ink); font-weight: 600; font-size: 13px; } .bet-review-reason { color: var(--ink-2); font-size: 12.5px; font-style: italic; } .bet-review-actions { display: flex; gap: 8px; flex-wrap: wrap; } .bet-review-error { color: var(--red); font-size: 12.5px; } /* GOV-2 Phase C — Disagree / Counter drawer (peer-files-supersede, author-counters). Lighter shell than the BET-2 .bet-form drawer — only predicted-Δ + reason. */ .bet-supersede-drawer { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 10px 12px; background: var(--bg-2); border-left: 2px solid var(--ink-3); border-radius: 4px; width: 100%; } .bet-supersede-title { font-weight: 600; color: var(--ink); font-size: 13px; } .bet-supersede-field { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-2); } .bet-supersede-field input[type="number"], .bet-supersede-field textarea { font: var(--type-meta); padding: 6px 8px; background: var(--bg); color: var(--ink); border: 1px solid var(--ink-3); border-radius: 3px; } .bet-supersede-field textarea { resize: vertical; min-height: 40px; } .bet-supersede-error { color: var(--red); font-size: 12.5px; } .bet-supersede-actions { display: flex; gap: 8px; } /* GOV-2 Phase C — small chip on bet cards in constraints.html bets pane when a supersede proposal is pending. Surfaces in third-operator + peer- proposer views (the author view gets the full review band instead). */ .bet-supersede-pending-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font: var(--type-label); text-transform: uppercase; letter-spacing: 0.05em; color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-border); border-radius: 3px; } /* BET-2 Phase B.5 — inline analyst-routing drawer on decision cards. */ .routing-form { display: none; margin-top: 12px; padding: 10px 12px; border-left: 2px solid var(--ink-3); background: var(--bg-2); font: 400 13px/1.5 'Outfit', sans-serif; } .routing-form.open { display: block; } .routing-form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .routing-form-label { font-weight: 600; color: var(--ink-2); font-size: 12.5px; } .routing-form input[type="text"], .routing-form textarea { font: 400 13px/1.4 'Outfit', sans-serif; padding: 6px 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 3px; resize: vertical; } .routing-form-actions { display: flex; gap: 8px; margin-top: 4px; } .routing-form-error { color: var(--red); margin-bottom: 8px; font-size: 12.5px; } .card-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; } /* Verb pills */ .verb { padding: 5px 9px; border-radius: 3px; background: var(--ink); color: #fff; } .verb.approve { background: var(--acid); color: var(--ink); } .verb.act { background: var(--acid); color: var(--ink); } .verb.investigate { background: var(--ink); color: var(--acid); } .verb.confirm { background: var(--green); color: #fff; } .verb.review { background: var(--moss); color: #fff; } /* Conviction marker */ .conviction { color: var(--ink-3); } .conviction.high { color: var(--ink); position: relative; padding-left: 14px; } .conviction.high::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 8px var(--acid-glow); } .conviction.medium { color: var(--moss-deep); position: relative; padding-left: 14px; } .conviction.medium::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--lichen); } /* Door */ .door { padding: 5px 9px; border-radius: 3px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); } .door.one-way { border-color: var(--red); color: var(--red); background: var(--red-bg); } /* Edge / band chips */ .edge-chip, .band-chip { padding: 5px 9px; border-radius: 3px; background: transparent; border: 1px dashed var(--line-2); color: var(--ink-3); font: var(--type-label); letter-spacing: 0.06em; text-transform: uppercase; } .edge-chip.has-broken, .band-chip.breaches { background: var(--red-bg); border-color: transparent; color: var(--red); } .edge-chip.has-conjectural, .band-chip.approaching { background: var(--moss-bg); border-color: transparent; color: var(--moss-deep); } /* CON-5 — named-concern chip. Distinct amber accent so a card touched by an active concern reads apart from the moss band-chips / red breach chips. */ .concern-chip { padding: 5px 9px; border-radius: 3px; background: var(--amber-bg); border: 1px solid var(--amber-border); color: var(--amber); font: var(--type-label); letter-spacing: 0.06em; text-transform: uppercase; } /* Resolution row */ .resolution { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--ink-3); font: var(--type-label); letter-spacing: 0.06em; text-transform: none; } .resolution .check { color: var(--green); } .undo-link { background: none; border: 0; padding: 0; font: var(--type-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .undo-link:hover { color: var(--ink); } /* ── 1i. Card details ── */ .card-details { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 14px; } .details-toggle { background: none; border: 0; padding: 0; white-space: nowrap; font: var(--type-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); cursor: pointer; } .details-toggle::before { content: "▸ "; color: var(--ink-3); } .details-toggle.open::before { content: "▾ "; color: var(--ink-3); } .details-toggle:hover { color: var(--ink); } .details-toggle:hover::before { color: var(--moss); } .details-body { display: none; margin-top: 14px; font-size: 13px; color: var(--ink-2); line-height: 1.6; } .details-body.open { display: block; } .details-body p { margin: 0 0 10px; } .details-body .label { font: var(--type-label); color: var(--ink-3); letter-spacing: 0.14em; text-transform: uppercase; margin-right: 8px; } .evidence-list { margin: 0; padding: 0; list-style: none; } .evidence-list li { padding: 8px 0; border-bottom: 1px dashed var(--line-2); display: flex; justify-content: space-between; gap: 16px; font-size: 12.5px; } .evidence-list li:last-child { border-bottom: none; } .evidence-node { color: var(--ink); font-family: 'Outfit', sans-serif; font-size: 12px; } .evidence-obs { color: var(--ink-3); text-align: right; } /* ── 1j. Brief preamble ── */ .brief-preamble { position: relative; margin: 24px 0 8px; padding: 22px 26px 22px 30px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--acid); font-family: 'Outfit', sans-serif; font-style: italic; font-weight: 300; font-size: 17px; line-height: 1.5; color: var(--ink-2); letter-spacing: -0.005em; } .brief-preamble::before { content: "//"; position: absolute; left: 8px; top: 18px; font: var(--type-label); color: var(--ink-3); font-style: normal; } /* moss-flavored variant — for follow-up briefs / quieter framing */ .brief-preamble.moss { border-left-color: var(--lichen); } /* ── 1k. The One Thing — signature acid surface ── Two forms: descendant (legacy section.one-thing wrapper, when The One Thing card returns) and direct (.card.one-thing on the first Ratify card, 2026-05-23 — promotes the highest-stakes anomaly question into the parked One Thing slot). */ .one-thing .card, .card.one-thing { border: 1.5px solid var(--ink); background: linear-gradient(180deg, rgba(232,255,0,0.18), transparent 65%), var(--surface); box-shadow: var(--shadow-acid); } .one-thing .card-headline, .card.one-thing .card-headline { color: var(--ink); } /* moss alternate — same gesture in mineral key, for secondary priority */ .after-rain .card { border: 1.5px solid var(--moss-deep); background: linear-gradient(180deg, rgba(164,176,152,0.20), transparent 65%), var(--surface); box-shadow: var(--shadow-moss); } .after-rain .card-headline { color: var(--moss-deep); } /* ── 1l. Watch / empty states ── */ .watch-item { padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--lichen); border-radius: 4px; margin-bottom: 10px; } .watch-headline { font: 500 15px/1.3 'Outfit', sans-serif; color: var(--ink); margin: 0 0 4px; } .watch-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin: 0; } .empty { padding: 18px 20px; text-align: center; background: var(--bg-2); border: 1px dashed var(--line-2); border-radius: 4px; color: var(--ink-3); font: var(--type-meta); letter-spacing: 0.04em; } /* ── 1m. Tables ── */ table { width: 100%; border-collapse: collapse; font-size: 0.82rem; font-family: 'Outfit', sans-serif; } thead th { text-align: right; padding: 0.5rem 0.8rem; font: var(--type-label); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); border-bottom: 1px solid var(--line-2); white-space: nowrap; } thead th:first-child { text-align: left; } tbody tr { transition: background 150ms ease; border-bottom: 1px solid var(--line); } tbody tr:hover { background: var(--bg-2); } tbody tr.row-even { background: var(--bg-2); } tbody tr.row-even:hover { background: var(--bg-2); } tbody tr.depth-0 { font-weight: 600; } tbody tr.section-break td { border-top: 1px solid var(--lichen); } td { padding: 0.55rem 0.8rem; white-space: nowrap; } td:first-child { text-align: left; color: var(--ink-2); } td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; font-family: 'Outfit', sans-serif; font-size: 0.78rem; } .depth-0 td:first-child { padding-left: 0.8rem; color: var(--ink); } .depth-1 td:first-child { padding-left: 2rem; } .depth-2 td:first-child { padding-left: 3.2rem; } .depth-3 td:first-child { padding-left: 4.4rem; } /* Dense variant — the tighter row rhythm the financial comparison tables (weekly / monthly / annual) opt into with ``. Scoped to the class so it can't touch the roomier default other surfaces' tables ride. */ table.dense thead th { padding-top: 0.3rem; padding-bottom: 0.3rem; } table.dense td { padding-top: 0.32rem; padding-bottom: 0.32rem; } .pct, .yoy { font: 500 0.78rem/1 'Outfit', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .pct.up, .yoy.up { color: var(--green); } .pct.down, .yoy.down { color: var(--red); } .pct.flat, .yoy.flat { color: var(--amber); } .muted { color: var(--ink-3); } /* ── 1n. Loading & error ── */ .loading { text-align: center; padding: 60px 20px; color: var(--ink-3); font: 400 16px/1 'Outfit', sans-serif; } .error { text-align: center; padding: 40px 20px; color: var(--red); font: 500 15px/1 'Outfit', sans-serif; } /* ── 1o. Utility ── */ .acid-mark { background: linear-gradient(transparent 60%, var(--acid-soft) 60%); padding: 0 2px; } .moss-mark { background: linear-gradient(transparent 60%, rgba(164,176,152,0.45) 60%); padding: 0 2px; } /* ── 1p. Control Room surface — outcome stripe + fix zone + fix-this CTA ── Lifted from constraints.html (BRD-1.1 Phase 2; originally landed 2026-05-03 in 81b4c37, accidentally dropped 2026-05-15 in 5e80bc5, restored 2026-05-17 with Space Grotesk → Outfit refont). The .lever / .lever-* family is intentionally NOT lifted: scenario.html and constraints.html share the class name but use different accents (acid-deep vs. ink) to reflect free-pull vs. governance posture. */ /* Outcome stripe — latest closed-directive verdicts on a band card. */ .outcome-stripe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-2); } .outcome-stripe-label { font: var(--type-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-right: 2px; } .outcome-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: var(--radius-sm); font: var(--type-label); letter-spacing: 0.06em; cursor: default; } .outcome-chip::before { content: ''; width: 5px; height: 5px; border-radius: 50%; } .outcome-chip.hit { background: var(--green-bg); color: var(--green); } .outcome-chip.hit::before { background: var(--green); } .outcome-chip.partial { background: var(--amber-bg); color: var(--amber); } .outcome-chip.partial::before { background: var(--amber); } .outcome-chip.miss { background: var(--red-bg); color: var(--red); } .outcome-chip.miss::before { background: var(--red); } .outcome-chip.abandoned { background: var(--bg-2); color: var(--ink-3); } .outcome-chip.abandoned::before { background: var(--ink-3); } .outcome-chip-date { font-weight: 500; opacity: 0.85; } /* Fix-this CTA — opens the per-card fix zone. Ink bg + acid text reads as a "verb.investigate" pill in the kit's verb taxonomy. */ .fix-btn { font: var(--type-label); letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--ink); cursor: pointer; background: var(--ink); color: var(--acid); transition: background .14s, color .14s; } .fix-btn:hover { background: var(--ink-2); } .fix-btn.muted { background: transparent; color: var(--ink-3); border-color: var(--line-2); } .fix-btn.muted:hover { color: var(--ink); border-color: var(--ink); background: var(--bg-2); } .fix-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Fix zone — inline editor opened inside an expanded card. */ .fix-zone { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line-2); } .fix-zone-title { font: 600 16px/1.3 'Outfit', sans-serif; letter-spacing: -0.018em; margin: 0 0 4px; color: var(--ink); } .fix-zone-sub { font: var(--type-meta); letter-spacing: 0.04em; color: var(--ink-3); margin: 0 0 12px; } .fix-panel-title { font: 600 16px/1.3 'Outfit', sans-serif; letter-spacing: -0.018em; margin: 0; } .fix-panel-target { font: var(--type-label); letter-spacing: 0.04em; color: var(--ink-3); } .fix-panel-chip-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); margin: 8px 0 14px; } .fix-panel-chip-row .status-tag { margin-right: 0; } .fix-panel-empty { font: var(--type-meta); letter-spacing: 0.04em; color: var(--ink-3); padding: 6px 0 12px; } .fix-panel-empty a { color: inherit; text-decoration: underline dotted; } .fix-group-heading { font: var(--type-label); color: var(--ink); text-transform: uppercase; letter-spacing: 0.14em; margin: 14px 0 6px; } .fix-group-heading:first-of-type { margin-top: 6px; } /* Fix-zone lever rail — distinct from scenario.html's .lever family. */ .fix-lever { display: grid; grid-template-columns: 200px 1fr 80px; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px dotted var(--line-2); } .fix-lever:last-of-type { border-bottom: none; } .fix-lever-label { font: 500 13px/1.4 'Outfit', sans-serif; color: var(--ink); } .fix-lever-baseline { font: var(--type-meta); letter-spacing: 0.04em; color: var(--ink-3); display: block; } .fix-lever input[type=range] { width: 100%; accent-color: var(--ink); } .fix-lever-value { font: 600 14px/1 'Outfit', sans-serif; font-variant-numeric: tabular-nums; color: var(--ink); text-align: right; } .fix-lever-value.zero { color: var(--ink-3); font-weight: 400; } .fix-propose { margin-top: 14px; padding-top: 14px; border-top: 1px dotted var(--line-2); } .fix-reason-row { margin-bottom: 10px; } .fix-reason-row label { display: block; font: var(--type-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; } .fix-reason-row textarea { width: 100%; font: 400 13px/1.5 'Outfit', sans-serif; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 8px 10px; box-sizing: border-box; resize: vertical; min-height: 48px; } .fix-reason-row textarea:focus { outline: none; border-color: var(--acid); box-shadow: 0 0 0 3px var(--acid-glow); } .fix-actions { display: flex; justify-content: flex-end; gap: 10px; } .fix-banner { font: var(--type-meta); letter-spacing: 0.04em; padding: 8px 12px; border-radius: var(--radius); margin-top: 10px; } .fix-banner.success { background: var(--green-bg); color: var(--green); } .fix-banner.error { background: var(--red-bg); color: var(--red); } /* ── 1q. Shared kit primitives — state pills + dotted link treatment ── Bundled with the Control Room restore (BRD-1.1) so diagnostics.html can adopt the same vocabulary without a second kit round-trip. .state-pill originated in diagnostics.html and is consumed by both surfaces; dotted link is the kit's standard link affordance for inline references. */ .state-pill { display: inline-flex; align-items: center; font: var(--type-label); text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 7px; border-radius: 3px; border: 1px solid var(--line); color: var(--ink-2); background: var(--surface); } .state-pill[data-state="break"], .state-pill[data-state="broken"] { color: var(--red); border-color: rgba(220, 38, 38, 0.3); } .state-pill[data-state="watch"] { color: var(--amber); border-color: rgba(245, 158, 11, 0.3); } .state-pill[data-state="holding"], .state-pill[data-state="stable"] { color: var(--green); border-color: rgba(34, 197, 94, 0.3); } .state-pill[data-state="conditional"] { color: var(--ink-2); } .state-pill[data-state="conjectural"] { color: var(--ink-3); } .state-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); } /* Dotted-underline link — kit-standard affordance for inline cross-references. Diagnostics rows and Control Room fix-zone empty notes both consume this. */ .kit-link { color: var(--ink-2); text-decoration: none; border-bottom: 1px dotted var(--line-2); padding-bottom: 1px; } .kit-link:hover { color: var(--ink); border-color: var(--ink-3); } /* Proxy / brand-ref chip — JetBrains-Mono pill used on brand-context.html (proxy node refs on segment/persona cards) and constraints.html (proxy + brand-ref chips on Control Room Rules cards). Originated inline on brand-context.html (BRD-2 Phase A); lifted here before a third consumer copies the pattern (CON-6.bc-proxy-chip-lift). */ .bc-proxy-chip { font: var(--type-label); letter-spacing: 0.02em; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 3px; padding: 4px 8px; text-decoration: none; } .bc-proxy-chip:hover { border-color: var(--ink); color: var(--ink); } /* BRD-2 Phase B.2 — togglable variant for BrandContextPicker. .bc-picker-chip inherits .bc-proxy-chip's pill shape; the .selected state inverts the fill so picked refs read as committed. Status + strip layout sibling. */ .bc-picker-chip { cursor: pointer; background: transparent; } .bc-picker-chip.selected { background: var(--ink); color: var(--bg); border-color: var(--ink); } .bc-picker-chip.selected:hover { background: var(--ink-2); border-color: var(--ink-2); } .bc-picker-strip { display: flex; flex-wrap: wrap; gap: 6px; } .bc-picker-status { font: 400 12px/1.4 'Outfit', sans-serif; color: var(--ink-3); font-style: italic; } /* ── 1r. Diagnostics surface — trust line + filter banner + data-plane rows ── Lifted from diagnostics.html (BRD-1.1 Phase B, 2026-05-17). SUR-2 Phase D built diagnostics with its own inline