/* ============================================================================= LEMON CHILL SALES DASHBOARD - theme, round 3 (v3 brand/chrome pass) "Ledger in a lemon-yellow frame" | LIGHT ONLY | 6px radius ========================================================================== USAGE GUIDE Read this block before using a single token. Every ratio below was MEASURED with WCAG 2.2 relative luminance via the dataviz skill's contrast() export, not estimated. Ratios are stated against their named ground. Do not put comment syntax inside this block - a nested closer breaks the file. v3: DARK MODE WAS DELETED. One theme, one set of values, no light-dark(), no [data-theme], no density switch. Dark clashed with the brand and the toggle row ate the top of the screen. Do not reintroduce either. The PALETTE is the Lemon Chill brand guide, and the brand wins wherever it and a generic chart palette disagree - see RECONCILIATION below. --------------------------------------------------------------------------- v3 BRAND INFUSION - where colour is allowed below the masthead --------------------------------------------------------------------------- The page was "a dull ocean of cream" past the yellow band. Colour now carries hierarchy, in four sanctioned moves and nowhere else: 1. CAP RULE. Every top-level container (ledger, plate, tablebox, map, maplist, drawer head, filter bar) wears a 3px brand rule on its LEADING edge: Chill Yellow for data surfaces, Chill Green for controls/sections. Non-text, so the 3:1 UI-edge rule is what applies. 2. PALE LEMON = SELECTED. Every active/pressed/selected state washes to Pale Lemon #F2EEA0 mixed into its ground (ink stays charcoal, 13.27+). Green fill is reserved for the one primary button per context. 3. GREEN NUMERALS. Ledger figures use --action #00713A (6.13 on white) - a text-legal green, never raw Chill Green. 4. SECTION HEADS (.sechead) are charcoal caps over a 3px Chill Yellow underline. Yellow as a RULE, never as small-text ground. Unchanged constraints: charcoal (never white, never green) on the yellow band; filled buttons use the darkened action green; body text stays charcoal on cream/white. --------------------------------------------------------------------------- Grounds - there are exactly FOUR. Never invent a fifth. --------------------------------------------------------------------------- 1. --bg LC Cream #FCFBF2 - THE PAPER. Page, chrome bands, filter bar. 2. --sheet White - plates, table body, drawer, popovers. 3. --band Chill Yellow #FCD602 - the masthead band ONLY. Logo, and at most one AA-large title in charcoal. NEVER white ink. 4. --well Pale-lemon tint - prose quarantine and media fallbacks. --------------------------------------------------------------------------- Contrast notes: --------------------------------------------------------------------------- (measured 2026-09-16; light mode unless stated) PASS - use freely --ink #222222 on --bg Cream .............. 15.32 AAA --ink #222222 on --sheet White ........... 15.91 AAA --ink #222222 on --band Chill Yellow ..... 11.18 AAA - masthead ink --ink #222222 on Pale Lemon #F2EEA0 ...... 13.27 AAA - chip/wash ink --ink #222222 on --well #F6F4E4 .......... 14.38 AAA - prose well --ink-2 #5C5A50 on --bg .................... 6.67 AA - caps labels --ink-2 #5C5A50 on --sheet ................. Approx 6.9 AA --action #00713A on --bg .................... 5.91 AA - links, marks --action #00713A on --sheet ................. 6.13 AA white #FFFFFF on --action #00713A ........ 6.13 AA - filled button --alert #B3141B on --bg .................... 6.67 AA - true alerts --frame-park #6B655B on --bg .................... 5.56 AA --frame-fill #6E6A2E on --bg .................... 5.37 AA --action #00713A on --band Chill Yellow ..... 4.31 AA-large only CONDITIONAL - read before shipping Chill Green #009D4E on --bg is 3.41: legal as a MARK, a RAIL or a 3:1 UI edge; ILLEGAL as small text. Every green text run uses --action #00713A. --frame-expand #7C8420 on --bg is 3.90: legal as a 1px chip frame and a 7px swatch, illegal as text. This is why chip ink is always --ink and the quadrant rides in frame plus swatch plus the WORD. Raw Strawberry Red #E02B28 on --bg is 4.45 - just clears AA, but it is reserved for TRUE ALERTS only (brand rule: it is a flavour colour first). Alert TEXT uses --alert #B3141B at 6.67. --rule #E2DFCE is 1.2 on cream: decorative only. A boundary that must be perceived is --rule-strong (3.1) or --frame-* . QUARANTINED - never text, never a sole signal WHITE on Chill Yellow ....... 1.42 catastrophic. The brand packet already forbids it; measured here so nobody re-litigates it. Chill Green on Chill Yellow . 2.49 FAILS even AA-large. The brand guide lists "green type on yellow" as a safe pairing; at WCAG it is not. DEVIATION 3, flag to Mason. The masthead therefore carries the LOGO ONLY plus charcoal text - no green type on the yellow band anywhere. White on Chill Green #009D4E 3.54 fails AA for normal text. DEVIATION 1 from the spec: filled buttons use --action #00713A at 6.13 instead. Pale Lemon #F2EEA0 as a frame 1.15 DEVIATION 2: the FILL-IN chip frame darkens to #6E6A2E (5.37) while the chip WASH stays Pale Lemon. Lime Olive #B3BD35 as text ... 1.97 frames and swatches only. No status is ever carried by colour alone: every quadrant, geo-basis and confidence mark ships its WORD, survives forced-colors, and prints grey. BRAND RULES AND WASHES - non-text, so the 3:1 UI-component floor applies Chill Yellow #FCD602 on --bg cream .............. 1.30 RULE ONLY. It is a 3px edge against a 1px --rule-strong frame, never a boundary on its own and never a text ground below 24px. Chill Green #009D4E on --bg ..................... 3.41 rules, rails, swatches, 3:1 UI edges. Never small text (that is --action). Pale Lemon wash 55% in --sheet .................. --ink 13.9, --ink-2 6.4 Pale Lemon wash 55% in --band ................... selected-tab ground, --ink 12.4 --------------------------------------------------------------------------- RECONCILIATION - the dataviz skill vs the LC brand packet --------------------------------------------------------------------------- The brand fixes the quadrant hues (HUNT Chill Green, EXPAND Lime Olive, FILL-IN Pale Lemon, PARK warm grey). Run as a 4-slot categorical palette through the skill's validator they FAIL, and the failure is real, not pedantic: node scripts/validate_palette.js "#009D4E,#B3BD35,#F2EEA0,#8A8578" --mode light --surface "#FCFBF2" --pairs all FAIL lightness band #F2EEA0 at L 0.935 FAIL chroma floor #F2EEA0 0.098, #8A8578 0.02 - read as grey FAIL CVD separation worst all-pairs grey vs green dE 4.8 (deutan) WARN contrast vs surface #B3BD35 1.97, #F2EEA0 1.15 All four hues live in one green-to-yellow wedge plus a grey; no re-ordering or re-stepping can fix that, because the hues are the brand. The brand wins. What the skill's discipline buys us instead is HOW they are allowed to be used, and that is enforced here: 1. Quadrant NEVER carries meaning by fill alone. A chip is the same ground and the same ink for every quadrant; identity is a 1px frame, a 7px SQUARE swatch, and ALWAYS the word. That is simultaneously HRWD's chip formula and the skill's "never colour alone" non-negotiable. 2. Every filter-control bar chart is SINGLE-HUE: one mark colour (--mark = --action, 5.91 on cream), unselected siblings dimmed to --mark-dim. No categorical palette is used, so none can fail. The quadrant chip is the row LABEL beside the bar, which is where the brand colour belongs. This also obeys the skill's rule against colouring nominal bars by their own value. 3. The Opportunity-by-Access plot encodes quadrant by POSITION - it is literally a 2x2 - so colour is redundant there by construction. 4. The MAP is the one place spec section 4 requires quadrant as a dot FILL. The deutan collapse is real and is mitigated, not ignored: every dot has a --ink stroke ring, the legend spells all four words, the hover tooltip names the quadrant, low-confidence dots are hatched, dot SIZE carries the opportunity bucket, and the LIST tab is a full table view of the same rows (the skill's required table-view relief for a WARN). Documented, measured, mitigated - not silently shipped. 5. Strawberry Red is status-only and always ships with an icon + label. It is never "series 2". --------------------------------------------------------------------------- State derivations - every state is mixed, never hand-picked: --------------------------------------------------------------------------- hover, filled .... color-mix(in oklab, var(--action) 88%, black) active, filled ... color-mix(in oklab, var(--action) 78%, black) hover, outline ... background color-mix(in oklab, var(--action) 8%, var(--sheet)) hover, row ....... --row-hover, Pale Lemon 22% in sheet selected ......... --pick, Pale Lemon 55% in sheet - rows, chips, tiles, segment buttons, patch cards. ONE selected look. chrome band ...... --pick-bg, Pale Lemon 42% in bg - filter bar, table head, map-list head, selected tab. Not a selection. focus ring ....... outline 2px solid var(--ring); outline-offset 2px; forced-colors: outline 2px solid Highlight disabled ......... ink stays --ink-2 (still clears AA); the FRAME drops to --rule. Never grey text below AA to look disabled. selected row ..... 1px --action frame inset, background unchanged chip hover ....... border-color darkens; tint unchanged. Chips never flood. link hover ....... underline thickens 1px to 2px, colour unchanged. chart mark hover . fill color-mix(in oklab, var(--mark) 80%, black) Deliberate absences, so nobody reintroduces them: no drop shadows (the scale resolves to nothing), no blur, no glass, no gradient except the ONE sanctioned .plate-media scrim, no raw hex in component CSS below the token block. --------------------------------------------------------------------------- Geometry - the LC deviation from HRWD's zero-radius ledger --------------------------------------------------------------------------- BOLD HAPPY FUNKY RETRO. --radius 6px on chips, buttons, inputs and plates. --radius-0 stays 0 on table rules and plate frames so density still reads as a ledger rather than a card wall. --radius-pill exists for exactly one 7px round swatch (research/contact tier) and nothing else. ========================================================================== */ /* ------------------------------------------------------------------ fonts Real brand faces from attachments-2026-09-16/ex/lcbrand/lc-brand/assets/ fonts/ttf/, copied into ./fonts/. No subsetting: fontTools is not available on this machine, so these are the full TTFs (about 550 KB total). They are served from the prototype directory - nothing loads from a CDN. Magical Night is DISPLAY ONLY at 24px and up; it collapses small. Billbreak is loaded for at most one accent word in an empty state, never in data. Filson Pro Heavy/Black carry every numeral. */ @font-face { font-family: "Filson Pro"; src: url("fonts/FilsonPro-Book.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Filson Pro"; src: url("fonts/FilsonPro-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Filson Pro"; src: url("fonts/FilsonPro-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Filson Pro"; src: url("fonts/FilsonPro-Heavy.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Filson Pro"; src: url("fonts/FilsonPro-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Magical Night"; src: url("fonts/MagicalNight.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Billbreak"; src: url("fonts/Billbreak.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @layer tokens, base, components, utilities; @layer tokens { :root { /* Light on EVERY device, whatever the OS prefers. v3 deleted dark mode outright: no light-dark(), no [data-theme], nothing to drift. */ color-scheme: light; /* -- 1. GROUNDS ------------------------------------------------------ */ --bg: #FCFBF2; --sheet: #FFFFFF; --sheet-2: #F7F5E8; /* nested plate, no sill */ --well: #F6F4E4; /* prose quarantine ground */ --muted: #EFECD9; /* The one brand datum: the masthead band is Chill Yellow. */ --band: #FCD602; --band-ink: #222222; --band-h: 76px; /* -- 2. INK ---------------------------------------------------------- */ --ink: #222222; /* charcoal, never pure black */ --ink-2: #5C5A50; --scrim-ink: #1A1A12; /* -- 3. BRAND PALETTE (verbatim hexes from the LC brand guide) -------- */ --chill-green: #009D4E; --chill-yellow: #FCD602; --lemon-yellow: #F4E501; --lime-olive: #B3BD35; --strawberry: #E02B28; --blush: #EEC1B2; --pale-lemon: #F2EEA0; --cream: #FCFBF2; /* -- 4. ACTION ------------------------------------------------------- */ /* DEVIATION 1: white on #009D4E is 3.54 and fails AA, so every filled button and every green text run uses this darkened action green. Raw Chill Green survives as a MARK colour only (--brand-mark). */ --action: #00713A; --action-ink: #FFFFFF; --brand-mark: #009D4E; /* rails, 3px edges, swatches */ /* -- 5. STATUS - reserved, always with an icon + word ----------------- */ --alert: #B3141B; --alert-wash: #FBEDEC; --warn: #7A5A00; --warn-wash: #FDF6DC; --good: #00713A; /* -- 6. QUADRANT MARKS (brand-fixed; frames darkened for contrast) ---- Square swatch = quadrant. Round swatch = contact/research tier. Hollow chip = low evidence confidence. See RECONCILIATION above. */ --q-hunt: #009D4E; --q-expand: #7C8420; /* Lime Olive darkened, 3.90 */ --q-fillin: #6E6A2E; /* DEVIATION 2: Pale Lemon frame */ --q-park: #6B655B; --q-unscored: #8C8878; /* Map DOT fills - mark-grade steps of the brand wedge, validated with the dataviz skill (CVD dE 15.7 / normal 18.8 worst pair). Ordered lightness = priority order, so the ladder reads even in greyscale. The yellow's sub-3:1 surface contrast is relieved by the ink stroke ring on every dot + the worded legend + the Accounts list as table view. Chips keep the --q-* frames. */ --dot-hunt: #00602F; --dot-expand: #7F8A1F; --dot-fillin: #D9B500; --dot-park: #9A9184; --dot-unscored: #B5AF9F; /* Row wash source hues - kept at raw brand strength; the MIX percentage in the component layer is what keeps ink contrast intact (4-6%). */ --wash-hunt: #009D4E; --wash-expand: #B3BD35; --wash-fillin: #F2EEA0; --wash-park: #8C8878; /* -- 7. GEO BASIS marks (round-cornered, distinct from quadrant) ------ */ --geo-matched: #00713A; --geo-centroid: #7A5A00; --geo-unplaced: #6B655B; /* -- 8. BORDERS, INPUTS, RINGS --------------------------------------- */ --rule: #E2DFCE; /* decorative, 1.2 - never a boundary */ --rule-strong: #A9A492; /* 3.1 - perceivable boundary */ --input: #8F8B78; --ring: #00713A; --row-hover: color-mix(in oklab, var(--pale-lemon) 22%, var(--sheet)); /* v3 brand infusion. --pick is THE selected/active ground everywhere: one wash, so "selected" always looks the same. --cap is the 3px brand rule on the leading edge of a data surface. */ --pick: color-mix(in oklab, var(--pale-lemon) 55%, var(--sheet)); --pick-bg: color-mix(in oklab, var(--pale-lemon) 42%, var(--bg)); --cap: var(--chill-yellow); --chip-ground: var(--muted); --chip-frame: var(--rule-strong); /* fallback for a class-less chip */ /* -- 9. CHARTS - single-hue by law; see RECONCILIATION --------------- */ --mark: var(--action); --mark-dim: color-mix(in oklab, var(--action) 26%, var(--sheet)); --chart-track: color-mix(in oklab, var(--rule) 70%, var(--sheet)); --chart-grid: var(--rule); --chart-label: var(--ink-2); /* -- 10. TYPOGRAPHY -------------------------------------------------- */ --font-display: "Magical Night", "Cooper Black", Georgia, serif; --font-sans: "Filson Pro", "Century Gothic", Poppins, Calibri, "Helvetica Neue", Arial, sans-serif; --font-accent: "Billbreak", "Brush Script MT", cursive; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fw-light: 300; --fw-book: 400; --fw-bold: 700; --fw-heavy: 800; --fw-black: 900; /* One step larger than HRWD's floor throughout - spec section 2 lists "tiny type" as a documented HRWD weakness not to copy. */ --t-hero: clamp(1.75rem, 1.2rem + 1.7vw, 2.5rem); --t-figure: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem); --t-score: clamp(1.5rem, 1.3rem + 0.5vw, 1.75rem); --t-display-sm: 1.5rem; --t-prose: 1.0625rem; --t-body: 1rem; --t-ui: 0.9375rem; --t-sm: 0.875rem; --t-xs: 0.8125rem; --t-caps: 0.75rem; --t-micro: 0.6875rem; --lh-tight: 1.08; --lh-snug: 1.28; --lh-body: 1.5; --lh-prose: 1.62; --tr-caps: 0.11em; --tr-caps-wide: 0.15em; /* -- 11. SPACING + SHAPE --------------------------------------------- */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 2.5rem; --s8: 3rem; --page-inline: clamp(1rem, 0.4rem + 2.4vw, 3rem); --plate-pad: clamp(0.875rem, 0.5rem + 1.2vw, 1.75rem); --row-block: 62px; --radius: 6px; /* chips, buttons, inputs, plates */ --radius-0: 0px; /* table rules, plate frames */ --radius-pill: 999px; /* the one round 7px swatch */ /* -- 12. DEPTH - declared, deliberately absent ------------------------ */ --shadow-sm: 0 0 0 0 transparent; --shadow: 0 0 0 0 transparent; --shadow-lg: 0 0 0 0 transparent; --edge-pop: 0 0 0 1px var(--ink); /* the only legal box-shadow */ --sill-offset: 4px; /* -- 13. LAYOUT CONSTANTS -------------------------------------------- */ --drawer-w: 660px; --drawer-w-mid: 470px; --drawer-snap: 56vw; --table-min: 900px; --z-sticky: 40; --z-thead: 35; --z-scrim: 55; --z-drawer: 60; --z-toast: 70; --measure-prose: 68ch; --map-h: clamp(380px, 58vh, 720px); --filters-block: 0px; /* -- 14. MOTION ------------------------------------------------------ */ --d-micro: 120ms; --d-small: 200ms; --d-med: 300ms; --e-in: cubic-bezier(0, 0, 0.2, 1); --e-std: cubic-bezier(0.4, 0, 0.2, 1); } @media (forced-colors: active) { :root { --band: Canvas; --band-ink: CanvasText; --scrim-ink: Canvas; } .plate, .chip, .btn, th, td, input, select, textarea { border-color: CanvasText; } .chip { forced-color-adjust: none; } .swatch { display: none; } :focus-visible { outline: 2px solid Highlight; } } @media print { #masthead, .filters, .tabs, .drawer__cta, .btn, #mapwrap { display: none; } .drawer { position: static; inline-size: auto; border: 0; } tr { break-inside: avoid; } } } @layer base { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fw-book) var(--t-body)/var(--lh-body) var(--font-sans); font-variant-numeric: tabular-nums lining-nums; } h1, h2, h3, h4, h5 { margin: 0; font-weight: var(--fw-bold); } p { margin: 0 0 var(--s3); } a { color: var(--action); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } a:hover { text-decoration-thickness: 2px; } button, input, select, textarea { font: inherit; color: inherit; } table { border-collapse: collapse; inline-size: 100%; } img { max-inline-size: 100%; } :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } [hidden] { display: none !important; } /* Pre-render hold. Gated on .js so a scripting-disabled reader still sees the noscript shell. Removed by reveal(), which is scheduled BEFORE anything that can throw - a JS exception costs at most 1.2s, never a blank page. (Spec section 2: "blank page on JS exception" is on the do-not-copy list.) */ html.js[data-pre] .needs-js { display: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } tbody tr:hover .cell-prio::before { transform: none; } } } @layer components { /* ============================================================== masthead */ /* Flat brand band, logo only. Clear space = the height of the stacked O's in ORIGINAL, which on the horizontal lockup is about 22% of the mark height; --band-h 76px with 18px block padding gives the logo 40px of height and more than that in clear space on every side. The lockup is never below its 30mm / ~85pt minimum because the flex-basis floor is 150px. */ #masthead { background: var(--band); block-size: var(--band-h); display: flex; align-items: center; gap: var(--s4); padding-inline: var(--page-inline); padding-block: 18px; border-block-end: 3px solid var(--action); } #masthead img { block-size: 40px; inline-size: auto; min-inline-size: 150px; object-fit: contain; object-position: left center; } #masthead .mast-title { font: var(--fw-bold) var(--t-caps)/1.2 var(--font-sans); letter-spacing: var(--tr-caps-wide); text-transform: uppercase; color: var(--band-ink); /* charcoal 11.18 - never green, never white */ margin-inline-start: auto; text-align: end; } #masthead .mast-title b { display: block; font-size: var(--t-sm); letter-spacing: .04em; } /* v3: the provenance strip is GONE. All that survives is the demo identity, as a discreet control at the right end of the band. Charcoal on yellow. */ #masthead .mast-rep { display: flex; align-items: center; gap: 6px; color: var(--band-ink); } #masthead .mast-rep label { font: var(--fw-bold) var(--t-micro)/1.2 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; } #masthead .mast-rep select { min-block-size: 34px; padding: 4px 8px; max-inline-size: 190px; border: 1px solid var(--ink); border-radius: var(--radius); background: color-mix(in oklab, #FFFFFF 62%, var(--band)); color: var(--ink); font-size: var(--t-sm); font-weight: var(--fw-bold); } @media (max-width: 720px) { #masthead .mast-title { display: none; } #masthead .mast-rep label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } } /* ============================================= v3 section head (.sechead) Charcoal caps over a 3px Chill Yellow underline. This is the shape every section label takes now, including "Work a patch", which used to sit inline with its own cards. */ .sechead { font: var(--fw-black) var(--t-caps)/1.2 var(--font-sans); letter-spacing: var(--tr-caps-wide); text-transform: uppercase; color: var(--ink); padding-block-end: 5px; border-block-end: 3px solid var(--chill-yellow); display: inline-block; margin-block-end: var(--s3); } /* ================================================================= tabs */ /* Horizontal strip ONLY. Spec section 2: vertical icon rails were stakeholder-rejected. */ /* v5: the strip shares its row with the assistant launcher, so the rule that used to sit under .tabs moved out to the row. */ .tabrow { display: flex; align-items: stretch; gap: var(--s2); background: var(--bg); border-block-end: 1px solid var(--rule-strong); } .tabs { display: flex; gap: 2px; padding-inline: var(--page-inline); background: var(--bg); flex: 1 1 auto; min-inline-size: 0; overflow-x: auto; scrollbar-width: thin; } /* Outlined green, not filled: the one filled green per context is spent on the drawer's primary action. Word plus arrow - the arrow is never alone. */ .asklaunch { flex: none; align-self: center; margin-inline-end: var(--page-inline); appearance: none; cursor: pointer; white-space: nowrap; min-block-size: 38px; padding: 8px 13px; border: 1px solid var(--action); border-radius: var(--radius); background: var(--sheet); color: var(--action); font: var(--fw-bold) var(--t-caps)/1 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; } .asklaunch:hover { background: var(--pick); } .asklaunch[aria-expanded="true"] { background: var(--pick); color: var(--ink); border-color: var(--action); } @media (max-width: 760px) { .asklaunch { padding-inline: 10px; letter-spacing: .05em; } .asklaunch__long { display: none; } } .tab { appearance: none; background: transparent; border: 0; cursor: pointer; padding: var(--s3) var(--s4); min-block-size: 46px; white-space: nowrap; font: var(--fw-bold) var(--t-caps)/1 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2); border-block-end: 3px solid transparent; margin-block-end: -1px; border-radius: var(--radius) var(--radius) 0 0; } .tab:hover { background: var(--row-hover); color: var(--ink); } .tab[aria-selected="true"] { color: var(--ink); background: var(--pick-bg); border-block-end-color: var(--brand-mark); } .tab .tabn { color: var(--ink-2); font-weight: var(--fw-book); margin-inline-start: 6px; } /* ========================================================== page + plates */ .shell { display: grid; grid-template-columns: minmax(0, 1fr) 0; grid-template-areas: "page drawer"; } .shell[data-drawer="open"] { grid-template-columns: minmax(0, 1fr) var(--drawer-w); } #page { grid-area: page; min-inline-size: 0; } #drawerHost { grid-area: drawer; min-inline-size: 0; } .viewhead { padding: var(--s5) var(--page-inline) 0; } .viewhead h2 { font: var(--fw-book) var(--t-hero)/var(--lh-tight) var(--font-display); color: var(--ink); display: inline-block; border-block-end: 4px solid var(--chill-green); padding-block-end: 4px; } .viewhead p { margin-block-start: var(--s2); color: var(--ink-2); max-inline-size: var(--measure-prose); font-size: var(--t-prose); } .plate { position: relative; background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--radius); border-block-start: 3px solid var(--cap); padding: var(--plate-pad); } .plate__title { display: flex; align-items: center; gap: var(--s3); font: var(--fw-bold) var(--t-caps)/1.2 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2); margin-block-end: var(--s3); } .plate__title { color: var(--ink); } .plate__title::before { content: ""; flex: none; inline-size: 9px; block-size: 9px; background: var(--chill-green); } .plate__title::after { content: ""; flex: 1 1 auto; block-size: 1px; background: var(--rule); } .plate--nested { background: var(--sheet-2); } .label-caps { font: var(--fw-bold) var(--t-caps)/1.2 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2); } .note { font-size: var(--t-xs); color: var(--ink-2); } /* ======================================================== ledger strip */ /* ONE framed row with internal dividers, not six cards. Number + a 2-4 word label ONLY; the de-fanging caption rides the title attribute and the Method & coverage panel, never the visible flow. */ .ledger { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--rule-strong); border-radius: var(--radius); border-block-start: 3px solid var(--cap); margin: var(--s4) var(--page-inline) 0; background: var(--sheet); overflow: hidden; } .ledger__cell { padding: var(--s4) var(--s3); border-inline-start: 1px solid var(--rule); text-align: start; block-size: 100%; background: transparent; border-block: 0; border-inline-end: 0; font: inherit; } .ledger__cell:first-child { border-inline-start: 0; } button.ledger__cell { cursor: pointer; transition: background-color var(--d-micro) var(--e-std); } button.ledger__cell:hover { background: var(--row-hover); } button.ledger__cell:active { transform: translateY(1px); } button.ledger__cell[aria-pressed="true"] { background: var(--pick); box-shadow: inset 0 -3px 0 0 var(--chill-green); } /* Green numerals: --action #00713A, 6.13 on white. Never raw Chill Green. */ .ledger__val { display: block; font: var(--fw-black) var(--t-figure)/1 var(--font-sans); color: var(--action); min-block-size: var(--t-figure); } .ledger__lbl { display: block; margin-block-start: 6px; font: var(--fw-bold) var(--t-caps)/1.15 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2); } /* Map tab only: the same six figures on ONE line, so the canvas climbs. */ .ledger--slim .ledger__cell { padding: 7px var(--s3); display: flex; align-items: baseline; gap: 7px; } .ledger--slim .ledger__val { font-size: var(--t-body); min-block-size: 0; } .ledger--slim .ledger__lbl { margin-block-start: 0; font-size: var(--t-micro); letter-spacing: .06em; } /* ======================================================== patch strip */ .patchstrip { margin: var(--s4) var(--page-inline) 0; } .patchstrip .sechead { margin-block-end: var(--s2); } .patchrow { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: stretch; } .patchbtn { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 14px; cursor: pointer; text-align: start; background: var(--sheet); border: 1px solid var(--rule-strong); border-inline-start: 3px solid var(--brand-mark); border-radius: var(--radius); font: inherit; color: var(--ink); } .patchbtn--0 { border-inline-start-color: var(--chill-green); } .patchbtn--1 { border-inline-start-color: var(--lime-olive); } .patchbtn--2 { border-inline-start-color: var(--chill-yellow); } .patchbtn:hover { background: var(--row-hover); } .patchbtn[aria-pressed="true"] { border-color: var(--action); border-inline-start-width: 5px; background: var(--pick); } .patchbtn b { font-weight: var(--fw-bold); } .patchbtn small { font-size: var(--t-xs); color: var(--ink-2); } /* ================================================================ chips */ /* THE CHIP FORMULA. Same ground, same ink, for every chip in the system. Identity is: 1px frame colour + a 7px swatch + ALWAYS the word. Swatch SHAPE separates the ramps - square = quadrant, round = contact or research tier. HOLLOW (transparent swatch, dashed frame) = low evidence confidence. Colour is never the only channel. */ .chip { display: inline-flex; align-items: center; gap: 5px; background: var(--chip-ground); border: 1px solid var(--chip-frame); border-radius: var(--radius); padding: 2px 7px; color: var(--ink); font: var(--fw-bold) var(--t-caps)/1.35 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; white-space: nowrap; max-inline-size: 100%; overflow: hidden; } /* A long route name truncates inside its own frame rather than spilling over the next column. The swatch and the frame never shrink, so the chip is still identifiable, and the full string is on the title attribute. */ .chip > span:last-child { overflow: hidden; text-overflow: ellipsis; min-inline-size: 0; } .chip .swatch { inline-size: 7px; block-size: 7px; background: var(--chip-frame); flex: 0 0 auto; border-radius: var(--radius-0); } .chip--round .swatch { border-radius: var(--radius-pill); } /* hollow = the evidence behind this label is thin */ .chip--hollow { border-style: dashed; } .chip--hollow .swatch { background: transparent; box-shadow: inset 0 0 0 1.5px var(--chip-frame); } .chip--q-hunt { --chip-frame: var(--q-hunt); } .chip--q-expand { --chip-frame: var(--q-expand); } .chip--q-fillin { --chip-frame: var(--q-fillin); } .chip--q-park { --chip-frame: var(--q-park); } .chip--q-unscored { --chip-frame: var(--q-unscored); } .chip--geo-matched { --chip-frame: var(--geo-matched); } .chip--geo-centroid { --chip-frame: var(--geo-centroid); } .chip--geo-unplaced { --chip-frame: var(--geo-unplaced); } /* The item's KIND, not its status: charcoal on Chill Yellow, 11.18. */ .chip--kind { background: var(--chill-yellow); } .chip--alert { --chip-frame: var(--alert); background: var(--alert-wash); } .chip--warn { --chip-frame: var(--warn); background: var(--warn-wash); } .chip:hover { border-color: color-mix(in oklab, var(--chip-frame) 100%, black); } .chips-inline { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } /* Filter chip: a control, not a status. No swatch - that is the shape distinction that keeps the two families apart at a glance. */ .chip--filter { --chip-frame: var(--q-fillin); border-radius: var(--radius-pill); text-transform: none; letter-spacing: normal; padding: 3px 5px 3px 10px; background: var(--pick); font-weight: var(--fw-book); max-inline-size: 100%; } .chip--filter b { font-weight: var(--fw-bold); text-transform: uppercase; font-size: var(--t-micro); letter-spacing: var(--tr-caps); } .chip--filter span { min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink); } .chip--filter button { flex: none; inline-size: 22px; block-size: 22px; padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-2); cursor: pointer; font-weight: var(--fw-bold); } .chip--filter button:hover { background: color-mix(in oklab, var(--action) 12%, transparent); color: var(--action); } .chip--area { --chip-frame: var(--action); background: color-mix(in oklab, var(--action) 10%, var(--bg)); } /* ============================================================== buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-block-size: 44px; padding: 10px 15px; border-radius: var(--radius); cursor: pointer; font: var(--fw-bold) var(--t-ui)/1 var(--font-sans); background: transparent; border: 1px solid var(--rule-strong); color: var(--ink); text-decoration: none; } /* a.btn (the mailto affordance) is a button */ /* DEVIATION 1 in practice: outlined green is the DEFAULT, filled uses the darkened action green. The spec asks for outlined wherever possible. */ .btn--outline { border-color: var(--action); color: var(--action); padding: 9px 14px; } .btn--outline:hover { background: color-mix(in oklab, var(--action) 8%, var(--sheet)); } .btn--primary { background: var(--action); color: var(--action-ink); border-color: transparent; } .btn--primary:hover { background: color-mix(in oklab, var(--action) 88%, black); } .btn--primary:active { background: color-mix(in oklab, var(--action) 78%, black); } .btn--ghost { border-color: transparent; color: var(--ink-2); } .btn--ghost:hover { background: var(--row-hover); color: var(--ink); } .btn--danger { border-color: var(--alert); color: var(--alert); } .btn--danger:hover { background: var(--alert-wash); } .btn:disabled { cursor: not-allowed; border-color: var(--rule); color: var(--ink-2); background: transparent; } .btn--sm { min-block-size: 36px; padding: 6px 11px; font-size: var(--t-sm); } .iconbtn { inline-size: 40px; block-size: 40px; display: grid; place-items: center; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--sheet); cursor: pointer; color: var(--ink); } .iconbtn:hover { background: var(--row-hover); } .iconbtn:disabled { color: var(--ink-2); border-color: var(--rule); cursor: not-allowed; } /* ============================================================== filters */ /* v3: ONE row. Scope toggle + search + active chips + "+ Filter" + count. Pale-lemon ground so the control band reads as brand chrome, not paper. */ .filters { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); background: var(--pick-bg); border-block: 1px solid var(--rule-strong); border-block-start-width: 3px; border-block-start-color: var(--chill-green); padding: var(--s2) var(--page-inline); margin-block-start: var(--s3); } .filterbar { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; } /* Segmented control: the scope toggle and the "+ Filter" affordance share it so the row has exactly one control idiom. */ .seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; background: var(--sheet); } .seg__btn { appearance: none; border: 0; background: var(--sheet); cursor: pointer; min-block-size: 38px; padding: 7px 13px; color: var(--ink-2); font: var(--fw-bold) var(--t-sm)/1.1 var(--font-sans); white-space: nowrap; } .seg__btn + .seg__btn { border-inline-start: 1px solid var(--rule-strong); } .seg__btn small { font-weight: var(--fw-book); color: var(--ink-2); } .seg__btn:hover { background: var(--row-hover); color: var(--ink); } .seg__btn[aria-pressed="true"] { background: var(--pick); color: var(--ink); box-shadow: inset 0 -3px 0 0 var(--chill-green); } .seg__btn[aria-pressed="true"] small { color: var(--ink); } .searchbox { min-block-size: 38px; min-inline-size: 240px; flex: 0 1 300px; padding: 7px 11px; border: 1px solid var(--input); border-radius: var(--radius); background: var(--sheet); color: var(--ink); } /* "+ Filter" opens a small popover of the dimensions NOT already in use. */ .addfilter { position: relative; } .addfilter > summary { list-style: none; display: inline-flex; align-items: center; border: 1px solid var(--action); border-radius: var(--radius); color: var(--action); background: var(--sheet); } .addfilter > summary::-webkit-details-marker { display: none; } .addfilter > summary:hover { background: var(--pick); } .addfilter[open] > summary { background: var(--pick); } .fmenu { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; z-index: var(--z-sticky); inline-size: max(240px, 22vw); max-block-size: 60vh; overflow-y: auto; background: var(--sheet); border: 1px solid var(--rule-strong); border-block-start: 3px solid var(--chill-green); border-radius: var(--radius); padding: var(--s3); display: grid; gap: var(--s2); box-shadow: var(--edge-pop); } .field { display: flex; flex-direction: column; gap: 3px; min-inline-size: 0; } .field > label { font: var(--fw-bold) var(--t-micro)/1.2 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2); } .field select, .field input { min-block-size: 40px; padding: 7px 10px; border: 1px solid var(--input); border-radius: var(--radius); background: var(--sheet); color: var(--ink); } .count { margin-inline-start: auto; font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; } .count b { color: var(--action); font-weight: var(--fw-black); font-size: var(--t-body); } /* ================================================================ table */ .listwrap { margin: var(--s4) var(--page-inline) 0; } .tablebox { background: var(--sheet); border: 1px solid var(--rule-strong); border-block-start: 3px solid var(--cap); border-radius: var(--radius); position: relative; } .tablebox[data-xscroll="1"] { overflow-x: auto; } table.acct { table-layout: fixed; min-inline-size: var(--table-min); } table.acct thead th { position: sticky; inset-block-start: var(--filters-block, 0px); z-index: var(--z-thead); background: var(--pick-bg); color: var(--ink); text-align: start; padding: 10px 12px; font: var(--fw-bold) var(--t-caps)/1.2 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; border-block-end: 2px solid transparent; border-inline-end: 1px solid var(--rule); cursor: pointer; user-select: none; } .tablebox[data-xscroll="1"] table.acct thead th { inset-block-start: 0; } table.acct thead th[aria-sort] { border-block-end-color: var(--brand-mark); } table.acct thead th:not([aria-sort]) { color: var(--ink-2); } table.acct tbody tr { block-size: var(--row-block); border-block-end: 1px solid var(--rule); position: relative; content-visibility: auto; contain-intrinsic-size: auto 62px; transition: background-color var(--d-micro) var(--e-std); } table.acct td { padding: 7px 12px; vertical-align: middle; font-size: var(--t-body); border-inline-end: 1px solid color-mix(in oklab, var(--rule) 60%, transparent); overflow: hidden; } table.acct td.n { text-align: end; font-variant-numeric: tabular-nums; font-weight: var(--fw-heavy); } td .l1 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--fw-bold); } td .l2 { display: block; font-size: var(--t-xs); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Quadrant row wash, hottest to coolest. Kept at 4-6% so ink contrast on the sheet moves by under 0.2:1 - measured: --ink stays above 14:1 and --ink-2 above 6.3:1 on every wash. The wash NEVER carries the quadrant on its own; the numeral, the chip word and the 3px rail all stay. */ table.acct tbody tr[data-q="HUNT"] { background: color-mix(in oklab, var(--wash-hunt) 6%, var(--sheet)); } table.acct tbody tr[data-q="EXPAND"] { background: color-mix(in oklab, var(--wash-expand) 6%, var(--sheet)); } table.acct tbody tr[data-q="FILL-IN"] { background: color-mix(in oklab, var(--wash-fillin) 5%, var(--sheet)); } table.acct tbody tr[data-q="PARK"] { background: color-mix(in oklab, var(--wash-park) 4%, var(--sheet)); } /* the attribute selector would otherwise outrank the plain hover rule */ table.acct tbody tr[data-q]:hover, table.acct tbody tr:hover { background: var(--row-hover); } table.acct tbody tr.is-open { outline: 2px solid var(--action); outline-offset: -2px; background: var(--pick); } table.acct tbody tr:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; } /* 3px quadrant rail on the priority cell; widened by transform on hover so the row never re-lays-out. */ .cell-prio { position: relative; padding-inline-start: 16px !important; } .cell-prio::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 0; inline-size: 3px; background: var(--railc, var(--rule-strong)); transform-origin: left center; transition: transform var(--d-micro) var(--e-std); } table.acct tbody tr:hover .cell-prio::before { transform: scaleX(1.667); } .prioline { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } .prionum { font: var(--fw-black) var(--t-score)/1 var(--font-sans); color: var(--ink); font-variant-numeric: lining-nums; } .prionum .dash { color: var(--ink-2); font-weight: var(--fw-light); } /* Whole row is the hit target, without nesting interactive elements. */ .rowlink { color: inherit; text-decoration: none; } .rowlink::after { content: ""; position: absolute; inset: 0; z-index: 1; } table.acct td a:not(.rowlink), table.acct td .chip, table.acct td button { position: relative; z-index: 2; } .empty { padding: var(--s7) var(--s5); text-align: center; color: var(--ink-2); } .empty h3 { font: var(--fw-book) var(--t-display-sm)/1.2 var(--font-display); color: var(--ink); margin-block-end: var(--s2); } /* The ONE sanctioned Billbreak accent - empty states only, never in data. */ .empty .accent { font: var(--fw-book) 1.75rem/1 var(--font-accent); color: var(--action); display: block; margin-block-end: var(--s2); } /* The one decorative mark in the system. Carries no data; aria-hidden. */ .lemonmark { display: block; margin: 0 auto var(--s3); } /* ================================================================ drawer */ #scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: color-mix(in oklab, var(--scrim-ink) 42%, transparent); } /* v5: #chatPanel is the drawer's twin. It is the SAME rail, so it wears the same geometry at every breakpoint by sharing these selectors - docked grid track at >=1440px, overlay with a scrim below that, full sheet <=1099px. The rail holds ONE panel at a time; lc.app.js enforces that. */ #drawer, #chatPanel { position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(var(--drawer-snap), var(--drawer-w)); min-inline-size: 420px; background: var(--sheet); border-inline-start: 1px solid var(--rule-strong); z-index: var(--z-drawer); display: flex; flex-direction: column; overflow: hidden; } @media (min-width: 1440px) { #drawer, #chatPanel { position: sticky; inset-block-start: 0; block-size: 100dvh; inline-size: 100%; min-inline-size: 0; max-inline-size: var(--drawer-w); } #scrim { display: none; } } @media (max-width: 1439px) and (min-width: 1240px) { .shell[data-drawer="open"] { grid-template-columns: minmax(0, 1fr) var(--drawer-w-mid); } #drawer, #chatPanel { max-inline-size: var(--drawer-w-mid); } } @media (max-width: 1239px) { .shell, .shell[data-drawer="open"] { grid-template-columns: minmax(0, 1fr); grid-template-areas: "page"; } } @media (max-width: 1099px) { #drawer, #chatPanel { inline-size: 100%; min-inline-size: 0; border-inline-start: 0; } } @media (max-width: 899px) { :root { --page-inline: 1rem; --drawer-snap: 100vw; } } .drawer__head { position: sticky; inset-block-start: 0; background: var(--sheet); z-index: 2; padding: var(--s4) var(--s5) var(--s3); border-block-start: 3px solid var(--cap); border-block-end: 1px solid var(--rule); } .drawer__bar { display: flex; align-items: center; gap: var(--s2); } .drawer__ord { font: var(--fw-bold) var(--t-caps)/1 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2); } .drawer__nav { margin-inline-start: auto; display: flex; gap: 4px; } .drawer__name { display: block; margin-block-start: var(--s2); font: var(--fw-book) var(--t-display-sm)/1.15 var(--font-display); color: var(--ink); } .drawer__sub { font-size: var(--t-xs); color: var(--ink-2); } .drawer__body { overflow-y: auto; padding: var(--s5); flex: 1 1 auto; } .drawer__cta { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; border-block-start: 1px solid var(--rule); padding: var(--s3) var(--s5); } .dsec { margin-block-end: var(--s6); } .dsec > h3 { display: flex; align-items: center; gap: var(--s3); font: var(--fw-bold) var(--t-caps)/1.2 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2); padding-block-end: 6px; border-block-end: 1px solid var(--rule); margin-block-end: var(--s3); } .dsec > h3 { color: var(--ink); border-block-end-color: var(--chill-yellow); border-block-end-width: 2px; } .dsec > h3 .num { color: var(--action); font-weight: var(--fw-black); } #drawer:not([hidden]), #chatPanel:not([hidden]) { animation: drawerIn var(--d-med) var(--e-in) both; } #drawerHost[data-mode="overlay"] #drawer:not([hidden]), #drawerHost[data-mode="sheet"] #drawer:not([hidden]), #drawerHost[data-mode="overlay"] #chatPanel:not([hidden]), #drawerHost[data-mode="sheet"] #chatPanel:not([hidden]) { animation-name: drawerSlide; } @keyframes drawerIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } } @keyframes drawerSlide { from { transform: translateX(100%); } to { transform: none; } } /* ===================================================== factor bar table */ .fac { display: grid; grid-template-columns: minmax(0, 1fr) 84px 52px; gap: 5px var(--s3); align-items: center; font-size: var(--t-sm); } .fac .k { min-inline-size: 0; } .fac .k b { font-weight: var(--fw-bold); } .fac .k i { display: block; font-style: normal; font-size: var(--t-xs); color: var(--ink-2); line-height: 1.35; } .fac .bar { block-size: 6px; background: var(--chart-track); position: relative; border-radius: var(--radius-pill); } .fac .bar i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--mark); inline-size: var(--pct, 0%); border-radius: var(--radius-pill); } .fac .bar.unknown { background: repeating-linear-gradient(135deg, var(--chart-track) 0 4px, transparent 4px 8px); } .fac .v { text-align: end; font-variant-numeric: tabular-nums; font-weight: var(--fw-heavy); } .fac .v.null { color: var(--ink-2); font-weight: var(--fw-light); } .fac .total { border-block-start: 1px solid var(--rule-strong); padding-block-start: 7px; margin-block-start: 4px; } /* =============================================== prose quarantine */ /* Agent/model text lives in a tinted well with a permanent disclaimer. Human note text is visually distinct - white ground, green rule, author line - so the two can never be confused. */ .prose-model { background: var(--well); border-inline-start: 3px solid var(--warn); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s4); max-inline-size: var(--measure-prose); font-size: var(--t-prose); line-height: var(--lh-prose); text-wrap: pretty; } .prose-model .welllbl { display: block; margin-block-end: var(--s2); font: var(--fw-bold) var(--t-micro)/1.3 var(--font-sans); letter-spacing: var(--tr-caps-wide); text-transform: uppercase; color: var(--warn); } .humannote { background: var(--sheet); border: 1px solid var(--rule); border-inline-start: 3px solid var(--brand-mark); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s3) var(--s4); margin-block-end: var(--s3); } .humannote .who { font: var(--fw-bold) var(--t-micro)/1.3 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2); display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; } .humannote .body { margin-block-start: var(--s2); font-size: var(--t-prose); line-height: var(--lh-prose); white-space: pre-wrap; text-wrap: pretty; } .quote { border-inline-start: 3px solid var(--rule-strong); padding-inline-start: var(--s3); margin: var(--s2) 0; font-size: var(--t-sm); line-height: var(--lh-body); white-space: pre-wrap; } /* ================================================== .plate-media recipe */ /* HRWD's pre-written recipe, adopted verbatim in structure. 16:9 well, gradient scrim caption, honest no-image fallback. This is the ONE sanctioned gradient in the system. The caption is measured against the DARKEST gradient stop, not the image average. */ .plate-media { position: relative; aspect-ratio: 16 / 9; background: var(--well); border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; } .plate-media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; } .plate-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, color-mix(in oklab, #14140D 90%, transparent) 0%, color-mix(in oklab, #14140D 58%, transparent) 36%, transparent 62%); } .plate-media figcaption { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; padding: var(--s3); color: #FFFFFF; /* 14.6:1 on the darkest stop */ font-size: var(--t-xs); line-height: 1.4; } .plate-media figcaption b { font-weight: var(--fw-bold); } /* Load failure or no image: solid well, 1px frame, caps label in --ink. NEVER a grey gradient placeholder. */ .plate-media--none { display: grid; place-items: center; text-align: center; padding: var(--s4); } .plate-media--none::after { content: none; } .plate-media--none .why { font: var(--fw-bold) var(--t-caps)/1.5 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink); max-inline-size: 34ch; } .plate-media--none .why span { display: block; text-transform: none; letter-spacing: normal; font-weight: var(--fw-book); font-size: var(--t-xs); color: var(--ink-2); margin-block-start: var(--s2); } /* Street-view hero: the drawer's first element. Taller than the 16:9 plate because the rep is judging a building from it, not glancing at a thumbnail. */ .streethero { margin-block-end: var(--s4); } .plate-media--hero { aspect-ratio: 16 / 10; } /* Google's own embed chrome eats a narrow frame: give the pano more height on phones so there is still a building to look at. */ @media (max-width: 720px) { .plate-media--hero { aspect-ratio: 4 / 3; } } .plate-media iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; } /* No scrim over a live panorama: it dims the image and would sit on top of Google's attribution bar. The caption lives under the frame instead. */ .plate-media--hero::after { content: none; } .streethero .note { margin-block-start: var(--s2); } /* Geo-basis ribbon, flush in the corner so it reads as chrome, not content. */ .geobadge { position: absolute; z-index: 2; inset-block-start: 0; inset-inline-start: 0; pointer-events: none; background: var(--chill-yellow); color: var(--ink); /* 11.18 measured */ box-shadow: 0 0 0 1px var(--ink); padding: 5px var(--s3); border-end-end-radius: var(--radius); font: var(--fw-bold) var(--t-caps)/1.3 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; } .btn--wide { display: block; inline-size: 100%; text-align: center; margin-block-start: var(--s2); } .basisline { margin-block-start: var(--s2); font-size: var(--t-xs); color: var(--ink-2); display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; } /* ================================================================== map */ #mapwrap { margin: var(--s4) var(--page-inline) 0; position: relative; } .maptoolbar { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-block-end: var(--s3); } .maptoolbar .sep { inline-size: 1px; align-self: stretch; background: var(--rule-strong); margin-inline: var(--s2); } .maptoolbar .btn[aria-pressed="true"] { background: var(--action); color: var(--action-ink); border-color: transparent; } #mapwrap { border-block-start: 0; } .maptoolbar input[type="text"] { min-block-size: 36px; padding: 6px 10px; border: 1px solid var(--input); border-radius: var(--radius); background: var(--sheet); color: var(--ink); font-size: var(--t-sm); } .maptoolbar select { min-block-size: 36px; padding: 6px 8px; border: 1px solid var(--input); border-radius: var(--radius); background: var(--sheet); color: var(--ink); font-size: var(--t-sm); } .mapgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s3); } @media (max-width: 1099px) { .mapgrid { grid-template-columns: minmax(0, 1fr); } } #map { block-size: var(--map-h); border: 1px solid var(--rule-strong); border-block-start: 3px solid var(--cap); border-radius: var(--radius); background: var(--muted); overflow: hidden; } #map.is-drawing .mapboxgl-canvas-container { cursor: crosshair; } #maplist { block-size: var(--map-h); overflow-y: auto; background: var(--sheet); border: 1px solid var(--rule-strong); border-block-start: 3px solid var(--chill-green); border-radius: var(--radius); } #maplist .mlhead { position: sticky; inset-block-start: 0; background: var(--pick-bg); padding: 8px 12px; font: var(--fw-bold) var(--t-caps)/1.2 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2); border-block-end: 1px solid var(--rule-strong); z-index: 1; } .mlrow { display: block; inline-size: 100%; text-align: start; background: transparent; border: 0; border-block-end: 1px solid var(--rule); cursor: pointer; padding: 8px 12px; font: inherit; } .mlrow:hover { background: var(--row-hover); } .mlrow.is-open { outline: 2px solid var(--action); outline-offset: -2px; background: var(--pick); } .mlrow .l1 { display: block; font-weight: var(--fw-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mlrow .l2 { display: block; font-size: var(--t-xs); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mapboxgl-popup-content { background: var(--sheet) !important; color: var(--ink) !important; border: 1px solid var(--rule-strong); border-radius: var(--radius) !important; padding: 8px 12px !important; font: var(--fw-book) var(--t-sm)/1.4 var(--font-sans) !important; } .mapboxgl-popup-tip { border-top-color: var(--sheet) !important; border-bottom-color: var(--sheet) !important; } .mapboxgl-ctrl-group { border-radius: var(--radius) !important; } .mapnote { background: var(--warn-wash); border: 1px solid var(--warn); border-radius: var(--radius); padding: var(--s3); margin-block-start: var(--s3); font-size: var(--t-sm); color: var(--ink); } #mapmeta { margin-block-start: var(--s2); font-size: var(--t-xs); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; } #mapmeta i { display: inline-block; inline-size: 11px; block-size: 11px; border-radius: var(--radius-pill); margin-inline-end: 5px; border: 1.5px solid var(--ink); vertical-align: -1px; } /* ================================================== charts as filters */ #chartwrap { margin: var(--s3) var(--page-inline) 0; } #chartwrap > summary { cursor: pointer; color: var(--action); font-size: var(--t-sm); } .chart { margin: 0; } .charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin: var(--s4) var(--page-inline) 0; } @media (max-width: 1239px) { .charts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .charts { grid-template-columns: minmax(0, 1fr); } } .chart svg { inline-size: 100%; block-size: auto; display: block; } .chart .mark { fill: var(--mark); cursor: pointer; transition: fill var(--d-micro) var(--e-std); } .chart .mark:hover { fill: color-mix(in oklab, var(--mark) 80%, black); } .chart .mark.is-dim { fill: var(--mark-dim); } .chart .mark:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; } .chart .axlbl { fill: var(--chart-label); font-size: 11px; font-family: var(--font-sans); font-weight: 700; } .chart .vallbl { fill: var(--ink); font-size: 11px; font-family: var(--font-sans); font-weight: 800; } .chart figcaption { font-size: var(--t-xs); color: var(--ink-2); margin-block-start: var(--s2); } /* ======================================================= panels / queue */ /* minmax(0,1fr) everywhere a single-column grid holds prose: the implicit auto track would otherwise size to max-content and overflow small screens */ #panels { grid-template-columns: minmax(0, 1fr); } .cardgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); margin: var(--s4) var(--page-inline) 0; } /* v6: Today is a queue in the Accounts row grammar. The work cards, their collapsed "Evidence & draft" and the card-face "Log outcome" are gone. */ .queuewrap { margin: 0 var(--page-inline); } .queuewrap .tablebox { overflow: hidden; } table.acct--queue { min-inline-size: 0; inline-size: 100%; } table.acct--queue tbody tr { block-size: 46px; contain-intrinsic-size: auto 46px; } table.acct--queue td { padding: 4px 10px; } table.acct--queue td .l1, table.acct--queue td .l2 { line-height: 1.3; } table.acct--queue .prionum { font-size: var(--t-body); color: var(--ink-2); } table.acct--queue tbody tr.is-closed { opacity: .55; } table.acct--queue tbody tr.is-closed .cell-name .l1 { text-decoration: line-through; } /* Progression strip: how much of today's queue is closed, plus the one alternate view. Slim by construction - it sits above the queue. */ .qstrip { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin: var(--s4) var(--page-inline) var(--s2); } .qstrip__n { font: var(--fw-black) var(--t-body)/1 var(--font-sans); color: var(--action); font-variant-numeric: tabular-nums; } .qstrip__lbl { font: var(--fw-bold) var(--t-caps)/1 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2); } .qbar { flex: 1 1 120px; min-inline-size: 90px; max-inline-size: 320px; block-size: 6px; background: var(--chart-track); border-radius: var(--radius-pill); overflow: hidden; } .qbar i { display: block; block-size: 100%; background: var(--action); transition: inline-size var(--d-micro) var(--e-std); } .qstrip .seg { margin-inline-start: auto; } /* NEXT MOVE / focus: one block, two frames. */ /* one item at a time: cap the measure, this is a reading/working view */ .plate--focus { margin: 0 var(--page-inline); max-inline-size: 960px; } .nextmove { margin-block-start: var(--s3); } .nextmove__act { font-weight: var(--fw-bold); margin-block: var(--s2) var(--s3); } .nextmove textarea { min-block-size: 130px; } .nextmove .label-caps { margin-block-start: var(--s4); } .outblock { border-block-start: 1px solid var(--rule); margin-block-start: var(--s4); padding-block-start: var(--s3); } .outrow { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block-start: var(--s3); } .gate { background: var(--warn-wash); border: 1px solid var(--warn); border-radius: var(--radius); padding: var(--s3); margin: var(--s3) 0; } .gate label { display: flex; gap: var(--s3); align-items: flex-start; cursor: pointer; } .gate input { inline-size: 20px; block-size: 20px; flex: none; margin-block-start: 2px; } textarea { inline-size: 100%; min-block-size: 190px; padding: var(--s3); border: 1px solid var(--input); border-radius: var(--radius); background: var(--sheet); color: var(--ink); font-size: var(--t-sm); line-height: var(--lh-body); resize: vertical; } /* ============================================================ receipts */ .receipt { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; background: color-mix(in oklab, var(--action) 9%, var(--sheet)); border: 1px solid var(--action); border-radius: var(--radius); padding: var(--s2) var(--s3); font-size: var(--t-sm); } .receipt.held { background: var(--warn-wash); border-color: var(--warn); } .receipt .who { color: var(--ink-2); font-size: var(--t-xs); } #toast { position: fixed; inset-block-end: 20px; inset-inline-start: 50%; transform: translateX(-50%); z-index: var(--z-toast); background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: var(--radius); max-inline-size: 90vw; box-shadow: var(--edge-pop); } #toast:empty { display: none; } /* =============================================== blocked / suppression */ .suppression { background: var(--alert-wash); border: 1px solid var(--alert); border-radius: var(--radius); padding: var(--s4); margin: var(--s4) var(--page-inline) 0; } .suppression h3 { display: flex; gap: var(--s2); align-items: center; color: var(--alert); font: var(--fw-bold) var(--t-caps)/1.3 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; } .suppression p { margin-block-start: var(--s2); font-size: var(--t-sm); color: var(--ink); } .coverage { margin: var(--s5) var(--page-inline) var(--s8); background: var(--sheet-2); border: 1px solid var(--rule); border-inline-start: 3px solid var(--brand-mark); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s4); } .coverage > summary { cursor: pointer; font: var(--fw-bold) var(--t-sm)/1.3 var(--font-sans); color: var(--action); } .coverage[open] > summary { margin-block-end: var(--s3); } .coverage h3 { font: var(--fw-bold) var(--t-caps)/1.3 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2); margin-block-end: var(--s2); } .coverage li { font-size: var(--t-sm); line-height: var(--lh-body); margin-block-end: 6px; } .kvlist { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s3); font-size: var(--t-sm); } .kvlist dt { color: var(--ink-2); } .kvlist dd { margin: 0; font-weight: var(--fw-bold); } /* ================================================== chat panel (v5) The HRWD chat.js pattern, re-cut in LC tokens. Anatomy, top to bottom: head (title + the permanent prose-quarantine line + context chip) -> scrolling transcript (user bubble / assistant prose well, tool chips inline BETWEEN paragraphs, receipts as the page's own receipt row) -> foot (status line + composer). Panel geometry is the drawer's, shared in the drawer block above; only the inside is new. NOTHING here is a raw hex: every surface is a token or a mix of one. */ .chat__head { position: sticky; inset-block-start: 0; background: var(--sheet); z-index: 2; flex: none; padding: var(--s4) var(--s5) var(--s3); border-block-start: 3px solid var(--cap); border-block-end: 1px solid var(--rule); } .chat__bar { display: flex; align-items: center; gap: var(--s2); } .chat__title { font: var(--fw-bold) var(--t-caps)/1 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2); } .chat__bar .iconbtn { margin-inline-start: auto; } .chat__name { display: block; margin-block-start: var(--s2); font: var(--fw-book) var(--t-display-sm)/1.15 var(--font-display); color: var(--ink); } /* The permanent disclaimer. One line, always on screen however far the transcript is scrolled - the panel's own version of .prose-model's label. */ .chat__disc { display: block; margin-block-start: var(--s2); font: var(--fw-bold) var(--t-micro)/1.4 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--warn); } .chat__ctx { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-block-start: var(--s3); } .chat__scroll { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--sheet); } .chat__log { display: flex; flex-direction: column; gap: var(--s5); padding: var(--s5); } /* Roles read from the asymmetry, as in both reference products: the rep's words are a short tinted bubble inset from the end; the model's answer is a full-width quarantined well. The words "You"/"Assistant" stay for AT. */ .cmsg { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); } .cmsg__who { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .cmsg--user { justify-items: end; } .cmsg--user .cmsg__body { max-inline-size: min(88%, 34rem); background: var(--muted); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: var(--s3) var(--s4); color: var(--ink); font-size: var(--t-ui); } /* PROSE QUARANTINE: same ground, same warn rule as .prose-model elsewhere on the page, so model text looks the same wherever it appears. */ .cmsg--agent .cmsg__body { background: var(--well); border-inline-start: 3px solid var(--warn); border-radius: 0 var(--radius) var(--radius) 0; padding: var(--s4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); } .cmsg__p { margin: 0; font-size: var(--t-prose); line-height: var(--lh-prose); max-inline-size: var(--measure-prose); text-wrap: pretty; min-inline-size: 0; overflow-wrap: anywhere; } /* Tool chips: mechanics, not conversation. One quiet collapsed row per call, set below the prose in size and ink; the arguments stay hidden until asked for. The chip carries the WORDS (tool name + a one-line argument summary), never a bare icon. */ .tchip { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--s2); } .tchip__row { display: inline-flex; align-items: center; gap: var(--s2); max-inline-size: 100%; appearance: none; cursor: pointer; text-align: start; background: var(--sheet); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 5px 9px; color: var(--ink-2); font: var(--fw-book) var(--t-xs)/1.4 var(--font-sans); } .tchip__row:hover { background: var(--row-hover); color: var(--ink); } .tchip__mark { flex: none; inline-size: 7px; block-size: 7px; background: var(--action); } .tchip--warn .tchip__mark { background: var(--warn); } .tchip__name { flex: none; font-family: var(--font-mono); color: var(--ink); font-size: var(--t-micro); } .tchip__sum { min-inline-size: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tchip__chev { flex: none; font-size: var(--t-micro); color: var(--ink-2); } .tchip__body { justify-self: stretch; background: var(--muted); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: var(--s3); display: grid; gap: var(--s2); } .tchip__args { margin: 0; font-family: var(--font-mono); font-size: var(--t-micro); line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; max-block-size: 34vh; overflow: auto; } .tchip__res { margin: 0; font-size: var(--t-xs); color: var(--ink); } .tchip__res b { font: var(--fw-bold) var(--t-micro)/1.3 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2); display: block; } .chat__foot { flex: none; border-block-start: 1px solid var(--rule); background: var(--sheet); padding: var(--s3) var(--s5) var(--s4); } .chat__status { margin: 0 0 var(--s2); min-block-size: 1.4em; font-size: var(--t-xs); line-height: 1.45; color: var(--ink-2); } .chat__status[data-said="1"] { color: var(--ink); background: var(--warn-wash); border-inline-start: 3px solid var(--warn); border-radius: 0 var(--radius) var(--radius) 0; padding: 6px var(--s3); } .chat__field { display: flex; gap: var(--s2); align-items: flex-end; border: 1px solid var(--input); border-radius: var(--radius); background: var(--sheet); padding: 6px 6px 6px var(--s3); } .chat__field:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 16%, transparent); } .chat__field textarea { flex: 1 1 auto; min-inline-size: 0; background: transparent; border: 0; resize: none; padding: 7px 0; font: inherit; font-size: var(--t-ui); line-height: var(--lh-body); color: var(--ink); min-block-size: 42px; } .chat__field textarea:focus-visible { outline: none; } .chat__send { flex: none; } /* ============================================================= tables in cards */ .minitable { inline-size: 100%; font-size: var(--t-sm); } .minitable th { text-align: start; font: var(--fw-bold) var(--t-micro)/1.3 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2); padding: 6px 8px; border-block-end: 1px solid var(--rule-strong); } .minitable td { padding: 7px 8px; border-block-end: 1px solid var(--rule); } .minitable td.n { text-align: end; font-variant-numeric: tabular-nums; font-weight: var(--fw-heavy); } /* small screens: the minitable scrolls inside its plate instead of stretching the page */ @media (max-width: 760px) { .minitable { display: block; overflow-x: auto; } } /* ==================================================== card stack <=600 */ @media (max-width: 760px) { .filters { position: static; } .field select, .field input { max-inline-size: 100%; } .searchbox { flex: 1 1 100%; min-inline-size: 0; } .fmenu { inline-size: min(300px, calc(100vw - 2rem)); } .count { margin-inline-start: 0; } .drawer__body { overflow-wrap: anywhere; } .fac { grid-template-columns: minmax(0, 1fr) 48px 64px; } .fac .v { white-space: nowrap; } } @media (max-width: 600px) { .tabs { padding-inline: 8px; } .tab { padding-inline: 7px; letter-spacing: .05em; } .patchrow { flex-wrap: nowrap; overflow-x: auto; padding-block-end: 4px; } .patchrow > * { flex: none; } .tablebox { overflow-x: visible; border: 0; background: transparent; } table.acct { min-inline-size: 0; } table.acct thead { position: absolute; inset-inline-start: -9999px; } table.acct, table.acct tbody, table.acct td { display: block; inline-size: auto; } table.acct tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; block-size: auto; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--sheet); margin-block-end: var(--s3); padding: var(--s3); contain-intrinsic-size: auto 220px; } table.acct td { grid-column: 1 / -1; border-inline-end: 0; padding: 3px 0; block-size: auto; } table.acct td.cell-prio { grid-column: 2; grid-row: 1; } table.acct td.cell-name { grid-column: 1; grid-row: 1; } table.acct td[data-label]::before { content: attr(data-label); display: block; font: var(--fw-bold) var(--t-micro)/1.2 var(--font-sans); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-2); margin-block-end: 2px; } /* the rail and the card label share one pseudo-element - suppress the label */ table.acct td.cell-prio[data-label]::before { content: ""; } .cell-prio { padding-inline-start: 11px !important; } td .l1 { white-space: normal; } .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ledger__cell { border-block-start: 1px solid var(--rule); } .ledger__cell:nth-child(odd) { border-inline-start: 0; } .ledger__cell:nth-child(-n+2) { border-block-start: 0; } } @media (max-width: 1099px) and (min-width: 601px) { .ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ledger__cell { border-block-start: 1px solid var(--rule); } .ledger__cell:nth-child(-n+3) { border-block-start: 0; } .ledger__cell:nth-child(3n+1) { border-inline-start: 0; } } } @layer utilities { .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; } .stack > * + * { margin-block-start: var(--s3); } .muted { color: var(--ink-2); } .dash { color: var(--ink-2); font-weight: var(--fw-light); } }