/* * dh.css — the Data Halo design system: tokens + components for the rail world. * Born 2026-07-21 from the Server Console rail sitting (mockups/server-console-rail.html); * grew the feed shape + the rule-of-two generalizations at the Activity rail sitting the same * day (mockups/activity-rail.md is that decision index). Generalized so far: dh-card (the * surface card), dh-filter (the toolbar filter input), dh-seg (segmented control). Judged and * deliberately NOT generalized: the two toolbars (console's is an in-card bezel strip, the * feed's is a standalone instrument card — different species); category chips vs role chip * (filter button vs status label); theme-seg's merge into dh-seg waits for its next touch. * No Bootstrap, no Font Awesome, no icon fonts: native elements + inline SVG + these tokens * (the 2026-07-20 rulings). Light + dark via prefers-color-scheme with data-theme override. */ :root { --ground: #eef0f3; --surface: #ffffff; /* surface-2 is THE INPUT WELL (RULED Mark 2026-08-13, from the justify-input specimen): every text-entry control must visibly differ from what it sits on. Card-dwellers wear surface-2; rail-dwellers (rail-filter, rail-search) and inputs inside surface-2 zones (builder-row) wear surface — the point is the DIFFERENCE, not the token. An input that matches its background is a bug. */ --surface-2: #f5f6f8; --line: #d8dce3; --line-soft: #e4e7ec; --ink: #1c2430; --ink-2: #4a5568; /* ink-3 darkened #7b8494 → #636e7f (the specimen-board sitting, 2026-08-13): the whisper register measured 3.3–3.8 against every Light background — under the 4.5 normal-text bar on text that is almost always 11–13px. This value clears 4.5 on ground/surface/surface-2 (4.52/5.16/4.77); btn-fill at 4.15 carries only verb-btn ICONS (a 3.0-bar shape). */ --ink-3: #636e7f; /* accent = THE BRAND BLUE in Light (Mark, 2026-08-13, the specimen-board sitting's close: "the primary button color could be a bit more saturated"). The old #2d4d75 grey-navy was the last register still off the mark's hue after the day pulled links and btn-fill brand- ward. #224193 improves every ratio (white labels 8.64 → 9.35) — saturation AND darkness moved together. accent-soft/check-fill washes re-based to the same RGB below. In Light, accent and --link now coincide by design; the tokens stay forked (Dark differs, and verbs vs links may diverge again). */ --accent: #224193; --accent-ink: #ffffff; /* accent-soft α 0.10 → 0.18 in Light (Mark's project-home catch, 2026-08-13, the specimen-board sitting): the hover wash on rail doors/links read near-invisible — a 1.17 step off white. 0.18 composites to 1.34; accent text on the wash (selected chips/segs) still measures 6.4. This is the hover AND selected register (55 sites) — strengthen together, never fork them. */ --accent-soft: rgba(34, 65, 147, 0.18); /* the LINK register (Mark's project-home catch, 2026-08-13, the specimen-board sitting): accent was doing double duty as control color AND hyperlink color, and the desaturated navy read "almost grey — not clear it's a link." Links now wear the BRAND blue (--logo-primary's #224193) — unmistakably a hyperlink, and it ties the palette to the mark. Controls (buttons, checkboxes, selected states, verbs) stay on --accent; only navigation TEXT wears --link. Dark keeps the accent value for now — its own sitting. */ --link: #224193; /* gold/warn darkened #a97a10 → #8c6c00 (the docket ruling + same-day re-saturation): the gold register measured 3.3–3.8 as small text (eyebrow, via-tags, Admin chip, decide-seg, fate-swept, warm clocks). First cut #8a6410 read "a bit too brown" in emphasis words (Mark's eyeball) — #8c6c00 pushes hue 41° → 46° and saturation to 100%: true gold, not brown. Surface 4.93 passes; ground-dwellers (day dividers, fork light) sit 4.32 — bold uppercase, accepted. gold-line stays bright #c9a227 — the jewelry keeps its shine, only the WORDS darkened. */ --gold: #8c6c00; --gold-line: #c9a227; --good: #2e7d46; --good-soft: rgba(46, 125, 70, 0.12); --warn: #8c6c00; --warn-soft: rgba(169, 122, 16, 0.14); /* bad darkened #a83a32 → #96302a (the docket ruling): danger labels on the strengthened btn-fill sat at 4.00 — now 4.82; white-on-red danger-btn improves 6.33 → 7.63. */ --bad: #96302a; --bad-soft: rgba(150, 48, 42, 0.12); --mute: #5c6675; /* mute-soft α 0.12 → 0.18 (Mark's manifests walk, 2026-08-13): the quiet-pill wash was near-invisible on white (1.06) — same faintness accent-soft was cured of this morning, and Dark already runs its mute wash at 0.18. All quiet pills inherit together. */ --mute-soft: rgba(92, 102, 117, 0.18); --map-grid: #dfe3e9; --map-water: #d4e0e8; --shadow: 0 1px 2px rgba(16, 21, 29, 0.06), 0 8px 24px rgba(16, 21, 29, 0.07); /* the button-presence cue (Abby's note, 2026-07-29): standalone buttons wear a filled ground + this whisper of shadow so they read as PRESSABLE against a white card — classic-page muscle memory expects buttons to stand off the background. The quiet registers (in-table .row-verb, icon buttons, segs) stay flat by design. */ /* native controls follow the theme (Mark's checkbox catch, 2026-07-30): without a declared color-scheme the browser draws form controls in LIGHT UA style regardless of our tokens — an unchecked checkbox is a glaring white square on a dark room (accent-color only tints the CHECKED state). Declared per theme block, exactly parallel to the tokens, so checkboxes, radios, selects, scrollbars, and file inputs all render dark-appropriate in Dark. */ color-scheme: light; /* button presence (2026-07-29 register, STRENGTHENED 2026-07-30 — Mark: surface-2 on a white card is barely a step in Light; STRENGTHENED AGAIN 2026-08-13 at the specimen-board sitting — Mark: #e2e7ee "does not pop enough to indicate buttons." #c7d1de moves fill-vs-card from 1.24 to 1.54; ink-2 labels hold 4.87, ink-3 icons 3.34 — above their bars. Third time this register needed more presence: resist the instinct to quiet it back down. Re-hued same day (Mark: "could lean blue-er"): #cad1e5 is the BRAND blue #224193 at a 24% tint — identical weight (pop 1.53), every text ratio a hair better, but the hue now ties to the mark like the --link register does. Weight and hue are separate dials here. De-greyed further same day (Mark's walk: "could become less grey"): a pure tint desaturates as it lightens, so #c2cdee bends toward the blue at HELD luminance — sat 34% → 56%, pop 1.58, labels 4.75 / icons 3.26 / danger 4.00 all hold. Next stop if wanted: #bec9f0 (62%), which costs the danger label (3.86) and starts reading periwinkle. */ --btn-fill: #c2cdee; /* btn-ink — the verb-button LABEL ink (Mark, same walk: "the button text can also be less grey, moving in the direction of our link text"). 70% brand / 30% ink-2: unmistakably blue, but a step short of full brand so secondary verbs don't impersonate the primary (which speaks white-on-brand). 5.62 on btn-fill, 8.89 on surface. Dark = its ink-2 value, zero dark change. Further stops if wanted: #28448d (85%), #224193 (full). */ --btn-ink: #2e4786; /* btn-hover — hover DEEPENS, never lightens (the inversion fix, Mark's docket ruling 2026-08-13): accent-soft is lighter than the strengthened btn-fill, so filled buttons faded on hover. Derived, not hardcoded — follows accent and btn-fill per theme. Only for controls RESTING on btn-fill; ground-dwellers keep accent-soft (it darkens them). */ --btn-hover: color-mix(in srgb, var(--accent) 14%, var(--btn-fill)); --check-fill: rgba(34, 65, 147, 0.20); /* check-line is THE CONTROL-OUTLINE TOKEN (RULED Mark 2026-08-13, the specimen-board sitting, generalized from the Tie Ins catch): every INTERACTIVE control — inputs, selects, textareas, verb/ghost/chip buttons, segs, filter chips, dropdown summaries — wears this border. --line is for SURFACES ONLY: cards, dialogs, popovers, tables, notes, readonly displays. Dashed borders are their own register (the not-yet-born). New controls take --check-line; if a control ships on --line, that is a bug. */ --check-line: #b3c0d2; --btn-shadow: 0 1px 3px rgba(16, 21, 29, 0.14); --radius: 10px; /* the category hue ramp (Activity rail sitting, 2026-07-21): identity colors for receipt category dots. Small marks need higher chroma than text tokens, so these do NOT alias --good/--gold (ruled at the sitting — the aliases pulled import/qc to text saturation). cron has no fill of its own: it renders HOLLOW (see .dot.cat-cron) — machine time wears an outline, no human hand, no fill. */ --cat-import: #2e8b4f; --cat-export: #2f6fc4; --cat-read: #8a8f9c; --cat-edit: #8046c8; --cat-qc: #cfa004; --cat-admin: #cc5a14; --cat-auth: #c23b7e; --cat-cron: #5c6675; --cat-system: #a1242e; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --ground: #10151d; --surface: #1a2230; --surface-2: #202a3a; --btn-fill: #263349; --btn-ink: #aab4c4; --check-fill: rgba(111, 154, 208, 0.26); --check-line: #44546f; --line: #2c3749; --line-soft: #242e3f; --ink: #e8ecf2; --ink-2: #aab4c4; /* dark whisper/mute/accent/bad lifted (the Dark docket, Mark 2026-08-13 — mirrors the Light day: whispers 4.13→5.36 on surface, mute chips 2.84→5.19, links/accent-as-text 3.74→4.96 on surface-2, danger labels 3.73→4.33 on btn-fill). Washes deliberately KEEP the old darker RGB: in Dark, a wash re-based to a lighter parent lightens the chip's ground and eats the text gain — measured, not guessed. */ --ink-3: #8b96ab; --accent: #6f9ad0; --accent-ink: #0e141d; --accent-soft: rgba(91, 132, 184, 0.14); --link: #6f9ad0; --gold: #c9a227; --gold-line: #c9a227; --good: #43a860; --good-soft: rgba(67, 168, 96, 0.16); --warn: #d9a521; --warn-soft: rgba(217, 165, 33, 0.15); --bad: #e07a6a; --bad-soft: rgba(217, 106, 91, 0.16); --mute: #8894a5; --mute-soft: rgba(107, 118, 134, 0.18); --map-grid: #232d3d; --map-water: #1c2836; --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.35); --cat-import: #4cbf72; --cat-export: #6aa4e8; --cat-read: #7e8aa0; --cat-edit: #ab8ae0; --cat-qc: #e2b626; --cat-admin: #e07b2e; --cat-auth: #e070ac; --cat-cron: #8b96a8; --cat-system: #d96a5b; } } :root[data-theme="light"] { color-scheme: light; --ground: #eef0f3; --surface: #ffffff; --surface-2: #f5f6f8; --btn-fill: #c2cdee; --btn-ink: #2e4786; --check-fill: rgba(34, 65, 147, 0.20); --check-line: #b3c0d2; --line: #d8dce3; --line-soft: #e4e7ec; --ink: #1c2430; --ink-2: #4a5568; --ink-3: #636e7f; --accent: #224193; --accent-ink: #ffffff; --accent-soft: rgba(34,65,147,0.18); --link: #224193; --gold: #8c6c00; --gold-line: #c9a227; --good: #2e7d46; --good-soft: rgba(46,125,70,0.12); --warn: #8c6c00; --warn-soft: rgba(169,122,16,0.14); --bad: #96302a; --bad-soft: rgba(150,48,42,0.12); --mute: #5c6675; --mute-soft: rgba(92,102,117,0.18); --map-grid: #dfe3e9; --map-water: #d4e0e8; --shadow: 0 1px 2px rgba(16,21,29,0.06), 0 8px 24px rgba(16,21,29,0.07); --cat-import: #2e8b4f; --cat-export: #2f6fc4; --cat-read: #8a8f9c; --cat-edit: #8046c8; --cat-qc: #cfa004; --cat-admin: #cc5a14; --cat-auth: #c23b7e; --cat-cron: #5c6675; --cat-system: #a1242e; } :root[data-theme="dark"] { color-scheme: dark; --ground: #10151d; --surface: #1a2230; --surface-2: #202a3a; --btn-fill: #263349; --btn-ink: #aab4c4; --check-fill: rgba(111, 154, 208, 0.26); --check-line: #44546f; --line: #2c3749; --line-soft: #242e3f; --ink: #e8ecf2; --ink-2: #aab4c4; --ink-3: #8b96ab; --accent: #6f9ad0; --accent-ink: #0e141d; --accent-soft: rgba(91,132,184,0.14); --link: #6f9ad0; --gold: #c9a227; --gold-line: #c9a227; --good: #43a860; --good-soft: rgba(67,168,96,0.16); --warn: #d9a521; --warn-soft: rgba(217,165,33,0.15); --bad: #e07a6a; --bad-soft: rgba(217,106,91,0.16); --mute: #8894a5; --mute-soft: rgba(107,118,134,0.18); --map-grid: #232d3d; --map-water: #1c2836; --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 10px 30px rgba(0,0,0,0.35); --cat-import: #4cbf72; --cat-export: #6aa4e8; --cat-read: #7e8aa0; --cat-edit: #ab8ae0; --cat-qc: #e2b626; --cat-admin: #e07b2e; --cat-auth: #e070ac; --cat-cron: #8b96a8; --cat-system: #d96a5b; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--ground); color: var(--ink); font-family: 'Ubuntu', 'Segoe UI', system-ui, sans-serif; font-size: 15px; line-height: 1.5; } .mono { font-family: 'Ubuntu Mono', 'Cascadia Mono', 'Consolas', monospace; font-variant-numeric: tabular-nums; } /* screen-reader-only (2026-08-24, the point-room sitting): the point-search combobox's live status

wears Bootstrap's .visually-hidden name, but only the classic world defines it — in the token worlds (rail mount, frame mount) the "N matching points" line rendered as visible text. One house rule, same contract as Bootstrap's. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } a { color: var(--link); } a:focus-visible, button:focus-visible { outline: 2px solid var(--gold-line); outline-offset: 2px; } /* the house placeholder (Mark, 2026-07-30, the chiefs sitting): the UA's dead-neutral gray jumps out as not-our-theme — placeholders are hints, so they speak the hint register's blue-cast gray. opacity:1 beats Firefox's default ~54% fade (illegible in one browser, fine in another, is exactly the kind of drift this file exists to end). */ ::placeholder { color: var(--ink-3); opacity: 1; } /* the house scrollbar (Mark, 2026-07-30, same sitting): the standard scrollbar-color property, thumb on the blue-cast control-line token — the blue-cast principle again ("because the cast of our UI is blue, totally unsaturated grays leap out"). Inherited from :root on purpose — the page bar, the rail, textareas, and table overflows all wear it; browsers without the property (pre-121 Chrome) keep the color-scheme-appropriate UA bar, a graceful floor. scrollbar-width stays default on the document (a thin main bar annoys) and thins only the small internals where the fat bar eats real estate. */ :root { scrollbar-color: var(--check-line) transparent; } .rail, .roster-ta { scrollbar-width: thin; } /* the house checkbox (Mark, 2026-07-30, the validation sitting's tail): color-scheme stopped the white-square blast, but a UA-drawn box is colorless — it ties to nothing. appearance:none makes BOTH states ours: unchecked wears the accent-soft wash (the house blue leaning, quiet at 47-rows scale), checked fills accent with a drawn check. One recipe for every rail checkbox — the per-room classes (.sel-box/.feat-check/.col-check/.att-row) keep only their sizes; their accent-color declarations stay as inert fallback. Locked columns keep their mute variant. */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; flex: none; border: 1px solid var(--check-line); border-radius: 4px; background: var(--check-fill); cursor: pointer; margin: 0; position: relative; vertical-align: -2px; } input[type="checkbox"]:hover { border-color: var(--accent); } /* locked = visibly untouchable (Mark's catch, 2026-08-15+1, Attributed Joints boundary rows): the label's muting alone left the BOX looking clickable — the box itself mutes and the cursor says so, the same .55/not-allowed pair .primary-btn:disabled already wears */ input[type="checkbox"]:disabled { opacity: 0.55; cursor: not-allowed; } input[type="checkbox"]:disabled:hover { border-color: var(--check-line); } input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold-line); outline-offset: 2px; } input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } input[type="checkbox"]:checked::after { content: ""; position: absolute; inset: 0; background: var(--accent-ink); -webkit-mask: url('data:image/svg+xml;utf8,') center / 11px 11px no-repeat; mask: url('data:image/svg+xml;utf8,') center / 11px 11px no-repeat; } .col-check.locked input[type="checkbox"] { cursor: default; } .col-check.locked input[type="checkbox"]:checked { background: var(--mute); border-color: var(--mute); } /* the house radio (Mark's walk catch, 2026-08-07, the transfer rotation): the checkbox's sibling — a UA-drawn radio is the same colorless grey the checkbox recipe cured, so both states go ours on the same tokens: unchecked wears the accent-soft wash and blue-leaning line, checked fills accent with a punched dot. Bare by the checkbox's own "one recipe" reasoning. */ input[type="radio"] { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; flex: none; border: 1px solid var(--check-line); border-radius: 50%; background: var(--check-fill); cursor: pointer; margin: 0; vertical-align: -2px; } input[type="radio"]:hover { border-color: var(--accent); } input[type="radio"]:focus-visible { outline: 2px solid var(--gold-line); outline-offset: 2px; } input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); } .shell { display: flex; max-width: 1500px; margin: 0 auto; align-items: stretch; } .wrap { flex: 1; min-width: 0; max-width: 1240px; margin: 0 auto; padding: 0 24px 64px; } /* ---------- left rail (xhalo #32 — one rail, one base) ---------- */ .rail { width: 244px; flex: none; border-right: 1px solid var(--line); padding: 16px 12px 20px; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; /* min-height keeps the user chip glued to the viewport bottom even when the page content is short — the mockup's notes section masked this (its pages were always taller than 100vh) */ min-height: 100vh; } /* ---------- mobile: the rail becomes the hamburger drawer (the ruled answer, 2026-07-20) ---------- */ .menu-btn { display: none; background: none; border: 1px solid var(--check-line); border-radius: 8px; color: var(--btn-ink); padding: 5px 11px; cursor: pointer; font-size: 17px; line-height: 1.2; font-family: inherit; flex: none; } .drawer-backdrop { position: fixed; inset: 0; z-index: 79; background: rgba(8, 12, 18, 0.5); opacity: 0; pointer-events: none; transition: opacity 200ms ease; } @media (max-width: 1000px) { .rail { position: fixed; top: 0; left: 0; bottom: 0; z-index: 80; background: var(--ground); max-height: none; transform: translateX(-105%); transition: transform 200ms ease; } .rail.open { transform: none; box-shadow: var(--shadow); } .rail .rail-collapse { display: none; } /* the drawer is always full-width; collapse is a desktop idea */ .menu-btn { display: inline-flex; } .drawer-backdrop.show { opacity: 1; pointer-events: auto; } } @media (prefers-reduced-motion: reduce) { .rail { transition: none; } } .rail-top { display: flex; align-items: center; gap: 4px; padding: 2px 4px 12px 8px; } /* the logo — the real mark, tokenized: blue path rides --logo-primary so dark mode can lift it; the gold is the brand's own #d9ab28 and holds in both modes (it IS the house gold) */ :root { --logo-primary: #224193; --logo-gold: #d9ab28; } @media (prefers-color-scheme: dark) { :root { --logo-primary: #e8ecf2; } } :root[data-theme="light"] { --logo-primary: #224193; } :root[data-theme="dark"] { --logo-primary: #e8ecf2; } .rail .wordmark { flex: 1; min-width: 0; display: flex; align-items: center; } .rail .wordmark a { display: block; line-height: 0; } /* the logo's All Projects caption (interior rail only, 2026-08-25+1) — the wordmark absorbed the standalone All Projects row: the caption labels what a click on the logo means. Own line-height because the anchor zeroes it for the svg lockup; hides with the lockup when collapsed. */ .logo-caption { display: block; line-height: 1.2; font-size: 10.5px; color: var(--ink-3); margin-top: 3px; letter-spacing: .02em; } .rail .wordmark a:hover .logo-caption { color: var(--ink-2); } .logo-lockup { width: 108px; height: auto; display: block; } .logo-lockup .lg-a { fill: var(--logo-primary); } .logo-lockup .lg-b { fill: var(--logo-gold); } .logo-mark { width: 32px; height: 32px; display: none; border-radius: 6px; } .rail-collapse { background: none; border: none; border-radius: 6px; cursor: pointer; color: var(--ink-3); font-size: 14px; padding: 3px 5px; font-family: inherit; flex: none; display: inline-flex; align-items: center; } .rail-collapse:hover { background: var(--accent-soft); color: var(--ink); } /* collapsed rail — door icons only (desktop-only idea; the mobile drawer is always full) */ @media (min-width: 1001px) { .rail.collapsed { width: 60px; padding: 16px 9px 20px; } .rail.collapsed .rail-top { flex-direction: column; gap: 10px; padding: 2px 0 8px; align-items: center; } .rail.collapsed .wm-text, .rail.collapsed .rail-filter, .rail.collapsed .rail-head, .rail.collapsed .rail-proj, .rail.collapsed .rail-link .lbl, .rail.collapsed .rail-link .whisper, .rail.collapsed .user-chip .uname, .rail.collapsed .user-chip .caret, .rail.collapsed .rail-new .lbl { display: none; } .rail.collapsed .rail-pin-hint { display: none; } .rail.collapsed .logo-caption { display: none; } .rail.collapsed .rail-link { justify-content: center; padding: 8px 0; } .rail.collapsed .rail-new { padding: 8px 0; margin: 10px 2px 2px; } .rail.collapsed .user-chip { border: none; background: none; padding: 4px; justify-content: center; } .rail.collapsed .logo-lockup { display: none; } .rail.collapsed .logo-mark { display: block; margin: 0 auto; } } .rail-link { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 7px; color: var(--ink-2); text-decoration: none; } .rail-link:hover { background: var(--accent-soft); color: var(--ink); } .rail-link .ico { width: 16px; text-align: center; color: var(--ink-3); flex: none; } .rail-link .whisper { margin-left: auto; font-size: 11px; color: var(--ink-3); } .rail-link.active { background: var(--accent-soft); color: var(--ink); font-weight: 500; box-shadow: inset 2.5px 0 0 var(--accent); } .rail-head { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); padding: 14px 10px 4px; } .rail-filter { margin: 10px 6px 4px; border: 1px solid var(--check-line); border-radius: 7px; background: var(--surface); color: var(--ink-3); padding: 6px 10px; font-size: 12.5px; font-family: inherit; } .rail-new { margin: 10px 6px 2px; padding: 8px 10px; border: none; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; box-shadow: var(--shadow); } .rail-new:hover { filter: brightness(1.1); } .rail-proj { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 7px; color: var(--ink-2); text-decoration: none; white-space: nowrap; overflow: hidden; } .rail-proj:hover { background: var(--accent-soft); color: var(--ink); } .rail-proj .t { overflow: hidden; text-overflow: ellipsis; } .rail-proj .pin { color: var(--gold); flex: none; font-size: 11px; } .rail-proj .whisper { margin-left: auto; font-size: 11px; color: var(--ink-3); flex: none; } /* the interior rail's zero-pins whisper (the Pinned shortlist, 2026-08-25) — teaches the affordance without claiming a place; hidden with the rest of the row text when collapsed */ .rail-pin-hint { padding: 3px 10px 6px; font-size: 11px; color: var(--ink-3); line-height: 1.35; } /* ---- the INTERIOR rail (the Focus contract — transitions canary, RULED 2026-07-22): inside a project the portfolio collapses to the ◂ All Projects standing door and the rail becomes the project's — identity block, Project Home, door groups (the dashboard's ratified intent groups; current group open, current room active). Room doors carry no icons by ruling (25+ rooms would demand a glyph junk drawer); the group heads carry the taxonomy. */ /* the identity-door (v81, Mark's merge ruling 2026-08-12 — variant B of mockups/rail-home-merge.html, superseding the same day's v80 promoted row pre-deploy): the title card IS the way home — project title + home glyph + button dress in ONE element. Replaces .proj-ident (inert identity) + the promoted Project Home row; the gesture is the Home-tile / Server-Console one: click the project's name, land on its front page. */ .ident-door { display: flex; align-items: flex-start; gap: 8px; text-decoration: none; margin: 8px 0 6px; padding: 10px 12px; /* the button dress COMPLETED (Mark, 2026-08-13, the specimen-board sitting): v81 ruled the title card IS the way home — "button dress in ONE element" — but it shipped on surface white with a hairline. Now it wears the full verb register: brand-tinted btn-fill, the control outline (today's ruling), the button shadow. The .pa alias rides ink-2, not ink-3 — the whisper measured 3.38 on the tinted fill. */ border: 1px solid var(--check-line); border-radius: 9px; background: var(--btn-fill); box-shadow: var(--btn-shadow); } .ident-door .ico { color: var(--accent); flex: none; margin-top: 2px; width: 16px; text-align: center; } .ident-door:hover { border-color: var(--accent); background: var(--btn-hover); } .ident-door.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 2.5px 0 0 var(--accent); } .ident-door .id-text { min-width: 0; display: block; } /* overflow-wrap:anywhere is the fence behind the wbr_underscores filter (2026-08-26): the filter marks break points after underscores (Jason's long underscored titles), and anywhere only fires for a fragment that STILL cannot fit — an unbroken no-underscore title never escapes the card */ .ident-door .pt { display: block; color: var(--ink); font-weight: 600; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; } .ident-door .pt .pin { color: var(--gold); font-size: 11px; margin-left: 5px; } .ident-door .pa { display: block; font-size: 11px; color: var(--ink-2); margin-top: 2px; } @media (min-width: 1001px) { .rail.collapsed .ident-door { justify-content: center; padding: 8px 0; margin: 8px 0 4px; } .rail.collapsed .ident-door .id-text { display: none; } .rail.collapsed .ident-door .ico { margin-top: 0; } } details.rail-group > summary { list-style: none; cursor: pointer; font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); padding: 10px 10px 4px; display: flex; align-items: center; gap: 6px; } details.rail-group > summary::-webkit-details-marker { display: none; } details.rail-group > summary::before { content: "▸"; font-size: 9px; transition: transform 150ms ease; color: var(--ink-3); } details.rail-group[open] > summary::before { transform: rotate(90deg); } .rail-door { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 26px; border-radius: 7px; /* brightened from plain ink-2 (Abby's second ask, 2026-08-13 — the rail's popped-open door text read dim at 13px): rest sits partway up toward ink (9.3/11.5 measured vs ink-2's 6.6/8.8) while hover/active keep full ink, so the lift register survives */ color: color-mix(in srgb, var(--ink) 45%, var(--ink-2)); text-decoration: none; font-size: 13px; white-space: nowrap; overflow: hidden; } .rail-door:hover { background: var(--accent-soft); color: var(--ink); } /* the inset bar joins the interior doors (Mark's catch, 2026-08-13): rail-link.active and ident-door.active carried it from the mockups, but the room doors — the rail you actually live in — never received it. The bar is the "you are here" eyebrow on every active register. */ .rail-door.active { background: var(--accent-soft); color: var(--ink); font-weight: 500; box-shadow: inset 2.5px 0 0 var(--accent); } .rail-door .step { font-family: 'Ubuntu Mono', 'Cascadia Mono', 'Consolas', monospace; font-size: 10.5px; color: var(--ink-3); flex: none; } /* the return glyph on a lit door whose current page is a CHILD (Mark+Abby, 2026-07-30): lit reads "you are here" by web convention — the glyph says "this door returns you" */ .rail-door .ret { flex: none; color: var(--ink-3); } .rail-door.active:hover .ret { color: var(--accent); } /* per-door bust badges on the QC Workflow doors (Jason's request, 2026-08-13): the scorecard's v-busts register at rail size — priority visible from inside any room. A door with no badge is merely quiet, never a "clean" claim (posture lives on the tile/scorecard). Mono per the de-mono rule's carve-out: aligned digits, not a name. */ .rail-door .busts { margin-left: auto; flex: none; font-family: 'Ubuntu Mono', 'Cascadia Mono', 'Consolas', monospace; font-size: 10.5px; font-weight: 700; line-height: 1.7; background: var(--warn-soft); color: var(--warn); border-radius: 999px; padding: 0 7px; } /* the line fork (Mark's ruling 2026-08-08, kin-pair sitting): a one-Line-ID-at-a-time door forks per-line on multi-line projects — the door name TOGGLES the fold (classic's dropdown-button behavior, walk-confirmed); rotating ▸ per the caret convention (folds reveal in place; row-menus float and wear ▾). Single-line projects render plain doors. */ .rail-fork summary { list-style: none; cursor: pointer; user-select: none; } .rail-fork summary::-webkit-details-marker { display: none; } .rail-fork summary::after { content: "▸"; margin-left: auto; font-size: 9px; color: var(--ink-3); transition: transform 120ms ease; } .rail-fork[open] summary::after { transform: rotate(90deg); } /* line names wear the body face, never mono (the de-mono rule — DXF walk 2026-07-28: names never wear mono, only aligned digits; the mockup's mono children were a dated artifact) */ .rail-line { display: block; padding: 3px 10px 3px 40px; border-radius: 7px; /* one register up from ink-3 (Abby's brightening, 2026-08-13) — still a step dimmer than the doors above, so the parent/child ladder holds */ color: var(--ink-2); text-decoration: none; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rail-line:hover { background: var(--accent-soft); color: var(--ink); } /* the viewed line lights up in its fork (Mark's catch 2026-08-11) — same register as .rail-door.active */ /* the viewed line wears GOLD (RULED Mark 2026-08-12, same day as the production trial: "it ties in to the Line ID selector in an intuitive way" — the fork light and the room's gold decide-seg are the same decide-grain fact, and now they match) */ .rail-line.active { background: var(--warn-soft); color: var(--gold); font-weight: 700; box-shadow: inset 2.5px 0 0 var(--gold-line); } @media (prefers-reduced-motion: reduce) { .rail-fork summary::after { transition: none; } } .rail.collapsed .rail-group { display: none; } /* the rail-borne classic retreat (Mark's retreat-watch, 2026-08-13): .retreat-link's whisper dress, seated under the identity door — an escape hatch, not a door. TEMPORARY: dies with the retreat instrument at classic's shed date. */ .rail-retreat { margin: 0 10px 4px; font-size: 11.5px; align-self: flex-start; } .rail.collapsed .rail-retreat { display: none; } .user-chip { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--check-line); border-radius: 9px; background: var(--surface); cursor: pointer; font-family: inherit; font-size: 13px; color: var(--ink-2); text-align: left; } .user-chip:hover { border-color: var(--accent); } .user-chip .caret { margin-left: auto; color: var(--ink-3); font-size: 11px; } .user-chip .avatar { width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } /* ---------- user menu — native Popover API (the no-Bootstrap dropdown). left/bottom here are the no-JS fallback only — dh.js re-anchors to the chip on open, because the centered .shell drifts off viewport-left on monitors wider than 1500px. ---------- */ .user-menu { position: fixed; left: 14px; bottom: 66px; margin: 0; inset-inline-end: auto; inset-block-start: auto; width: 228px; padding: 6px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); font-size: 13px; font-family: inherit; } .um-head { padding: 8px 10px 2px; } .um-head b { color: var(--ink); font-weight: 600; display: block; } .um-head .mono { font-size: 11.5px; color: var(--ink-3); } .um-group { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); padding: 10px 10px 3px; } .um-item { display: flex; gap: 9px; align-items: center; padding: 6px 10px; border-radius: 6px; color: var(--ink-2); text-decoration: none; cursor: pointer; background: none; border: none; width: 100%; text-align: left; font: inherit; } .um-item:hover { background: var(--accent-soft); color: var(--ink); } .um-item .ico { width: 15px; text-align: center; color: var(--ink-3); flex: none; display: inline-flex; justify-content: center; align-items: center; } .um-item .ico svg { display: block; } .um-sep { border-top: 1px solid var(--line-soft); margin: 6px 4px; } .theme-seg { display: flex; padding: 2px 10px 8px; } .theme-seg button { flex: 1; font-size: 11.5px; padding: 4px 0; cursor: pointer; font-family: inherit; border: 1px solid var(--check-line); background: none; color: var(--ink-2); margin-left: -1px; } .theme-seg button:first-child { border-radius: 6px 0 0 6px; margin-left: 0; } .theme-seg button:last-child { border-radius: 0 6px 6px 0; } .theme-seg button.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); position: relative; z-index: 1; } /* ---------- page header ---------- */ .proj-head { padding: 24px 0 20px; border-bottom: 1px solid var(--line); margin-bottom: 22px; } /* the child-room back link — tip-top of the head, the in-page twin of the rail door's ic-return (born room-scoped as .ce-back at the Code Editor rotation; Mark saw it at the build walk — "It's great" — and ruled the house-wide spread same day, 2026-08-21: every room whose rail door wears ic-return wears this too). It survives where the rail doesn't travel — phones, collapsed rails. */ .room-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); text-decoration: none; margin-bottom: 4px; } .room-back:hover { color: var(--accent); } .room-back svg { width: 11px; height: 11px; } .proj-head .title-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; } .server-whisper { margin-left: auto; font-size: 13px; color: var(--ink-3); } .head-sub { font-size: 13.5px; color: var(--ink-2); margin-top: 5px; } .head-sub .mono { color: var(--ink); font-weight: 500; } .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.11em; color: var(--gold); text-transform: uppercase; } /* ---------- dh-card: the surface card (rule-of-two name, generalized from console-card at the Activity re-base). Doctrine: cards contain instruments and excerpts; rivers run on the ground (Activity sitting, ninth pass). ---------- */ .dh-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } /* THE BARE DEFAULT (flip-the-default ruling, Mark 2026-08-07 — after the FOURTH naked-head catch: roles → geopackage → calendar → File Meta, the last post-deploy). The old convention ("no bare .card-head; every room scopes its own") produced a dozen copy-pasted, verbatim- identical scoped rules AND a silent bug class with no grep shape — a card whose CSS forgot its copy shipped a raw-text head only an eye could catch. The default IS that convergent dress; a room now scopes a rule only where it truly DIVERGES (feet had already breached the convention by accident — two duplicate bare .card-foot rules, consolidated here). */ .card-head { padding: 14px 20px 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 8px; } .card-foot { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .card-foot .foot-hint, .card-foot .hint { font-size: 12px; color: var(--ink-3); } /* the card head's right seat — GENERALIZED 2026-08-14 (the XLSX room was the FOURTH specimen; the pg-card copy carried the "generalization candidate at its next touch" flag — paid here, the three scoped copies below retired). Body = the fullest (table-card's) variant. */ .card-head .hd-right { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; color: var(--ink-3); display: inline-flex; gap: 8px; align-items: center; } /* dh-filter: the toolbar filter/search input (generalized from the console's .filter) */ .dh-filter { flex: 1; min-width: 180px; max-width: 340px; border: 1px solid var(--check-line); border-radius: 7px; background: var(--surface-2); color: var(--ink); padding: 7px 11px; font-size: 13px; font-family: inherit; } .dh-filter:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } /* the ×-to-clear (RULED house-wide 2026-08-20, the Codes & Features sitting): dh.js auto-wraps every nameless text input.dh-filter at load. The wrap TAKES OVER the input's layout duties (the base flex/min/max profile above) so flex toolbars and block containers both keep their shape; the input inside just fills it. Rooms that cap .dh-filter differently want a matching .dh-filter-wrap cap beside their rule (see .lset-toolbar). [hidden] guard is load-bearing — the × is a styled button and would otherwise defeat its own retirement. */ .dh-filter-wrap { position: relative; display: inline-flex; flex: 1; width: 100%; min-width: 180px; max-width: 340px; } .dh-filter-wrap > .dh-filter { flex: 1; width: 100%; min-width: 0; max-width: none; padding-right: 30px; } .dh-filter-clear { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--ink-3); font-size: 16px; line-height: 1; padding: 2px 7px; border-radius: 5px; font-family: inherit; } .dh-filter-clear:hover { color: var(--ink); background: var(--accent-soft); } .dh-filter-clear[hidden] { display: none; } /* dh-seg: segmented control of links/buttons (second specimen: the Activity outcome filter) */ .dh-seg { display: inline-flex; border: 1px solid var(--check-line); border-radius: 7px; overflow: hidden; } .dh-seg a, .dh-seg button { background: none; border: none; border-right: 1px solid var(--line); color: var(--ink-2); padding: 6px 13px; font-size: 12.5px; cursor: pointer; font-family: inherit; text-decoration: none; } .dh-seg a:last-child, .dh-seg button:last-child { border-right: 0; } .dh-seg .on { background: var(--accent-soft); color: var(--accent); font-weight: 600; } /* the AM fence renders as DISABLED options, never absence (roles sitting, 2026-07-22) */ .dh-seg button:disabled { opacity: 0.55; cursor: not-allowed; } /* 0.55 not 0.45 (docket ruling 2026-08-13): disabled stays quiet but its label stays readable */ /* decide-seg: the GOLD decision register (born role-seg at the roles sitting 2026-07-22; generalized at the transitions canary the same day — the rule of two, paid). Gold marks the seg that SHAPES THE VERB (role to apply, Line ID to walk) — accent read too subtle for a room's one decision; gold is the house emphasis register. Filter segs (Activity's outcome filter) keep their accent. Consumers: roles editor, transitions. */ .dh-seg.decide-seg .on { background: var(--warn-soft); color: var(--gold); } /* wrap-seg: a seg whose member count is DATA, not a fixed vocabulary — one pill per Line ID. Eight named lines overflowed the CSV Builder's Features card at ees (an Encompass user's catch, 2026-09-04): a no-wrap inline-flex shrank the pills until their names broke mid-word. So this seg wraps as a chip cloud — each pill carries its own border and radius, a name never breaks, a second row reads clean. The gold register is unchanged. Consumers: every seg built from the project's Line IDs (csv/shp/gpkg builders, the begin-end, onjoint and duplicate selectors). Fixed-vocabulary segs never wear it. */ .dh-seg.wrap-seg { flex-wrap: wrap; gap: 6px; border: 0; border-radius: 0; overflow: visible; } .dh-seg.wrap-seg a, .dh-seg.wrap-seg button, .dh-seg.wrap-seg a:last-child, .dh-seg.wrap-seg button:last-child { border: 1px solid var(--check-line); border-radius: 7px; white-space: nowrap; } .dh-seg.wrap-seg .on { border-color: var(--gold); } /* the role LADDER (Mark, 2026-07-22): identical pills left rank to six characters of small text — authority now reads as fill density, not hue (the Activity shape-channel lesson). Admin gold-edged (the apex), Manager FILLED (carries power), Contributor outlined (the base .role-chip), Viewer muted. Second consumer: the console's My Role column, next touch. */ .role-chip.r-manager { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .role-chip.r-viewer { color: var(--mute); border-color: var(--mute); background: var(--mute-soft); } .role-chip.r-admin { color: var(--gold); border-color: var(--gold-line); background: var(--warn-soft); } /* ---------- the console's dense table (the fourth base shape) ---------- */ .console-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 13px 18px; border-bottom: 1px solid var(--line-soft); } .console-toolbar .clock-whisper { margin-left: auto; font-size: 12px; color: var(--ink-3); } /* contained grid: the card owns BOTH scroll axes; header and identity column are sticky */ .table-wrap { position: relative; } .table-scroll { overflow: auto; max-height: min(70vh, 640px); border-radius: 0 0 var(--radius) var(--radius); } table.console { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } .console th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding: 10px 13px 8px; white-space: nowrap; position: sticky; top: 0; z-index: 2; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); } .console th:first-child { left: 0; z-index: 3; } .console td { padding: 9px 13px; border-top: 1px solid var(--line-soft); vertical-align: top; color: var(--ink-2); white-space: nowrap; } .console tbody tr:first-child td { border-top: none; } .console tbody tr:hover td { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); } .console td.proj-cell { white-space: normal; min-width: 220px; position: sticky; left: 0; z-index: 1; background: var(--surface); } /* scrolled-state affordances: the pinned column casts a shadow once you've scrolled; a fade at the right edge says "there's more" until you reach it */ .table-scroll.h-scrolled .console th:first-child, .table-scroll.h-scrolled .console td.proj-cell { box-shadow: 6px 0 10px -6px rgba(8, 12, 18, 0.4); } .table-scroll.h-scrolled .console th:first-child { box-shadow: inset 0 -1px 0 var(--line), 6px 0 10px -6px rgba(8, 12, 18, 0.4); } .scroll-fade { position: absolute; top: 0; bottom: 0; right: 0; width: 38px; background: linear-gradient(to right, transparent, var(--surface)); pointer-events: none; border-radius: 0 0 var(--radius) 0; transition: opacity 150ms ease; } a.proj-open { color: var(--ink); font-weight: 500; text-decoration: none; } a.proj-open:hover { color: var(--link); text-decoration: underline; } a.proj-join { color: var(--link); font-weight: 500; text-decoration: none; } a.proj-join:hover { text-decoration: underline; } .xref-line { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; display: flex; align-items: center; gap: 5px; } .xref-line svg { width: 11px; height: 11px; flex: none; color: var(--gold); } /* the People cell — three roles folded into one column; absent roles simply absent */ .ppl-cell { white-space: normal; min-width: 185px; } .ppl { font-size: 12.5px; line-height: 1.45; white-space: nowrap; } .ppl .ppl-role { display: inline-block; min-width: 50px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); } .role-chip { font-size: 10.5px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); background: var(--accent-soft); font-weight: 500; margin-left: 8px; vertical-align: 1px; white-space: nowrap; } .days { font-family: 'Ubuntu Mono', 'Consolas', monospace; font-variant-numeric: tabular-nums; } .days.warm { color: var(--warn); font-weight: 500; } .days.hot { color: var(--bad); font-weight: 500; } .days.none { font-family: inherit; font-style: italic; color: var(--ink-3); } .broom { width: 13px; height: 13px; color: var(--warn); vertical-align: -2px; margin-left: 5px; } /* the blade note — Auto-Archive dissolved into the activity cell (ruled at the sitting): "353 d ago · archives in 12 d" — one clock, its consequence as a subordinate clause */ .sep-dot { color: var(--ink-3); margin: 0 5px; } .blade-note { color: var(--ink-3); font-size: 12px; } .blade-note.soon { color: var(--bad); font-weight: 600; } /* ---------- archives (companion #3, 2026-07-21): the shelf's verbs + the second clock ---------- */ /* the restore threshold — a POST button dressed as the console's accent title (same threshold grammar: the console's title joins; this one restores) */ button.proj-restore { background: none; border: none; padding: 0; margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; text-align: left; color: var(--accent); font-weight: 500; cursor: pointer; white-space: normal; } button.proj-restore:hover { text-decoration: underline; } .delete-verb { background: none; border: none; font-family: inherit; font-size: 12.5px; color: var(--bad); cursor: pointer; padding: 2px 6px; border-radius: 6px; } .delete-verb:hover { background: var(--bad-soft); } /* takeover — a stewardship verb, not a destructive one: accent, one click, reversible */ .takeover-verb { background: none; border: none; font-family: inherit; font-size: 12.5px; color: var(--accent); cursor: pointer; padding: 2px 6px; border-radius: 6px; } .takeover-verb:hover { background: var(--accent-soft); } .delete-na { color: var(--ink-3); cursor: help; } /* the auto mark — machine time wears an outline, never a fill (the Activity cron ruling's second surface) */ .auto-mark { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--mute); border-radius: 999px; padding: 0 6px; margin-left: 6px; vertical-align: 1px; } .arch-none { color: var(--ink-3); cursor: help; } .archive-verb { background: none; border: none; font-family: inherit; font-size: 12.5px; color: var(--bad); cursor: pointer; padding: 2px 6px; border-radius: 6px; } .archive-verb:hover { background: var(--bad-soft); } tr.dissolving { transition: opacity 320ms ease; opacity: 0; } /* ---------- media rooms (companions #4+#5, 2026-07-22): the file table's grammar ---------- */ .toolbar-verbs { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .verb-btn { background: var(--btn-fill); border: 1px solid var(--check-line); color: var(--btn-ink); box-shadow: var(--btn-shadow); border-radius: 8px; padding: 6px 12px; font-size: 12.5px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; } .verb-btn:hover { border-color: var(--accent); background: var(--btn-hover); color: var(--ink); } .verb-btn svg { width: 13px; height: 13px; color: var(--ink-3); } .verb-btn:hover svg { color: var(--accent); } .verb-btn.danger { color: var(--bad); } .verb-btn.danger svg { color: var(--bad); } .verb-btn.danger:hover { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); } .verb-btn:disabled { opacity: 0.55; cursor: default; } .verb-btn:disabled:hover { border-color: var(--line); background: none; color: var(--bad); } .door-link { font-size: 12.5px; color: var(--link); text-decoration: none; padding: 6px 4px; } .door-link:hover { text-decoration: underline; } .fname { font-family: 'Ubuntu Mono', 'Cascadia Mono', 'Consolas', monospace; font-size: 12.5px; word-break: break-all; } a.fname { color: var(--link); text-decoration: none; } a.fname:hover { text-decoration: underline; } .fname.dead { color: var(--ink-3); cursor: help; } .file-whisper { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; } .file-whisper .aname { color: var(--ink-2); } .file-whisper .orphan { color: var(--warn); } .kind { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; } .kind svg { width: 13px; height: 13px; color: var(--ink-3); flex: none; } /* fate pills — machine policy wears an outline, never a fill (the cron ruling's third surface); the swept pill alone carries a fill wash because it is the one that predicts a deletion */ .fate-kept { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); border: 1px solid var(--mute); border-radius: 999px; padding: 0 8px; } .fate-swept { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warn); border: 1px solid var(--warn); border-radius: 999px; padding: 0 8px; background: var(--warn-soft); } .fate-tobin { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--warn); border: 1px solid var(--warn); border-radius: 999px; padding: 0 8px; } .sel-box { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } .accent-btn { background: var(--accent); color: var(--accent-ink); border: none; border-radius: 8px; padding: 7px 16px; font-size: 13.5px; font-weight: 500; cursor: pointer; font-family: inherit; } .accent-btn:hover { filter: brightness(1.1); } .dlg-list { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-3); } .dlg-list .mono { color: var(--ink-2); } /* ---------- phone: the table becomes cards (the folds made each row card-shaped already) ---------- */ @media (max-width: 640px) { .wrap { padding: 0 12px 48px; } h1 { font-size: 24px; } .table-scroll { max-height: none; overflow: visible; } .scroll-fade { display: none; } .console, .console tbody, .console tbody tr, .console td { display: block; } .console thead { display: none; } .console tbody tr { position: relative; margin: 10px 2px; padding: 4px 0 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .console td { border-top: none; padding: 3px 14px; white-space: normal; } .console td.proj-cell { position: static; min-width: 0; padding: 10px 96px 3px 14px; } .console tbody tr:hover td { background: none; } /* the two label-less cells grow labels matching the Team cell's grammar */ .console td:nth-child(2)::before { content: 'Last Used'; } .console td:nth-child(3)::before { content: 'Client'; } .console td:nth-child(2)::before, .console td:nth-child(3)::before { display: inline-block; min-width: 62px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); } .ppl .ppl-role { min-width: 62px; } .ppl { white-space: normal; } /* the verb sits top-right of the card, clear of the title */ .console td:nth-child(5) { position: absolute; top: 8px; right: 8px; padding: 0; } /* archives (six columns — Project · Last Used · Archived · Client · Team · Delete): its own cell labels; Team returns to the flow and the verb (cell 6) takes the corner */ .console.archives td:nth-child(3)::before { content: 'Archived'; } .console.archives td:nth-child(4)::before { content: 'Client'; display: inline-block; min-width: 62px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); } .console.archives td:nth-child(5) { position: static; top: auto; right: auto; padding: 3px 14px; } .console.archives td:nth-child(6) { position: absolute; top: 8px; right: 8px; padding: 0; } /* media rooms: File · Kind · Size · Modified · Cleanup, and the bin's Snapshot · Size · Deleted · Select */ .console.media td:nth-child(2)::before { content: 'Kind'; } .console.media td:nth-child(3)::before { content: 'Size'; } .console.media td:nth-child(4)::before { content: 'Modified'; } .console.media td:nth-child(5)::before { content: 'Cleanup'; } .console.bin td:nth-child(2)::before { content: 'Size'; } .console.bin td:nth-child(3)::before { content: 'Deleted'; } .console.media td:nth-child(2)::before, .console.media td:nth-child(3)::before, .console.media td:nth-child(4)::before, .console.media td:nth-child(5)::before, .console.bin td:nth-child(2)::before, .console.bin td:nth-child(3)::before { display: inline-block; min-width: 66px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); } .console.media td:nth-child(5) { position: static; top: auto; right: auto; padding: 3px 14px; } /* the bin checkbox takes the card corner */ .console.bin td:nth-child(4) { position: absolute; top: 8px; right: 8px; padding: 0; } } /* ---------- the activity feed — the THIRD base shape (Activity rail sitting, 2026-07-21). The river runs NAKED on the ground; only the toolbar is a dh-card (cards contain instruments and excerpts; rivers run on the ground). Class names match activity_rows.html verbatim — the Load-more fragment contract predates the re-base and must keep appending. */ .feed-toolbar { display: flex; flex-direction: column; gap: 10px; padding: 13px 18px; margin-bottom: 10px; } .feed-toolbar .row1 { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .feed-toolbar form { flex: 1; min-width: 200px; max-width: 380px; display: flex; } .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--check-line); border-radius: 999px; background: none; color: var(--ink-2); font-size: 12px; padding: 3px 11px; text-decoration: none; font-family: inherit; } .chip .n { color: var(--ink-3); font-variant-numeric: tabular-nums; } .chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .chip.zero { opacity: 0.55; } /* 9px + a hairline ring seats the paler hues on white (sitting, sixth pass) */ .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; box-shadow: inset 0 0 0 1px rgba(16, 21, 29, 0.12); } .dot.cat-import { background: var(--cat-import); } .dot.cat-export { background: var(--cat-export); } .dot.cat-read { background: var(--cat-read); } .dot.cat-edit { background: var(--cat-edit); } .dot.cat-qc { background: var(--cat-qc); } .dot.cat-admin { background: var(--cat-admin); } .dot.cat-auth { background: var(--cat-auth); } .dot.cat-system { background: var(--cat-system); } .dot.cat-none { background: var(--mute); } /* cron is HOLLOW (sitting, seventh pass): machine time wears an outline — no human hand, no fill; rhymes with the via-tags where cron/shell are already the quiet pair */ .dot.cat-cron { background: transparent; box-shadow: inset 0 0 0 2px var(--cat-cron); } .feed { padding: 2px 4px 8px; } /* day dividers in the gold eyebrow register (sitting, third pass) — inserted browser-side */ .day { font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--gold); padding: 18px 8px 6px; border-bottom: 2px solid var(--line); } .rcpt { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; padding: 7px 8px; border-bottom: 1px solid var(--line-soft); border-left: 3px solid transparent; cursor: pointer; font-size: 13.5px; } .rcpt:hover { background: var(--accent-soft); } .rcpt.err { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 5%, transparent); } .rcpt.rej { border-left-color: var(--gold-line); background: color-mix(in srgb, var(--gold) 4%, transparent); } .rcpt .cat { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 4.8rem; font-size: 11px; color: var(--ink-3); } /* accent = clickable (sitting, first pass) — this page's one navigation affordance */ .rcpt .proj { font-weight: 500; color: var(--link); text-decoration: none; white-space: nowrap; } .rcpt .proj:hover { text-decoration: underline; } .rcpt .proj.plain { color: var(--ink-3); font-weight: 400; } .rcpt .who { font-weight: 600; color: var(--ink); white-space: nowrap; } .rcpt .act { color: var(--ink-2); } .rcpt .when { margin-left: auto; color: var(--ink-3); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; } .dchip { font-family: 'Ubuntu Mono', monospace; font-size: 11px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 4px; padding: 0 5px; color: var(--ink-3); } .via-tag { font-size: 10.5px; padding: 1px 7px; border-radius: 4px; font-weight: 600; background: var(--warn-soft); color: var(--gold); border: 1px solid var(--gold-line); } .via-tag.via-cron, .via-tag.via-shell { background: var(--mute-soft); color: var(--mute); border-color: var(--line); } .out-tag { font-size: 10.5px; padding: 1px 7px; border-radius: 4px; font-weight: 600; } .out-tag.out-error { background: var(--bad-soft); color: var(--bad); border: 1px solid var(--bad); } .out-tag.out-rejected { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--gold-line); } .raw { display: none; background: var(--surface-2); border: 1px solid var(--line-soft); border-left: 3px solid var(--mute); border-radius: 0 7px 7px 0; margin: 0 0 6px 5.4rem; padding: 10px 14px; font-size: 12px; color: var(--ink-2); overflow-x: auto; } .raw.open { display: block; } .raw .rawjson { margin: 0; font-family: 'Ubuntu Mono', monospace; white-space: pre-wrap; color: var(--ink-2); line-height: 1.5; } .explain { margin-top: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .explain button { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent); border-radius: 7px; padding: 5px 12px; font-size: 12px; font-family: inherit; } .explain button:disabled { opacity: 0.5; cursor: not-allowed; } .hooknote { font-size: 11px; color: var(--ink-3); } /* the seam — a quiet boundary, deliberately not a billboard (sitting, third pass) */ .seam { display: flex; align-items: center; gap: 12px; margin: 22px 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); } .seam::before, .seam::after { content: ""; flex: 1; border-top: 1px dashed var(--accent); opacity: 0.5; } .rcpt.lean { opacity: 0.66; cursor: default; padding-top: 5px; padding-bottom: 5px; } .rcpt.lean:hover { background: none; } .rcpt.lean .who { font-weight: 500; } .loadmore { display: flex; align-items: center; gap: 12px; padding: 14px 4px 16px; } .empty-note { color: var(--ink-3); font-size: 13px; padding: 16px 8px; } .window-note { font-size: 13.5px; color: var(--ink-2); } @media (max-width: 640px) { .feed { padding: 2px 0 8px; } .rcpt { padding: 8px 6px; } .rcpt .cat { flex-basis: auto; } .raw { margin-left: 0; } .server-whisper { display: none; } } /* ---------- the passage bar — the gold navigation thread at the viewport's tippy top (Activity rail sitting, fourth/fifth passes; base furniture, every rail page inherits). WHY, Mark's words verbatim: "it lets the user know something is happening — don't panic." The rail world's heir to base_v5_3's processing-alert spinner, but automatic. ---------- */ .loadbar { position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 120; background: var(--gold-line); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; transition: transform 200ms ease, opacity 300ms ease; box-shadow: 0 1px 0 color-mix(in srgb, var(--gold) 50%, transparent), 0 0 10px color-mix(in srgb, var(--gold-line) 55%, transparent); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .loadbar { transition: opacity 300ms ease; } } /* ---------- outcome region (aria-live — the js-snackbar heir) ---------- */ .outcome-region { position: fixed; left: 24px; bottom: 24px; z-index: 70; display: flex; flex-direction: column; gap: 8px; max-width: min(440px, calc(100vw - 48px)); } .outcome { display: flex; align-items: baseline; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--good); border-radius: 9px; box-shadow: var(--shadow); padding: 10px 14px; font-size: 13.5px; color: var(--ink-2); } .outcome.err { border-left-color: var(--bad); } .outcome b { color: var(--ink); font-weight: 600; } .outcome .x { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--ink-3); font-size: 15px; line-height: 1; padding: 0 2px; font-family: inherit; } .outcome .x:hover { color: var(--ink); } /* visible spaces (spaces_as_characters): the real space stays in the markup; the faint middle dot is pure decoration, inheriting the value's own color — editors' show-whitespace idiom */ .dh-sp { white-space: pre; position: relative; } .dh-sp::before { content: '\00B7'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .45; pointer-events: none; } /* the Undo button — gold register (the classic toast wore bg-warning for undo) */ .outcome .undo-btn { margin-left: 6px; padding: 2px 10px; border-radius: 6px; cursor: pointer; border: 1px solid var(--gold-line); background: transparent; color: var(--ink); font-family: inherit; font-weight: 600; font-size: 12.5px; } .outcome .undo-btn:hover { background: color-mix(in srgb, var(--gold) 15%, transparent); } .outcome .undo-btn:disabled { opacity: .5; cursor: default; } /* Chatbase anchor — canvas-corner, never the rail */ .cb-anchor { position: fixed; right: 26px; bottom: 24px; width: 46px; height: 46px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-size: 19px; box-shadow: var(--shadow); cursor: pointer; } /* ---------- native

chrome — creation (the port specimen) + the archives delete confirm + the Progress gap-filter (joined 2026-08-12: shipped shell-class-less and rendered UA-default — the .dlg-* innards dress only the interior; every house dialog needs a shell class on this rule) ---------- */ dialog.create-dlg, dialog.del-dlg, dialog.gap-dlg { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 0; width: min(460px, calc(100vw - 40px)); } dialog.create-dlg::backdrop, dialog.del-dlg::backdrop, dialog.gap-dlg::backdrop { background: rgba(8, 12, 18, 0.55); } dialog.del-dlg, dialog.gap-dlg { width: min(430px, calc(100vw - 40px)); } .dlg-head h2 { margin: 0; font-size: 16px; font-weight: 700; } .dlg-grave { margin-top: 9px; font-size: 12.5px; color: var(--ink-3); } .dlg-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 0; } .dlg-close { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--ink-3); font-size: 17px; line-height: 1; padding: 2px 6px; border-radius: 6px; font-family: inherit; } .dlg-close:hover { background: var(--accent-soft); color: var(--ink); } .dlg-body { padding: 12px 18px 4px; display: flex; flex-direction: column; gap: 13px; } /* dialog-narrative emphasis wears gold (Mark's polish 2026-08-11, from the Delete Points dialog): italics alone let the eye gloss over the option words a narrative offers (a filename, "everything") — the gold lead says "these are things you can type" */ .dlg-body em { color: var(--gold); } .fld label { font-size: 12px; font-weight: 600; color: var(--ink-2); display: block; margin-bottom: 4px; } .fld input[type="text"] { width: 100%; border: 1px solid var(--check-line); border-radius: 7px; background: var(--surface-2); color: var(--ink); padding: 8px 10px; font-size: 14px; font-family: inherit; } .fld input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } /* File inputs wear the field family (Abby, 2026-07-29): the bare native control floats unanchored — the bordered box with an integrated browse segment is the recognizable "pick a file" shape (the classic pages' form-control look, kept on purpose). */ .fld input[type="file"] { width: 100%; border: 1px solid var(--check-line); border-radius: 7px; background: var(--surface-2); color: var(--ink-2); font-size: 13px; font-family: inherit; padding: 0; cursor: pointer; } .fld input[type="file"]::file-selector-button { background: var(--accent-soft); color: var(--ink); border: none; border-right: 1px solid var(--line); padding: 8px 13px; margin-right: 10px; font-size: 13px; font-family: inherit; cursor: pointer; } .fld input[type="file"]:hover::file-selector-button { background: var(--accent); color: var(--accent-ink); } .fld input[type="file"]:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } .hint { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; } .hint.ok { color: var(--good); } .hint.taken { color: var(--warn); } .file-chip { border: 1.5px dashed var(--line); border-radius: 7px; padding: 9px 11px; font-size: 12.5px; color: var(--ink-3); cursor: pointer; } .file-chip:hover { border-color: var(--accent); color: var(--ink-2); } .chk { display: flex; gap: 8px; align-items: baseline; font-size: 13px; color: var(--ink-2); } .dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px 18px; } .ghost-btn { background: var(--btn-fill); border: 1px solid var(--check-line); color: var(--btn-ink); box-shadow: var(--btn-shadow); border-radius: 8px; padding: 7px 14px; font-size: 13px; cursor: pointer; font-family: inherit; /* anchors wear this class too (Reset Dates, Gap Map/Report) — a button dress never underlines, and line-height pins to the button UA default so an anchor's inherited 1.5 body line-height can't render it taller than its