/* ═══════════════════════════════════════════════════════════════════════════════════════════ COMMAND DESK v3 — "THE CONFIDENCE ROOM" (Craig 8/7: the Initiatives desk is scrapped; this is the QC proof-beside grammar pointed at our own builds, our own content and our own plumbing). ── PICTURE FIRST IS A LAYOUT LAW, NOT A PREFERENCE ───────────────────────────────────────── Every list row leads with a thumbnail strip, and a before/after pair reads left-to-right with an arrow between the two. The row that killed v2 was a bare name; here a row with no picture still gets a BOX — the honest slab that says why there is none. An absence occupies space and explains itself, which is the whole reason this room exists. ── COURT-HONEST COLOUR ───────────────────────────────────────────────────────────────────── Chrome is --canopy. Healthy/held-proof is --signal. Amber is thin proof, calm, never a shout. NO RED ANYWHERE. --action (vivid green) appears in exactly one place: the owner's own green check — and that is legal precisely because this room is Craig-court by access ruling, gated to the firm owner. It is never used for fleet state. ── TYPE ──────────────────────────────────────────────────────────────────────────────────── The --fs-* dashboard tokens are density tokens and they are wrong in a room you READ. Same call v2 made: one reading scale, --cdc-read, and nothing under 11.5px. The future reader is a hired seat, not the person who built this. ═══════════════════════════════════════════════════════════════════════════════════════════ */ #portal-room-command-desk{ --canopy:#1e3b2f; --signal:#306844; --action:#15a850; --line:#e7e2d4; --line-cool:#e6e9e6; --card:#fff; --bg:#f7f8f7; --sand:#fbfaf6; --ink-1:#24332c; --ink-2:#46564d; --ink-3:#8a8f88; --warn-ink:#8a5a0f; --warn-line:#ecd9a8; --warn-fill:#fdf6e7; --hard-line:#c5dccd; --hard-fill:#eef5f0; --cdc-read:15.5px; --cdc-h2:22px; --cdc-name:15px; --cdc-sub:12.5px; --cdc-label:11.5px; --cdc-num:26px; font:400 var(--cdc-read)/1.5 Inter,-apple-system,BlinkMacSystemFont,system-ui,sans-serif; color:var(--ink-1); background:var(--bg); } .cdc-headwrap{ flex:0 0 auto } .cdc-headwrap .fgr-head{ border-bottom:1px solid var(--line-cool) } /* ── ONE DOCUMENT (Craig 8/9 9:26 PM: "so many scroll bars… the whole top section is frozen") ── THE OLD CONTRACT, AND WHY IT WENT. This used to read: "the room itself never scrolls. This is the frame, and the two panes inside it own their own scrollbars — so the filters and the meter stay put while you read." Every clause of that is a design decision, and together they are the thing he was complaining about. Pinning the chrome meant the chrome could grow without cost, and it grew to roughly four hundred pixels of words; giving the panes their own scrollbars meant there were three places to scroll and no way to tell which one the wheel would move. The room is a DOCUMENT now. One scroller — this element — and everything else flows inside it. Nothing is sticky, nothing is pinned, and the brief starts within the first line of the page. The scroll position is carried across repaints in render.js, which is what makes a single scroller survive a room that rebuilds itself on every click. */ .cdc-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch } .cdc-wrap{ max-width:1080px; width:100%; margin:0 auto; padding:14px 26px 60px; box-sizing:border-box } .cdc-in{ max-width:1080px; margin:0 auto; padding:18px 30px 24px } /* ── the lede ─────────────────────────────────────────────────────────────────────────────── */ .cdc-head{ display:flex; align-items:flex-start; gap:26px; flex:0 0 auto; padding-bottom:12px } .cdc-head-l{ min-width:0; flex:1 1 auto } .cdc-title{ font:650 var(--cdc-h2)/1.2 Inter,system-ui,sans-serif; color:var(--canopy); letter-spacing:-.015em; margin:0 } .cdc-sub{ margin-top:6px; font-size:var(--cdc-read); color:var(--ink-2); line-height:1.5; max-width:960px } .cdc-sub b{ font-weight:650; color:var(--ink-1) } .cdc-meter{ flex:0 0 auto; text-align:right; max-width:280px } .cdc-meter-n{ font:700 var(--cdc-num)/1 Inter,system-ui,sans-serif; color:var(--canopy); font-variant-numeric:tabular-nums } .cdc-meter-l{ margin-top:6px; font-size:var(--cdc-label); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2) } .cdc-meter-s{ margin-top:4px; font-size:var(--cdc-label); color:var(--ink-3); line-height:1.45 } /* ── filters ──────────────────────────────────────────────────────────────────────────────── */ .cdc-filters{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:0 0 auto; padding:11px 0 13px; border-top:1px solid var(--line) } .cdc-chip{ border:1px solid var(--line); background:var(--card); border-radius:999px; padding:6px 15px; font:inherit; font-size:var(--cdc-sub); color:var(--ink-2); cursor:pointer; white-space:nowrap } .cdc-chip:hover{ border-color:var(--ink-3) } .cdc-chip b{ color:var(--ink-1); font-weight:700; font-variant-numeric:tabular-nums } .cdc-chip.is-on{ background:var(--canopy); border-color:var(--canopy); color:#fff } .cdc-chip.is-on b{ color:#fff } .cdc-search{ flex:0 1 250px; border:1px solid var(--line); border-radius:8px; padding:6px 11px; font:inherit; font-size:var(--cdc-sub); background:var(--card); color:var(--ink-1) } .cdc-rule{ margin-left:auto; font-size:var(--cdc-label); color:var(--ink-3); max-width:520px; text-align:right; line-height:1.45 } .cdc-rule b{ color:var(--ink-2); font-weight:650 } /* ── ONE COLUMN, AND EVERY ROW IS A DOOR ────────────────────────────────────────────────────── The two-pane grid is gone with the proof pane it held (see render.js: the gallery owns pictures now). What is left is a list that flows in the room's one scroller. */ .cdc-one{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--card) } .cdc-list{ background:var(--sand) } .cdc-listnote{ padding:10px 14px; font-size:var(--cdc-label); color:var(--ink-3); line-height:1.5; border-bottom:1px solid var(--line); background:var(--card) } .cdc-listnote b{ color:var(--warn-ink); font-weight:650 } .cdc-listempty{ padding:30px 18px; text-align:center; font-size:var(--cdc-sub); color:var(--ink-3) } /* ── a row: the picture, then the words, then the check ───────────────────────────────────── */ .cdc-row{ display:flex; align-items:flex-start; gap:6px; border-bottom:1px solid var(--line); border-left:3px solid transparent; background:transparent } .cdc-row:hover{ background:var(--card) } .cdc-row.is-sel{ background:var(--card); border-left-color:var(--canopy) } .cdc-row.is-done{ background:linear-gradient(90deg,rgba(21,168,80,.05),transparent 55%) } .cdc-open{ flex:1 1 auto; min-width:0; display:flex; gap:11px; align-items:flex-start; padding:11px 4px 12px 12px; border:0; background:transparent; font:inherit; color:inherit; text-align:left; cursor:pointer } .cdc-open:focus-visible{ outline:2px solid var(--canopy); outline-offset:-2px } /* the thumbnail strip — this is the picture-first law, in CSS */ .cdc-strip{ flex:0 0 auto; display:flex; align-items:center; gap:4px } .cdc-th{ position:relative; display:block; width:82px; height:56px; border-radius:6px; overflow:hidden; border:1px solid var(--line); background:#f2f3f2 } .cdc-strip.is-pair .cdc-th{ width:74px } .cdc-th img{ width:100%; height:100%; object-fit:cover; object-position:top left; display:block; cursor:zoom-in } .cdc-th-cap{ position:absolute; left:0; bottom:0; right:0; font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; color:#fff; background:rgba(30,59,47,.78); padding:1px 4px; text-align:center } .cdc-arrow{ font-size:13px; color:var(--ink-3); flex:0 0 auto } .cdc-row-txt{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px } .cdc-row-t{ font:600 var(--cdc-name)/1.35 Inter,system-ui,sans-serif; color:var(--ink-1); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word } .cdc-row.is-done .cdc-row-t{ color:var(--ink-2) } .cdc-row-who{ font-size:var(--cdc-label); color:var(--ink-3) } .cdc-row-story{ margin-top:2px; font-size:var(--cdc-sub); color:var(--ink-2); line-height:1.45; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical } .cdc-row-chips{ display:flex; gap:5px; flex-wrap:wrap; margin-top:4px } .cdc-p{ font-size:var(--cdc-label); border-radius:5px; padding:1px 7px; border:1px solid var(--line); color:var(--ink-2); background:var(--card); white-space:nowrap } .cdc-p.is-hard{ border-color:var(--hard-line); background:var(--hard-fill); color:var(--signal) } .cdc-p.is-link{ border-color:var(--hard-line); background:var(--card); color:var(--canopy); font-weight:600 } .cdc-p.is-claim{ border-color:var(--warn-line); background:var(--warn-fill); color:var(--warn-ink) } /* THE GREEN CHECK. --action lives here and nowhere else in this file: the room is gated to the firm owner, so this is his court and the vivid green is his. */ .cdc-check{ flex:0 0 auto; margin:11px 10px 0 0; width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:#cdd4ce; font-size:15px; line-height:1; cursor:pointer } .cdc-check:hover{ border-color:var(--action); color:var(--ink-3) } .cdc-check.is-on{ background:var(--action); border-color:var(--action); color:#fff } .cdc-check:focus-visible{ outline:2px solid var(--canopy); outline-offset:2px } .cdc-more{ display:block; width:100%; border:0; border-top:1px solid var(--line); background:var(--card); padding:13px; font:inherit; font-size:var(--cdc-sub); color:var(--canopy); font-weight:650; cursor:pointer } .cdc-more:hover{ background:var(--sand) } /* ── the honest no-picture slab. It takes up room on purpose. ─────────────────────────────── */ .cdc-nopic{ display:flex; flex-direction:column; justify-content:center; gap:3px; border:1px dashed var(--warn-line); background:var(--warn-fill); border-radius:6px; padding:8px 10px; box-sizing:border-box } .cdc-nopic.is-sm{ flex:0 0 auto; width:170px; min-height:56px } .cdc-nopic-k{ font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--warn-ink) } .cdc-nopic-b{ font-size:var(--cdc-label); color:var(--ink-2); line-height:1.4 } .cdc-proof .cdc-nopic{ padding:14px 16px } .cdc-proof .cdc-nopic-b{ font-size:var(--cdc-sub) } /* ── the proof pane ───────────────────────────────────────────────────────────────────────── */ .cdc-pv-h{ font:650 19px/1.3 Inter,system-ui,sans-serif; color:var(--canopy); word-break:break-word } .cdc-pv-meta{ margin-top:5px; font-size:var(--cdc-label); color:var(--ink-3) } .cdc-pv-meta code{ background:#f1f2f1; border-radius:4px; padding:1px 5px; font-size:var(--cdc-label) } .cdc-go{ display:inline-flex; align-items:baseline; gap:8px; margin-top:13px; padding:9px 17px; border-radius:9px; background:var(--canopy); color:#fff; font-size:var(--cdc-sub); font-weight:650; text-decoration:none } .cdc-go:hover{ background:var(--signal) } .cdc-go span{ font-weight:400; opacity:.75; font-size:var(--cdc-label) } /* the honest counterpart to the link — quiet, never alarm-coloured: a row with no link is a filing gap, not something wrong in Craig's court. */ .cdc-nogo{ margin-top:13px; padding:9px 13px; border:1px dashed var(--line); border-radius:9px; background:var(--sand); font-size:var(--cdc-label); color:var(--ink-3); line-height:1.5 } /* ── THE EVIDENCE STORY (schema v1 8/8 · v2 amendment 8/9) ───────────────────────────────────── Five numbered steps above the wrap paragraph. A step with nothing on record is DIMMED and says "Not stated." — visibly different from a filled one, so a half-empty story reads as half-empty at a glance instead of reading as a finished one. Court-honest: nothing in here is alarm-coloured, because a job that did not write its story down is our filing problem, not something wrong in Craig's court. --action is not used (it is Craig-court only). */ .cds{ margin-top:14px; border:1px solid var(--line); border-radius:10px; background:var(--card); overflow:hidden } .cds-h{ display:flex; align-items:baseline; gap:9px; padding:10px 15px; background:var(--sand); border-bottom:1px solid var(--line); font-size:var(--cdc-label); font-weight:650; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3) } .cds-c{ margin-left:auto; letter-spacing:0; text-transform:none; font-weight:600; color:var(--ink-2) } .cds-who{ padding:8px 15px; border-bottom:1px solid var(--line); font-size:var(--cdc-label); color:var(--ink-3) } .cds-who b{ color:var(--ink-1); font-weight:650 } .cds.is-off .cds-b{ padding:12px 15px; font-size:var(--cdc-sub); color:var(--ink-3); line-height:1.55 } .cds-step{ padding:12px 15px; border-bottom:1px solid var(--line) } .cds-step:last-child{ border-bottom:0 } .cds-step.is-none{ background:var(--sand) } .cds-n{ font-size:var(--cdc-label); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--signal); margin-bottom:5px } .cds-step.is-none .cds-n{ color:var(--ink-3) } .cds-step .cds-b{ font-size:var(--cdc-sub); color:var(--ink-1); line-height:1.55; word-break:break-word } .cds-step.is-none .cds-b{ color:var(--ink-3) } .cds-ns{ font-weight:650; color:var(--ink-2) } .cds-detail{ margin-top:6px; max-height:150px; overflow-y:auto; white-space:pre-wrap; font-size:var(--cdc-label); color:var(--ink-2); line-height:1.55 } .cds-list{ margin:2px 0 0; padding-left:19px } .cds-list li{ margin:4px 0 } .cds-prop{ display:inline-block; margin-left:5px; padding:1px 7px; border-radius:999px; background:var(--hard-fill); color:var(--signal); font-size:var(--cdc-label); font-weight:650 } .cds-src{ margin-left:5px; font-size:var(--cdc-label); color:var(--ink-3) } .cds-why{ margin-top:3px; font-size:var(--cdc-label); color:var(--ink-3); line-height:1.5 } .cds-t{ width:100%; border-collapse:collapse; margin-top:4px; font-size:var(--cdc-label) } .cds-t th{ text-align:left; padding:5px 8px; border-bottom:2px solid var(--line); color:var(--ink-3); font-weight:650; letter-spacing:.05em; text-transform:uppercase } .cds-t td{ padding:5px 8px; border-bottom:1px solid var(--line); color:var(--ink-1); vertical-align:top } .cds-was{ color:var(--ink-3) } .cds-now{ color:var(--signal); font-weight:650 } /* the three states, and only the three — "It ties" / "Ties after fixes" / "Will not close" */ .cds-tie{ display:inline-block; padding:3px 10px; border-radius:999px; font-weight:700; font-size:var(--cdc-label); letter-spacing:.04em } .cds-tie.is-tied{ background:var(--hard-fill); color:var(--signal) } .cds-tie.is-exc{ background:var(--warn-fill); color:var(--warn-ink) } .cds-tie.is-open{ background:#eef0ee; color:var(--ink-1) } .cds-warn{ margin-top:6px; padding:7px 11px; border:1px dashed var(--line); border-radius:8px; background:var(--sand); font-size:var(--cdc-label); color:var(--ink-2); line-height:1.5 } /* ── SCHEMA v2 · THE SOURCE LINE AND THE MISSING-PROOF BADGE (Craig, 8/9) ────────────────────── Two things this block has to do, and it is judged on both: 1. Make the raw memo READ AS CHARACTERS. `PL*MatherEnterpr` is only informative in a face where the star, the case and the run of X's are unmistakable — the 8/9 re-work cycle started when a proportional-font paraphrase quietly ate four of them. 2. Make an ABSENT proof louder than a present one. A card that omits its source line must not look like a card that never needed one; on 8/8 twenty-seven empty builds read as finished precisely because nothing marked the hole. Court-honest throughout: warn ink, never --action. A thin record of our own work is our filing problem, not something wrong in Craig's court. */ .cds-memo{ margin-top:6px; display:flex; align-items:baseline; flex-wrap:wrap; gap:7px } .cds-memo-k{ font-size:9.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3) } .cds-memo code{ flex:1 1 240px; padding:5px 9px; border:1px solid var(--line); border-left:3px solid var(--canopy); border-radius:6px; background:var(--sand); color:var(--ink-1); font:500 11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; overflow-wrap:anywhere } .cds-memo-cut{ font-size:var(--cdc-label); color:var(--warn-ink) } .cds-memo-step{ padding:11px 15px } .cds-miss{ display:inline-block; padding:2px 8px; border-radius:5px; background:var(--warn-fill); border:1px solid var(--warn-line); color:var(--warn-ink); font-size:9.5px; font-weight:750; letter-spacing:.06em; text-transform:uppercase } .cds-flags{ padding:9px 15px; border-bottom:1px solid var(--line); background:var(--warn-fill); display:flex; flex-direction:column; gap:5px } .cds-flag{ font-size:var(--cdc-label); color:var(--warn-ink); line-height:1.5 } .cds-flag.is-note{ color:var(--ink-3) } .cds-flag-b{ display:inline-block; margin-right:7px; padding:1px 7px; border-radius:999px; background:var(--warn-ink); color:var(--warn-fill); font-size:9.5px; font-weight:750; letter-spacing:.06em; text-transform:uppercase } .cds-flag.is-note .cds-flag-b{ background:#e3e0d6; color:var(--ink-2) } .cds.is-flagged{ border-color:var(--warn-line) } .cds-c-f{ color:var(--warn-ink); font-weight:750 } .cds-t-chk td{ font-size:var(--cdc-label) } .cds-t-chk tr.is-loose td{ background:var(--warn-fill) } .cds-em{ color:var(--ink-3) } .cdc-say{ margin-top:14px; background:var(--sand); border:1px solid var(--line); border-left:3px solid var(--canopy); border-radius:9px; padding:13px 16px; line-height:1.55 } .cdc-say.is-none{ border-left-color:var(--warn-ink) } .cdc-say-k{ font-size:var(--cdc-label); font-weight:650; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px } .cdc-say-b{ max-height:240px; overflow-y:auto; white-space:pre-wrap; word-break:break-word; font-size:var(--cdc-sub); color:var(--ink-1) } .cdc-say-b p{ margin:0 0 8px } .cdc-k{ margin:20px 0 9px; font-size:var(--cdc-label); font-weight:650; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3) } /* before → after, side by side. The pair is the point; it never stacks above 1180px. */ .cdc-vis{ display:flex; flex-direction:column; gap:16px } .cdc-pair{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--sand) } .cdc-pair-k{ padding:6px 12px; font-size:var(--cdc-label); font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); background:var(--card); border-bottom:1px solid var(--line) } .cdc-pair-b{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:10px } .cdc-solo{ display:block } .cdc-frame{ margin:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--card); min-width:0 } .cdc-frame img{ display:block; width:100%; height:auto; background:#f2f3f2; cursor:zoom-in } /* image-rendering stays AUTO on purpose: the pane swaps the thumb for the original bytes, so there is nothing to sharpen artificially — and a filter that fakes it would hide the very thing the quality line below is there to report. */ .cdc-frame figcaption{ padding:6px 10px; font-size:var(--cdc-label); color:var(--ink-3); border-top:1px solid var(--line) } .cdc-frame-n{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .cdc-frame figcaption b{ color:var(--ink-1); font-weight:650 } /* which copy you are actually looking at — never let a thumbnail pass for the real thing */ .cdc-frame-q{ display:block; margin-top:3px; font-size:var(--cdc-micro, var(--cdc-label)); color:var(--ink-3); opacity:.8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .cdc-frame.is-full .cdc-frame-q{ color:var(--canopy); opacity:1 } /* a post with no image is still shown — as the post, labelled as the post */ .cdc-post{ border:1px solid var(--line); border-radius:10px; background:var(--card); overflow:hidden } .cdc-post-h{ padding:7px 14px; font-size:var(--cdc-label); font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); background:var(--sand); border-bottom:1px solid var(--line) } .cdc-post-t{ padding:13px 16px 0; font:650 16px/1.35 Inter,system-ui,sans-serif; color:var(--ink-1) } .cdc-post-b{ padding:8px 16px 16px; font-size:var(--cdc-sub); line-height:1.6; color:var(--ink-2); white-space:pre-wrap; word-break:break-word; max-height:430px; overflow-y:auto } .cdc-refs{ display:flex; flex-wrap:wrap; gap:8px } .cdc-refs a,.cdc-refs span{ font-size:var(--cdc-label); border:1px solid var(--line); background:var(--card); border-radius:6px; padding:4px 9px; color:var(--canopy); text-decoration:none } .cdc-refs span{ color:var(--ink-3) } .cdc-refs code{ background:none; padding:0 } .cdc-docs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px } .cdc-doc{ border:1px solid var(--line); border-radius:9px; overflow:hidden; background:var(--card); display:flex; flex-direction:column } .cdc-doc-h{ display:flex; align-items:center; gap:8px; padding:7px 12px; border-bottom:1px solid var(--line); background:var(--sand) } .cdc-doc-n{ font-size:var(--cdc-label); font-weight:650; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .cdc-doc-s{ margin-left:auto; font-size:var(--cdc-label); color:var(--ink-3); white-space:nowrap } .cdc-doc-s.is-ok{ color:var(--signal) } .cdc-doc-s.is-warn{ color:var(--warn-ink) } .cdc-doc-b{ padding:10px 12px; min-height:84px } .cdc-doc-b img{ width:100%; height:auto; display:block; border-radius:5px; border:1px solid var(--line); cursor:zoom-in } .cdc-doc-b iframe{ width:100%; height:400px; border:0 } .cdc-doc-b pre{ margin:0; max-height:300px; overflow:auto; white-space:pre-wrap; word-break:break-word; font-size:var(--cdc-label); line-height:1.55; color:var(--ink-1) } .cdc-note{ font-size:var(--cdc-label); color:var(--ink-2); line-height:1.55 } .cdc-note code{ background:#f1f2f1; border-radius:4px; padding:1px 5px; word-break:break-all } /* the owner's sign-off, and the seam it names */ .cdc-sign{ margin-top:24px; padding-top:14px; border-top:1px solid var(--line); display:flex; align-items:center; gap:14px; flex-wrap:wrap } .cdc-signbtn{ border:1px solid var(--line); background:var(--card); border-radius:9px; padding:9px 17px; font:inherit; font-size:var(--cdc-sub); font-weight:650; color:var(--ink-1); cursor:pointer } .cdc-signbtn:hover{ border-color:var(--action) } .cdc-signbtn.is-on{ background:var(--action); border-color:var(--action); color:#fff } .cdc-sign-s{ flex:1 1 240px; font-size:var(--cdc-label); color:var(--ink-3); line-height:1.5 } /* ── THE LIGHTBOX ────────────────────────────────────────────────────────────────────────────── Craig, 8/7 1:16p, standing in the proof pane: "I can't click these images to blow them up." It was true of every picture in the room — the row thumbs were swallowed by the row button, the frames opened a NEW TAB when they opened at all, and the filed paper opened nothing. A new tab is the worst case the no-drawers law describes: the eyes leave, and the row being read is gone behind it. So the picture opens HERE, over the room, and Esc puts it back exactly where it was. The mat is dark on purpose. This is the one surface where the picture is the whole argument, so everything else gets out of its way — but it is a mat, not an alarm, and it carries no colour a court could read. */ /* ── ONE LIGHTBOX, NOT TWO BEHAVIOURS (Craig 8/7 3:58p) ─────────────────────────────────────── The click-to-zoom pass shipped TWO overlays: this one, and a bare `.q21-zoom` in the QC room with no keys, no bar and no navigation. Craig, on the QC room: "opening an image gives no next/previous — I have to click out and reopen for each image", and on the fix: one lightbox component, not two behaviours. So the whole thing is now `.fg-lb`, owned by `window.FgLightbox`, and BOTH rooms open it. The class rename is the point rather than a tidy-up: two prefixes are how the surfaces drifted apart in the first place, and a probe can now assert one root class across both rooms instead of trusting that they behave alike. */ .fg-lb{ position:fixed; inset:0; z-index:10070; display:flex; flex-direction:column; background:rgba(16,28,22,.90) } .fg-lb-bar{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:9px 16px; background:rgba(10,20,15,.72); border-bottom:1px solid rgba(255,255,255,.10); color:#eef3ee } .fg-lb-t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:650 var(--cdc-sub)/1.4 Inter,system-ui,sans-serif } /* which copy you are looking at, and at what size — the same promise the pane's quality line makes, kept in the one place where being wrong about it would matter most */ .fg-lb-q{ flex:0 0 auto; font:500 var(--cdc-label)/1.4 Inter,system-ui,sans-serif; color:#a8c4b3; letter-spacing:.03em; white-space:nowrap } /* WHERE YOU ARE IN THE SET — "2 of 4", which Craig asked for by name. It is a count, not a status, so it is quiet; but it is always drawn when there is more than one picture, because the whole reason he had to click out and back was not knowing there was a next one. */ .fg-lb-n{ flex:0 0 auto; font:650 var(--cdc-label)/1 Inter,system-ui,sans-serif; color:#cfe4d7; letter-spacing:.06em; white-space:nowrap; padding:4px 9px; border-radius:999px; background:rgba(255,255,255,.10) } .fg-lb-sp{ flex:1 1 auto } .fg-lb-b{ flex:0 0 auto; border:1px solid rgba(255,255,255,.24); background:transparent; color:#eef3ee; border-radius:7px; padding:5px 11px; cursor:pointer; white-space:nowrap; font:650 var(--cdc-label)/1 Inter,system-ui,sans-serif; letter-spacing:.03em } .fg-lb-b:hover{ border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.09) } .fg-lb-b.is-on{ border-color:#8fd9ae; color:#c6f2d8 } .fg-lb-b:focus-visible{ outline:2px solid #8fd9ae; outline-offset:2px } .fg-lb-b[disabled]{ opacity:.32; cursor:default } /* margin:auto centres it AND keeps it scrollable when it is bigger than the stage — the flex align-items:center version of this loses the top-left of a zoomed picture to an unreachable overflow, which on a screenshot is exactly the part you came to read. */ .fg-lb-stage{ flex:1 1 auto; min-height:0; overflow:auto; display:flex; padding:22px; cursor:zoom-out; position:relative } .fg-lb-stage img{ margin:auto; display:block; background:#fff; border-radius:6px; box-shadow:0 22px 70px rgba(0,0,0,.5) } .fg-lb.is-fit .fg-lb-stage img{ max-width:100%; max-height:100%; width:auto; height:auto; cursor:zoom-in } .fg-lb.is-zoom .fg-lb-stage img{ max-width:none; max-height:none; cursor:zoom-out } /* THE EDGE ARROWS. The bar buttons are the accessible, labelled path; these are the ones a hand already on the mouse reaches for. They sit ON the mat, so they are `position:fixed` rather than absolute — a zoomed picture scrolls the stage, and an arrow that scrolls away with it is an arrow you cannot find at 400%. */ .fg-lb-arrow{ position:fixed; top:50%; transform:translateY(-50%); z-index:2; width:46px; height:76px; border:1px solid rgba(255,255,255,.18); background:rgba(10,20,15,.55); color:#eef3ee; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; font:400 26px/1 Inter,system-ui,sans-serif; padding:0 } .fg-lb-arrow:hover{ background:rgba(10,20,15,.85); border-color:rgba(255,255,255,.45) } .fg-lb-arrow:focus-visible{ outline:2px solid #8fd9ae; outline-offset:2px } .fg-lb-arrow.is-prev{ left:14px } .fg-lb-arrow.is-next{ right:14px } /* One picture in the set: no arrows, no counter, and the hint does not promise keys that would do nothing. An affordance that is present and inert is worse than one that is absent. */ .fg-lb.is-single .fg-lb-arrow, .fg-lb.is-single .fg-lb-n, .fg-lb.is-single [data-lb-prev], .fg-lb.is-single [data-lb-next]{ display:none } .fg-lb-hint{ flex:0 0 auto; padding:7px 16px 9px; text-align:center; color:#8fae9c; font:500 var(--cdc-label)/1.4 Inter,system-ui,sans-serif; letter-spacing:.03em } .cdc-blank{ padding:56px 24px; text-align:center; color:var(--ink-2) } .cdc-blank .h{ font:650 17px/1.35 Inter,system-ui,sans-serif; color:var(--ink-1) } .cdc-blank .b{ margin:8px auto 0; max-width:640px; font-size:var(--cdc-sub); line-height:1.6 } /* Narrow glass: the panes stack rather than crushing the pictures to nothing. The before/after pair stays two-up down to here — a pair that stacks is not a pair, it is two screenshots. */ @media (max-width:1180px){ .cdc-panes{ grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,42%) minmax(0,1fr) } .cdc-list{ border-right:0; border-bottom:1px solid var(--line) } .cdc-rule{ margin-left:0; text-align:left; max-width:none } } /* ═══════════════════════════════════════════════════════════════════════════════════════════ COMMAND DESK v4 — THE ASKS BOARD (Craig 8/7 16:18, refined 16:19) ── TIGHT ROWS ARE THE BRIEF, NOT A PREFERENCE ────────────────────────────────────────────── His words: dense, readable rows — number, a few words, the group, where it stands, the time. Everything else folds. So a row is ONE grid line of fixed columns and the eye runs straight down the numbers; the fold is the only thing that ever grows. The v3 room one tab over is picture-first BECAUSE it is an archive you browse. This one is a list you scan, and a thumbnail on every line would be the same defect wearing the opposite coat. ── COURT-HONEST COLOUR, SAME AS ITS SIBLING ──────────────────────────────────────────────── No red. Open is INK — plain, unalarming, the default state of an ask. In work is --signal. Parked is the calm amber. Done is --action, legal here for the same reason it is legal on the green check: this room is gated to the firm owner, so it is his court. ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* ── the two tabs ─────────────────────────────────────────────────────────────────────────── */ .cda-tabs{ flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:2px 0 14px } .cda-tab{ border:1px solid var(--line); border-radius:9px; background:var(--card); cursor:pointer; padding:8px 16px; font:600 var(--cdc-name)/1.2 Inter,system-ui,sans-serif; color:var(--ink-2) } .cda-tab:hover{ border-color:var(--ink-3) } .cda-tab b{ font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink-3); font-size:var(--cdc-sub) } .cda-tab.is-on{ background:var(--canopy); border-color:var(--canopy); color:#fff } .cda-tab.is-on b{ color:#c9e3d3 } .cda-tab:focus-visible{ outline:2px solid var(--canopy); outline-offset:2px } .cda-tabs-s{ margin-left:auto; max-width:560px; text-align:right; line-height:1.45; font-size:var(--cdc-label); color:var(--ink-3) } .cda-wrap{ display:flex; flex-direction:column } .cda-cats{ border-top:0; padding-top:0 } .cda-sep{ width:1px; height:22px; background:var(--line) } .cda-day{ display:flex; align-items:center; gap:7px; font-size:var(--cdc-label); color:var(--ink-3); text-transform:uppercase; letter-spacing:.07em; font-weight:600 } .cda-day select{ border:1px solid var(--line); border-radius:8px; background:var(--card); padding:6px 10px; font:inherit; font-size:var(--cdc-sub); color:var(--ink-1); text-transform:none; letter-spacing:0; font-weight:400 } /* ── the list ─────────────────────────────────────────────────────────────────────────────── */ .cda-list{ border:1px solid var(--line); border-radius:12px; background:var(--card) } /* NOT STICKY ANY MORE (8/9 one-document pivot): a note pinned inside a list that no longer scrolls on its own would float over the page's scroll instead of its own. */ .cda-list .cdc-listnote{ position:static } .cda-row{ border-bottom:1px solid var(--line); border-left:3px solid transparent } .cda-row:last-child{ border-bottom:0 } .cda-row.is-open{ border-left-color:var(--canopy); background:var(--sand) } .cda-row.is-work{ border-left-color:var(--signal) } .cda-row.is-park{ border-left-color:var(--warn-line) } .cda-row.is-done .cda-t{ color:var(--ink-2) } /* ONE GRID LINE. The columns are fixed so #7's group sits under #6's group — a ragged column is what makes a dense list unreadable, and dense was the whole request. */ .cda-hit{ display:grid; width:100%; box-sizing:border-box; align-items:center; gap:12px; grid-template-columns:46px minmax(0,1fr) 116px 116px 20px 54px 14px; border:0; background:transparent; font:inherit; color:inherit; text-align:left; padding:9px 14px; cursor:pointer } .cda-row:hover .cda-hit{ background:var(--sand) } .cda-row.is-open:hover .cda-hit{ background:transparent } .cda-hit:focus-visible{ outline:2px solid var(--canopy); outline-offset:-2px } .cda-n{ font:700 var(--cdc-sub)/1 Inter,system-ui,sans-serif; color:var(--canopy); font-variant-numeric:tabular-nums; letter-spacing:-.01em } .cda-t{ font:600 var(--cdc-name)/1.35 Inter,system-ui,sans-serif; color:var(--ink-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .cda-cat{ font-size:var(--cdc-label); color:var(--ink-2); background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:2px 9px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .cda-st{ font-size:var(--cdc-label); font-weight:650; color:var(--ink-2); white-space:nowrap } .cda-st b{ font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink-3) } .cda-row.is-done .cda-st{ color:var(--action) } .cda-row.is-work .cda-st{ color:var(--signal) } .cda-row.is-park .cda-st{ color:var(--warn-ink) } .cda-when{ font-size:var(--cdc-label); color:var(--ink-3); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap } .cda-caret{ font-size:10px; color:var(--ink-3) } /* The paper-clip: an affordance, not a picture. It only ever costs 20px of the row. */ .cda-clip{ font-size:13px; line-height:1; text-align:center; color:var(--ink-3); cursor:zoom-in; border-radius:5px; padding:2px } .cda-clip:hover{ color:var(--canopy); background:var(--hard-fill) } .cda-clip:focus-visible{ outline:2px solid var(--canopy); outline-offset:1px } .cda-clip.is-none{ cursor:default } /* ── the fold ─────────────────────────────────────────────────────────────────────────────── */ .cda-fold{ padding:2px 18px 18px 62px } .cda-verb{ margin:0 0 8px; padding:8px 0 8px 14px; border-left:3px solid var(--hard-line); font:400 var(--cdc-read)/1.55 Inter,system-ui,sans-serif; color:var(--ink-1); font-style:italic } .cda-src{ font-size:var(--cdc-label); color:var(--ink-3); margin-bottom:12px } .cda-nospec{ font-size:var(--cdc-sub); color:var(--ink-2); background:var(--warn-fill); border:1px dashed var(--warn-line); border-radius:8px; padding:10px 13px; line-height:1.5 } .cda-specs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px } .cda-spec{ display:flex; gap:11px; padding:8px 0; border-top:1px solid var(--line-cool) } .cda-spec:first-child{ border-top:0 } .cda-dot{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; margin-top:6px; border:2px solid var(--ink-3); background:transparent; box-sizing:border-box } .cda-spec.is-in_work .cda-dot{ border-color:var(--signal); background:var(--signal) } .cda-spec.is-done .cda-dot{ border-color:var(--action); background:var(--action) } .cda-spec.is-parked .cda-dot{ border-color:var(--warn-line); background:var(--warn-fill) } .cda-spec.is-dropped .cda-dot{ border-color:var(--line); background:var(--line) } .cda-spec-b{ flex:1 1 auto; min-width:0 } .cda-spec-t{ font-size:var(--cdc-sub); color:var(--ink-1); line-height:1.5 } .cda-spec.is-done .cda-spec-t{ color:var(--ink-2) } /* A killed line is struck through and stays on the board. Deleting it would leave the ask reading as if it had never had that piece, and the note under it is the ruling that killed it. */ .cda-spec.is-dropped .cda-spec-t{ text-decoration:line-through; color:var(--ink-3) } .cda-spec-m{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:4px } .cda-sp{ font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; border-radius:4px; padding:2px 7px; border:1px solid var(--line); color:var(--ink-3); background:var(--card) } .cda-sp.is-in_work{ border-color:var(--hard-line); background:var(--hard-fill); color:var(--signal) } .cda-sp.is-done{ border-color:var(--action); background:var(--action); color:#fff } .cda-sp.is-parked{ border-color:var(--warn-line); background:var(--warn-fill); color:var(--warn-ink) } .cda-cs{ font-size:var(--cdc-label); font-weight:650; color:var(--ink-2) } .cda-jid{ font:500 10.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink-3); background:var(--bg); border:1px solid var(--line-cool); border-radius:4px; padding:1px 6px; word-break:break-all } .cda-sign{ margin-top:5px; font-size:var(--cdc-label); color:var(--ink-2); line-height:1.55 } .cda-sign b{ color:var(--signal); font-weight:700 } .cda-proofgo{ border:1px solid var(--hard-line); background:var(--hard-fill); border-radius:5px; padding:1px 8px; font:inherit; font-size:var(--cdc-label); font-weight:650; color:var(--canopy); cursor:pointer; text-decoration:none; white-space:nowrap } .cda-proofgo:hover{ background:var(--card); border-color:var(--canopy) } .cda-note{ margin-top:5px; font-size:var(--cdc-label); color:var(--warn-ink); line-height:1.5; background:var(--warn-fill); border-left:2px solid var(--warn-line); padding:5px 9px; border-radius:0 5px 5px 0 } /* Narrow glass: the group and the clock are the first things a scan can do without, so they go. The number, the words and where it stands never leave — that is the row's whole job. */ @media (max-width:1180px){ .cda-hit{ grid-template-columns:40px minmax(0,1fr) 100px 20px 14px; gap:9px } .cda-cat,.cda-when{ display:none } .cda-tabs-s{ display:none } .cda-fold{ padding-left:20px } } /* ═══ THE RULING ROOM (Craig 8/8 12:55 — "Nowhere to see the '20 item'") ══════════════════════ The room the badge counts. It reads like the rest of this file on purpose: same --canopy chrome, same reading scale, no red, and --action stays where it already lives (the owner's own check) — a card waiting on Craig is not an alarm, it is an errand with his name on it. The one deliberate difference is that a card here is a THING TO ANSWER, so the answer row is the only place in this stylesheet with filled buttons. COURT-HONEST: amber appears once, on a malformed card, because a card the fold itself calls broken IS the one thing in this room somebody has to go fix. */ .cdr-wrap{ display:flex; flex-direction:column } .cdr-list{ padding-top:2px } .cdr-card{ border:1px solid var(--line); border-radius:11px; background:var(--card); margin-bottom:10px; overflow:hidden } .cdr-card.is-open{ border-color:var(--hard-line); box-shadow:0 1px 0 rgba(30,59,47,.04) } .cdr-card.is-broken{ border-color:var(--warn-line); background:var(--warn-fill) } .cdr-head{ display:flex; align-items:flex-start; gap:12px; width:100%; text-align:left; border:0; background:none; cursor:pointer; padding:13px 16px 11px; font:inherit; color:inherit } .cdr-head:hover .cdr-title{ color:var(--signal) } .cdr-head:focus-visible{ outline:2px solid var(--canopy); outline-offset:-2px } .cdr-h-txt{ flex:1 1 auto; min-width:0; display:block } .cdr-title{ display:block; font:650 var(--cdc-name)/1.35 Inter,system-ui,sans-serif; color:var(--canopy); word-break:break-word } .cdr-meta{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:5px; font-size:var(--cdc-label); color:var(--ink-3) } .cdr-lane{ border:1px solid var(--line-cool); border-radius:999px; padding:1px 8px; font-weight:650; letter-spacing:.05em; color:var(--ink-2) } .cdr-ch{ color:var(--ink-3) } .cdr-age{ font-variant-numeric:tabular-nums } .cdr-caret{ flex:0 0 auto; color:var(--ink-3); font-size:13px; line-height:1.6 } .cdr-sum{ padding:0 16px 13px 16px; font-size:var(--cdc-sub); color:var(--ink-2); line-height:1.55 } .cdr-body{ border-top:1px solid var(--line-cool); padding:14px 16px 16px; background:var(--sand) } .cdr-sec{ margin-bottom:14px } .cdr-sec-h{ font-size:var(--cdc-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px } .cdr-text{ margin:0; padding:11px 13px; background:var(--card); border:1px solid var(--line-cool); border-radius:8px; font:400 13.5px/1.6 Inter,system-ui,sans-serif; color:var(--ink-1); white-space:pre-wrap; word-break:break-word; max-height:340px; overflow:auto } .cdr-rec{ background:var(--hard-fill); border:1px solid var(--hard-line); border-radius:8px; padding:9px 12px; font-size:var(--cdc-sub); color:var(--ink-1); line-height:1.5; margin-bottom:9px } .cdr-rec-t{ font-weight:700; color:var(--signal); text-transform:uppercase; letter-spacing:.06em; font-size:var(--cdc-label); margin-right:6px } .cdr-plain{ margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:5px 13px; font-size:var(--cdc-sub); line-height:1.55 } .cdr-plain dt{ font-weight:650; color:var(--ink-3); white-space:nowrap } .cdr-plain dd{ margin:0; color:var(--ink-1) } /* THE HONEST ABSENCE moved to .cdr-badge in the 8/9 readability patch at the foot of this file. The law behind it is unchanged — an absence occupies space and explains itself — but it is a badge now rather than a paragraph, because a paragraph OF grey about the lack of content read exactly like grey content. .cdr-nodefault is deleted rather than left dormant: an unreferenced rule is the next reader's false lead. */ .cdr-broken{ border-left:3px solid var(--warn-line); background:var(--card); border-radius:0 6px 6px 0; padding:9px 12px; margin-bottom:13px; font-size:var(--cdc-sub); color:var(--warn-ink); line-height:1.55 } .cdr-path{ margin:-4px 0 13px; font-size:var(--cdc-label); color:var(--ink-3) } .cdr-path code{ font:500 10.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--card); border:1px solid var(--line-cool); border-radius:4px; padding:1px 6px; word-break:break-all } .cdr-answer{ border-top:1px solid var(--line); padding-top:13px } .cdr-a-h{ font-size:var(--cdc-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px } .cdr-a-btns{ display:flex; align-items:stretch; gap:9px; flex-wrap:wrap } .cdr-pick,.cdr-go,.cdr-no{ border-radius:9px; font:inherit; cursor:pointer; padding:9px 15px; font-size:var(--cdc-sub); font-weight:650; text-align:left; max-width:100% } .cdr-pick{ border:1px solid var(--hard-line); background:var(--card); color:var(--canopy) } .cdr-pick:hover{ border-color:var(--canopy); background:var(--hard-fill) } .cdr-pick-d{ display:block; margin-top:3px; font-weight:400; font-size:var(--cdc-label); color:var(--ink-3); line-height:1.45 } .cdr-go{ border:1px solid var(--canopy); background:var(--canopy); color:#fff } .cdr-go:hover{ background:var(--signal); border-color:var(--signal) } .cdr-no{ border:1px solid var(--line); background:var(--card); color:var(--ink-2) } .cdr-no:hover{ border-color:var(--ink-3) } .cdr-pick:disabled,.cdr-go:disabled,.cdr-no:disabled{ opacity:.55; cursor:default } .cdr-pick:focus-visible,.cdr-go:focus-visible,.cdr-no:focus-visible{ outline:2px solid var(--canopy); outline-offset:2px } .cdr-a-say{ margin-top:9px; font-size:var(--cdc-label); color:var(--ink-3); line-height:1.5 } .cdr-a-say b{ color:var(--ink-2) } /* WHAT LEFT THE NUMBER, NAMED. Quiet by construction — this is a statement of where things are, not a second list of work. It must never read as louder than the cards above it. */ .cdr-away{ flex:0 0 auto; margin-top:14px; border-top:1px solid var(--line); padding-top:13px } .cdr-away-h{ font-size:var(--cdc-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3) } /* The sentence and the
  • list this block used to draw (.cdr-away-s / -l / -w) became the chip strip in the 8/9 readability patch — see .cdr-cs at the foot of this file. Deleted with them: the narrow-glass rule that stacked the list, which the chips do not need (they wrap). */ @media (max-width:1180px){ .cdr-meta{ gap:7px } } /* ═══ THE HEADLINE — TWO NUMBERS, NEVER ONE (Craig 8/8 2:49p) ════════════════════════════════ "when I get in there, the big headline is X number ruled, X number need you." THE TWO FIGURES ARE THE SAME SIZE, ON PURPOSE. Making either one bigger would rank them, and the whole ruling is that they are different questions rather than a strong and a weak version of one. The separator between them is a middle dot and nothing else — no plus, no slash, no arrow: every one of those reads as an operation you could perform on the pair, and the one thing that must never happen to these two numbers is arithmetic. AND NEITHER HALF IS EVER COLOURED BY ITS OWN VALUE. A queue that turns amber at 5 and red at 10 is the badge again, wearing paint instead of a digit. Both halves are --canopy at every count; only SELECTION is expressed, and selection is a thing he did, not a thing the data did. */ .cdh{ flex:0 0 auto; display:flex; align-items:stretch; gap:6px; padding:2px 0 16px } .cdh-half{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; cursor:pointer; border:1px solid transparent; border-radius:11px; background:none; text-align:left; padding:8px 16px 9px; font:inherit; max-width:340px } .cdh-half:hover{ background:var(--sand); border-color:var(--line) } .cdh-half.is-on{ background:var(--hard-fill); border-color:var(--hard-line) } .cdh-half:focus-visible{ outline:2px solid var(--canopy); outline-offset:2px } .cdh-n{ font:700 40px/1 Inter,system-ui,sans-serif; color:var(--canopy); font-variant-numeric:tabular-nums; letter-spacing:-.02em } .cdh-l{ margin-top:5px; font:650 var(--cdc-name)/1.2 Inter,system-ui,sans-serif; color:var(--ink-1); letter-spacing:.02em } .cdh-s{ margin-top:2px; font-size:var(--cdc-label); color:var(--ink-3); line-height:1.45 } .cdh-dot{ align-self:center; font-size:30px; color:var(--ink-3); opacity:.5; line-height:1; padding:0 2px 18px; user-select:none } /* ═══ THE RULED LIST — an audit surface, so it reads as a RECORD and not as work ══════════════ One line per decision, tight enough to skim a screenful, with everything an argument would need folded underneath. No accent bar, no unread state, no age glow: nothing here is overdue, because nothing here is pending. The chips are the calm family the rest of this file uses — DISMISSED is grey rather than red, because deciding against something is not a failure. */ .cdu-list{ border:1px solid var(--line); border-radius:12px; background:var(--card) } .cdu-row{ border-bottom:1px solid var(--line-cool) } .cdu-row:last-child{ border-bottom:0 } .cdu-row.is-open{ background:var(--sand) } .cdu-line{ display:grid; grid-template-columns:96px minmax(0,1fr) auto; align-items:center; gap:14px; width:100%; border:0; background:none; cursor:pointer; text-align:left; padding:10px 16px; font:inherit; color:inherit } .cdu-line:hover{ background:var(--sand) } .cdu-line:focus-visible{ outline:2px solid var(--canopy); outline-offset:-2px } .cdu-chip{ justify-self:start; font:700 9.5px/1 Inter,system-ui,sans-serif; letter-spacing:.09em; border-radius:999px; padding:5px 9px; white-space:nowrap } .cdu-chip.is-ok{ background:var(--hard-fill); color:var(--canopy) } .cdu-chip.is-ap{ background:var(--warn-fill); color:var(--warn-ink) } .cdu-chip.is-no{ background:#eef0ee; color:var(--ink-3) } .cdu-what{ min-width:0; font-size:var(--cdc-sub); color:var(--ink-1); line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .cdu-meta{ font-size:var(--cdc-label); color:var(--ink-3); white-space:nowrap } .cdu-ctx{ padding:2px 16px 15px 126px } .cdu-lbl{ margin-top:10px; font-size:var(--cdc-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3) } .cdu-b{ margin-top:3px; font-size:var(--cdc-sub); color:var(--ink-2); line-height:1.5 } .cdu-b i{ color:var(--ink-3) } .cdu-turn{ color:var(--ink-3) } .cdu-file{ margin-top:11px; font:500 10.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink-3); word-break:break-all } .cdu-gap{ display:block; margin-top:7px; font-size:var(--cdc-label); color:var(--ink-3); line-height:1.55; max-width:1000px } .cdu-gap b{ color:var(--ink-2); font-weight:700 } .cdu-more{ flex:0 0 auto } .cdu-all{ flex:0 0 auto; padding:11px 2px 0; font-size:var(--cdc-label); color:var(--ink-3) } /* THE FULL COURT STATEMENT, moved off the door's hover. Quiet, same law as .cdr-away above it. */ .cdr-scope{ flex:0 0 auto; margin-top:13px; border-top:1px solid var(--line); padding-top:12px } .cdr-scope-h{ margin-top:9px; font-size:var(--cdc-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3) } .cdr-scope-h:first-child{ margin-top:0 } .cdr-scope-b{ margin-top:3px; font-size:var(--cdc-label); color:var(--ink-3); line-height:1.55; max-width:1000px } @media (max-width:1180px){ /* The figures and their words never shrink — they are the headline. The one-line explanations under them are the first thing a narrow screen can do without. */ .cdh-s{ display:none } .cdu-line{ grid-template-columns:88px minmax(0,1fr); gap:10px } .cdu-meta{ display:none } .cdu-ctx{ padding-left:16px } } /* ═══════════════════════════════════════════════════════════════════════════════════════════ READABILITY PATCH — THE NEED-YOU ROOM (Craig, live on /#/command-desk, 8/9 ~11:00, verbatim: "This is still not working for me. It's too hard to read. Everything blends together.") THIRD TIME HE HAS SAID THIS, so the diagnosis is written down rather than re-guessed. Nothing in this room was too LOUD and nothing was missing. Everything was the SAME: the ask, the lane, the channel, the age, the summary, the section headers and two paragraphs about the room itself were all within a couple of points of one another in size, weight and grey. A page where every element has equal voice has no reading order at all, so the eye has nowhere to land and the whole card arrives as one texture. ── THE PRINCIPLE: CALM MUST NEVER MEAN MUSH — HIERARCHY *IS* THE CALM ────────────────────── The instinct that produced the mush was a good one — no red, no shouting, no badges. But calm was implemented as SAMENESS, and sameness is not calm, it is noise with the volume down. A calm page is one where the reader's eye is TOLD where to go and therefore does not have to search. So this patch spends its entire budget on one thing: a real ladder. One glance must answer three questions — whose ask, what kind, what is recommended — before a single word is read. THE LADDER, and every rule below is on it: 1 THE ASK 17.5px / 750 / --ink-1 the one anchor per card 2 the summary 13px / 400 / --ink-2 the content under it 3 lane + meta 11px / --ink-3 identity and provenance, colour-coded not sized 4 chrome 10.5px / --ink-3 section labels, chips, the room's own voice Nothing on rung 2-4 may ever grow into rung 1's range. If a future element needs emphasis it takes COLOUR or a RULE, never size — there is exactly one 17.5px thing on a card and it is the question being asked. ── AND THE ROOM STOPS TALKING ABOUT ITSELF ───────────────────────────────────────────────── Two of the largest text blocks on the old screen were the room explaining its own philosophy and reassuring him nothing is sent from it. Both were TRUE and both were WORDS IN THE WAY: the reassurance is re-stated at the only moment it matters (the confirm dialog on an outbound GO), and the philosophy is one line with the full text behind a '?'. An absence, likewise, is now a BADGE — a paragraph about there being nothing to read is itself the blend he is describing. COURT-HONEST, UNCHANGED. No red. --action stays on the owner's own check. The one new hue is the GOLD of the approved 8/8 Command Desk concept, and it is spent on exactly one thing: a recommendation. Amber keeps its single job — the thing somebody has to go fix — which is why a card staged with NO recommendation wears it. Glaring there is correct: an unrecommended card is under-staged, and the funnel is supposed to hand him a recommendation, not a shrug. ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* ── RUNG 1: THE ASK IS THE ONLY ANCHOR ──────────────────────────────────────────────────────── It was 15px/650 in --canopy — the same green as the room title, the tab chrome and the links, which is precisely why it did not read as the one thing on the card that matters. Dark ink at 750 separates it from every green affordance around it as well as from the greys below it. */ .cdr-title{ font:750 17.5px/1.28 Inter,system-ui,sans-serif; color:var(--ink-1); letter-spacing:-.012em } .cdr-card.is-open .cdr-title{ color:var(--canopy) } .cdr-head{ padding:15px 16px 9px; gap:14px } /* ── RUNG 2: the summary. One clear step down, and it is the last thing on the card that is allowed to read as prose. ─────────────────────────────────────────────────────────────────── */ .cdr-sum{ padding:0 16px 14px; font-size:13px; color:var(--ink-2); line-height:1.5 } /* ── RUNG 3: identity and provenance. Small, quiet, and told apart by COLOUR rather than size. ── */ .cdr-meta{ margin-top:7px; gap:8px; font-size:11px } .cdr-ch,.cdr-age{ color:var(--ink-3) } /* THE LANE CHIP WEARS ITS FLEET COLOUR (change 2 of the 8/9 patch). Every card carried an identical grey outline, so nine cards from six different seats looked like nine cards from one. The hue is NOT invented here — it is read at render time from window._fleetBotColor, the same map the floor's fleet strip and the roster already spend, so a seat cannot wear two colours on two surfaces. Callsigns-only law holds: the chip prints "Alfred", never "hq". WHY A DOT AND NOT COLOURED TEXT: the fleet palette spans #e0a92e gold to #1e3a5f navy. Text in the seat's own hue would be crisp for half the fleet and unreadable for the other half, and a chip whose legibility depends on which bot staged it is a worse defect than the grey it replaced. So the COLOUR is carried by a dot and a tinted border — unmistakable at every hue — and the WORD stays dark ink at a fixed contrast. A lane with no ruled colour keeps the grey default rather than being given an invented one (resolver law: unresolved stays unresolved). */ .cdr-lane{ display:inline-flex; align-items:center; gap:6px; padding:2px 10px 2px 8px; border:1px solid var(--lane-line,var(--line-cool)); background:var(--lane-fill,transparent); border-radius:999px; font-weight:700; letter-spacing:.01em; color:var(--ink-1) } .cdr-lane::before{ content:''; flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:var(--lane-dot,#b6bdb7) } /* ── RUNG 4: chrome. The room's own furniture, permanently below the content. ────────────────── */ .cdr-sec-h,.cdr-a-h{ font-size:10.5px; letter-spacing:.09em; color:var(--ink-3) } .cdr-sec{ margin-bottom:16px } /* THE ROOM STOPS NARRATING (change 3). The lede was a five-line paragraph of philosophy; it is now one line and a '?'. Nothing was deleted — the full text rides on the button, so the promise is still readable by anyone who wants it and is no longer in the way of everyone who does not. */ .cdc-sub.is-tight{ margin-top:5px; font-size:12.5px; color:var(--ink-3); max-width:760px } .cdr-q{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; margin-left:7px; vertical-align:-3px; border:1px solid var(--line); border-radius:50%; background:var(--card); color:var(--ink-3); font:700 10px/1 Inter,system-ui,sans-serif; cursor:help; padding:0 } .cdr-q:hover{ border-color:var(--ink-3); color:var(--ink-2) } .cdr-q:focus-visible{ outline:2px solid var(--canopy); outline-offset:2px } /* the one-line version of the send promise, under the answer buttons */ .cdr-a-say{ margin-top:9px; font-size:10.5px; color:var(--ink-3) } /* ── AN ABSENCE IS A BADGE, NOT A PARAGRAPH (change 4) ───────────────────────────────────────── "This card carries no draft. There is nothing here to read before you answer it, which is worth knowing before you do." — twenty-six words, set in the same grey at the same size as the words that were not missing. That sentence IS the blend. The fact is two: NO DRAFT. The honest-absence law that produced the paragraph is unchanged and is better served here: the badge still occupies space, still announces itself, and can no longer be mistaken for content because it does not LOOK like content. */ .cdr-badge{ display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:6px; border:1px dashed var(--line); background:var(--sand); color:var(--ink-3); font:700 10px/1 Inter,system-ui,sans-serif; letter-spacing:.10em; text-transform:uppercase } .cdr-badge span{ font-weight:500; letter-spacing:0; text-transform:none; font-size:11px; color:var(--ink-3) } /* The one badge that is meant to be seen from across the room. Amber, not red — it is a filing gap in OUR funnel, not something wrong in his court — but solid rather than dashed, because a card staged with no recommendation is the one thing on this screen somebody has to go fix. */ .cdr-badge.is-loud{ border-style:solid; border-color:#d8b45e; background:var(--warn-fill); color:var(--warn-ink) } .cdr-badge.is-loud span{ color:var(--warn-ink); opacity:.85 } /* ── THE RECOMMENDATION, AS THE APPROVED CONCEPT DRAWS IT (change 6) ─────────────────────────── Gold left bar on a warm ground, from docs/mockups/2026-08-08 - Command Desk - HQ Concept.html (style reference only — not one data field came from that file). It is the single loudest CALM thing on a card: no border box competing with the card's own edge, just a bar the eye catches on its way down. GOLD IS NOT AMBER HERE and the two never touch: amber is dashed, small-caps and means "go fix this"; gold is a solid left rule under running text and means "here is what we would do." Different shape, different weight, different job. */ .cdr-rec{ margin:0 0 11px; padding:11px 15px; border:0; border-left:3px solid #b3862f; border-radius:0 9px 9px 0; background:#f6f1e5; font-size:13.5px; color:var(--ink-1); line-height:1.5 } .cdr-rec-t{ display:block; margin:0 0 3px; font:700 10px/1 Inter,system-ui,sans-serif; letter-spacing:.10em; text-transform:uppercase; color:#7a5a1c } /* ── THE FOOTER STOPS BEING A WALL OF SENTENCES (change 5) ───────────────────────────────────── It read: "ALSO IN YOUR COURT — but not rulings, and not in that number", then a sentence of explanation, then eight list rows each spelling out "12 close gates → the month-end close board". Nine lines of prose to carry eight numbers, none of them clickable — a count-wall, and the densest patch of undifferentiated grey on the screen. Same numbers, same fields, zero sentences: one strip of chips. THE NUMBERS DID NOT CHANGE and nothing new is computed — each chip reads the exact _nuAudit.turnedAway row its sentence read. A chip that has a real destination is a BUTTON and goes there. A chip whose surface folded into this very room is drawn DASHED and inert, because a button that appears to navigate and does not is the dead-button defect, and this room already carries a written rule against it. */ .cdr-away{ margin-top:16px; padding-top:12px } .cdr-away-h{ font-size:10.5px; letter-spacing:.09em } .cdr-cs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px } .cdr-cs-i{ display:inline-flex; align-items:baseline; gap:6px; padding:5px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); font:inherit; font-size:11.5px; color:var(--ink-2); text-decoration:none; white-space:nowrap } .cdr-cs-i b{ font-weight:700; color:var(--ink-1); font-variant-numeric:tabular-nums } .cdr-cs-i .cdr-cs-go{ color:var(--canopy); font-weight:650 } button.cdr-cs-i{ cursor:pointer } button.cdr-cs-i:hover{ border-color:var(--canopy); background:var(--hard-fill) } button.cdr-cs-i:focus-visible{ outline:2px solid var(--canopy); outline-offset:2px } span.cdr-cs-i{ border-style:dashed; color:var(--ink-3) } span.cdr-cs-i b{ color:var(--ink-2) } span.cdr-cs-i .cdr-cs-go{ color:var(--ink-3); font-weight:500 } /* The court statement, collapsed onto one line beside its own '?' — same idiom as the lede, for the same reason. It sits under the chip strip, so it must read as the quietest thing in the room: it is a policy note, not a piece of work. */ .cdr-scope{ display:flex; align-items:center; margin-top:11px; padding-top:11px } .cdr-scope .cdr-scope-h{ margin-top:0; font-size:10.5px; letter-spacing:.09em } /* ═══════════════════════════════════════════════════════════════════════════════════════════════ THE COMMAND DESK FACE — HQ's approved 8/8 concept, built (docs/mockups/2026-08-08 - Command Desk - HQ Concept.html) Style reference only, and the reference is narrow on purpose: the concept's gold recommendation rule (already shipped in the 8/9 patch above), its kind chips, and its strike-through ledger. Everything else stays in THIS room's tokens — three-green + court-honest colour, the --cdc-* reading scale, amber for our own filing gaps and never for his court. The concept is drawn in a warmer palette than the shipped glass; matching its hexes would have put a second design system on one screen, so what is borrowed is the SHAPE — a gold left rule, a chip that names a kind, a line through a finished row — and not the paint. THE READABILITY LADDER FROM 8/9 IS THE FLOOR, NOT A STARTING POINT (builder2, 131ec13/a353d92): the ask line stays the largest and heaviest text on a card, every new element here is quieter than it, absences are badges rather than paragraphs, and nothing added below competes with the one line the eye is supposed to land on. ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* ── THE FACE IS ONE PAGE, NOT THREE SCROLLERS ──────────────────────────────────────────────── The Need-you list was its own scroll pane back when it was the only thing in the room. With the overflow block and the ledger below it, that pane became a flex sibling competing for height and squeezed the HAND — the whole point of the screen — down to ONE visible card with four hidden in a nested scrollbar. Caught by looking at the render, not the DOM: the probe counted five cards and was right; only one of them was on the screen. So the ROOM scrolls and the list does not. That is also what the concept draws: cards, then the ledger, one document. */ /* The 8/8 override that gave the ruling room its own scroller. The room is one document now, so both of these yield to it — see .cdc-body. */ .cdr-wrap{ overflow:visible } .cdr-list{ overflow:visible } /* ── THE KIND CHIP ──────────────────────────────────────────────────────────────────────────── The concept's 🔐 ACCESS / ⚖️ RULING / 🧭 STRUCTURE, in this room's palette. It sits in the meta row BELOW the ask line and is deliberately small: it says what class of decision this is, which is context for the ask, never a substitute for reading it. THE "NOT SET" VARIANT IS QUIET, AND THAT IS A JUDGEMENT: a card with no kind is still fully rulable, so its gap is a note. A card with no RECOMMENDATION is not — the funnel owes him one — so that gap is the loud amber badge. Two absences, two volumes, on purpose. */ .cdr-kind{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font:700 9.5px/1.6 Inter,system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; border:1px solid var(--line-cool); background:var(--sand); color:var(--ink-2) } .cdr-kind.is-access{ border-color:#c3d6e4; background:#eef4f8; color:#33566e } .cdr-kind.is-ruling{ border-color:var(--warn-line); background:var(--warn-fill); color:#7a5a1c } .cdr-kind.is-structure{ border-color:var(--hard-line); background:var(--hard-fill); color:var(--signal) } .cdr-kind.is-none{ border-style:dashed; color:var(--ink-3); background:transparent; cursor:help } /* The deal, stated inline in the room's own lede line — same size as the lede, so it reads as part of the sentence rather than as a second meter. There is exactly one meter on this screen and it is the headline. */ .cdr-deal{ font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums } .cdr-deal.is-held{ color:var(--warn-ink) } /* ── THE ROLL (Craig 8/10) ──────────────────────────────────────────────────────────────────── The rest of his rulings, by name, in the court strip's row idiom. Drawn deliberately UNLIKE the cards above it: flat rows on the sand, no card edge, no shadow, no answer control — the visual difference is what says "this is the list, the hand is up there". A row is one line and stays one line; a long title ellipsises rather than wrapping the row into a paragraph, because forty two-line rows is the pile the funnel exists to prevent. The .cdr-held rules this replaces carried the old "counted but never drawn" block. */ .cdr-roll{ flex:0 0 auto; margin-top:14px; padding:11px 14px 8px; border:1px dashed var(--line); border-radius:9px; background:var(--sand) } .cdr-roll-h{ display:flex; align-items:center; font:700 12px/1.3 Inter,system-ui,sans-serif; color:var(--ink-2); letter-spacing:.01em; margin-bottom:6px } /* Past ~14 rows the list scrolls inside itself rather than pushing the ledger off the page — all of it stays in ONE view, which a click-through would not. */ .cdr-roll-list{ max-height:min(46vh,520px); overflow:auto } .cdr-roll-row{ display:flex; align-items:center; gap:10px; padding:6px 2px; border-top:1px solid var(--line-cool) } .cdr-roll-row:first-child{ border-top:0 } .cdr-roll-t{ flex:1 1 auto; min-width:0; font:600 12.5px/1.35 Inter,system-ui,sans-serif; color:var(--ink-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } /* The meta never wins width from the title — the name is why the row is here. A card that leaves the firm wears the one distinction worth a colour on a list this long. */ .cdr-roll-m{ flex:0 0 auto; display:flex; align-items:center; gap:6px; white-space:nowrap } .cdr-roll-row .cdr-ch{ cursor:help } .cdr-roll-row .cdr-ch.is-out{ color:var(--canopy); font-weight:600 } .cdr-roll-row.is-broken .cdr-roll-t{ color:var(--warn-ink) } .cdr-roll-bad{ font:700 10px/1 Inter,system-ui,sans-serif; color:var(--warn-ink); cursor:help } .cdr-roll-go{ flex:0 0 auto; border:1px solid var(--hard-line); background:var(--hard-fill); color:var(--canopy); border-radius:7px; padding:3px 9px; cursor:pointer; font:700 10.5px/1 Inter,system-ui,sans-serif; letter-spacing:.03em } .cdr-roll-go:hover{ background:var(--canopy); color:#fff; border-color:var(--canopy) } .cdr-roll-go:focus-visible{ outline:2px solid var(--canopy); outline-offset:2px } /* ── THE ONE-NUMBER SEAL ────────────────────────────────────────────────────────────────────── Green state is deliberately the quietest type in the room: it is a receipt, not a claim on his attention. The red state is the only place in this file that raises its voice, and it has earned it — it means the room is lying about his court, which is Craig-court by definition, so the alarm-shaped treatment is court-honest here. */ .cdr-onenum{ flex:0 0 auto; margin-top:10px; font:500 10.5px/1.5 Inter,system-ui,sans-serif; color:var(--ink-3); font-variant-numeric:tabular-nums } .cdr-onenum:empty{ display:none } .cdr-onenum.is-off{ margin-top:12px; padding:9px 12px; border-radius:8px; border:1px solid var(--warn-line); border-left:3px solid var(--warn-ink); background:var(--warn-fill); color:var(--warn-ink); font:700 11.5px/1.55 Inter,system-ui,sans-serif; max-width:760px } /* ── A PAYEE IS A DOOR (Craig 12:05) ────────────────────────────────────────────────────────── Underlined in the room's own green so a name reads as walkable inside running prose without turning the sentence into a link farm. A payee the drill cannot open is NOT a button and wears a plain dotted rule instead — it says "this is a known payee" while promising no click. */ .cdr-payee{ border:0; padding:0; background:none; font:inherit; color:var(--canopy); border-bottom:1px solid var(--hard-line); cursor:pointer } .cdr-payee:hover{ border-bottom-color:var(--canopy); background:var(--hard-fill) } .cdr-payee:focus-visible{ outline:2px solid var(--canopy); outline-offset:2px } .cdr-payee.is-pending{ border-bottom-style:dashed } .cdr-payee.is-dead{ color:inherit; border-bottom:1px dotted var(--line); cursor:help } /* NO RULE HERE FOR THE DRILL PANEL'S STACKING, AND THAT IS DELIBERATE. This probe found the drill opening BEHIND the room — `.q21-dr` was z-index 60 against the portal's 2000, so a payee door clicked from any portal room produced a perfectly shaped, perfectly invisible sheet (elementFromPoint over it returned `.fgr-head`, this room's own header). builder2 hit the identical defect in the QC dashboard within the same hour and fixed it at SOURCE, in the file that owns the panel: `.q21-dr` is z-index 2100 as of 6c8dbe3. A scoped copy of that fix lived here for about twenty minutes and is deleted rather than left dormant, because two rules setting one panel's stacking is how the two rooms start disagreeing about it — and the surviving one is in the right file. If the drill ever opens behind a room again, the fix is one line in widgets/qc-proof/styles.css and not a second line in here. */ /* ── RULED TODAY — THE STRIKE-THROUGH LEDGER ────────────────────────────────────────────────── The concept's lower half: "a card leaves this screen the moment you rule, and joins the strike-through ledger below with its timestamp and owner." THE STRIKE IS THE RECEIPT, SO IT IS EARNED. `.is-struck` draws the line; `.is-unconfirmed` does not, and wears the amber note instead. That is the entire visual contract of this block: a line through a row means this room read that filing back out of the Item Ledger. */ .cdl{ flex:0 0 auto; margin-top:22px; border-top:1px solid var(--line); padding-top:14px } .cdl-h{ display:flex; align-items:center; gap:2px } .cdl-h-t{ font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3) } .cdl-h-n{ margin-left:auto; font:700 var(--cdc-sub)/1 Inter,system-ui,sans-serif; color:var(--ink-2); font-variant-numeric:tabular-nums } .cdl-rows{ margin-top:8px } .cdl-row{ border-bottom:1px dashed var(--line) } .cdl-row:last-child{ border-bottom:0 } .cdl-row.is-open{ background:var(--sand) } .cdl-line{ display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:baseline; gap:12px; width:100%; text-align:left; border:0; background:none; font:inherit; cursor:pointer; padding:7px 6px } .cdl-line:hover{ background:var(--sand) } .cdl-line:focus-visible{ outline:2px solid var(--canopy); outline-offset:-2px } .cdl-t{ font-size:var(--cdc-label); color:var(--ink-3); font-variant-numeric:tabular-nums } .cdl-what{ min-width:0; font-size:var(--cdc-sub); color:var(--ink-2); line-height:1.45; overflow:hidden; text-overflow:ellipsis } .cdl-row.is-struck .cdl-what{ text-decoration:line-through; text-decoration-color:var(--ink-3); text-decoration-thickness:1px } .cdl-who{ font-size:var(--cdc-label); color:var(--signal); white-space:nowrap } .cdl-row.is-unconfirmed .cdl-who{ color:var(--warn-ink) } .cdl-warn{ margin:0 6px 8px 70px; padding:7px 11px; border-left:3px solid var(--warn-line); background:var(--warn-fill); border-radius:0 7px 7px 0; font-size:11.5px; color:var(--warn-ink); line-height:1.55 } .cdl-warn b{ font-weight:750 } .cdl-receipt{ margin:0 6px 7px 70px; font-size:10.5px; color:var(--ink-3) } .cdl-receipt code{ font:500 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; background:#f1f2f1; border-radius:4px; padding:1px 5px } .cdl-fold{ padding:2px 8px 14px 70px } .cdl-sum,.cdl-res,.cdl-ask{ margin:0 0 7px; font-size:var(--cdc-sub); color:var(--ink-2); line-height:1.55 } .cdl-res b{ color:var(--ink-1); font-weight:650 } .cdl-story{ margin-top:9px; padding:10px 13px; border:1px solid var(--line-cool); border-radius:9px; background:var(--card) } .cdl-story-h{ font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px } .cdl-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; align-items:center } .cdl-when{ margin-top:7px; font-size:10.5px; color:var(--ink-3) } .cdl-nostory{ margin-top:8px; padding:8px 12px; border:1px dashed var(--line); border-radius:8px; font-size:11.5px; color:var(--ink-3); line-height:1.55 } .cdl-doors{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px } .cdl-door{ display:inline-flex; align-items:center; padding:4px 11px; border-radius:999px; border:1px solid var(--hard-line); background:var(--card); color:var(--canopy); cursor:pointer; font:650 11px/1.5 Inter,system-ui,sans-serif; text-decoration:none } .cdl-door:hover{ background:var(--hard-fill); border-color:var(--canopy) } .cdl-door:focus-visible{ outline:2px solid var(--canopy); outline-offset:2px } .cdl-ref code{ font:500 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink-3); background:#f1f2f1; border-radius:4px; padding:2px 6px } /* A CLAIM WITH NO DOOR SAYS SO. Dashed, quiet, and it occupies the slot a door would have — the same shape vendor_history uses for its own missing doors. */ .cdl-nodoor{ font-size:10.5px; color:var(--ink-3); border:1px dashed var(--line); border-radius:999px; padding:4px 11px } .cdl-blank{ margin-top:8px; padding:16px 14px; border:1px dashed var(--line); border-radius:9px; font-size:11.5px; color:var(--ink-3); line-height:1.6 } .cdl-foot{ margin-top:10px; font-size:10.5px; color:var(--ink-3); line-height:1.55 } @media (max-width:1180px){ .cdr-title{ font-size:16.5px } .cdl-line{ grid-template-columns:46px minmax(0,1fr); row-gap:2px } .cdl-who{ grid-column:2 } .cdl-fold,.cdl-warn,.cdl-receipt{ margin-left:0; padding-left:8px } } /* ═══════════════════════════════════════════════════════════════════════════════════════════ THE BRIEF — v5 (Craig 8/9 9:26 PM). The room is a DOCUMENT, and this is the document. His words: "It's supposed to be just a place for me to check on project statuses and a place to see the questions that I've asked… give me a summarized bulleted list of what's pending or what you're working on… I just kind of want to see it visibly inside of the command desk." And: "the whole top section is frozen with words everywhere." ── WHAT THIS STYLESHEET IS TRYING TO DO ──────────────────────────────────────────────────── Read like the morning brief HQ hands him in chat: headings you can find with your eye, one plain sentence per line, and the metadata quiet enough that it never competes with the sentence. A measure near 1080px rather than 1680 — the old width let a line run seventeen words, which is a spreadsheet's line length, not a document's. ── MARIANNE-FIRST ────────────────────────────────────────────────────────────────────────── Craig: "I'm trying to figure out how this is going to be easy for Marianne to do all day long." The daily operator is the design target. Every toss-up goes to the calmer option: one weight of grey for all metadata, one accent, no second colour competing for the eye, and generous line height, because this is read for eight hours and not glanced at for eight seconds. ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* ── the nav. IT CARRIES NO COUNT (nav-face law) — the doors say where they go, nothing more. ── */ .cdb-nav{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:0 0 18px } .cdb-navb{ border:0; background:transparent; font:inherit; font-size:var(--cdc-sub); color:var(--ink-3); padding:7px 13px; border-radius:999px; cursor:pointer; white-space:nowrap } .cdb-navb:hover{ color:var(--ink-1); background:var(--sand) } .cdb-navb.is-on{ background:var(--canopy); color:#fff } .cdb-navb:focus-visible{ outline:2px solid var(--canopy); outline-offset:2px } .cdb{ padding-bottom:6px } .cdb-lede{ font-size:var(--cdc-sub); color:var(--ink-3); line-height:1.55; padding:0 0 22px; max-width:70ch } /* the address itself, when the lede names one (#/command-desk/today) — same chip as a code span on an ask row, so a thing he can paste looks like a thing he can paste */ .cdb-lede code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; background:var(--sand); border:1px solid var(--line); border-radius:4px; padding:1px 4px } /* ── a section. THE HEADING IS FINDABLE AND THE LIST IS PLAIN. ─────────────────────────────── */ .cdb-sec{ padding:0 0 30px } .cdb-h{ font:650 17px/1.3 Inter,system-ui,sans-serif; color:var(--canopy); margin:0 0 12px; letter-spacing:-.01em; display:flex; align-items:center; gap:9px } .cdb-icon{ font-size:15px; line-height:1 } .cdb-items{ list-style:none; margin:0; padding:0 } /* A LINE, NOT A CARD. Cards were the v3/v4 instinct and they are why nine items filled a screen. A rule between rows is enough separation for a document, and it lets eight items be eight items rather than eight boxes. */ .cdb-item{ display:block; padding:11px 0 12px; border-top:1px solid var(--line) } .cdb-item:first-child{ border-top:0 } /* A MEASURE, because this is prose. An unbounded line ran seventeen words across a 1,030px column, which is a spreadsheet's line length and not a document's — the eye loses the start of the next line, which is most of what "walls of text" actually is. */ .cdb-t{ display:block; font-size:var(--cdc-read); line-height:1.5; color:var(--ink-1); max-width:78ch } /* THE METADATA IS ONE GREY AND ONE SIZE. Every distinct treatment down here is a thing competing with the sentence above it, which is what "everything blends together" actually meant: not too little contrast, too many things asking to be looked at. */ .cdb-m{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:3px; font-size:var(--cdc-label); color:var(--ink-3) } .cdb-who{ font-weight:600; color:var(--ink-2) } .cdb-note,.cdb-when{ color:var(--ink-3) } /* THE PROOF STATE. Green ONLY when something independent said so — court-honest colour: an unproven row is grey, never a softer green. There is no amber here and no red: "no sign-off names this job yet" is a fact about our filing, not an alarm in his court. */ .cdb-proof{ color:var(--ink-3) } .cdb-proof.is-tied{ color:var(--signal); font-weight:600 } /* Severity on the watch list. Amber is the loudest thing here, and it is still calm. */ .cdb-sev{ font-weight:700; letter-spacing:.04em; font-size:10.5px } .cdb-sev.is-high{ color:var(--warn-ink) } .cdb-sev.is-med,.cdb-sev.is-low{ color:var(--ink-3) } /* ── the self-contained fields on a 📋 card (Craig: "no clear rationale… supposed to remember in my brain what this is"). Three labelled lines, readable cold, nothing behind a click. ───── */ .cdb-fld{ display:block; margin-top:6px; font-size:var(--cdc-sub); line-height:1.55; color:var(--ink-2); max-width:78ch } .cdb-fld b{ color:var(--ink-1); font-weight:650; margin-right:5px } .cdb-fld[data-fld="choices"]{ color:var(--ink-1) } /* THE UNDER-STAGED FLAG. Amber, never red — our filing gap, not something wrong in his court. It looks like a badge and not like content, on purpose: it must be impossible to mistake for the context it is reporting the absence of. */ .cdb-flag{ display:block; margin-top:8px; padding:7px 11px; border-radius:8px; border:1px solid var(--warn-line); background:var(--warn-fill); font-size:var(--cdc-label); font-weight:700; color:var(--warn-ink); max-width:78ch } .cdb-flag span{ display:block; font-weight:400; margin-top:2px; line-height:1.5 } /* ── the foot. COUNTS FOOT, they never ride the heading. ─────────────────────────────────── */ .cdb-foot{ margin:11px 0 0; font-size:var(--cdc-label); color:var(--ink-3); line-height:1.55; max-width:78ch } .cdb-more{ border:0; background:transparent; font:inherit; font-size:var(--cdc-label); color:var(--signal); font-weight:650; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:2px } .cdb-more:hover{ color:var(--canopy) } /* ── his asks, one line each ──────────────────────────────────────────────────────────────── */ .cdb-asklist .cdb-ask{ display:flex; align-items:baseline; gap:11px; padding:9px 0; border-top:1px solid var(--line) } .cdb-asklist .cdb-ask:first-child{ border-top:0 } .cdb-n{ flex:0 0 auto; font-size:var(--cdc-label); font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums; min-width:30px } .cdb-ask .cdb-t{ flex:1 1 auto; min-width:0 } .cdb-st{ flex:0 0 auto; font-size:var(--cdc-label); font-weight:650; color:var(--ink-2) } .cdb-st.is-work{ color:var(--signal) } .cdb-roll{ flex:0 0 auto; font-size:var(--cdc-label); color:var(--ink-3); font-variant-numeric:tabular-nums } /* ── TODAY'S ASKS — the day ledger, top of the brief (Craig 8/13 8:29p) ───────────────────── Court-honest: the strip that holds HIS items is the warn palette (thin proof / stopped on him), never red and never --action. --action stays out of this board entirely; it is the owner's own green check one file over. DONE IS GRAYED, NEVER STRUCK — the row keeps every word, it just stops competing for the eye (desk-board-done-is-grayed law). */ .cdt-count{ margin-left:8px; font-size:var(--cdc-label); font-weight:700; color:var(--ink-3); font-variant-numeric:tabular-nums } .cdt-list{ margin:0 } .cdt-row{ display:flex; align-items:baseline; gap:11px; padding:9px 0; border-top:1px solid var(--line) } .cdt-row:first-child{ border-top:0 } .cdt-at{ flex:0 0 auto; min-width:46px; font-size:var(--cdc-label); font-weight:650; color:var(--ink-3); font-variant-numeric:tabular-nums } .cdt-mid{ flex:1 1 auto; min-width:0 } .cdt-ask{ display:block; font-size:var(--cdc-read); line-height:1.5; color:var(--ink-1) } .cdt-ask code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; background:var(--sand); border:1px solid var(--line); border-radius:4px; padding:1px 4px } .cdt-ask a,.cdt-out a{ color:var(--signal); text-decoration:underline } .cdt-out{ display:block; margin-top:2px; font-size:var(--cdc-sub); line-height:1.5; color:var(--ink-3) } .cdt-out code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em } .cdt-st{ flex:0 0 auto; font-size:var(--cdc-label); font-weight:650; color:var(--ink-2); white-space:nowrap } .cdt-st.is-work{ color:var(--signal) } .cdt-st.is-court{ color:var(--warn-ink) } .cdt-st.is-done{ color:var(--ink-3) } /* the grayed band: lighter ink throughout, no line-through anywhere */ .cdt-list.is-done .cdt-ask{ color:var(--ink-3); text-decoration:none } .cdt-list.is-done .cdt-out{ color:var(--ink-3); opacity:.85 } /* HIS COURT, ITS OWN STRIP — the one thing on this board that is stopped until he moves it */ .cdt-strip{ border:1px solid var(--warn-line); background:var(--warn-fill); border-radius:10px; padding:10px 14px 12px; margin:0 0 14px } .cdt-striph{ font-size:var(--cdc-label); font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--warn-ink); margin-bottom:4px } .cdt-strip .cdt-row{ border-top-color:var(--warn-line) } .cdt-none{ margin:0; font-size:var(--cdc-sub); color:var(--ink-3); line-height:1.55 } /* ── the doors, and the two figures ───────────────────────────────────────────────────────── */ .cdb-door{ border:0; background:transparent; font:inherit; font-size:var(--cdc-label); color:var(--signal); font-weight:650; cursor:pointer; padding:0 } .cdb-door:hover{ color:var(--canopy) } .cdb-door.is-big{ flex:0 0 auto; align-self:flex-start; border:1px solid var(--line); border-radius:999px; padding:8px 16px; background:var(--card); font-size:var(--cdc-sub) } .cdb-door.is-big:hover{ border-color:var(--signal) } /* THE TWO POPULATIONS, ONE QUIET LINE, BELOW THE BRIEF. They were the first thing on the screen for a day and they are a footnote now — still never summed, still each its own door. */ .cdb-figs{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:4px 0 26px; margin-top:2px; border-top:1px solid var(--line) } .cdb-fig{ border:0; background:transparent; font:inherit; font-size:var(--cdc-sub); color:var(--ink-3); cursor:pointer; padding:14px 0 0 } .cdb-fig b{ color:var(--ink-1); font-weight:700; font-variant-numeric:tabular-nums; font-size:var(--cdc-name); margin-right:4px } .cdb-fig:hover{ color:var(--ink-1) } .cdb-fig:hover b{ color:var(--signal) } /* ── narrow ───────────────────────────────────────────────────────────────────────────────── */ @media (max-width:820px){ .cdc-wrap{ padding:12px 16px 50px } .cdb-figs{ gap:14px } }