/* ============================================================================ Stanley Law — Legal Operations. Design system. Reusable across verticals: nothing in these tokens is legal-specific. The vocabulary lives in the views, the system lives here. Rules this file holds to: * Status is never colour alone — every status ships with an icon or a word. * One accent. Colour is for meaning, not decoration. * Shadows only on things that float (menus, modals). Cards use borders. * Density over drama: 13px base, tight tracking, controlled whitespace. ========================================================================== */ :root { /* ── neutrals, warm. Cooler greys read clinical; warm reads considered. ── */ --page: #f7f7f5; --surface: #ffffff; --surface-2: #f4f4f1; --surface-3: #ebebe6; --line: #e6e5e0; --line-2: #d4d3cb; --line-3: #b9b8ae; --ink: #1a1a17; --ink-2: #56564f; --ink-3: #85847a; --ink-4: #a8a79c; /* ── one accent ── */ --accent: #2571c9; --accent-600: #1d5aa8; --accent-700: #17427f; --accent-100: #e0ecfa; --accent-50: #f1f7fd; /* ── status. Paired ink/bg/border so contrast holds. ── */ --crit: #a82525; --crit-bg: #fdf2f2; --crit-line: #f0cfcf; --high: #a85c17; --high-bg: #fdf5ec; --high-line: #f0ddc6; --med: #7d5a06; --med-bg: #fdf9e9; --med-line: #ece0b4; --ok: #1a7a34; --ok-bg: #eff9f1; --ok-line: #c8e6ce; /* Categorical series, in FIXED order — slice 1 is always this blue, whatever the data is. Colour must follow the entity, never its rank, or a filter that changes the slice count silently repaints the survivors and the reader compares two different things across screens. Never cycled: past six categories the rest becomes "Other" rather than reusing a hue. */ --cat-1: #2571c9; --cat-2: #0f7d8c; --cat-3: #6b5bd6; --cat-4: #b8641b; --cat-5: #1a7a34; --cat-6: #9c2b6d; --cat-other: #85847a; --info: var(--accent-600); --info-bg: var(--accent-50); --info-line: #c6dcf5; /* ── categorical, for charts. Fixed order, never cycled. ── */ --c1: #2571c9; --c2: #c2681c; --c3: #1a7a34; --c4: #7a4fb5; /* ── type ── */ --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; /* ── space: 4px base ── */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 44px; --r1: 4px; --r2: 6px; --r3: 9px; --r4: 13px; --shadow-1: 0 1px 2px rgba(20,20,15,.05); --shadow-2: 0 4px 14px -2px rgba(20,20,15,.10), 0 1px 3px rgba(20,20,15,.06); --shadow-3: 0 18px 44px -12px rgba(20,20,15,.22), 0 2px 8px rgba(20,20,15,.08); --nav-w: 236px; --nav-w-collapsed: 60px; --top-h: 52px; } /* ── dark theme ─────────────────────────────────────────────────────────────── Chosen, not inverted. Flipping lightness produces muddy status colours and accent fills that vibrate on a dark surface, so every value below is picked against the dark surface it actually sits on. Two rules that flip in dark: * The "deeper" accent steps get LIGHTER. --accent-700 is emphasis text, and on a dark ground emphasis means more contrast, not less. * Status inks lighten and status backgrounds become dark tints of the same hue — a light status background on a dark card reads as a hole. Set on so the first paint is already correct and nothing flashes. ------------------------------------------------------------------------- */ html[data-theme="dark"] { --page: #131311; --surface: #1a1a18; --surface-2: #232320; --surface-3: #2d2d29; --line: #2f2e2b; --line-2: #3d3c37; --line-3: #55534c; --ink: #f1f0ea; --ink-2: #b4b2a9; --ink-3: #8a887e; --ink-4: #6a6860; --accent: #4a92e0; --accent-600: #74afec; --accent-700: #a6cdf5; --accent-100: #1b2d43; --accent-50: #17222f; --crit: #ee8f8f; --crit-bg: #2b1a1a; --crit-line: #4a2b2b; --high: #e2a469; --high-bg: #2a2118; --high-line: #48381f; --med: #d8bd66; --med-bg: #272317; --med-line: #423a22; --ok: #66c586; --ok-bg: #16251a; --ok-line: #294530; /* Categorical series, in FIXED order — slice 1 is always this blue, whatever the data is. Colour must follow the entity, never its rank, or a filter that changes the slice count silently repaints the survivors and the reader compares two different things across screens. Never cycled: past six categories the rest becomes "Other" rather than reusing a hue. */ --cat-1: #2571c9; --cat-2: #0f7d8c; --cat-3: #6b5bd6; --cat-4: #b8641b; --cat-5: #1a7a34; --cat-6: #9c2b6d; --cat-other: #85847a; --info: var(--accent-600); --info-bg: var(--accent-50); --info-line: #2a4665; /* Chart hues re-picked for a dark ground; the light ramp goes flat here. */ --c1: #4a92e0; --c2: #e08a4a; --c3: #4fb372; --c4: #a37fd8; --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 4px 14px -2px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); --shadow-3: 0 18px 44px -12px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.5); color-scheme: dark; } /* The one place a hardcoded white is correct in light mode and wrong in dark: the MFA QR must stay on white or a scanner cannot read it. */ html[data-theme="dark"] .qr-plate { background: #fff; } /* Scrims need more weight over a dark page to read as a layer at all. */ html[data-theme="dark"] .scrim { background: rgba(0,0,0,.62); } html[data-theme="dark"] dialog::backdrop { background: rgba(0,0,0,.62); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sans); font-size: 13px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--accent-100); } a { color: var(--accent-600); text-decoration: none; } a:hover { text-decoration: underline; } /* ── type scale ── */ h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.011em; } h1 { font-size: 20px; } h2 { font-size: 14.5px; } h3 { font-size: 13px; } .display { font-size: 25px; font-weight: 600; letter-spacing: -.021em; } .num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .mono { font-family: var(--mono); font-size: .92em; } .eyebrow { font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .075em; color: var(--ink-3); } .sub { color: var(--ink-2); } .dim { color: var(--ink-3); } .tiny { font-size: 11.5px; color: var(--ink-3); } .strike { text-decoration: line-through; color: var(--ink-4); } /* ============================ shell ============================ */ #shell { display: grid; grid-template-columns: var(--nav-w) 1fr; grid-template-rows: var(--top-h) 1fr; height: 100vh; } #shell.collapsed { grid-template-columns: var(--nav-w-collapsed) 1fr; } .topbar { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s4); background: var(--surface); border-bottom: 1px solid var(--line); z-index: 40; } .brand { display: flex; align-items: center; gap: var(--s3); width: calc(var(--nav-w) - var(--s4) * 2); flex: none; } #shell.collapsed .brand { width: auto; } .logo { width: 27px; height: 27px; border-radius: var(--r2); flex: none; background: var(--accent-700); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .02em; } .brand-text { min-width: 0; } .brand-text b { display: block; font-size: 12.5px; font-weight: 620; letter-spacing: -.005em; white-space: nowrap; } .brand-text span { display: block; font-size: 10px; color: var(--ink-3); letter-spacing: .045em; text-transform: uppercase; } #shell.collapsed .brand-text { display: none; } .searchwrap { position: relative; flex: 1; max-width: 560px; } .searchwrap svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--ink-4); } #gsearch { width: 100%; height: 31px; padding: 0 62px 0 30px; font: inherit; color: var(--ink); background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r2); } #gsearch::placeholder { color: var(--ink-4); } #gsearch:hover { background: var(--surface-3); } #gsearch:focus { outline: none; background: var(--surface); border-color: var(--accent-100); box-shadow: 0 0 0 3px var(--accent-50); } .kbd { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font: 500 10px/1 var(--sans); color: var(--ink-3); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r1); padding: 3px 5px; pointer-events: none; } .topbar-right { display: flex; align-items: center; gap: var(--s2); margin-left: auto; } .iconbtn { height: 29px; min-width: 29px; padding: 0 var(--s2); display: inline-flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; background: none; border: 1px solid transparent; border-radius: var(--r2); color: var(--ink-2); font: inherit; font-size: 12px; } .iconbtn:hover { background: var(--surface-2); color: var(--ink); } .iconbtn[disabled] { opacity: .45; cursor: not-allowed; } .iconbtn[disabled]:hover { background: none; color: var(--ink-2); } .avatar { width: 26px; height: 26px; border-radius: 50%; flex: none; cursor: pointer; background: var(--accent-600); color: #fff; display: grid; place-items: center; font-size: 10.5px; font-weight: 650; } /* ── theme switch: three states, so "follow the OS" stays reachable ── */ .themeswitch { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 20px; padding: 2px; gap: 1px; } .themeswitch button { width: 24px; height: 22px; display: grid; place-items: center; cursor: pointer; border: 0; border-radius: 20px; background: none; color: var(--ink-3); font: inherit; padding: 0; } .themeswitch button:hover { color: var(--ink); } .themeswitch button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); } /* ── sync pill ── */ .syncpill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); font-size: 11.5px; color: var(--ink-2); cursor: pointer; white-space: nowrap; } .syncpill:hover { border-color: var(--line-2); } .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--ok); } .dot.warn { background: var(--med); } .dot.bad { background: var(--crit); } .dot.off { background: var(--ink-4); } .dot.live { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); } /* ── side nav ── */ .sidenav { background: var(--surface); border-right: 1px solid var(--line); padding: var(--s3) var(--s2) var(--s2); overflow-y: auto; display: flex; flex-direction: column; gap: 1px; } /* Group header doubles as a disclosure control. 12 flat items made the nav a list to read rather than a structure to navigate. */ .navgroup { display: flex; align-items: center; gap: 5px; width: 100%; padding: var(--s4) var(--s3) var(--s1); border: 0; background: none; font: inherit; cursor: pointer; text-align: left; color: var(--ink-3); font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .075em; } .navgroup:hover { color: var(--ink-2); } /* The label must not wrap — "Not connected" broke across two lines once the count chip took its space, which made the group header taller than its rows. */ .navgroup > span:not(.chev):not(.gcount) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .navgroup .gcount { flex: none; } .navgroup .chev { transition: transform .14s ease; flex: none; width: 11px; height: 11px; } .navgroup[aria-expanded="false"] .chev { transform: rotate(-90deg); } .navgroup .gcount { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--ink-4); font-variant-numeric: tabular-nums; white-space: nowrap; } .navgroup[aria-expanded="true"] .gcount { opacity: 0; } .navsection { display: grid; gap: 1px; } .navsection[hidden] { display: none; } #shell.collapsed .navgroup { padding: var(--s4) 0 var(--s1); text-align: center; } #shell.collapsed .navgroup span { display: none; } #shell.collapsed .navgroup::after { content: "···"; color: var(--ink-4); } .navitem { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 var(--s3); border: 0; border-radius: var(--r2); background: none; color: var(--ink-2); font: inherit; font-size: 12.5px; cursor: pointer; width: 100%; text-align: left; position: relative; } .navitem:hover { background: var(--surface-2); color: var(--ink); } .navitem.on { background: var(--accent-50); color: var(--accent-700); font-weight: 550; } .navitem.on .ico { color: var(--accent-600); } .navitem .ico { flex: none; width: 15px; height: 15px; color: var(--ink-3); display: grid; place-items: center; } .navitem .label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .navitem .count { font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--ink-3); background: var(--surface-2); border-radius: 10px; padding: 1px 6px; } .navitem.on .count { background: var(--surface); color: var(--accent-700); } .navitem.locked { color: var(--ink-4); cursor: default; } .navitem.locked:hover { background: none; } .navitem.locked .ico { color: var(--ink-4); } #shell.collapsed .navitem { justify-content: center; padding: 0; } #shell.collapsed .navitem .label, #shell.collapsed .navitem .count { display: none; } .navfoot { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line); } /* ============================ main ============================ */ main { overflow-y: auto; scroll-behavior: smooth; } .page { padding: var(--s6) var(--s7) var(--s8); max-width: 1400px; } .page-head { margin-bottom: var(--s5); } .page-head .row { display: flex; align-items: flex-end; gap: var(--s4); flex-wrap: wrap; } .page-head h1 { margin-bottom: 3px; } .page-actions { margin-left: auto; display: flex; gap: var(--s2); align-items: center; } .section { margin-bottom: var(--s7); } .section-head { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s3); } .section-head h2 { letter-spacing: -.008em; } .section-head .right { margin-left: auto; display: flex; gap: var(--s2); align-items: center; } /* ── grid ── */ .grid { display: grid; gap: var(--s3); } .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .split { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: var(--s5); align-items: start; } /* ── card ── */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); overflow: hidden; } .card-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); } .card-head h2, .card-head h3 { margin: 0; } .card-head .right { margin-left: auto; display: flex; align-items: center; gap: var(--s2); } .card-body { padding: var(--s4); } .card-body.flush { padding: 0; } .card-foot { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); background: var(--surface-2); } /* ── metric tile: a filter, not an ornament ── */ .tile { display: block; width: 100%; text-align: left; font: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s3) var(--s4); cursor: pointer; position: relative; transition: border-color .12s, box-shadow .12s; } .tile:hover { border-color: var(--line-3); box-shadow: var(--shadow-1); } .tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .tile[aria-disabled="true"] { cursor: default; background: var(--surface-2); } .tile[aria-disabled="true"]:hover { border-color: var(--line); box-shadow: none; } .tile .k { display: flex; align-items: center; gap: 5px; } .tile .v { font-size: 23px; font-weight: 600; letter-spacing: -.021em; margin-top: 2px; line-height: 1.15; } .tile .s { font-size: 11.5px; color: var(--ink-2); margin-top: 1px; } .tile .arrow { position: absolute; right: var(--s3); top: var(--s3); color: var(--ink-4); opacity: 0; transition: opacity .12s; } .tile:hover .arrow { opacity: 1; } .tile.sev-critical .v { color: var(--crit); } .tile.sev-high .v { color: var(--high); } .tile.sev-medium .v { color: var(--med); } .tile.sev-ok .v { color: var(--ok); } /* ── badges ── */ .badge { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: 10.5px; font-weight: 600; line-height: 1.6; padding: 1px 7px; border-radius: 20px; border: 1px solid; white-space: nowrap; letter-spacing: .002em; } .badge.neutral { background: var(--surface-2); border-color: var(--line-2); color: var(--ink-2); } .badge.critical { background: var(--crit-bg); border-color: var(--crit-line); color: var(--crit); } .badge.high { background: var(--high-bg); border-color: var(--high-line); color: var(--high); } .badge.medium { background: var(--med-bg); border-color: var(--med-line); color: var(--med); } .badge.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); } .badge.info { background: var(--info-bg); border-color: var(--info-line); color: var(--info); } .badge.tier1 { background: var(--high-bg); border-color: var(--high-line); color: var(--high); } .badge.tier2 { background: var(--surface-2); border-color: var(--line-2); color: var(--ink-2); } .badge .glyph { font-size: 9px; line-height: 1; } .chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r1); padding: 1px 6px; white-space: nowrap; } .chip.mono { font-family: var(--mono); font-size: 10.5px; } /* ── method label: how a claim was produced ── */ .method { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; padding: 1px 6px; border-radius: var(--r1); border: 1px solid; } .method.detected { background: var(--surface-2); border-color: var(--line-2); color: var(--ink-2); } .method.ai { background: var(--accent-50); border-color: var(--info-line); color: var(--accent-700); } .method.source { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); } /* ── finding row ── */ .finding { display: block; width: 100%; text-align: left; font: inherit; cursor: pointer; background: var(--surface); border: 0; border-bottom: 1px solid var(--line); padding: var(--s4); position: relative; } .finding:last-child { border-bottom: 0; } .finding:hover { background: var(--surface-2); } .finding:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .finding::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--line-2); } .finding.sev-critical::before { background: var(--crit); } .finding.sev-high::before { background: var(--high); } .finding.sev-medium::before { background: var(--med); } .finding-top { display: flex; align-items: center; gap: var(--s2); margin-bottom: 5px; flex-wrap: wrap; } .finding-case { font-family: var(--mono); font-size: 11px; color: var(--ink-3); } .finding-client { font-weight: 600; font-size: 13px; } .finding-what { font-size: 13px; font-weight: 550; margin-bottom: 2px; } .finding-why { font-size: 12px; color: var(--ink-2); max-width: 74ch; margin-bottom: var(--s2); } .finding-meta { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; } /* Override controls. Deliberately NOT .btn.ghost: ghost renders with transparent border and no background, so it reads as plain text until hovered -- for a control a reviewer has to FIND, that is the wrong affordance, and it is why these were reported as "the button isn't there". Own row rather than sharing .finding-meta with the evidence chips, so the action does not look like another chip. */ .finding-acts { display: flex; align-items: center; gap: 6px; margin-top: var(--s2); flex-wrap: wrap; } .finding-action { display: flex; align-items: flex-start; gap: 6px; margin-top: var(--s2); padding: 7px 9px; background: var(--surface-2); border-radius: var(--r2); border-left: 2px solid var(--line-3); font-size: 12px; color: var(--ink-2); max-width: 74ch; } .finding-action b { color: var(--ink); font-weight: 600; } /* ── readiness track ── */ .track { display: flex; align-items: center; gap: var(--s3); padding: 9px 0; border-bottom: 1px solid var(--line); } .track:last-child { border-bottom: 0; } .track-mark { width: 16px; height: 16px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 9px; border: 1.5px solid; } .track-mark.done { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); } .track-mark.part { background: var(--med-bg); border-color: var(--med); color: var(--med); } .track-mark.none { background: var(--surface-2); border-color: var(--line-3); color: var(--ink-4); } .track-body { flex: 1; min-width: 0; } .track-name { font-size: 12.5px; font-weight: 550; } .track-note { font-size: 11.5px; color: var(--ink-3); } .track-mark.unknown { background: var(--surface-2); border-color: var(--line-3); border-style: dashed; color: var(--ink-3); } .track-detail { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; max-width: 68ch; line-height: 1.45; } .track-name { display: flex; align-items: center; gap: 6px; } /* ── practice-area chip. One treatment, used everywhere a practice appears. ── */ .practice { display: inline-flex; align-items: center; gap: 5px; flex: none; font-size: 11.5px; font-weight: 550; white-space: nowrap; padding: 2px 8px 2px 7px; border-radius: 20px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); } .practice i { font-style: normal; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); } .practice .pdot { width: 5px; height: 5px; border-radius: 50%; flex: none; background: var(--ink-4); } .practice.ruled { border-color: var(--ok-line); background: var(--ok-bg); } .practice.ruled .pdot { background: var(--ok); } .practice.ruled i { color: var(--ok); } .practice.prov { border-color: var(--med-line); background: var(--med-bg); } .practice.prov .pdot { background: var(--med); } .practice.prov i { color: var(--med); } .practice.plain .pdot { background: var(--ink-4); } /* ── practice picker rows in the scope popover ── */ .pgroup { padding: var(--s3) var(--s3) 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-4); } .prow { display: flex; align-items: center; gap: var(--s2); width: 100%; text-align: left; font: inherit; background: none; border: 0; border-radius: var(--r2); padding: 6px var(--s3); cursor: pointer; } .prow:hover { background: var(--surface-2); } .prow[aria-current="true"] { background: var(--accent-50); color: var(--accent-700); font-weight: 600; } .prow .pname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prow .pn { font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--ink-3); } .prow[aria-current="true"] .pn { color: var(--accent-700); } .prow .ptag { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 5px; border-radius: var(--r1); border: 1px solid var(--line-2); color: var(--ink-3); } .prow .ptag.ruled { border-color: var(--ok-line); color: var(--ok); background: var(--ok-bg); } .prow .ptag.prov { border-color: var(--med-line); color: var(--med); background: var(--med-bg); } /* ── bar ── */ .bar { height: 5px; background: var(--surface-3); border-radius: 3px; overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; } .bar > i.ok { background: var(--ok); } .bar > i.warn { background: var(--med); } .bar > i.bad { background: var(--crit); } .barrow { display: grid; grid-template-columns: 1fr 46px; gap: var(--s3); align-items: center; } /* ── table ── */ table { width: 100%; border-collapse: collapse; } thead th { position: sticky; top: 0; z-index: 2; text-align: left; font-size: 10px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding: var(--s2) var(--s4); background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; user-select: none; } thead th.sortable { cursor: pointer; } thead th.sortable:hover { color: var(--ink); } tbody td { padding: 9px var(--s4); border-bottom: 1px solid var(--line); vertical-align: middle; } tbody tr:last-child td { border-bottom: 0; } tbody tr.click { cursor: pointer; } tbody tr.click:hover { background: var(--surface-2); } td.r, th.r { text-align: right; font-variant-numeric: tabular-nums; } td.nowrap { white-space: nowrap; } /* ── timeline ── */ .tl { position: relative; padding-left: var(--s5); } .tl::before { content: ""; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--line-2); } .tl-item { position: relative; padding: 0 0 var(--s4); } .tl-item:last-child { padding-bottom: 0; } .tl-node { position: absolute; left: calc(var(--s5) * -1 + 1px); top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); } .tl-date { font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); } .tl-title { font-size: 12.5px; font-weight: 550; margin: 1px 0; } /* ── evidence quote ── */ .quote { border-left: 2px solid var(--line-2); padding: var(--s2) var(--s3); background: var(--surface-2); border-radius: 0 var(--r2) var(--r2) 0; } .quote-src { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; } .quote-text { font-family: var(--mono); font-size: 11px; color: var(--ink-2); line-height: 1.55; } /* ── answer ── */ .answer { font-size: 13.5px; line-height: 1.62; color: var(--ink); max-width: 82ch; white-space: pre-wrap; } .answer strong, .answer b { font-weight: 620; } .citelink { font-family: var(--mono); font-size: 10.5px; padding: 1px 4px; border-radius: var(--r1); background: var(--accent-50); border: 1px solid var(--info-line); color: var(--accent-700); text-decoration: none; white-space: nowrap; } .citelink:hover { background: var(--accent-100); text-decoration: none; } /* A citation that survived validation but has no matching source card should look wrong, not neutral. */ .citebad { font-family: var(--mono); font-size: 10.5px; padding: 1px 4px; border-radius: var(--r1); background: var(--crit-bg); border: 1px solid var(--crit-line); color: var(--crit); } /* A summary is rendered as real block elements (headings, bullets), so it must NOT inherit .answer's pre-wrap — that would double every paragraph break. */ .sum-body { white-space: normal; } .sum-body p { margin: 0 0 10px; } .sum-body ul { margin: 0 0 12px; padding-left: 18px; } .sum-body li { margin: 0 0 4px; } .sum-h { font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin: 18px 0 7px; } .sum-h:first-child { margin-top: 0; } /* ── donut ── Percentages map 1:1 onto stroke-dasharray because the radius is chosen to make the circumference exactly 100. No arc trigonometry, and no rounding drift between the drawn slice and the printed number. */ .donutwrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .donut { flex: 0 0 auto; width: 128px; height: 128px; } .donut circle { fill: none; stroke-width: 4.4; } .donut .track { stroke: var(--surface-3); } .donut .hole { font-family: var(--sans); } .donut .tot { font-size: 8.4px; font-weight: 700; fill: var(--ink); text-anchor: middle; } .donut .cap { font-size: 3.1px; fill: var(--ink-3); text-anchor: middle; letter-spacing: .09em; text-transform: uppercase; } .dlegend { flex: 1 1 190px; min-width: 180px; } .dlegend .row { display: flex; align-items: baseline; gap: 7px; font-size: 12px; padding: 2.5px 0; } .dlegend .sw { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; position: relative; top: 1px; } .dlegend .lab { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dlegend .val { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; } .dlegend .shr { color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; } /* A secondary measure, kept so a two-number panel loses nothing by going round. Recessive: the donut divides the primary measure, and this must not read as though it were being divided too. */ .dlegend .xtra { color: var(--ink-4); font-variant-numeric: tabular-nums; min-width: 62px; text-align: right; font-size: 11px; } .dlegend .hdr { display: flex; gap: 7px; font-size: 9.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .07em; padding-bottom: 3px; border-bottom: 1px solid var(--line); } .dlegend .hdr .lab { flex: 1 1 auto; } .dlegend .hdr .val { min-width: 0; font-weight: 600; } /* ── spinner ── */ .spin { width: 15px; height: 15px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: spin 780ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } } /* ── notice ── */ .notice { display: flex; gap: 9px; padding: var(--s3); border-radius: var(--r2); border: 1px solid var(--line); background: var(--surface-2); font-size: 12px; color: var(--ink-2); } .notice.info { background: var(--info-bg); border-color: var(--info-line); } .notice.warn { background: var(--med-bg); border-color: var(--med-line); } .notice b { color: var(--ink); } .notice .ico { flex: none; margin-top: 1px; } /* ── locked capability ── */ .locked-card { border: 1px dashed var(--line-2); border-radius: var(--r3); padding: var(--s4); background: var(--surface-2); } .locked-card h3 { color: var(--ink-2); display: flex; align-items: center; gap: 6px; margin-bottom: 3px; } /* ── buttons ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 var(--s3); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; border-radius: var(--r2); border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); white-space: nowrap; } .btn:hover { background: var(--surface-2); border-color: var(--line-3); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.primary:hover { background: var(--accent-600); border-color: var(--accent-600); } .btn.ghost { border-color: transparent; background: none; color: var(--ink-2); } .btn.ghost:hover { background: var(--surface-2); color: var(--ink); } .btn.sm { height: 25px; padding: 0 var(--s2); font-size: 11.5px; } .btn.xs { height: 21px; padding: 0 7px; font-size: 11px; } .btn.xs[aria-pressed="true"] { background: var(--accent-50); border-color: var(--accent-100); color: var(--accent-700); font-weight: 600; } .btn[disabled] { opacity: .5; cursor: not-allowed; } input[type=text], input[type=search], input[type=email], input[type=password], select { height: 30px; padding: 0 9px; font: inherit; font-size: 12.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r2); width: 100%; } input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-50); } label.field { display: block; } label.field > span { display: block; font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 4px; } /* ── states ── */ .empty { padding: var(--s7) var(--s4); text-align: center; color: var(--ink-3); } .empty .glyph { font-size: 20px; color: var(--ink-4); margin-bottom: var(--s2); } .empty h3 { color: var(--ink-2); margin-bottom: 3px; } .skel { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: var(--r1); } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .skel-line { height: 10px; margin-bottom: 7px; } .skel-tile { height: 68px; border-radius: var(--r3); } .errbox { border: 1px solid var(--crit-line); background: var(--crit-bg); color: var(--crit); border-radius: var(--r2); padding: var(--s3); font-size: 12px; } /* ── popover ── */ .pop { position: absolute; z-index: 60; min-width: 300px; max-width: 420px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r3); box-shadow: var(--shadow-3); overflow: hidden; } .pop-head { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--s2); } .pop-body { padding: var(--s3) var(--s4); max-height: 60vh; overflow-y: auto; } .pop-row { display: flex; align-items: baseline; gap: var(--s3); padding: 4px 0; font-size: 12px; } .pop-row span:first-child { color: var(--ink-3); flex: 1; } .pop-row b { font-variant-numeric: tabular-nums; font-weight: 550; } /* ── select control ── */ .filterbar { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); } .selectbtn { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 9px 0 10px; font: inherit; font-size: 12.5px; cursor: pointer; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r2); color: var(--ink); max-width: 340px; } .selectbtn:hover { border-color: var(--line-3); background: var(--surface-2); } .selectbtn[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-50); } .selectbtn .sl { color: var(--ink-3); font-size: 11.5px; flex: none; } .selectbtn .sv { font-weight: 550; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .selectbtn .sn { font-size: 11px; color: var(--ink-3); flex: none; background: var(--surface-2); border-radius: 10px; padding: 1px 6px; } .selectbtn .sc { color: var(--ink-4); flex: none; display: grid; place-items: center; } .selectbtn[aria-expanded="true"] .sc { transform: rotate(90deg); } .selmenu { min-width: 320px; max-width: 420px; max-height: 60vh; overflow-y: auto; padding: var(--s2); } .selgroup { padding: var(--s3) var(--s2) 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-4); } .selopt { display: flex; align-items: baseline; gap: var(--s2); width: 100%; text-align: left; font: inherit; font-size: 12.5px; background: none; border: 0; border-radius: var(--r2); padding: 6px var(--s2); cursor: pointer; color: var(--ink); } .selopt:hover { background: var(--surface-2); } .selopt[aria-selected="true"] { background: var(--accent-50); color: var(--accent-700); font-weight: 600; } .selopt .so-label { flex: 1; min-width: 0; } /* Fixed-width so the labels line up whether or not a row is ticked — a tick that shifts every label sideways makes a 40-item list very hard to scan. */ .selopt .so-check { flex: none; width: 12px; color: var(--accent-700); font-size: 11px; } .selopt .so-note { font-size: 11px; color: var(--ink-3); flex: none; } .selopt .so-n { font-size: 11.5px; color: var(--ink-3); flex: none; font-variant-numeric: tabular-nums; } .selopt[aria-selected="true"] .so-n { color: var(--accent-700); } /* active filter, removable */ .fchip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 6px 0 9px; font-size: 12px; border-radius: 20px; border: 1px solid var(--accent-100); background: var(--accent-50); color: var(--accent-700); } .fchip button { border: 0; background: none; cursor: pointer; padding: 0 2px; color: var(--accent-600); display: grid; place-items: center; line-height: 1; } .fchip button:hover { color: var(--crit); } /* ── command palette ── */ .scrim { position: fixed; inset: 0; background: rgba(20,20,15,.28); z-index: 70; display: grid; place-items: start center; padding-top: 11vh; } .palette { width: min(620px, 92vw); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r4); box-shadow: var(--shadow-3); overflow: hidden; } .palette input { height: 46px; border: 0; border-radius: 0; font-size: 14.5px; padding: 0 var(--s4); border-bottom: 1px solid var(--line); } .palette input:focus { box-shadow: none; } .palette-body { max-height: 56vh; overflow-y: auto; padding: var(--s2); } .pal-group { padding: var(--s2) var(--s3) 3px; } .pal-item { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left; font: inherit; background: none; border: 0; border-radius: var(--r2); padding: 7px var(--s3); cursor: pointer; } .pal-item:hover, .pal-item.sel { background: var(--accent-50); } .pal-item .pi-main { flex: 1; min-width: 0; } .pal-item .pi-label { font-size: 12.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pal-item .pi-meta { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── login ── */ #login { min-height: 100vh; display: grid; place-items: center; padding: var(--s6); background: var(--page); } .loginbox { width: min(384px, 100%); } .loginbox .card-body { padding: var(--s5); } .loginbrand { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); } /* ============================ responsive ============================ */ @media (max-width: 1180px) { .split { grid-template-columns: 1fr; } .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { #shell { grid-template-columns: var(--nav-w-collapsed) 1fr; } .brand { width: auto; } .brand-text { display: none; } .sidenav .navitem { justify-content: center; padding: 0; } .sidenav .navitem .label, .sidenav .navitem .count { display: none; } .navgroup span { display: none; } .page { padding: var(--s4) var(--s4) var(--s8); } .g-3, .g-2 { grid-template-columns: 1fr; } .kbd { display: none; } } @media (max-width: 620px) { .g-4 { grid-template-columns: 1fr; } .topbar-right .syncpill span { display: none; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }