/* ---------- tokens ---------- Light is the base. Dark arrives two ways and both must work: `[data-theme]`, which theme.js stamps on from the stored preference, and the OS media query, which is the answer when scripting is off. The two blocks are duplicated deliberately — a media query and an attribute selector cannot share one rule, and the alternative (making dark reachable only through JS) breaks the no-script case. */ :root { --bg: #f6f7f9; --bg-deep: #eceef2; --panel: #ffffff; --ink: #16181d; --muted: #666d78; --line: #e3e5ea; --line-soft: #eef0f4; --accent: #2a4d8f; --accent-hi: #3a67b8; --accent-soft: #eef2fa; --on-accent: #ffffff; --ok: #1a7a4c; --warn: #9c5c07; --err: #b3261e; --shadow-1: 0 1px 2px rgba(16, 20, 30, .06), 0 1px 3px rgba(16, 20, 30, .04); --shadow-2: 0 12px 32px rgba(16, 20, 30, .14); --radius: 12px; --radius-sm: 8px; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --nav-w: 244px; --nav-rail: 68px; --ease: cubic-bezier(.32, .72, .28, 1); color-scheme: light; } :root[data-nav="collapsed"] { --nav-w: var(--nav-rail); } :root[data-theme="dark"] { --bg: #101215; --bg-deep: #0a0b0d; --panel: #191c21; --ink: #e8eaed; --muted: #98a0ab; --line: #2a2e36; --line-soft: #21242a; --accent: #7ea6f0; --accent-hi: #9bbcf7; --accent-soft: #1c2534; --on-accent: #0c1420; --ok: #56c78d; --warn: #e2a75c; --err: #f08a80; --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 12px 32px rgba(0, 0, 0, .5); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #101215; --bg-deep: #0a0b0d; --panel: #191c21; --ink: #e8eaed; --muted: #98a0ab; --line: #2a2e36; --line-soft: #21242a; --accent: #7ea6f0; --accent-hi: #9bbcf7; --accent-soft: #1c2534; --on-accent: #0c1420; --ok: #56c78d; --warn: #e2a75c; --err: #f08a80; --shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --shadow-2: 0 12px 32px rgba(0, 0, 0, .5); color-scheme: dark; } } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } body.nav-locked { overflow: hidden; } /* while the mobile drawer is open */ a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } :where(a, button, summary, input, select, textarea):focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; border-radius: 4px; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 9px 14px; background: var(--panel); border: 1px solid var(--accent); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); transition: top .15s var(--ease); } .skip-link:focus { top: 12px; } /* Every icon inherits its colour and sizing from the text beside it. */ .ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* ---------- shell ---------- */ .shell { display: flex; min-height: 100vh; } .content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } /* ---------- sidebar ---------- The aside reserves the rail's width in the flex row; the inner panel is fixed and free to grow past it. That is what lets a collapsed sidebar expand on hover as an overlay — the page underneath never reflows, so text does not jump while the pointer is only passing across. */ .sidebar { flex: 0 0 var(--nav-w); width: var(--nav-w); transition: flex-basis .2s var(--ease), width .2s var(--ease); } .sidebar-inner { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--nav-w); display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--line); transition: width .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); overflow: hidden; } :root[data-nav="collapsed"] .sidebar-inner:hover, :root[data-nav="collapsed"] .sidebar-inner:focus-within { width: 244px; box-shadow: var(--shadow-2); } .sidebar-head { display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 14px; flex: none; } .brand { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; letter-spacing: -.02em; font-size: 16px; color: var(--ink); } .brand:hover { text-decoration: none; } .brand-mark { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(140deg, var(--accent-hi), var(--accent)); color: var(--on-accent); font-size: 15px; font-weight: 700; } .brand-name span { color: var(--accent); } .brand-d { width: 100%; height: 100%; fill: currentColor; } .mainnav { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; flex: 1 1 auto; overflow-y: auto; } .navlink { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: var(--radius-sm); color: var(--muted); font-weight: 500; white-space: nowrap; transition: background .12s, color .12s; } .navlink:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; } .navlink.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .navlink.on .ico { stroke-width: 2; } .navlink.accented { color: var(--accent); } .nav-sep { height: 1px; background: var(--line); margin: 10px 11px; } .sidebar-foot { flex: none; padding: 10px; border-top: 1px solid var(--line); } /* `.iconbtn` sets `display: grid` and is declared later, so these three need the extra class to win — a plain `.nav-toggle` would silently lose its row layout. */ .iconbtn.nav-toggle { display: flex; align-items: center; gap: 12px; width: 100%; height: auto; padding: 9px 11px; justify-content: flex-start; } .nav-toggle .nav-label { font-weight: 500; } /* The labels are what actually collapse. Fading them as the panel narrows keeps the text from being visibly guillotined by the edge. */ .nav-label { overflow: hidden; text-overflow: ellipsis; transition: opacity .14s var(--ease); } :root[data-nav="collapsed"] .sidebar-inner .nav-label { opacity: 0; } :root[data-nav="collapsed"] .sidebar-inner:hover .nav-label, :root[data-nav="collapsed"] .sidebar-inner:focus-within .nav-label { opacity: 1; } :root[data-nav="collapsed"] .ico-collapse, :root:not([data-nav="collapsed"]) .ico-expand { display: none; } :root[data-nav="collapsed"] .nav-toggle .nav-label::after { content: ""; } .iconbtn.nav-close, .iconbtn.nav-open { display: none; } .scrim { position: fixed; inset: 0; z-index: 35; background: rgba(8, 10, 14, .5); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); } body.nav-open .scrim { opacity: 1; pointer-events: auto; } /* ---------- topbar ---------- */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 20px; flex: none; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); } @supports not (backdrop-filter: blur(1px)) { .topbar { background: var(--bg); } } .whereami { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; color: var(--muted); } .whereami .ico { width: 16px; height: 16px; } .tenant { font-weight: 600; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tenant.muted { font-weight: 400; color: var(--muted); } .iconbtn { display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; transition: background .12s, color .12s; } .iconbtn:hover { background: var(--line-soft); color: var(--ink); filter: none; } /* One button, three states: system → light → dark. Which glyph shows is driven by the stored preference, not the resolved theme, so "following the system" stays legible as its own answer rather than masquerading as whichever mode it landed on. */ .theme-toggle .ico { display: none; } :root[data-theme-pref="light"] .theme-toggle .ico-sun, :root[data-theme-pref="dark"] .theme-toggle .ico-moon, :root[data-theme-pref="system"] .theme-toggle .ico-system, :root:not([data-theme-pref]) .theme-toggle .ico-system { display: block; } /* ---------- account menu ---------- */ .menu { position: relative; flex: none; } .menu summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 5px 9px 5px 5px; max-width: 220px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; background: var(--panel); transition: border-color .12s; } .menu summary:hover { border-color: var(--accent); } .menu summary::-webkit-details-marker { display: none; } .menu summary .ico { width: 14px; height: 14px; color: var(--muted); } .menu[open] summary .ico { transform: rotate(180deg); } .menu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .avatar { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; } .menu-body { position: absolute; right: 0; top: 46px; width: 268px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); display: grid; gap: 10px; } .menu-body select { width: 100%; } .menu-id { display: grid; gap: 2px; justify-items: start; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .menu-who { margin: 0; font-weight: 600; } .menu-id p { margin: 0; } .menu-id .pill { margin-top: 6px; } .menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border-radius: var(--radius-sm); color: var(--ink); font-weight: 500; text-align: left; } .menu-item:hover { background: var(--line-soft); text-decoration: none; } .menu-item .ico { color: var(--muted); } /* ---------- layout ---------- */ .page { max-width: 1180px; width: 100%; margin: 0 auto; padding: 28px 22px 72px; } .page.narrow { max-width: 560px; } h1 { font-size: 25px; margin: 0 0 4px; letter-spacing: -.022em; } h2 { font-size: 17px; margin: 28px 0 10px; letter-spacing: -.01em; } h3 { font-size: 15px; margin: 20px 0 8px; } .subtitle { color: var(--muted); margin: 0 0 22px; } .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 18px; box-shadow: var(--shadow-1); } .panel > h2:first-child, .panel > h3:first-child { margin-top: 0; } .row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; } .row > * { flex: 1 1 200px; } .split { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: start; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } } .header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } /* ---------- forms ---------- */ label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; } input[type=text], input[type=email], input[type=password], input[type=search], input[type=number], input[type=file], select, textarea { width: 100%; padding: 9px 11px; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color .12s, box-shadow .12s; } input:hover, select:hover, textarea:hover { border-color: var(--muted); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .check { display: flex; align-items: center; gap: 8px; font-weight: 500; } .check input { width: auto; } button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); transition: filter .12s, background .12s, border-color .12s; } button:hover, .btn:hover { filter: brightness(1.08); text-decoration: none; } button.secondary, .btn.secondary { background: transparent; color: var(--accent); } button.secondary:hover, .btn.secondary:hover { background: var(--accent-soft); filter: none; } button.danger, .btn.danger { background: var(--err); border-color: var(--err); color: #fff; } button.small, .btn.small { padding: 5px 10px; font-size: 13px; } button.linklike { background: none; border: none; color: var(--accent); padding: 0; font-weight: 500; } .menu-item.linklike { padding: 7px 8px; color: var(--ink); } form.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; } /* ---------- feedback ---------- */ .banner { padding: 11px 14px; border-radius: var(--radius-sm); margin-bottom: 18px; border: 1px solid var(--line); background: var(--panel); } .banner.ok { border-color: var(--ok); color: var(--ok); } .banner.err { border-color: var(--err); color: var(--err); } .banner.warn { border-color: var(--warn); color: var(--warn); } /* A password shown exactly once: loud enough that it is not scrolled past. */ .panel.credential { border-color: var(--warn); border-left-width: 4px; } .panel.credential > .header-row > h2 { margin: 0; font-size: 17px; } .credential-value { margin: 12px 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid var(--line); font-size: 20px; letter-spacing: .04em; word-break: break-all; user-select: all; /* one click selects the whole password */ } .pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--line); color: var(--muted); } .pill.role-admin { color: var(--err); border-color: var(--err); } .pill.role-author { color: var(--accent); border-color: var(--accent); } .pill.role-researcher { color: var(--muted); } .pill.ok { color: var(--ok); border-color: var(--ok); } .pill.warn { color: var(--warn); border-color: var(--warn); } .pill.err { color: var(--err); border-color: var(--err); } .muted { color: var(--muted); } .small { font-size: 13px; } .mono { font-family: var(--mono); font-size: 12.5px; } /* ---------- tables ---------- */ table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } tbody tr:hover { background: var(--line-soft); } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } .scroll-x { overflow-x: auto; } /* ---------- documents ---------- */ .doc-title { font-weight: 600; } .meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; } .meta-grid dt { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .meta-grid dd { margin: 2px 0 0; font-weight: 600; } .slide { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin-bottom: 16px; overflow: hidden; box-shadow: var(--shadow-1); } .slide > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; display: flex; gap: 10px; align-items: baseline; } .slide > summary::-webkit-details-marker { display: none; } .slide > summary:hover { background: var(--line-soft); } .slide[open] > summary { border-bottom: 1px solid var(--line); } .slide-body { padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 900px) { .slide-body { grid-template-columns: 1fr; } } .slide-body img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); } .slide-num { color: var(--muted); font-variant-numeric: tabular-nums; } .chart-table { font-size: 13px; } .readout { font-size: 13px; color: var(--muted); font-style: italic; } .notes { border-left: 3px solid var(--accent); padding-left: 12px; margin-top: 12px; font-size: 14px; color: var(--muted); } /* ---------- search ---------- */ .hit { border-bottom: 1px solid var(--line); padding: 14px 0; } .hit:last-child { border-bottom: none; } .hit-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; } .hit-context { font-size: 12.5px; color: var(--muted); margin: 3px 0 6px; } .hit mark { background: rgba(255, 214, 102, .45); color: inherit; padding: 0 2px; border-radius: 3px; } :root[data-theme="dark"] .hit mark { background: rgba(224, 167, 92, .3); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hit mark { background: rgba(224, 167, 92, .3); } } .hit-body { font-size: 14px; } /* Marks a hit the keyword index could not have produced. Quiet, but not hidden. */ .pill.retr { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); cursor: help; } /* mode switch */ .modes { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } .modes .mode { flex: 1 1 240px; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; cursor: pointer; padding: 9px 12px; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); font-weight: 400; transition: border-color .12s, background .12s; } .modes .mode:hover { border-color: var(--muted); } .modes .mode.on { border-color: var(--accent); background: var(--accent-soft); } .modes .mode input { margin: 0; } .mode-name { font-weight: 600; font-size: 14px; } .mode-note { grid-column: 2; font-size: 12.5px; color: var(--muted); } /* insight answer */ .answer-body { font-size: 16px; line-height: 1.55; margin: 0 0 4px; } .claims { margin: 14px 0 0; padding-left: 20px; } .claims > li { margin-bottom: 10px; font-size: 14px; line-height: 1.5; } .cites { display: block; margin-top: 3px; } .gap { margin: 16px 0 0; padding: 9px 12px; font-size: 13.5px; border-left: 3px solid var(--warn); background: var(--accent-soft); border-radius: 0 6px 6px 0; } /* Questions the model thought of while reading. Laid out as a stack of full-width targets rather than a row of pills: these are sentences, and a sentence that wraps inside a pill is unreadable. */ .followups { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); } .followups-head { margin: 0 0 8px; } .followups > p:last-child { margin: 8px 0 0; } .followup { display: block; padding: 9px 12px; margin-bottom: 6px; font-size: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); transition: border-color .12s, background .12s; } .followup:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; } .followup::before { content: "→"; color: var(--accent); margin-right: 8px; } .answer-foot { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line); } .warn-text { color: var(--warn); } .sources > summary { cursor: pointer; font-size: 14px; color: var(--muted); } .sources > summary:hover { color: var(--ink); } .sources[open] > summary { margin-bottom: 6px; } .cite-no { font: 600 11px/17px var(--mono); min-width: 18px; height: 18px; text-align: center; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } /* ---------- misc ---------- */ .empty { text-align: center; padding: 48px 20px; color: var(--muted); } .bar { height: 7px; background: var(--line); border-radius: 999px; overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--accent); transition: width .3s var(--ease); } .bar.over > i { background: var(--err); } .spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .empty .spinner { margin-right: 7px; vertical-align: -1px; } button[disabled] { opacity: .55; cursor: progress; filter: none; } .login-wrap { display: grid; place-items: center; min-height: 100vh; padding: 20px; } .login-card { width: 100%; max-width: 380px; } .login-brand { display: grid; justify-items: center; gap: 2px; margin-bottom: 22px; } .login-brand .brand-mark { width: 44px; height: 44px; border-radius: 13px; font-size: 21px; margin-bottom: 10px; } .login-brand h1 { font-size: 26px; } .login-brand h1 span { color: var(--accent); } .login-brand .subtitle { margin: 0; } /* The illustration panel exists only where there is room beside the card; below the breakpoint the page is exactly what it was before it. */ .login-split { display: flex; justify-content: center; align-items: center; gap: 56px; width: 100%; max-width: 1100px; margin: 0 auto; } .login-side { display: none; flex: 1 1 60%; min-width: 0; } .login-hero { width: 100%; height: auto; } .login-tag { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 14px 0 10px; } .login-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--muted); font-size: 13.5px; } .login-feats li { display: flex; align-items: center; gap: 10px; } .login-feats .ico { color: var(--accent); } @media (min-width: 980px) { .login-side { display: block; } .login-card { flex: 0 0 380px; } } button.wide, .btn.wide { width: 100%; } /* ---------- the AI researcher ---------- The two columns are the design, not a layout choice: internal evidence and external context are given equal width and different colour, and nothing renders across both. On a narrow screen they stack, internal first — the order carries the argument. */ .question { font-size: 22px; line-height: 1.35; margin-bottom: 4px; } .brief { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } @media (max-width: 820px) { .brief { grid-template-columns: 1fr; } } .brief-col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-1); } .brief-col > h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 10px; } .brief-col.internal { border-left: 3px solid var(--accent); } .brief-col.internal > h2 { color: var(--accent); } .brief-col.external { border-left: 3px solid var(--muted); } .brief-col.external > h2 { color: var(--muted); } .gap-panel { border-left: 3px solid var(--warn); } .pill.prov-internal { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .pill.prov-external { color: var(--muted); } /* `medium` is deliberately the neutral default — only unusual confidence is worth colouring, or every finding looks flagged and none of them reads as flagged. */ .pill.conf-high { color: var(--ok); border-color: var(--ok); } .pill.conf-medium { color: var(--muted); } .pill.conf-low { color: var(--warn); border-color: var(--warn); } .pill.status-succeeded { color: var(--ok); border-color: var(--ok); } .pill.status-failed { color: var(--err); border-color: var(--err); } .pill.status-running, .pill.status-queued { color: var(--warn); border-color: var(--warn); } .cite { display: inline-block; font-size: 12px; margin: 2px 6px 0 0; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); } .cite:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } .cite.external::after { content: " ↗"; } /* A follow-up here names the source that would settle it, so it is a block rather than a one-line chip: the source label is the part that makes the offer worth taking. */ .followup.deep { display: block; padding: 11px 13px; } .followup.deep::before { content: none; } .followup-source { display: inline-block; font: 600 11px/17px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); background: var(--accent-soft); padding: 1px 8px; border-radius: 999px; margin-bottom: 5px; } .followup-q { display: block; color: var(--ink); } .followup-why, .followup-blurb { display: block; margin-top: 2px; } .run-progress .trace { margin: 10px 0 0; padding-left: 18px; font-size: 13px; } .run-progress .trace > li { margin-bottom: 5px; } .trace-tool { font: 600 12px/1.4 var(--mono); color: var(--accent); margin-right: 6px; } .trace-think { list-style: none; margin-left: -18px; } li.prov-external .trace-tool { color: var(--muted); } .source { padding: 10px 0; border-bottom: 1px solid var(--line); } .source:last-child { border-bottom: none; } .source-head { margin: 0 0 4px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .source-excerpt { color: var(--muted); margin: 0; white-space: pre-wrap; } .source.prov-external { border-left: 2px solid var(--line); padding-left: 10px; } /* Per-source activation. Each switch carries enough prose to make the decision beside it — an administrator choosing whether a client's questions may reach SEC EDGAR needs to know what EDGAR would see, not just its name. */ .sources-group { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px 4px; margin: 12px 0; } .sources-group > legend { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 6px; } .source-toggle { align-items: flex-start; margin-bottom: 12px; font-weight: 400; } .source-toggle input { margin-top: 4px; } .source-name { font-weight: 600; margin-right: 6px; } .source-blurb { display: block; margin-top: 2px; } /* ---------- narrow screens ---------- Below this width the rail stops being useful — there is no room to keep 68px of chrome beside the content — so the sidebar becomes a drawer over the page and the collapse state stops applying. */ @media (max-width: 900px) { .sidebar { flex-basis: 0; width: 0; } .sidebar-inner { width: 272px; transform: translateX(-100%); box-shadow: var(--shadow-2); } body.nav-open .sidebar-inner { transform: none; } :root[data-nav="collapsed"] .sidebar-inner { width: 272px; } :root[data-nav="collapsed"] .sidebar-inner .nav-label { opacity: 1; } .iconbtn.nav-close, .iconbtn.nav-open { display: grid; } .iconbtn.nav-toggle { display: none; } .menu-name { display: none; } .menu summary { padding: 5px; } .topbar { padding: 0 14px; } .page { padding: 22px 16px 60px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }