/* ROOST — surface styles. Consumes the semantic tokens from colors_and_type.css. Mode is a class flip on ; nothing here hardcodes a hex except the two muted values below, which exist because the token's own alpha sits close to the contrast floor on small type and this surface's whole job is being readable. NO STATUS COLOURS ANYWHERE (CD ruling ②, ratified). There is no semantic red, amber or green in this file. Exception states differentiate by weight, position and language. Staleness cannot borrow alarm styling because alarm styling does not exist. The one accent in use is Primary Blue, and it marks an overline, not a severity. Colour is never the sole carrier of meaning on this surface. */ :root { --roost-muted: rgba(13, 13, 13, 0.72); --roost-rail: 15rem; --roost-gap: 1.5rem; } .theme-dark { --roost-muted: rgba(245, 244, 240, 0.78); } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg-0); color: var(--fg-1); font-family: var(--font-display); font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; } body { display: grid; grid-template-columns: var(--roost-rail) minmax(0, 1fr); min-height: 100vh; } /* The skip link carries its colours at all times, not only on :focus. Left to the browser default it is #0000EE, which on the dark surface measures 2.07:1 — the contrast pass caught it off-screen, where eyes never go. */ .skip { position: absolute; left: -9999px; background: var(--bg-1); color: var(--fg-1); padding: 0.5rem 0.75rem; border: 1px solid var(--border-strong); } .skip:focus { left: 1rem; top: 1rem; z-index: 10; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── nav rail ─────────────────────────────────────────────────────────── */ .rail { border-right: 1px solid var(--border-2); padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 2rem; min-width: 0; } .rail-name { font-family: var(--font-condensed); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.02em; color: var(--fg-1); } .rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.125rem; flex: 1; } .rail-link { display: block; padding: 0.5rem 0.625rem; color: var(--fg-1); text-decoration: none; border-left: 2px solid transparent; font-size: 0.9375rem; } .rail-link:hover { background: var(--bg-2); } .rail-link:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; } /* Active is weight + a rule, not a colour. */ .rail-link.is-active { font-weight: 600; border-left-color: var(--fg-accent); background: var(--bg-2); } .rail-soon { display: block; font-size: 0.75rem; color: var(--roost-muted); } .rail-foot { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; } /* ── main ─────────────────────────────────────────────────────────────── */ .main { padding: 2rem clamp(1rem, 4vw, 3rem); max-width: 68rem; min-width: 0; display: flex; flex-direction: column; gap: var(--roost-gap); } .pane { background: var(--bg-1); border: 1px solid var(--border-1); border-radius: 4px; padding: 1.25rem 1.5rem; min-width: 0; } .pane-narrow { max-width: 32rem; } .pane-h { margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 600; text-transform: lowercase; letter-spacing: 0.04em; color: var(--roost-muted); } .overline { margin: 0 0 0.375rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-accent); } .lead { margin: 0 0 0.75rem; font-size: 1.0625rem; color: var(--fg-1); } .flat { margin: 0 0 0.5rem; color: var(--fg-1); } .note { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--roost-muted); } .stamp { margin: 1rem 0 0; font-size: 0.75rem; color: var(--roost-muted); font-family: var(--font-mono); } .link, a.link { color: var(--fg-link); } /* Dark-mode legibility: --fg-accent and --fg-link resolve to Periwinkle, which over --bg-1 (Deep Navy) measures 3.78:1 — fine for a border, short of the 4.5 floor for small text. On dark these two carry type on the card, so they move to --fg-1 and keep their distinction from weight, case and spacing. Nothing is lost: colour was never carrying the meaning. */ .theme-dark .overline, .theme-dark .digest-rest > summary, .theme-dark .link, .theme-dark a.link { color: var(--fg-1); } .theme-dark .digest-rest > summary { text-decoration: underline; } /* ── re-entry ─────────────────────────────────────────────────────────── */ .pane-reentry { border-left: 3px solid var(--border-strong); } .figures { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2rem; } .figures li { display: flex; flex-direction: column; } /* All three figures share one type. The third is not styled as relief; it is simply another number, which is what makes it answer the thought instead of performing an answer. */ .figure { font-size: 2rem; font-weight: 600; line-height: 1.1; color: var(--fg-1); } .figure-l { font-size: 0.875rem; color: var(--roost-muted); } /* ── escalation: a note, not an alarm ─────────────────────────────────── */ .pane-escalation { border: 1px solid var(--border-strong); } .esc-task { margin: 0 0 0.75rem; font-size: 1.0625rem; color: var(--fg-1); } .row-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } /* ── digest ───────────────────────────────────────────────────────────── */ .digest-subject { margin: 0 0 0.5rem; font-family: var(--font-serif); font-size: 1.25rem; color: var(--fg-1); } .digest-body p { font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.65; margin: 0 0 0.75rem; color: var(--fg-1); max-width: 42rem; } .digest-rest > summary { cursor: pointer; font-family: var(--font-display); font-size: 0.875rem; color: var(--fg-link); margin-bottom: 0.5rem; } .digest-rest > summary:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; } /* ── movement ─────────────────────────────────────────────────────────── */ .columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.25rem; } .column { min-width: 0; } .column-h { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--roost-muted); } .column-list { margin: 0; padding-left: 1rem; display: flex; flex-direction: column; gap: 0.375rem; } .column-list li { font-size: 0.9375rem; color: var(--fg-1); overflow-wrap: anywhere; } .column-empty, .more { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--roost-muted); } /* ── chips: neutral, never ordered by shame ───────────────────────────── */ .chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; } .chip { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.375rem 0.75rem; border: 1px solid var(--border-2); border-radius: 999px; background: var(--bg-2); color: var(--fg-1); font-size: 0.875rem; text-decoration: none; } .chip:hover { border-color: var(--border-strong); } .chip:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; } .chip.is-open { border-color: var(--fg-accent); font-weight: 600; } .chip.is-unreadable { color: var(--roost-muted); font-style: italic; } .chip-n { font-weight: 600; font-variant-numeric: tabular-nums; } /* the basement — inline, beneath the chip row, face intact above */ .drill { margin-top: 1rem; padding: 1rem; border: 1px solid var(--border-2); border-radius: 4px; background: var(--bg-2); } .drill-h { margin: 0 0 0.75rem; font-weight: 600; color: var(--fg-1); } .drill-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; max-height: 22rem; overflow-y: auto; } .drill-list li { display: flex; flex-direction: column; gap: 0.125rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-1); } .drill-task { color: var(--fg-1); font-size: 0.9375rem; overflow-wrap: anywhere; } .drill-meta { color: var(--roost-muted); font-size: 0.75rem; } /* ── state grid ───────────────────────────────────────────────────────── */ .state-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.25rem; } .state-cell { min-width: 0; } /* Nominal is a hollow ring and a word. There is no filled/green counterpart, by design — see the file header. */ .ring-row { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.375rem; } .ring { width: 0.75rem; height: 0.75rem; border: 2px solid var(--fg-1); border-radius: 50%; display: inline-block; flex: none; } .ring-word { font-weight: 600; color: var(--fg-1); } .pickup { font-size: 0.875rem; overflow-wrap: anywhere; } /* ── footer ───────────────────────────────────────────────────────────── */ .face-foot { padding: 0 0.25rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; } .counts { margin: 0; font-size: 0.875rem; color: var(--fg-1); font-variant-numeric: tabular-nums; } .sources { margin: 0; font-size: 0.8125rem; color: var(--roost-muted); } /* ── controls ─────────────────────────────────────────────────────────── */ .btn { display: inline-block; padding: 0.5rem 1rem; background: var(--fg-accent); color: var(--fg-on-accent); border: 1px solid var(--fg-accent); border-radius: 3px; font: inherit; font-size: 0.9375rem; text-decoration: none; cursor: pointer; } .btn:hover { background: var(--gog-deep-navy); border-color: var(--gog-deep-navy); } .btn:focus-visible { outline: 2px solid var(--fg-1); outline-offset: 2px; } .btn-quiet { display: inline-block; padding: 0.5rem 0.75rem; background: none; border: 1px solid var(--border-2); border-radius: 3px; color: var(--fg-1); font: inherit; font-size: 0.875rem; text-decoration: none; cursor: pointer; } .btn-quiet:hover { border-color: var(--border-strong); } .btn-quiet:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; } .form-row { display: flex; gap: 0.5rem; flex-wrap: wrap; } .input { flex: 1 1 14rem; min-width: 0; padding: 0.5rem 0.75rem; border: 1px solid var(--border-2); border-radius: 3px; background: var(--bg-0); color: var(--fg-1); font: inherit; } .input:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 1px; } .theme-switch { margin: 0; } /* ── narrow ───────────────────────────────────────────────────────────── */ @media (max-width: 52rem) { body { grid-template-columns: minmax(0, 1fr); } .rail { border-right: none; border-bottom: 1px solid var(--border-2); flex-direction: row; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1rem; } .rail-list { flex-direction: row; flex-wrap: wrap; gap: 0.25rem; flex: 1 1 100%; } .rail-soon { display: none; } .rail-link { border-left: none; border-bottom: 2px solid transparent; } .rail-link.is-active { border-left: none; border-bottom-color: var(--fg-accent); } .main { padding: 1.25rem 1rem; } .figures { gap: 1.25rem; } }