/* Hylē v4 · workbench lane: workbench, reader, figures, demo. Every size and colour comes from system tokens. */

/* ================================================================ shared */
.wb-locked { overflow: hidden; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.tab-n { margin-left: 7px; font-size: var(--fs-small); font-variant-numeric: tabular-nums; color: var(--ink-3); font-weight: 500; }
.tab-live { display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: 2px; animation: pulse 1.6s infinite; }
.tabs button { display: inline-flex; align-items: center; justify-content: center; }
button.cite { cursor: pointer; transition: background var(--d-2), transform var(--d-1) var(--ease-press); }
button.cite:hover { background: var(--accent-tint-2); }
button.cite.gap:hover { background: rgba(225,145,54,.24); }
button.cite:active { transform: scale(.94); }
.cite-glue { white-space: nowrap; }
/* Marker semantics: a passage that supports a claim is marked in the source blue; orange is kept for open gaps and warnings. */
mark.hl { --hl: rgba(18,117,216,.15); color: inherit; padding: 1px 0; border-radius: 3px; background: linear-gradient(var(--hl), var(--hl)) no-repeat 0 88% / 0% 72%; transition: background-size 1s var(--ease-out); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
mark.hl.is-gap { --hl: rgba(225,145,54,.26); }
mark.hl.is-on { background-size: 100% 72%; }
mark.hl.is-pulse { animation: hlPulse 1.4s var(--ease-out); }
@keyframes hlPulse { 0% { box-shadow: 0 0 0 0 rgba(18,117,216,.45); } 100% { box-shadow: 0 0 0 10px rgba(18,117,216,0); } }
.state-art.warn { background: var(--warning-tint); color: var(--warning); }
.sk-stack { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.sk-card { display: block; height: 96px; border-radius: var(--r-md); margin-top: 12px; }
.sk-fig { display: block; height: 220px; border-radius: var(--r-lg); margin-top: 8px; }
.sk-title { display: block; height: 36px; width: 64%; border-radius: var(--r-sm); margin: 6px 0 10px; }
.btn .arrow { transition: transform var(--d-3) var(--ease-out); }

/* dialogs used by this lane */
.wb-dialog { padding: 0; width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; overflow: hidden; }
.wb-dialog[hidden] { display: none; }
.wb-dialog-wide { width: min(1080px, calc(100vw - 48px)); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 18px 14px 24px; border-bottom: 1px solid var(--hairline); }
.dlg-head .t-heading { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-body { padding: 20px 24px 24px; overflow: auto; }
.dlg-body .nf { margin: 0; box-shadow: none; padding: 0; }
.cmp-wrap { margin-top: 14px; overflow-x: auto; }
.cmp-table td { vertical-align: top; }
.cmp-table td:first-child { white-space: nowrap; }
.gal-zoom-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.gal-zoom-body { min-height: 300px; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--e-0); }

/* ================================================================ native figures */
.nf { margin: 20px 0; padding: 20px 20px 16px; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--e-1); }
.nf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.nf-titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nf-k { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); }
.nf-k .t-mono { font-weight: 500; color: var(--ink-3); }
.nf-k .nf-unit { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: var(--ink-2); }
.nf-k .nf-unit::before { content: "·"; margin-right: 10px; color: var(--ink-4); }
.nf-title { font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 600; letter-spacing: var(--ls-row); color: var(--ink); }
.nf-actions { position: relative; display: flex; align-items: center; gap: 2px; flex: none; margin: -4px -6px 0 0; }
.nf-menu { right: 0; top: calc(100% + 6px); min-width: 200px; }
.nf-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; color: var(--ink-2); }
.nf-legend li { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 18px; height: 0; border-top: 2.5px solid var(--accent); display: inline-block; }
.sw-c { border-color: var(--ink-3); }
.sw-cf, .sw-pk { border-top-style: dashed; }
.sw-dd { height: 10px; border: 0; border-radius: 2px; background: rgba(181,71,58,.18); box-shadow: inset 0 -2px 0 var(--danger); }
.nf-plot { position: relative; margin-top: 14px; touch-action: pan-y; }
.nf-svg { width: 100%; height: auto; overflow: visible; }
.nf-svg text { font-family: var(--font-sans); font-size: var(--fs-small); fill: var(--ink-2); }
.nf-svg .nf-h, .nf-svg .nf-tick { font-family: var(--font-mono); font-size: var(--fs-mono); fill: var(--ink-3); letter-spacing: .04em; }
.nf-svg .nf-lab { fill: var(--ink); font-weight: 500; }
.nf-svg .nf-val { font-family: var(--font-mono); font-size: var(--fs-mono); fill: var(--ink-2); }
.nf-svg .nf-dir { fill: var(--ink-3); }
.nf-svg .nf-note { font-weight: 500; fill: var(--ink); }
.nf-svg .nf-end { font-weight: 500; fill: var(--ink-3); }
.nf-svg .nf-end.is-t { fill: var(--accent-ink); }
.nf-svg .nf-end.is-cf { fill: var(--accent); font-weight: 400; }
.nf-svg .nf-gap-label { fill: var(--accent-ink); }
.nf-band { fill: var(--sunken); opacity: .7; }
.nf-grid { stroke: var(--hairline); stroke-width: 1; }
.nf-axis { stroke: var(--hairline-strong); stroke-width: 1; }
.nf-null, .nf-prog { stroke: var(--ink-3); stroke-width: 1.25; stroke-dasharray: 3 4; }
.nf-ci, .nf-cap { stroke: var(--success); stroke-width: 2.25; stroke-linecap: round; }
.nf-pt { fill: var(--success); stroke: var(--raised); stroke-width: 2; }
.nf-ci.is-gap, .nf-cap.is-gap { stroke: var(--brand-orange); stroke-dasharray: 4 4; }
.nf-pt.is-gap { fill: var(--brand-orange); }
.nf-row .nf-lab, .nf-row .nf-val { transition: fill var(--d-2); }
.nf-row.is-hot .nf-lab { fill: var(--accent-ink); }
.nf-row.is-hot .nf-ci:not(.is-gap) { stroke-width: 3; }
.nf-hit { fill: transparent; cursor: crosshair; }
.nf-line, .nf-l1 { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.nf-l2 { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linejoin: round; }
.nf-peak, .nf-cf { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .7; }
.nf-under { fill: rgba(181,71,58,.12); }
.nf-uline { fill: none; stroke: var(--danger); stroke-width: 1.75; stroke-linejoin: round; }
.nf-mark { fill: var(--danger); stroke: var(--raised); stroke-width: 2; }
.nf-mark.is-peak, .nf-p1 { fill: var(--accent); stroke: var(--raised); stroke-width: 2; }
.nf-p2 { fill: var(--ink-3); stroke: var(--raised); stroke-width: 2; }
.nf-post { fill: var(--sunken); }
.nf-gap-area { fill: var(--accent-tint-2); }
.nf-cross { stroke: var(--ink-4); stroke-width: 1; opacity: 0; transition: opacity var(--d-2); pointer-events: none; }
.nf-cross.is-on { opacity: 1; }
.nf-tip { position: absolute; z-index: 3; pointer-events: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--ink); color: #fff; box-shadow: 0 10px 24px -10px rgba(11,24,48,.5); font-size: var(--fs-small); line-height: 1.35; white-space: nowrap; }
.nf-tip b { font-weight: 600; }
.nf-tip span { color: var(--on-dark-2); font-family: var(--font-mono); font-size: var(--fs-mono); }
.nf-table { margin-top: 12px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--e-0); overflow-x: auto; }
.nf-table .table th { padding-top: 10px; }
.nf-titles .t-small { font-size: var(--fs-desc); color: var(--ink-2); }
.nf-cap { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline); color: var(--ink-2); font-size: var(--fs-desc); line-height: var(--lh-desc); }
.nf-labbtn { font-size: var(--fs-small); }
.nf-embed-body { margin-top: 14px; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--e-0); min-height: 220px; }
.nf-embed-body.is-static { min-height: 0; background: var(--sunken); box-shadow: none; }
.nf-static { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 20px; text-align: center; }
.nf-static p { max-width: 46ch; }
.mol { max-width: 300px; margin: auto; }
.mol-b { stroke: var(--ink-3); stroke-width: 3; stroke-linecap: round; }
.mol-a { fill: var(--ink-2); stroke: var(--raised); stroke-width: 2; }
.mol-a.is-n { fill: var(--accent); }
.mol-a.is-o { fill: var(--danger); }

/* ================================================================ figure embed engine (v3 figure-embed.js markup, v4 look) */
.wbf-embed { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; }
.wbf-frame-box { position: relative; min-width: 0; background: #fff; }
.wbf-frame { display: block; width: 100%; border: 0; background: #fff; }
.wbf-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; color: var(--ink-3); font-size: var(--fs-small); pointer-events: none; background: var(--raised); }
.wbf-status::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--accent-tint-2); border-top-color: var(--accent); animation: spin .9s linear infinite; }
.wbf-status[hidden], .wbf-label[hidden], .wbf-scale-note[hidden], .wbf-issue[hidden] { display: none !important; }
.wbf-embed:not([data-wbf-stage]) .wbf-frame { opacity: 0; }
.wbf-embed[data-wbf-stage] .wbf-frame { opacity: 1; transition: opacity var(--d-4) var(--ease-out); }
.wbf-embed[data-wbf-stage] .wbf-status { display: none; }
.wbf-label { padding: 12px 16px; border-top: 1px solid var(--hairline); background: var(--warning-tint); color: var(--ink); font-size: var(--fs-small); line-height: 1.45; }
.wbf-label a { color: var(--accent-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.wbf-embed[data-wbf-known-gap] .wbf-frame-box { display: none; }
.wbf-embed[data-wbf-known-gap] .wbf-label { display: grid; gap: 8px; padding: 28px 24px; border-top: 0; background: var(--sunken); }
.wbf-gap-title { font-weight: 600; font-size: var(--fs-ui); }
.wbf-gap-why { color: var(--ink-2); }
.wbf-scale-note { padding: 8px 16px; border-top: 1px solid var(--hairline); font-size: var(--fs-small); color: var(--ink-3); background: var(--surface); }
.wbf-issue { padding: 10px 16px; font-size: var(--fs-small); background: var(--warning-tint); color: var(--ink); }

/* ================================================================ provenance tags + gallery (shared by workbench panel and figures atlas) */
.ptag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 7px; border-radius: 6px; flex: none; font-size: var(--fs-small); font-weight: 500; background: var(--sunken); color: var(--ink-2); white-space: nowrap; }
.ptag[data-p="public"] { background: var(--success-tint); color: var(--success); }
.ptag[data-p="mixed"] { background: var(--info-tint); color: var(--accent-ink); }
.ptag[data-p="ref"] { background: var(--warning-tint); color: var(--warning); }
.ptag-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: var(--ink-4); }
.ptag-dot[data-p="public"] { background: var(--success); } .ptag-dot[data-p="mixed"] { background: var(--accent); } .ptag-dot[data-p="ref"], .ptag-dot[data-p="gap"] { background: var(--brand-orange); }

.gal-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.gal-field .select-trigger { width: 100%; background: var(--raised); }
.gal-field .listbox { width: 100%; min-width: 260px; max-height: 340px; }
.gal-search { min-height: 36px; border-radius: var(--r-pill); }
.gal-search > .lead-icon { width: 16px; height: 16px; margin-left: 12px; }
.gal-search input { height: 34px; padding: 0 12px 0 8px; font-size: var(--fs-ui); }
.gal-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.gal-search .kbd { margin-right: 10px; }
.gal-countrow { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin: 12px 2px 0; }
.gal-other { color: var(--warning); }
.gal-other .link { font-size: var(--fs-small); }
/* clip (not hidden): a Figure Lab module calls scrollIntoView on its tile while it builds, which would scroll a hidden-overflow box */
.gal-stage { position: relative; margin-top: 12px; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--e-2); overflow: hidden; overflow: clip; scroll-margin-top: 12px; }
.gal-grip { display: none; }
.gal-head { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 12px; border-bottom: 1px solid var(--hairline); }
.gal-head:empty { display: none; }
.gal-head-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gal-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-title { font-size: var(--fs-body); line-height: 1.35; font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.gal-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.gal-tools { display: flex; align-items: center; gap: 2px; margin: 0 -6px -4px; }
.gal-stepper { display: flex; align-items: center; margin-right: auto; }
.gal-pos { min-width: 72px; text-align: center; }
.gal-tools .gal-use { margin-left: 6px; }
.gal-close { display: none; }
.gal-body { position: relative; min-height: 260px; background: #fff; }
.gal-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.gal-spin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--accent-tint-2); border-top-color: var(--accent); animation: spin .9s linear infinite; }
.gal-note { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 14px; border-top: 1px solid var(--hairline); color: var(--ink-2); background: var(--surface); font-size: var(--fs-desc); line-height: var(--lh-desc); }
.gal-note:empty { display: none; }
.gal-what { color: var(--ink-2); }
.gal-more-what { align-self: flex-start; font-size: var(--fs-small); }
.gal-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.gal-list > li { display: flex; min-width: 0; }
.gal-sk, .gal-empty, .gal-more, .gal-err { grid-column: 1 / -1; }
.gal-more { justify-content: center; padding: 6px 0 4px; }
div.gal-more { display: flex; margin-top: 6px; }
.gal-item { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; min-height: 72px; padding: 10px 12px; border-radius: var(--r-md); text-align: left; background: var(--raised); box-shadow: var(--e-1); transition: box-shadow var(--d-2), background var(--d-2), transform var(--d-1) var(--ease-press); -webkit-tap-highlight-color: transparent; }
.gal-item:hover { box-shadow: var(--e-2); }
.gal-item:active { transform: scale(.985); }
.gal-item[aria-selected="true"] { background: var(--info-tint); box-shadow: inset 0 0 0 1.5px var(--accent); }
.gal-item-t { font-size: var(--fs-ui); line-height: 1.4; font-weight: 500; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gal-item-m { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: auto; }
.gal-item-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-small); color: var(--ink-2); }
.gal-empty .state, .gal-err { padding: 32px 16px; }

/* ================================================================ WORKBENCH · Study composition
   One-row study head (field tile, Goodly title that is also the study switcher, actions) + one meta line; sticky Thread · Report · Sources
   tabs whose bottom edge becomes the live field rule while the study computes; the thread reads as a document (question + plan on one
   line, the claim as the loudest element, a flat publication figure); the evidence rail is one convergence diagram + the cited passages. */
.wb-page .app-top { border-bottom-color: var(--hairline); }
.wb-page .app-main.wb-main { max-width: none; margin: 0; padding: 0; }
.wb-host { height: calc(100dvh - var(--topbar-h)); }
.wb { --ctx-w: 400px; --wb-pad: clamp(20px, 2.8vw, 44px); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 9px var(--ctx-w); height: 100%; }
.wb.is-resizing { cursor: col-resize; user-select: none; }
.wb.is-resizing iframe { pointer-events: none; }
.wb-thread { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.wb-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--wb-pad); scroll-padding: 64px 0 24px; }
.wb-head, .wb-tabs, .wb-body, .wb-composer { width: 100%; max-width: 720px; margin-inline: auto; }

/* study head */
.wb-head { padding: 16px 0 12px; }
.wb-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wb-study { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; }
/* The study name is the document's name, not its point: Goodly at 26, one step under the claim it carries (round 4B). */
.wb-title { margin: 0; min-width: 0; font-size: 26px; }
.wb-study-btn { display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% + 20px); margin: -4px -10px; padding: 4px 10px; border-radius: var(--r-md); font: inherit; letter-spacing: inherit; color: var(--ink); text-align: left; transition: background var(--d-2); }
.wb-study-btn:hover, .wb-study-btn[aria-expanded="true"] { background: rgba(20,20,19,.045); }
.wb-title-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: .08em; }
.wb-title-chev { width: 18px; height: 18px; flex: none; color: var(--ink-3); transition: color var(--d-2); }
.wb-study-btn:hover .wb-title-chev { color: var(--ink); }
.wb-study-menu { left: 0; top: calc(100% + 8px); width: 340px; transform-origin: top left; }
.wb-study-menu a { min-height: 52px; }
.wb-study-menu .sm-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.wb-study-menu .sm-t b { font-weight: 500; }
.wb-head-actions { position: relative; display: flex; align-items: center; gap: 4px; flex: none; }
.wb-head-actions .wb-share { margin: 0 4px; }
.wb-focus[aria-pressed="true"] { background: var(--ink); color: #fff; }
.wb-export-menu { right: 0; top: calc(100% + 8px); }
.menu .is-off { color: var(--ink-3); }
/* one quiet metadata line, middot-separated: field · run · counts · updated; only the open gap carries colour */
.wb-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 0; margin-top: 6px; padding-left: 40px; font-size: var(--fs-small); color: var(--ink-2); }
.wb-meta > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.wb-meta > span + span::before { content: "·"; margin: 0 9px; color: var(--ink-4); }
.wb-meta svg { width: 14px; height: 14px; }
.wb-meta .wb-meta-run { color: var(--ink-3); }
.wb-meta .wb-meta-run::before { margin-right: 9px; }
.wb-meta .is-gap, .wb-meta .is-gap svg { color: var(--warning); }
.seg-sm button { min-height: 28px; padding: 0 12px; font-size: var(--fs-small); }

/* sticky view tabs; the live field rule rides on their bottom edge */
.wb-tabs { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--paper); border-bottom: 1px solid var(--hairline); }
.wb-tabs .tabs { border-bottom: 0; gap: 4px; }
.wb-tabs .tabs button { padding: 0 2px; margin-right: 14px; }
.wb-live { position: absolute; left: 0; right: 0; bottom: -1px; }
.wb-live[hidden] { display: none; }
.wb-ctx-open { display: none; }
.wb-body { padding: 18px 0 40px; }

/* question + plan: one quiet line each */
.wb-feed { display: flex; flex-direction: column; gap: 20px; }
.wb-ask { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 12px; }
.wb-ask .avatar { width: 28px; height: 28px; font-size: 11px; margin-top: -2px; }
.wb-ask .avatar svg { width: 15px; height: 15px; }
.wb-ask-q { font-size: var(--fs-body); line-height: 1.5; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.wb-ask.is-round { padding-top: 28px; border-top: 1px solid var(--hairline); }
.msg-att { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.msg-att svg { width: 13px; height: 13px; }
.wb-plan { margin-top: 6px; }
.wb-plan-btn { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; min-height: 34px; margin-left: -8px; padding: 0 8px; border-radius: var(--r-md); font-size: var(--fs-ui); color: var(--ink-2); text-align: left; transition: background var(--d-2); }
.wb-plan-steps .step { font-size: var(--fs-ui); }
.wb-plan-btn:hover { background: rgba(20,20,19,.045); }
.wb-plan-l { flex: none; font-weight: 600; color: var(--ink); }
.wb-plan-l .t-mono { margin-left: 4px; font-weight: 500; color: var(--ink-3); }
.wb-plan-steps { flex-wrap: wrap; row-gap: 4px; }
.wb-plan-sum { display: none; }
.wb-plan-chev { width: 16px; height: 16px; flex: none; color: var(--ink-3); transition: transform var(--d-3) var(--ease-out); }
.wb-plan-btn[aria-expanded="true"] .wb-plan-chev { transform: rotate(180deg); }
.wb-plan-body { padding: 10px 0 2px; overflow: hidden; }
.wb-plan-q { display: none; }
.wb-plan-h { display: flex; flex-direction: column; gap: 6px; padding-left: 14px; border-left: 2px solid var(--hairline); }
.wb-plan-h div { display: grid; grid-template-columns: 52px 1fr; gap: 12px; font-size: var(--fs-small); color: var(--ink-2); }
.wb-plan-h dt { color: var(--accent-ink); padding-top: 1px; }
.wb-plan-solo .wb-plan { margin: 0; }

/* the answer: the claim is the typographic peak, the figure that tests it follows at once, then the explanation with its sources */
.wb-answer { min-width: 0; }
.msg-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 24px; }
.msg-head .t-mono { margin-left: auto; }
.wb-claim { margin-top: 12px; max-width: 30em; font-family: var(--font-sans); font-size: 28px; line-height: 1.24; font-weight: 600; letter-spacing: -.024em; color: var(--ink); text-wrap: pretty; }
.msg-detail { margin-top: 20px; max-width: 68ch; font-size: var(--fs-body); line-height: 1.7; color: var(--ink-2); text-wrap: pretty; }
.msg-detail .cite, .wb-finding .cite { margin: 0 3px; }
/* the figure is the study's proof: a raised white plate on the paper canvas */
.wb-answer > .nf { margin: 18px 0 0; padding: 16px 20px 12px; }
.wb-answer > .nf .nf-plot { margin-top: 10px; }
.wb-answer > .nf .nf-cap { margin-top: 10px; padding-top: 10px; }
.msg-gap { margin-top: 20px; }
.msg-gap > svg { width: 18px; height: 18px; margin-top: 1px; color: var(--warning); flex: none; }
.msg-next { margin-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.msg-next-row { display: flex; flex-wrap: wrap; gap: 8px; }
.msg-next .chip svg { width: 15px; height: 15px; color: var(--ink-3); }
.wb-follow { display: flex; flex-direction: column; gap: 28px; }
.wb-follow:empty { display: none; }
.round-steps { margin-top: 12px; }
.round-body { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.wb-run-card { padding: 16px 18px; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--e-1), inset 3px 0 0 var(--accent); display: flex; flex-direction: column; gap: 12px; }
.wb-run-card.is-failed { box-shadow: var(--e-1), inset 3px 0 0 var(--danger); }
.wb-run-top { display: flex; align-items: flex-start; gap: 12px; }
.wb-run-top .grow { display: flex; flex-direction: column; gap: 2px; }
.wb-run-ring { width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--accent-tint-2); border-top-color: var(--accent); animation: spin 1s linear infinite; flex: none; }
.wb-run-ic { color: var(--danger); flex: none; }
.wb-run-ic svg { width: 20px; height: 20px; }
.wb-run-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 32px; }
.wb-empty { padding: 48px 16px; }
.wb-empty-q { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.wb-feed.is-loading { gap: 20px; }
.sk-q { height: 48px; width: 70%; border-radius: var(--r-md); }
.sk-answer { display: flex; flex-direction: column; gap: 10px; }

/* report */
.wb-report { display: flex; flex-direction: column; gap: 16px; }
.wb-report-h { margin-top: -6px; }
.wb-finding { margin-top: 8px; padding: 20px 0 4px; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 10px; }
.wb-finding-k { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wb-report .nf { margin: 4px 0; }
.wb-report-sec { padding-top: 8px; display: flex; flex-direction: column; gap: 12px; }
.wb-refs { display: flex; flex-direction: column; gap: 10px; }
.wb-refs li { display: flex; align-items: baseline; gap: 10px; color: var(--ink-2); }
.wb-report-x { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; border-top: 1px solid var(--hairline); }

/* sources */
.wb-src-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wb-src-q { flex: 1; max-width: 340px; min-height: var(--ctl-md); }
.wb-src-q input { height: 38px; font-size: var(--fs-ui); padding-left: 8px; }
.wb-src-q > .lead-icon { width: 16px; height: 16px; }
.wb-src-list { margin-top: 16px; border-top: 1px solid var(--hairline); }
.wb-src-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto 16px; align-items: center; gap: 16px; min-height: 64px; padding: 10px 8px; border-bottom: 1px solid var(--hairline); transition: background var(--d-2); }
.wb-src-row:hover { background: rgba(20,20,19,.025); }
.wb-src-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wb-src-acc { white-space: nowrap; }
.wb-src-go { width: 16px; height: 16px; color: var(--ink-3); transition: transform var(--d-3) var(--ease-out), color var(--d-2); }
.wb-src-row:hover .wb-src-go { color: var(--ink); transform: translate(2px, -2px); }

/* composer dock: its own plane under the thread (hairline + paper), never a fade over the figure. One row until it is used. */
.wb-dock { position: relative; z-index: 7; padding: 10px var(--wb-pad) 14px; border-top: 1px solid var(--hairline); background: var(--paper); }
.wb-composer { position: relative; container-type: inline-size; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--e-1); padding: 6px 6px 6px 16px; transition: box-shadow var(--d-3) var(--ease-out); }
.wb-composer:not(.is-demo) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 8px; }
.wb-composer:not(.is-demo) textarea { grid-column: 1; grid-row: 1; padding: 8px 0; }
.wb-composer:not(.is-demo) .wb-cbar { display: contents; }
.wb-composer:not(.is-demo) .wb-cgo { grid-column: 2; grid-row: 1; }
.wb-composer:not(.is-demo) .wb-copts { grid-column: 1 / -1; grid-row: 3; margin: 6px 0 2px -8px; }
.wb-composer:not(.is-demo) .wb-attach, .wb-composer:not(.is-demo) .wb-linkrow { grid-column: 1 / -1; grid-row: 2; }
.wb-composer:not(.is-open) .wb-copts, .wb-composer:not(.is-open) .wb-depth { display: none; }
.wb-composer.is-open:not(.is-demo) .wb-copts { display: flex; }
.lbl-short { display: none; }
.wb-composer::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, rgba(18,117,216,.55), rgba(225,145,54,.55)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--d-4) var(--ease-out); pointer-events: none; }
.wb-composer:focus-within { box-shadow: 0 2px 4px rgba(20,20,19,.04), 0 24px 48px -20px rgba(18,117,216,.28), 0 0 0 1px rgba(20,20,19,.04); }
.wb-composer:focus-within::before { opacity: 1; }
.wb-composer textarea { display: block; width: 100%; min-height: 28px; max-height: 200px; resize: none; border: 0; background: transparent; padding: 4px 0; font-size: var(--fs-body); line-height: 1.5; color: var(--ink); }
.wb-composer textarea::placeholder { color: var(--ink-3); }
.wb-composer textarea:focus-visible { outline: none; }
.wb-cbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.wb-copts { display: flex; align-items: center; gap: 2px; min-width: 0; flex-wrap: nowrap; margin-left: -8px; }
.wb-copts > * { flex: none; }
.wb-copts .icon-btn { width: 32px; height: 32px; }
.wb-copts .icon-btn svg { width: 17px; height: 17px; }
.wb-scope .select-trigger, .wb-depth .select-trigger { gap: 6px; min-height: 32px; padding: 0 8px; background: transparent; border-color: transparent; box-shadow: none; font-size: var(--fs-small); color: var(--ink-2); }
.wb-scope .select-trigger > svg:first-child, .wb-depth .select-trigger > svg:first-child { width: 15px; height: 15px; color: var(--ink-3); }
.wb-scope .select-trigger:hover, .wb-depth .select-trigger:hover { background: var(--sunken); color: var(--ink); }
.wb-scope .listbox { width: 240px; }
.wb-depth .listbox { width: 220px; left: auto; right: 0; }
.wb-cgo { display: flex; align-items: center; gap: 6px; flex: none; }
.wb-send { padding: 0 14px; }
.wb-send svg { transition: transform var(--d-3) var(--ease-out); }
.wb-send:hover svg { transform: translateY(-2px); }
.wb-attach { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wb-att { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 28px; padding: 0 4px 0 10px; border-radius: var(--r-pill); background: var(--sunken); color: var(--ink-2); }
.wb-att > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-att svg { width: 13px; height: 13px; flex: none; }
.wb-att button { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); }
.wb-att button:hover { background: var(--sunken-2); color: var(--ink); }
.wb-linkrow { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.wb-linkrow .control { flex: 1; min-height: var(--ctl-md); }
.wb-linkrow .control input { height: 38px; font-size: var(--fs-ui); padding-left: 8px; }
.wb-linkrow .control > .lead-icon { width: 16px; height: 16px; }
.control.is-err { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-tint); animation: shake .36s var(--ease-in-out); }

/* resize handle */
.wb-handle { position: relative; cursor: col-resize; touch-action: none; z-index: 8; }
.wb-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: var(--hairline); transition: background var(--d-2), width var(--d-2), left var(--d-2); }
.wb-handle:hover::before, .wb-handle:focus-visible::before, .wb.is-resizing .wb-handle::before { left: 3px; width: 3px; background: var(--accent); }
.wb-handle:focus-visible { outline: none; }

/* context rail: a sunken inspector surface; what you inspect sits on raised cards */
.wb-ctx { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--sunken); }
.wb-ctx-grip { display: none; }
.wb-ctx-head { display: flex; align-items: center; gap: 4px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--hairline-strong); background: var(--sunken); }
.wb-ctx-head .tabs { flex: 1; border-bottom: 0; gap: 2px; }
.wb-ctx-head .tabs button { min-height: 52px; padding: 0 10px; }
.wb-ctx-close { display: none; }
.wb-ctx-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.ctx-pad { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.ctx-pad.ev { gap: 22px; }
.ctx-gal { padding: 16px 20px 24px; }

/* evidence: how much of the claim the sources carry (one segment per source), then the passages themselves */
.ev-k { font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 600; letter-spacing: var(--ls-row); color: var(--ink); }
.ev-sum { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--e-1); }
.ev-sum-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ev-meter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ev-seg { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; padding: 6px 0 2px; border-radius: var(--r-sm); text-align: left; font-size: var(--fs-small); color: var(--ink-2); transition: color var(--d-2); }
.ev-seg i { display: block; height: 8px; border-radius: 8px; background: var(--success); transition: box-shadow var(--d-2); }
.ev-seg b { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500; color: var(--ink); margin-right: 2px; }
.is-gap > .ev-seg i { background: repeating-linear-gradient(90deg, var(--brand-orange) 0 7px, transparent 7px 11px); box-shadow: inset 0 0 0 1px var(--warning-line); }
.is-gap > .ev-seg { color: var(--warning); }
.ev-seg:hover, .ev-seg.is-hot { color: var(--ink); }
.ev-seg:hover i, .ev-seg.is-hot i { box-shadow: 0 0 0 3px var(--success-tint); }
.is-gap > .ev-seg:hover i, .is-gap > .ev-seg.is-hot i { box-shadow: inset 0 0 0 1px var(--warning-line), 0 0 0 3px var(--warning-tint); }
.ev-sum-t { line-height: 1.5; }
.ev-seg.is-cited, .ev-row.is-cited { animation: cited 2.4s var(--ease-out); }
@keyframes cited { 0%, 30% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px var(--accent-tint-2); background: var(--info-tint); } 100% { box-shadow: 0 0 0 0 transparent; } }
.ev-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 2px 10px; }
.ev-pass ol { display: flex; flex-direction: column; gap: 8px; }
.ev-row { position: relative; padding: 14px 14px 10px 16px; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--e-1); transition: box-shadow var(--d-3) var(--ease-out), background var(--d-3) var(--ease-out); }
.ev-row::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); opacity: 0; transition: opacity var(--d-2); }
.ev-row.is-hot { box-shadow: 0 0 0 1.5px var(--accent), var(--e-2); }
.ev-row.is-hot::before { opacity: 1; }
.ev-row.is-gap { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--warning-line); }
.ev-row.is-gap.is-hot { box-shadow: inset 0 0 0 1.5px var(--brand-orange), var(--e-2); }
.ev-row.is-gap::before { background: var(--brand-orange); }
.ev-row-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ev-row-top b { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-ref { margin-left: auto; flex: none; font-size: var(--fs-small); color: var(--ink-2); white-space: nowrap; }
.ev-ref .t-mono { color: var(--ink-3); }
.ev-quote { margin-top: 8px; font-size: var(--fs-ui); line-height: 1.55; color: var(--ink); }
.ev-row-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: var(--fs-small); }
.ev-acc { display: inline-flex; align-items: center; gap: 6px; color: var(--success); }
.ev-row.is-gap .ev-acc { color: var(--warning); }
.ev-acc svg { width: 14px; height: 14px; }
.ev-go { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font-size: var(--fs-small); }
.ev-go svg { width: 14px; height: 14px; transition: transform var(--d-3) var(--ease-out); }
.ev-go:hover svg { transform: translateX(2px); }

/* reader card (context) */
.rd-seg { display: grid; width: 100%; }
.rd-seg button { padding: 0 8px; overflow: hidden; text-overflow: ellipsis; }
.rd-card { padding: 20px; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--e-1); display: flex; flex-direction: column; gap: 6px; }
.rd-card .t-heading { margin-top: 4px; }
.rd-quote { margin: 14px 0 6px; padding: 2px 0 2px 16px; border-left: 2px solid var(--brand-orange); line-height: 1.65; }
.rd-card .btn { margin-top: 12px; }

/* run */
.run-sec { padding: 16px; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--e-1); display: flex; flex-direction: column; gap: 14px; }
.run-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.run-top .t-heading { margin-top: 2px; }
.progress.is-err > span { background: var(--danger); }
.run-steps { display: flex; flex-direction: column; }
.run-steps li { position: relative; display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 12px; min-height: 34px; }
.run-steps li + li::before { content: ""; position: absolute; left: 7.5px; bottom: 50%; height: 34px; margin-bottom: 8px; width: 1px; background: var(--hairline-strong); }
.run-steps i { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink-4); background: var(--raised); display: grid; place-items: center; }
.run-steps .done i { background: var(--ink); border-color: var(--ink); }
.run-steps .done i::after { content: ""; width: 6px; height: 3px; border: solid #fff; border-width: 0 0 1.5px 1.5px; transform: translate(0, -1px) rotate(-45deg); }
.run-steps .active i { border-color: var(--accent); }
.run-steps .active i::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s infinite; }
.run-steps .err i { border-color: var(--danger); background: var(--danger); }
.run-steps .active .t-small { color: var(--accent-ink); font-weight: 500; }
.run-steps .err .t-small { color: var(--danger); }
.run-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.run-log { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r-md); background: var(--ink); color: var(--on-dark-2); line-height: 1.55; overflow-x: auto; }
.run-log span::before { content: "› "; color: var(--on-dark-3); }
.run-log .is-warn { color: var(--brand-glow); }
.run-log .is-err { color: #f1a596; }
.run-dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.run-dl div { display: flex; flex-direction: column; gap: 2px; }
.run-dl dd { margin: 0; font-weight: 600; }
.run-budget > span { background: linear-gradient(90deg, var(--brand-blue), var(--brand-orange)); }
.run-sec > .btn-ghost { align-self: flex-start; margin-left: -10px; }
.run-board { display: flex; flex-direction: column; }
.run-board li { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; min-height: 44px; border-top: 1px solid var(--hairline); }
.run-board li:first-child { border-top: 0; }

/* focus mode: the context panel slides away and the thread takes the width */
.wb.is-doc { grid-template-columns: minmax(0, 1fr) 0 0; }
.wb.is-doc .wb-ctx, .wb.is-doc .wb-handle { visibility: hidden; }
.wb { transition: grid-template-columns var(--d-5) var(--ease-out); }
.wb.is-resizing { transition: none; }

/* cite preview (used when the evidence rail is not on screen) */
.cite-pop { position: fixed; z-index: var(--z-overlay); width: 300px; padding: 14px 16px; border-radius: var(--r-md); background: var(--raised); box-shadow: var(--e-3); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.cite-pop[hidden] { display: none; }
.cite-pop mark.hl { background-size: 100% 72%; }
/* citation trace: a thread from the sentence to the passage it relies on */
.wb-trace { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: calc(var(--z-sticky) + 1); pointer-events: none; overflow: visible; opacity: 0; transition: opacity var(--d-2); }
.wb-trace.is-on { opacity: 1; }
.wb-trace-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wb-trace-line.is-gap { stroke: var(--brand-orange); stroke-dasharray: 5 6; }
.wb-trace-end { fill: var(--raised); stroke: var(--accent); stroke-width: 1.5; }
.wb-trace-end.is-to { fill: var(--accent); }
.wb-trace-end.is-gap { stroke: var(--brand-orange); }
.wb-trace-end.is-gap.is-to { fill: var(--brand-orange); }
button.cite.is-trace { background: var(--accent-tint-2); box-shadow: 0 0 0 2px var(--accent); }
button.cite.gap.is-trace { background: var(--warning-tint); box-shadow: 0 0 0 2px var(--brand-orange); }

/* ---------- workbench: tablet + phone (context becomes a drawer, then a sheet) ---------- */
@media (max-width: 1360px) {
  .wb-title { font-size: 24px; }
  .wb-head-actions .wb-share { width: 36px; padding: 0; justify-content: center; }
  .wb-head-actions .wb-share span { display: none; }
  .wb-meta > span.wb-upd { display: none; }
  .wb-plan-steps { display: none; }
  .wb-plan-sum { display: inline; }
}
@media (max-width: 1100px) {
  .wb-host { height: auto; }
  .wb { display: block; height: auto; }
  .wb-handle { display: none; }
  .wb-scroll { overflow: visible; padding: 0 var(--gutter); }
  .wb-tabs { top: var(--topbar-h); }
  .wb-ctx-open { display: inline-flex; }
  .wb-focus { display: none; }
  .wb-dock { position: sticky; bottom: 0; padding: 0 var(--gutter) calc(14px + env(safe-area-inset-bottom)); }
  .wb-ctx { position: fixed; z-index: var(--z-dialog); top: 0; right: 0; bottom: 0; width: min(440px, 92vw); box-shadow: var(--e-4); transform: translateX(104%); visibility: hidden; transition: transform var(--d-4) var(--ease-out), visibility 0s linear var(--d-4); }
  .wb.is-ctx-open .wb-ctx { transform: none; visibility: visible; transition: transform var(--d-4) var(--ease-out), visibility 0s; }
  .wb-ctx-close { display: inline-grid; }
  .wb-ctx-scrim { z-index: calc(var(--z-dialog) - 1); }
  .wb.is-doc { display: block; }
}
@media (max-width: 1024px) {
  .wb-page .app-main.wb-main { padding-bottom: var(--safe-bottom); }
  .wb-dock { --dock-bg: var(--paper); padding-top: 8px; padding-bottom: 10px; }
  .wb-body { padding-bottom: 24px; }
}
@media (max-width: 640px) {
  .wb-head { padding: 14px 0 12px; }
  .study-mark { display: none; }
  .wb-head-actions { display: none; }
  .wb-study-btn { min-height: 44px; }
  .wb-meta { padding-left: 0; flex-wrap: nowrap; overflow: hidden; margin-top: 2px; }
  .wb-meta > span.wb-upd, .wb-meta > span.wb-meta-figs, .wb-meta > span.wb-from, .wb-meta > span.wb-meta-run { display: none; }
  /* citation chips sit in running text: the button is a full 44px target, the visible chip stays small */
  button.cite, button.cite.gap { position: relative; z-index: 0; min-width: 44px; height: 44px; margin: -12px -8px; padding: 0 14px; background: transparent; box-shadow: none; vertical-align: middle; }
  button.cite::before { content: ""; position: absolute; z-index: -1; left: 8px; right: 8px; top: 12px; bottom: 12px; border-radius: 6px; background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--info-line); }
  button.cite.gap::before { background: var(--warning-tint); box-shadow: inset 0 0 0 1px var(--warning-line); }
  button.cite:hover, button.cite.gap:hover { background: transparent; }
  .msg-detail .cite, .wb-finding .cite { margin: -12px -5px; }
  .gal-search input, .wb-src-q input, .wb-linkrow .control input { height: 44px; }
  .wb-tabs { width: auto; max-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .wb-tabs .tabs button { margin-right: 10px; min-height: 44px; }
  .wb-ctx-open { min-height: 44px; margin-right: -10px; padding: 0 10px; border-color: transparent; background: transparent; box-shadow: none; color: var(--accent-ink); }
  .wb-body { padding-top: 16px; }
  .wb-feed { gap: 20px; }
  .wb-ask { grid-template-columns: minmax(0, 1fr); }
  .wb-ask .avatar { display: none; }
  .wb-ask:not(.is-round) .wb-ask-q { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-ui); }
  .wb-plan { margin-top: 2px; }
  .wb-plan-btn { width: calc(100% + 16px); min-height: 44px; justify-content: flex-start; }
  .wb-plan-steps { display: none; }
  .wb-plan-sum { display: inline; margin-left: auto; }
  .wb-plan-q { display: block; margin-bottom: 10px; font-size: var(--fs-ui); color: var(--ink); }
  .wb-claim { margin-top: 10px; font-size: var(--fs-heading); line-height: 1.3; font-weight: 600; }
  .msg-head .t-mono { display: none; }
  .wb-answer > .nf { margin: 16px calc(var(--gutter) * -1) 0; padding: 14px var(--gutter) 10px; border-radius: 0; }
  .nf-k .nf-unit { display: none; }
  .msg-detail { margin-top: 16px; }
  .nf-actions .btn .nf-btn-l { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .nf-actions .btn { width: 44px; padding: 0; }
  .msg-next-row { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 32px), transparent); mask: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - 32px), transparent); }
  .msg-next-row::-webkit-scrollbar { display: none; }
  .msg-next-row .chip { flex: none; min-height: 44px; }
  .wb-run-actions { padding-left: 0; }
  .wb-src-row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 6px; }
  .wb-src-acc, .wb-src-ref, .wb-src-go { display: none; }
  .wb-src-q { max-width: none; min-height: 44px; }
  .wb-src-q input { height: 42px; }
  .wb-src-bar .segmented { width: 100%; }
  .wb-composer:not(.is-demo) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 8px; padding: 6px 6px 6px 14px; border-radius: var(--r-lg); }
  .wb-composer:not(.is-demo) textarea { grid-column: 1; grid-row: 1; padding: 10px 0; }
  .wb-composer:not(.is-demo) .wb-cbar { display: contents; }
  .wb-composer:not(.is-demo) .wb-cgo { grid-column: 2; grid-row: 1; }
  .wb-composer:not(.is-demo) .wb-copts { grid-column: 1 / -1; grid-row: 3; margin: 4px -2px 2px -8px; }
  .wb-composer:not(.is-demo) .wb-attach, .wb-composer:not(.is-demo) .wb-linkrow { grid-column: 1 / -1; grid-row: 2; }
  .wb-composer:not(.is-open) .wb-copts, .wb-composer:not(.is-open) .wb-depth { display: none; }
  .wb-composer.is-open:not(.is-demo) .wb-depth { grid-column: 1 / -1; grid-row: 4; }
  .wb-copts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .wb-copts::-webkit-scrollbar { display: none; }
  .wb-copts .icon-btn { width: 44px; height: 44px; }
  .wb-scope .select-trigger, .wb-depth .select-trigger { min-height: 44px; }
  .wb-scope .select-trigger .value { max-width: 110px; }
  .wb-send-l { display: none; }
  .wb-send { width: 44px; min-height: 44px; padding: 0; }
  .wb-linkrow { flex-wrap: wrap; }
  .wb-linkrow .control { flex-basis: 100%; min-height: 44px; }
  .wb-att button { width: 44px; height: 44px; }
  /* bottom sheet */
  .wb-ctx { top: auto; left: 0; width: 100%; height: 88dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; transform: translateY(104%); }
  .wb-ctx-grip { display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 4px; background: var(--hairline-strong); flex: none; }
  .wb-ctx-head { padding: 0 6px 0 8px; }
  .wb-ctx-head .tabs button { min-height: 48px; padding: 0 8px; }
  .wb-ctx-head .tabs .tab-n { display: none; }
  .ctx-pad { padding: 16px; }
  .ctx-gal { padding: 12px 16px 24px; }
  .claim-map { padding: 12px; gap: 40px; }
  .cm-src { min-height: 104px; }
  .ev-go { min-height: 44px; }
  .gal-controls { grid-template-columns: 1fr; }
  .gal-search { min-height: 44px; }
  .gal-search input { height: 42px; }
  .gal-list { grid-template-columns: 1fr; }
  .gal-item { min-height: 64px; }
  .seg-sm button { min-height: 44px; }
  .run-steps li { min-height: 44px; }
  .wb-dialog { width: calc(100vw - 24px); }
}


/* ================================================================ READER · Study (reading)
   Round 4B. Three columns from the record's own data: the study's sources by name and this record's outline (left), the reading
   column (centre), and the citation in the margin, level with the passage it marks (right). Supporting passages are marked in the
   source blue; orange is kept for open gaps. The record ends on one full-width endcap. Narrower: a named source select in the bar;
   on phones the citation is a dock row that opens a sheet. */
.rd-page .app-main.rd-main-col { max-width: 1240px; padding-top: 0; }
.rd-top { position: sticky; top: var(--topbar-h); z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 61px; padding: 10px 0; background: var(--paper); border-bottom: 1px solid var(--hairline); }
.rd-back { max-width: 44%; margin-left: -12px; }
.rd-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-switch { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rd-srcslot { display: none; min-width: 0; }
.rd-srcsel .select-trigger { min-width: 220px; }
.rd-srcsel .listbox { min-width: 280px; left: auto; right: 0; }
.rd-grid { position: relative; display: grid; grid-template-columns: 200px minmax(0, 640px) 248px; justify-content: center; column-gap: 52px; padding: 40px 0 64px; }
/* left rail */
.rd-nav { position: sticky; top: calc(var(--topbar-h) + 61px + 28px); align-self: start; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rd-nav-h { font-size: var(--fs-small); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.rd-nav-h + ol { margin-bottom: 18px; }
.rd-srcs { display: flex; flex-direction: column; gap: 4px; margin-left: -10px; }
.rd-src { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; padding: 9px 10px; border-radius: var(--r-md); color: var(--ink); transition: background var(--d-2), box-shadow var(--d-2); }
.rd-src:hover { background: rgba(20,20,19,.04); }
.rd-src[aria-current="page"] { background: var(--raised); box-shadow: var(--e-1); }
.rd-src .cite { margin: 1px 0 0; }
.rd-src-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rd-src-t b { font-size: var(--fs-ui); line-height: 1.3; font-weight: 500; }
.rd-src[aria-current="page"] .rd-src-t b { font-weight: 600; }
.rd-src-t span { font-size: var(--fs-small); line-height: 1.35; color: var(--ink-2); }
.rd-toc { display: flex; flex-direction: column; border-left: 1px solid var(--hairline-strong); }
.rd-toc a { position: relative; display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; margin-left: -1px; border-left: 2px solid transparent; font-size: var(--fs-ui); color: var(--ink-2); transition: color var(--d-2), border-color var(--d-2); }
.rd-toc a:hover { color: var(--ink); }
.rd-toc a[aria-current] { color: var(--ink); font-weight: 500; border-left-color: var(--accent); }
.rd-toc a.has-cite::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.rd-toc a.has-cite.is-gap::after { background: var(--brand-orange); }
/* the record */
.rd-doc { position: relative; min-width: 0; }
.rd-head { padding-bottom: 26px; border-bottom: 1px solid var(--hairline); }
.rd-title { margin: 0 0 14px; padding-bottom: .06em; }
.rd-facts { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-small); color: var(--ink-2); }
.rd-facts > span:not(.badge):not(.cite) { display: inline-flex; align-items: center; gap: 6px; }
.rd-facts svg { width: 14px; height: 14px; color: var(--ink-3); }
.rd-facts .cite { margin: 0; }
.rd-facts .rd-ref { margin-left: -8px; color: var(--ink-2); }
.rd-sec { padding-top: 32px; scroll-margin-top: calc(var(--topbar-h) + 80px); }
.rd-h { margin-bottom: 10px; font-size: var(--fs-heading); font-weight: var(--fw-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--ink); }
.rd-p { max-width: 64ch; font-size: var(--fs-lead); line-height: 1.75; letter-spacing: var(--ls-lead); color: var(--ink); text-wrap: pretty; }
.rd-p + .rd-p { margin-top: 16px; }
.rd-gaps { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; counter-reset: gap; }
.rd-gaps li { position: relative; padding-left: 36px; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); counter-increment: gap; }
.rd-gaps li::before { content: counter(gap, decimal-leading-zero); position: absolute; left: 0; top: 2px; font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--warning); }
.rd-doc mark.hl { scroll-margin: 160px; }
.rd-doc mark.hl:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hl-tag.cite { margin-left: 6px; vertical-align: 2px; }
.rd-end { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.rd-endcap { margin-top: 16px; }
.rd-next { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k go" "t go" "d go"; align-items: center; gap: 4px 16px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--e-1); color: var(--ink); transition: box-shadow var(--d-3) var(--ease-out); }
.rd-next:hover { box-shadow: var(--e-2); }
.rd-next-k { grid-area: k; font-size: var(--fs-small); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.rd-next-t { grid-area: t; display: flex; align-items: center; gap: 10px; min-width: 0; }
.rd-next-t b { font-size: var(--fs-row); font-weight: 600; letter-spacing: var(--ls-row); }
.rd-next-t .cite { margin: 0; }
.rd-next .t-desc { grid-area: d; }
.rd-next-go { grid-area: go; width: 20px; height: 20px; color: var(--ink-3); transition: transform var(--d-3) var(--ease-out), color var(--d-2); }
.rd-next:hover .rd-next-go { color: var(--ink); transform: translateX(3px); }
.rd-doc.is-pdf { padding: 56px 64px 40px; border-radius: 4px; background: var(--raised); box-shadow: var(--e-3); }
.rd-runhead, .rd-folio { display: flex; justify-content: space-between; gap: 16px; color: var(--ink-2); }
.rd-runhead { margin: -24px 0 36px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.rd-folio { margin-top: 48px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.rd-doc.is-pdf .rd-p { font-size: var(--fs-body); line-height: 1.7; }
.rd-doc.is-pdf .rd-endcap { margin-top: 32px; }
/* margin note: a raised card level with the cited passage */
.rd-margin { position: relative; min-width: 0; }
.rd-note { position: absolute; left: 0; right: 0; top: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 10px 18px; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--e-1); }
.rd-note::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.rd-note.is-gap::before { background: var(--brand-orange); }
.rd-note-k { display: flex; align-items: center; gap: 8px; min-height: 22px; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.rd-note-k .cite { margin: 0; }
.rd-note-claim { font-size: var(--fs-desc); line-height: 1.5; color: var(--ink-2); }
.rd-note-go { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 32px; font-size: var(--fs-small); font-weight: 500; color: var(--accent-ink); }
.rd-note-go svg { width: 14px; height: 14px; transition: transform var(--d-3) var(--ease-out); }
.rd-note-go:hover svg { transform: translate(2px, -2px); }
.rd-note { opacity: 0; transform: translateX(-6px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.rd-grid.is-linked .rd-note { opacity: 1; transform: none; }
/* phone citations: dock row + sheet */
.rail-card { display: flex; flex-direction: column; gap: 12px; padding: 20px 0; border-top: 1px solid var(--hairline); }
.rail-card:first-child { border-top: 0; padding-top: 4px; }
.rail-h { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.rail-study { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: var(--r-md); background: var(--raised); box-shadow: var(--e-1); }
.rail-study > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rail-study .dot { margin-top: 6px; }
.rail-study svg { width: 16px; height: 16px; color: var(--ink-3); }
.rail-claim { line-height: 1.55; }
.rail-dl { display: flex; flex-direction: column; gap: 8px; }
.rail-dl div { display: flex; justify-content: space-between; gap: 12px; }
.rail-dl dt { color: var(--ink-2); }
.rail-dl dd { color: var(--ink); text-align: right; }
.rd-progress { position: fixed; z-index: calc(var(--z-sticky) + 2); left: 0; right: 0; top: 0; height: 2px; pointer-events: none; }
.rd-progress span { display: block; height: 100%; background: var(--brand-gradient); transform-origin: 0 50%; transform: scaleX(0); }
.rd-fab { display: none; width: 100%; align-items: center; gap: 12px; min-height: 52px; padding: 0 2px; text-align: left; color: var(--ink); }
.rd-fab > svg:first-child { width: 20px; height: 20px; flex: none; color: var(--accent); }
.rd-fab-t { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rd-fab-t b { font-size: var(--fs-ui); font-weight: 600; }
.rd-fab-t span { font-size: var(--fs-small); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-fab-chev { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
.rd-sheet .rail-card:first-child { padding-top: 0; }
.rd-sheet .btn-block:last-child { margin-top: 8px; }
@media (max-width: 1380px) {
  .rd-grid { grid-template-columns: minmax(0, 640px) 248px; column-gap: 56px; }
  .rd-nav { display: none; }
  .rd-srcslot { display: block; }
}
@media (max-width: 1180px) { .rd-grid { column-gap: 40px; grid-template-columns: minmax(0, 1fr) 232px; } }
@media (max-width: 1024px) {
  .rd-grid { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin: 0 auto; padding-top: 24px; }
  .rd-margin { display: none; }
  .rd-fab { display: flex; }
}
@media (max-width: 640px) {
  .rd-top { gap: 6px; min-height: 0; padding: 6px var(--gutter); margin: 0 calc(var(--gutter) * -1); }
  .rd-back { width: 44px; min-height: 44px; flex: none; padding: 0; margin-left: -10px; justify-content: center; }
  .rd-back span { display: none; }
  .rd-switch { flex: 1; justify-content: flex-end; gap: 6px; }
  .rd-srcslot { flex: 1; }
  .rd-srcsel .select-trigger { min-width: 0; min-height: 44px; }
  .rd-srcsel .listbox { right: auto; left: 0; min-width: 300px; }
  .rd-srcsel .option { white-space: nowrap; }
  .rd-fmt button { min-height: 44px; padding: 0 10px; }
  .rd-grid { padding-top: 20px; padding-bottom: 32px; }
  .rd-head { padding-bottom: 20px; }
  .rd-sec { padding-top: 26px; }
  .rd-p { font-size: var(--fs-body); line-height: 1.7; }
  .hl-tag.cite { position: relative; z-index: 0; min-width: 44px; height: 44px; margin: -13px -6px -13px -2px; padding: 0 11px; justify-content: center; background: transparent; box-shadow: none; vertical-align: middle; }
  .hl-tag.cite::before { content: ""; position: absolute; z-index: -1; left: 7px; right: 7px; top: 12px; bottom: 12px; border-radius: 6px; background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--info-line); }
  .hl-tag.cite.gap::before { background: var(--warning-tint); box-shadow: inset 0 0 0 1px var(--warning-line); }
  .rd-next { padding: 16px; }
  .rd-doc.is-pdf { padding: 32px 20px 24px; margin: 0 -8px; }
  .rd-runhead { margin: -12px 0 24px; }
  .rd-runhead span:last-child { display: none; }
}



/* ================================================================ FIGURES · List (catalogue)
   Round 4B: a real figure grid. Every card shows the module itself, captured from its Figure Lab page (assets/workbench/thumbs,
   round4/B/workbench/thumbs.cjs); modules that need WebGL or the network keep a type glyph and render live when opened. App head
   with the counts on the stat step; one toolbar (search, provenance, field chips that wrap; one field select on phones); the
   figures already placed in studies as a compact strip; the grid beside a sticky live viewer; reference material in disclosures. */
.fg-page .app-main.fg-main { max-width: 1320px; }
.fg-head { padding-bottom: 12px; }
.fg-head .app-head-title { flex-basis: 100%; }
.fg-meta { gap: 6px 22px; }
.fg-meta > span { display: inline-flex; align-items: baseline; gap: 6px; color: var(--ink-2); }
.fg-meta .fg-stat { font-size: var(--fs-heading); line-height: 1; font-weight: 600; letter-spacing: -.015em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fg-atlas { min-width: 0; }
.atlas-bar { display: flex; flex-direction: column; gap: 12px; }
.atlas-bar-row { display: flex; align-items: center; gap: 8px; }
.atlas-bar .gal-search { flex: 1 1 auto; max-width: 600px; border-radius: var(--r-md); }
.atlas-bar .gal-search > .lead-icon { margin-left: 12px; }
.atlas-bar .gal-search input { height: 38px; padding: 0 10px 0 8px; font-size: var(--fs-ui); }
.gal-prov, .gal-fieldsel { flex: none; }
.gal-prov .select-trigger { min-width: 156px; }
.gal-prov .select-trigger > svg:first-child, .gal-fieldsel .select-trigger > svg:first-child { width: 15px; height: 15px; color: var(--ink-3); }
.gal-prov .listbox { min-width: 230px; left: auto; right: 0; }
.gal-fieldsel { display: none; }
.gal-fieldsel .listbox { min-width: 260px; max-height: 360px; }
.atlas-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0; }
.atlas-chips .chip { flex: none; }
.atlas-chips .chip[aria-pressed="true"] .count { color: rgba(255,255,255,.78); }
.atlas-pre { padding-top: 22px; }
/* figures already placed in studies: one compact strip */
.fg-shelf { padding-bottom: 4px; }
.fg-shelf[hidden] { display: none; }
.fg-sec-h { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.fg-sec-h .kbd { margin: 0 1px; }
.shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.shelf-item { display: flex; flex-direction: column; gap: 10px; padding: 8px 8px 12px; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--e-1); transition: box-shadow var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out); }
.shelf-item:hover { box-shadow: var(--e-2); transform: translateY(-1px); }
.shelf-fig { height: 68px; padding: 6px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.shelf-fig .nf-svg { max-height: 100%; width: 100%; }
.shelf-fig .nf-band { fill: var(--sunken); opacity: .8; }
.shelf-fig .nf-svg text { display: none; }
.shelf-fig .nf-ci, .shelf-fig .nf-cap { stroke-width: 5; }
.shelf-fig .nf-line, .shelf-fig .nf-l1 { stroke-width: 5; }
.shelf-fig .nf-l2, .shelf-fig .nf-uline { stroke-width: 4; }
.shelf-fig .nf-pt, .shelf-fig .nf-mark, .shelf-fig .nf-p1, .shelf-fig .nf-p2 { stroke: var(--surface); }
.shelf-fig .mol { max-width: 100%; }
.shelf-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0 6px; }
.shelf-t { font-size: var(--fs-ui); line-height: 1.35; font-weight: 600; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shelf-study { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--fs-small); color: var(--ink-2); }
.shelf-study-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* real figure thumbnails (also used by the workbench Figures panel) */
.fg-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; width: 100%; background: var(--surface); overflow: hidden; }
.fg-thumb img { width: 100%; height: 100%; object-fit: contain; }
.fg-thumb.is-glyph { --g: var(--accent); align-content: center; gap: 8px; background: var(--sunken); }
.fg-thumb.is-glyph .fg-g { width: 84px; height: 60px; }
.fg-thumb-n { font-size: var(--fs-small); color: var(--ink-2); }
.fg-thumb[data-c="bio"] { --g: var(--field-bio); } .fg-thumb[data-c="chem"], .fg-thumb[data-c="phys"] { --g: var(--field-sci); } .fg-thumb[data-c="ai"] { --g: var(--field-aiml); }
.fg-thumb[data-c="fin"] { --g: var(--field-quant); } .fg-thumb[data-c="econ"] { --g: var(--field-policy); } .fg-thumb[data-c="social"] { --g: var(--field-soc); }
.fg-thumb[data-c="ir"] { --g: var(--field-ir); } .fg-thumb[data-c="eng"] { --g: var(--field-eng); }
.fg-g { width: 56px; height: 40px; overflow: visible; }
.fg-g * { vector-effect: non-scaling-stroke; }
.fg-g .g-l { fill: none; stroke: var(--ink-4); stroke-width: 1.25; }
.fg-g .g-s { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fg-g .g-a { fill: var(--g); stroke: none; }
.fg-g path.g-a { fill: none; stroke: var(--g); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.fg-g .g-n { fill: var(--ink-3); }
.fg-g .g-w { fill: var(--brand-orange); }
.fg-g .g-f { fill: var(--g); opacity: .28; }
.fg-g .g-g { fill: var(--ink-3); opacity: .22; }
.fg-g .g-h0, .fg-g .g-m0 { fill: var(--g); opacity: .14; } .fg-g .g-h1, .fg-g .g-m1 { fill: var(--g); opacity: .34; }
.fg-g .g-h2, .fg-g .g-m2 { fill: var(--g); opacity: .58; } .fg-g .g-h3, .fg-g .g-m3 { fill: var(--g); opacity: .88; }
.fg-g [class^="g-m"] { stroke: var(--sunken); stroke-width: 1.25; }
.gal-item .fg-thumb.is-sm { width: auto; margin: -10px -12px 2px; border-bottom: 1px solid var(--hairline); }
.gal-item .fg-thumb.is-sm.is-glyph .fg-g { width: 64px; height: 46px; }
.gal-item .fg-thumb.is-sm .fg-thumb-n { display: none; }
.gal-item:has(.fg-thumb.is-sm) { overflow: hidden; }
/* the grid beside the live viewer */
.fg-atlas .atlas-grid { --atlas-top: calc(var(--topbar-h) + var(--atlas-bar-h, 108px) + 16px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 26px; }
.atlas-col { display: flex; flex-direction: column; min-width: 0; }
.atlas-colhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.atlas-legend { margin-top: 4px; }
.atlas-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 12px; padding-top: 4px; }
.atlas-list > li { display: flex; min-width: 0; }
.atlas-list > .gal-sk, .atlas-list > .gal-empty, .atlas-list > .gal-more, .atlas-list > .gal-err { grid-column: 1 / -1; }
.atlas-group { grid-column: 1 / -1; display: flex !important; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 2px 2px; border-bottom: 1px solid var(--hairline); padding-bottom: 8px; }
.atlas-group-n { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-item.fg-card { display: flex; flex-direction: column; gap: 0; width: 100%; min-height: 0; padding: 0; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--e-1); overflow: hidden; }
.gal-item.fg-card:hover { box-shadow: var(--e-2); }
.gal-item.fg-card[aria-selected="true"] { background: var(--raised); box-shadow: 0 0 0 2px var(--accent), var(--e-2); }
.fg-card .fg-thumb { border-bottom: 1px solid var(--hairline); }
.fg-card-main { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; min-width: 0; flex: 1; }
.fg-card .gal-item-t { font-size: var(--fs-ui); line-height: 1.35; font-weight: 500; color: var(--ink); -webkit-line-clamp: 2; }
.fg-card-m { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: auto; }
.fg-card .gal-item-l { min-width: 0; font-size: var(--fs-small); color: var(--ink-2); }
.gal-atlas .gal-more { padding: 16px 0 8px; justify-content: stretch; }
.gal-atlas div.gal-more { margin-top: 12px; }
.gal-atlas .gal-more .btn { width: 100%; gap: 10px; }
.gal-atlas .gal-stage { position: sticky; top: var(--atlas-top); margin-top: 0; max-height: calc(100dvh - var(--atlas-top) - 16px); display: flex; flex-direction: column; box-shadow: var(--e-2); }
.gal-atlas .gal-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "meta tools" "title title" "tags tags"; align-items: center; gap: 6px 16px; padding: 14px 14px 16px 22px; }
.gal-atlas .gal-head-main { display: contents; }
.gal-atlas .gal-meta { grid-area: meta; }
.gal-atlas .gal-title { grid-area: title; margin-top: 4px; }
.gal-atlas .gal-tags { grid-area: tags; margin-top: 0; }
.gal-atlas .gal-tools { grid-area: tools; }
.gal-atlas .gal-title { font-size: var(--fs-heading); line-height: var(--lh-heading); font-weight: var(--fw-heading); }
.gal-atlas .gal-tools { margin: 0 -6px 0 0; flex: none; }
.gal-atlas .gal-stepper { margin-right: 4px; }
.gal-atlas .gal-body { flex: 1; min-height: 360px; overflow-y: auto; }
.gal-atlas .gal-note { padding: 14px 22px 16px; }
.gal-pos { min-width: 0; padding: 0 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gal-meta { color: var(--ink-2); }
.gal-what { color: var(--ink-2); }

.fg-ref { max-width: 880px; padding: 56px 0 56px; }
.fg-ref > .fg-h { margin-bottom: 8px; }
.fg-disc { border-top: 1px solid var(--hairline); }
.fg-disc:last-child { border-bottom: 1px solid var(--hairline); }
.fg-disc summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 12px 0; cursor: pointer; list-style: none; }
.fg-disc summary::-webkit-details-marker { display: none; }
.fg-disc summary > span { display: flex; flex-direction: column; gap: 2px; }
.fg-disc summary b { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.fg-disc summary svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); transition: transform var(--d-3) var(--ease-out); }
.fg-disc[open] summary svg { transform: rotate(180deg); }
.fg-disc-body { display: flex; flex-direction: column; gap: 12px; padding: 0 0 22px; }
.ref-table td, .ref-table th { padding-left: 0; }
.ref-table td { padding-top: 9px; padding-bottom: 9px; font-family: var(--font-mono); font-size: var(--fs-mono); }
.ref-table td:last-child { font-family: var(--font-sans); font-size: var(--fs-ui); }
.wbk { display: flex; flex-direction: column; }
.wbk li + li { border-top: 1px solid var(--hairline); }
.wbk a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 8px 0; }
.wbk-t { display: flex; flex-direction: column; gap: 2px; }
.wbk a svg { width: 16px; height: 16px; color: var(--ink-3); transition: transform var(--d-3) var(--ease-out), color var(--d-2); }
.wbk a:hover svg { color: var(--ink); transform: translate(2px, -2px); }
.atlas-scrim { z-index: calc(var(--z-dialog) - 1); }

@media (max-width: 1360px) {
  .gal-atlas .gal-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tools" "meta" "title" "tags"; padding-top: 10px; }
  .gal-atlas .gal-tools { margin: 0 -6px; }
  .gal-atlas .gal-stepper { margin-right: auto; }
}
@media (max-width: 1100px) { .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1180px) { .fg-atlas .atlas-grid { gap: 22px; } .atlas-list { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
@media (max-width: 760px) {
  .fg-head { padding-bottom: 8px; }
  .fg-atlas .atlas-bar { position: static; border-bottom: 0; padding-bottom: 0; }
  .fg-meta { gap: 4px 16px; }
  .fg-meta .fg-stat { font-size: var(--fs-row); }
  .atlas-bar-row { flex-wrap: wrap; gap: 8px; }
  .atlas-bar .gal-search { flex: 1 1 100%; max-width: none; min-width: 0; min-height: 44px; }
  .atlas-bar .gal-search input { height: 44px; }
  .atlas-bar .gal-search .kbd { display: none; }
  .gal-prov, .gal-fieldsel { flex: 1 1 0; min-width: 0; }
  .gal-fieldsel { display: block; }
  .gal-prov .select-trigger, .gal-fieldsel .select-trigger { min-width: 0; width: 100%; min-height: 44px; }
  .gal-prov .listbox { left: auto; right: 0; }
  .gal-fieldsel .listbox { left: 0; right: auto; }
  .atlas-chips { display: none; }
  .atlas-pre { padding-top: 18px; }
  .shelf { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 10px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .shelf::-webkit-scrollbar { display: none; }
  .fg-sec-h .t-desc { display: none; }
  .shelf-item { flex: 0 0 82%; scroll-snap-align: start; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 12px 8px 8px; min-height: 88px; }
  .shelf-copy { padding: 0; }
  .shelf-fig { height: 72px; }
  .fg-atlas .atlas-grid { display: block; padding-top: 18px; }
  .atlas-colhead { flex-direction: column; gap: 2px; }
  .atlas-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .atlas-group { padding-top: 16px; flex-direction: column; gap: 2px; align-items: flex-start; }
  .fg-card-main { padding: 8px 10px 10px; gap: 4px; }
  .fg-card .gal-item-t { -webkit-line-clamp: 3; }
  .fg-card-m { flex-wrap: wrap; gap: 4px 6px; }
  .fg-card .gal-item-l { white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
  .fg-thumb.is-glyph .fg-g { width: 64px; height: 46px; }
  .fg-thumb-n { display: none; }
  .gal-atlas .gal-stage { position: fixed; z-index: var(--z-dialog); left: 0; right: 0; bottom: 0; top: auto; margin: 0; max-height: 90dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--e-4); transform: translateY(104%); visibility: hidden; }
  .gal-atlas .gal-stage.is-open { transform: none; visibility: visible; }
  .gal-atlas .gal-grip { display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 4px; background: var(--hairline-strong); flex: none; }
  .gal-atlas .gal-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tools" "meta" "title" "tags"; padding: 8px 16px 12px; }
  .gal-atlas .gal-title { font-size: var(--fs-row); font-weight: 600; }
  .gal-atlas .gal-tools { margin: 0 -6px; flex-wrap: wrap; }
  .gal-atlas .gal-stepper { margin-right: auto; }
  .gal-close { display: inline-grid; }
  .gal-use span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .gal-use { width: 44px; padding: 0; border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-2); }
  .gal-atlas .gal-body { min-height: 260px; }
  .gal-atlas .gal-note { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
  .fg-ref { padding: 40px 0 24px; }
  .ref-table td { padding-top: 12px; padding-bottom: 12px; }
}



/* ================================================================ DEMO · Study (public)
   Round 4B: the landing's exhibit pattern. A quiet paper header with a display headline, then the real workbench inside one raised
   window that floats on the brand field (the system's specimen canvas, .atmo-canvas, as on email-preview). The window bar carries the
   study switch; the citation trace is clipped to the window. Sign-up lives after the window, as the closing section's own form. */
.demo-body { background: var(--paper); }
.demo-head { padding: calc(var(--nav-h) + clamp(28px, 5vh, 56px)) 0 clamp(28px, 4.5vh, 44px); border-bottom: 0; }
.demo-head::before { display: none; }
.demo-head-in { display: block; }
.demo-kicker { margin-bottom: 14px; gap: 10px; color: var(--ink-2); }
.demo-live { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-tint); }
.demo-head .t-display { max-width: 18ch; padding-bottom: .06em; }
.demo-lede { max-width: 60ch; margin-top: 16px; font-size: var(--fs-lead); line-height: var(--lh-lead); }
/* the field is a band behind the upper part of the window; the window's lower edge rests on the paper below it */
.demo-stage { position: relative; scroll-margin-top: var(--nav-h); padding: clamp(32px, 5vh, 56px) 0 0; }
.demo-stage.atmo-canvas { background: var(--paper) !important; }
.demo-stage.atmo-canvas > .field { bottom: 160px; }
.demo-stage.atmo-canvas > .field .veil { background: linear-gradient(180deg, rgba(8,18,40,.38), rgba(8,18,40,.12) 40%, rgba(8,18,40,.3)); }
.demo-stage-in { position: relative; }
.demo-window { border-radius: var(--r-xl); background: var(--paper); overflow: hidden; box-shadow: 0 2px 6px rgba(5,15,40,.22), 0 60px 120px -40px rgba(5,15,40,.8), 0 0 0 1px rgba(255,255,255,.12); }
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px 10px 10px; border-bottom: 1px solid var(--hairline-strong); background: var(--sunken); }
.demo-hint { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--ink-2); white-space: nowrap; }
.demo-hint .cite { margin: 0; }
.demo-switch { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: var(--r-md); background: var(--sunken-2); }
.demo-switch a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; padding: 0 14px; border-radius: 7px; font-size: var(--fs-ui); font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: color var(--d-2), background var(--d-2), box-shadow var(--d-2); }
.demo-switch a:hover { color: var(--ink); }
.demo-switch a[aria-current="true"] { background: var(--raised); color: var(--ink); box-shadow: 0 1px 2px rgba(20,20,19,.08), 0 0 0 1px rgba(20,20,19,.05); }
.ds-s { display: none; }
.demo-frame { position: relative; height: clamp(640px, calc(100dvh - 140px), 820px); background: var(--paper); }
.demo-wb { height: 100%; }
.demo-wb[hidden] { display: none; }
.demo-wb { --fs-title: 24px; --lh-title: 1.15; }
.demo-wb .wb { --ctx-w: 400px; }
.demo-wb .wb-title { font-size: 24px; }
.demo-wb .wb-scroll, .demo-wb .wb-ctx-body { overscroll-behavior: auto; }
.demo-wb .wb-head, .demo-wb .wb-tabs, .demo-wb .wb-body { max-width: 720px; }
.demo-wb .wb-head { padding-top: 18px; }
.demo-state { height: 100%; display: grid; place-items: center; padding: 32px; }
.demo-st { width: 100%; max-width: 560px; }
.demo-st-load { display: flex; flex-direction: column; gap: 12px; }
.demo-st-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.demo-ask { display: flex; gap: 8px; width: 100%; margin-top: 16px; }
.demo-ask .control { flex: 1; }
.demo-ask .btn { min-height: 48px; }
.demo-ex { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.demo-close { padding: clamp(72px, 11vh, 120px) 0 clamp(72px, 11vh, 120px); }
.demo-close-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 24px 64px; align-items: end; }
.demo-close-in .t-title { max-width: 14ch; padding-bottom: .08em; }
.demo-close-side { display: flex; flex-direction: column; gap: 20px; font-size: var(--fs-lead); line-height: var(--lh-lead); }
.demo-ask-form { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 20px; border-radius: var(--r-pill); background: var(--raised); box-shadow: var(--e-2); transition: box-shadow var(--d-3) var(--ease-out); }
.demo-ask-form:focus-within { box-shadow: var(--e-2), 0 0 0 3px var(--accent-tint-2); }
.demo-ask-form textarea { flex: 1; min-width: 0; min-height: 28px; max-height: 160px; resize: none; border: 0; background: transparent; padding: 8px 0; font-size: var(--fs-body); line-height: 1.5; color: var(--ink); }
.demo-ask-form textarea:focus-visible { outline: none; }
.demo-ask-form .btn { flex: none; }
.demo-close-note { margin-top: -6px; }
@media (max-width: 1100px) {
  .demo-stage { padding-top: 0; }
  .demo-stage.atmo-canvas > .field { bottom: auto; height: 220px; }
  .demo-stage-in { padding-top: 28px; }
  .demo-frame { height: auto; min-height: 0; max-height: none; }
  .demo-state { min-height: 560px; }
  .demo-window { overflow: visible; }
  .demo-bar { border-radius: var(--r-xl) var(--r-xl) 0 0; }
}
@media (max-width: 860px) { .demo-close-in { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .demo-head { padding: calc(var(--nav-h) + 16px) 0 20px; }
  .demo-kicker { margin-bottom: 8px; }
  .demo-lede { display: none; }
  .demo-stage.atmo-canvas > .field { height: 132px; }
  .demo-stage-in { padding: 16px 12px 0; }
  .demo-window { border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 2px 6px rgba(5,15,40,.22), 0 0 0 1px rgba(255,255,255,.12); }
  .demo-bar { padding: 8px; }
  .demo-hint { display: none; }
  .demo-switch { width: 100%; }
  .demo-switch a { min-height: 44px; padding: 0 8px; }
  .ds-l { display: none; } .ds-s { display: inline; }
  .demo-wb .wb-head { padding-top: 14px; }
  .demo-wb { --gutter: 10px; }
  .demo-wb .wb-scroll { padding: 0 var(--gutter); }
  .demo-wb .wb-tabs { top: var(--nav-h); }
  .demo-ask { flex-direction: column; }
  .demo-close { padding: 48px 0 56px; }
  .demo-ask-form { flex-direction: column; align-items: stretch; padding: 8px; border-radius: var(--r-xl); }
  .demo-ask-form textarea { min-height: 44px; padding: 10px 8px; }
  .demo-ask-form .btn { width: 100%; }
}


/* ================================================================ print */
@media print {
  .app-side, .app-top, .bottom-nav, .wb-dock, .wb-ctx, .wb-handle, .wb-tabs, .wb-head-actions, .nf-actions, .msg-next, .rv-btn { display: none !important; }
  .wb-host, .wb, .wb-scroll { height: auto !important; overflow: visible !important; display: block !important; }
}

/* ================================================================ reduced motion: no sliding sheets, no marker sweep */
@media (prefers-reduced-motion: reduce) {
  mark.hl { background-size: 100% 72%; }
  .wb { transition: none; }
}
@media (max-width: 760px) { .dk-x { display: none; } }


/* ================================================================ AUDIT-FIX B · FIGURES (2026-10-07)
   Ledger figures__desktop/phone: title on its own line with a metric row; one-row toolbar with a scrolling field rail (desktop) and a
   sticky compact toolbar (phone); shelf posters fitted to their marks in a 16:9 well; one card anatomy (3-line title, footer row, hairline
   edge, hover lift, "Previewing" on the selected card); a designed live state for the five modules without a still; the viewer's
   classification as a full-width meta row; reference at full width; one column of large previews on phones. */
.fg-head .app-head-title { flex-direction: column; align-items: flex-start; gap: 12px; }
.fg-meta { gap: 6px 0; font-size: var(--fs-small); }
.fg-meta > span { position: relative; padding: 0 20px; color: var(--ink-2); }
.fg-meta > span:first-child { padding-left: 0; }
.fg-meta > span + span::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 16px; margin-top: -7px; background: var(--hairline-strong); }
.fg-meta .fg-stat { font-size: 20px; line-height: 1.1; }
.fg-head .app-head-lede { margin-top: 2px; }

.fg-page .fg-atlas .atlas-bar { flex-direction: row; align-items: center; gap: 10px; z-index: 5; padding: 10px 0; background: rgba(250,249,245,.97); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); transition: box-shadow var(--d-3) var(--ease-out); will-change: transform; }
.fg-page .fg-atlas .atlas-bar.is-stuck { box-shadow: 0 12px 20px -16px rgba(20,20,19,.28); }
.fg-page .atlas-bar-row { flex: none; }
.fg-page .atlas-bar .gal-search { flex: none; width: 320px; max-width: none; }
.fg-page .atlas-chips { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px 40px 4px 2px; scroll-padding-inline: 2px 40px; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.fg-page .atlas-chips::-webkit-scrollbar { display: none; }
.fg-page .atlas-chips .chip { min-height: 34px; }

.fg-count { padding: 2px 8px; border-radius: var(--r-pill); background: var(--sunken-2); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.shelf-item { gap: 0; padding: 0; overflow: hidden; background: var(--raised); box-shadow: 0 0 0 1px rgba(20,20,19,.07), 0 1px 2px rgba(20,20,19,.05); }
.shelf-item:hover { box-shadow: 0 0 0 1px rgba(20,20,19,.1), 0 12px 26px -10px rgba(20,20,19,.16); transform: translateY(-2px); }
.shelf-item:focus-visible { outline: var(--focus-outline, 2px solid var(--accent)); outline-offset: 2px; }
.shelf-fig { position: relative; height: auto; aspect-ratio: 16 / 9; padding: 12px 16px; border-radius: 0; background: var(--surface); box-shadow: none; border-bottom: 1px solid var(--hairline); overflow: visible; }
.shelf-fig .nf-poster { display: block; width: 100%; height: 100%; max-height: none; overflow: visible; }
.shelf-fig .nf-poster * { vector-effect: non-scaling-stroke; }
.shelf-fig .nf-ci, .shelf-fig .nf-cap { stroke-width: 3; }
.shelf-fig .nf-line, .shelf-fig .nf-l1, .shelf-fig .nf-uline { stroke-width: 2.75; }
.shelf-fig .nf-l2 { stroke-width: 2.25; }
.shelf-fig .nf-grid, .shelf-fig .nf-axis { stroke-width: 1; }
.shelf-fig .nf-null, .shelf-fig .nf-prog, .shelf-fig .nf-peak, .shelf-fig .nf-cf { stroke-width: 1.5; }
.shelf-fig.is-img { padding: 6px; background: #fffefa; }
.shelf-fig.is-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.shelf-copy { flex: 1; gap: 8px; padding: 12px 14px 14px; }
.shelf-t { min-height: 2.7em; }
.shelf-study { margin-top: auto; }
.shelf-study-t { padding-inline-end: .14em; }

.gal-item.fg-card { box-shadow: 0 0 0 1px rgba(20,20,19,.07), 0 1px 2px rgba(20,20,19,.04); transition: box-shadow var(--d-2), transform var(--d-3) var(--ease-out); }
.gal-item.fg-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(20,20,19,.1), 0 12px 26px -10px rgba(20,20,19,.16); }
.gal-item.fg-card:active { transform: translateY(0) scale(.99); }
.gal-item.fg-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gal-item.fg-card[aria-selected="true"] { box-shadow: 0 0 0 2px var(--accent), 0 12px 26px -12px rgba(18,117,216,.32); }
.fg-card .fg-thumb { background: #fffefa; }
.fg-card .fg-thumb::after { content: "Open"; position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: var(--r-pill); background: rgba(20,20,19,.78); color: #fff; font-size: 12px; font-weight: 500; line-height: 18px; opacity: 0; transform: translateY(-2px); transition: opacity var(--d-2), transform var(--d-2); }
.gal-item.fg-card:hover .fg-thumb::after, .gal-item.fg-card:focus-visible .fg-thumb::after { opacity: 1; transform: none; }
.gal-item.fg-card[aria-selected="true"] .fg-thumb::after { content: "Previewing"; opacity: 1; transform: none; background: var(--accent); }
.fg-card .gal-item-t { -webkit-line-clamp: 3; overflow-wrap: break-word; word-break: break-word; }
.fg-card-m { flex-wrap: nowrap; }
.fg-card .gal-item-l { line-height: 1.5; padding-inline-end: .14em; }

.fg-thumb.is-live { gap: 12px; background: radial-gradient(120% 95% at 50% 0%, color-mix(in srgb, var(--g) 15%, #fffefa), #f5f3ec 72%); }
.fg-thumb.is-live .fg-g { width: 112px; height: 80px; }
.fg-card .fg-thumb.is-live .fg-g { width: 104px; height: 74px; }
.fg-thumb.is-live .fg-thumb-n { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.86); box-shadow: 0 0 0 1px rgba(20,20,19,.08); font-size: 12px; line-height: 18px; color: var(--ink-2); }
.fg-live-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-tint); }
.gal-item .fg-thumb.is-sm.is-live .fg-thumb-n { display: none; }

.gal-atlas .gal-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tools" "title" "tags"; gap: 6px; padding: 10px 14px 16px 22px; }
.gal-atlas .gal-tools { margin: 0 -6px 0 -10px; }
.gal-atlas .gal-stepper { margin-right: auto; }
.gal-atlas .gal-title { margin-top: 2px; }
.gal-meta { white-space: normal; overflow: visible; text-overflow: clip; color: var(--ink-2); }
.gal-sep { margin: 0 7px; color: var(--ink-4); }
.gal-tags { row-gap: 6px; }

.fg-ref { max-width: none; }
.fg-disc summary > span { max-width: 80ch; }
.fg-disc .t-desc { color: var(--ink-2); }

@media (max-width: 760px) {
  .fg-head .app-head-title { gap: 8px; }
  .fg-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 2px; }
  .fg-meta > span { padding: 0; font-size: var(--fs-small); }
  .fg-meta > span + span::before { display: none; }
  .fg-meta .fg-stat { font-size: 20px; }
  .fg-page .fg-atlas .atlas-bar { position: sticky; top: var(--topbar-h); flex-direction: column; align-items: stretch; gap: 8px; margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter); border-bottom: 1px solid var(--hairline); }
  .fg-page .atlas-bar-row { flex: none; flex-wrap: wrap; }
  .fg-page .atlas-bar .gal-search { width: 100%; flex: 1 1 100%; }
  .fg-page .gal-prov .select-trigger, .fg-page .gal-fieldsel .select-trigger { min-height: 40px; border-radius: var(--r-pill); box-shadow: none; }
  .fg-sec-h { gap: 6px 10px; align-items: center; }
  .shelf { gap: 12px; }
  .shelf-item { flex: 0 0 76%; display: flex; flex-direction: column; gap: 0; padding: 0; min-height: 0; }
  .shelf-fig { height: auto; aspect-ratio: 16 / 9; }
  .shelf-copy { padding: 10px 12px 12px; }
  .shelf-t { -webkit-line-clamp: 3; min-height: 0; }
  .shelf-study-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .atlas-legend { display: none; }
  .atlas-colhead { flex-direction: row; align-items: baseline; justify-content: space-between; }
  .atlas-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .atlas-group { flex-direction: row; align-items: baseline; padding-top: 18px; }
  .fg-card .fg-thumb { aspect-ratio: 16 / 10; }
  .fg-card-main { padding: 12px 14px 14px; gap: 8px; }
  .fg-card .gal-item-t { font-size: var(--fs-ui); font-weight: 600; -webkit-line-clamp: 3; }
  .fg-card-m { flex-wrap: nowrap; }
  .fg-card .gal-item-l { white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
  .fg-card .fg-thumb::after { display: none; }
  .gal-item.fg-card[aria-selected="true"] .fg-thumb::after { display: block; }
  .fg-thumb.is-glyph .fg-g, .fg-card .fg-thumb.is-live .fg-g { width: 104px; height: 74px; }
  .fg-thumb.is-live .fg-thumb-n { display: inline-flex; }
  .gal-atlas .gal-more .btn { min-height: 48px; font-weight: 600; }
  .gal-atlas .gal-more .btn .t-small { padding: 1px 8px; border-radius: var(--r-pill); background: var(--sunken-2); color: var(--ink-2); font-weight: 500; }
  .fg-ref { padding: 32px 0 24px; }
  .gal-atlas .gal-head { padding: 8px 16px 12px; }
}


.fg-page .atlas-chips { position: relative; }
.shelf-fig .nf-poster, .shelf-fig.is-img img { position: absolute; top: 12px; left: 16px; width: calc(100% - 32px); height: calc(100% - 24px); }
.shelf-fig.is-img img { top: 6px; left: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
@media (max-width: 760px) { .atlas-colhead { flex-direction: column; align-items: flex-start; gap: 2px; } }


/* ================================================================ AUDIT-FIX B · WORKBENCH (also the demo window)
   Ledger workbench__desktop/phone + demo: unclipped study title (Goodly 28 over a 22px claim), grouped meta with a gap chip, one count
   badge, frosted sticky tabs with a scroll shadow, a fade above the composer and a disabled Send while empty, support = teal everywhere and
   gap = amber, chips glued to their word and stop, a calmer plan row, the forest plot with separate estimate/bounds columns and a legend,
   neutral passages on a quote rail that tint only when selected, a two-row passage header, an outlined gap segment, whole-card targets. */
.wb-title { font-size: 28px; line-height: 1.25; }
.wb-title-t { line-height: 1.25; padding-block: .08em .12em; padding-inline-end: .06em; }
.wb-study-btn { margin: -2px -10px; padding: 2px 10px; }
.wb-study { gap: 12px; }
.study-mark.field-glyph { --s: 32px; border-radius: 9px; }
.wb-head-actions .icon-btn { width: 34px; height: 34px; }
.wb-meta { gap: 4px 0; margin-top: 8px; padding-left: 44px; font-size: var(--fs-small); color: var(--ink-2); }
.wb-meta > span + span::before { margin: 0 10px; }
.wb-meta .wb-meta-run { margin-left: 8px; font-size: 12px; letter-spacing: 0; color: var(--ink-3); }
.wb-meta .wb-meta-run::before { content: none; }
.wb-gap-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; margin: -2px 0; padding: 0 9px 0 7px; border-radius: var(--r-pill); background: var(--warning-tint); box-shadow: inset 0 0 0 1px var(--warning-line); color: var(--warning); font-size: var(--fs-small); font-weight: 600; transition: background var(--d-2); }
.wb-gap-chip:hover { background: rgba(225,145,54,.22); }
.wb-gap-chip svg { width: 14px; height: 14px; color: var(--warning); }
.tab-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 7px; padding: 0 6px; border-radius: 10px; background: var(--sunken-2); color: var(--ink-2); font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.wb-tabs { background: rgba(250,249,245,.97); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); transition: box-shadow var(--d-3) var(--ease-out); }
.wb-tabs.is-stuck { box-shadow: 0 12px 18px -16px rgba(20,20,19,.3); }
.wb-dock::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; background: linear-gradient(rgba(250,249,245,0), rgba(250,249,245,.94)); pointer-events: none; }
.wb-send.is-empty { opacity: 1; background: var(--sunken-2); color: var(--ink-3); box-shadow: none; cursor: default; }
.wb-send.is-empty svg { transform: none !important; }

/* support = teal, gap = amber, in chips, highlights, the trace and selection */
.wb .cite:not(.gap), .cite-pop .cite:not(.gap), .demo-hint .cite, .rd .cite:not(.gap), .rd-sheet .cite:not(.gap) { color: var(--success); background: var(--success-tint); box-shadow: inset 0 0 0 1px var(--success-line); }
.wb button.cite:not(.gap):hover, .rd button.cite:not(.gap):hover { background: rgba(15,123,108,.16); }
mark.hl { --hl: rgba(15,123,108,.15); }
mark.hl.is-gap { --hl: rgba(225,145,54,.24); }
.wb-trace-line { stroke: var(--success); }
.wb-trace-end { stroke: var(--success); }
.wb-trace-end.is-to { fill: var(--success); }
button.cite.is-trace { background: rgba(15,123,108,.18); box-shadow: 0 0 0 2px var(--success); }
.cite-glue { white-space: nowrap; }
.cite-glue .cite { margin: 0 1px 0 2px; }

/* plan row: quiet completed steps */
.wb-plan-btn { min-height: 36px; }
.wb-plan-steps .step { font-size: var(--fs-small); color: var(--ink-2); }
.wb-plan-steps .step i { width: 14px; height: 14px; }
.wb-plan-steps .step.done i { background: transparent; border-color: var(--success); }
.wb-plan-steps .step.done i::after { border-color: var(--success); width: 5px; height: 2.5px; }
.wb-plan-steps .sep { width: 12px; background: var(--hairline); }
.wb-plan-pips { display: none; }

/* the claim: one step under the title, the figure follows close */
.wb-claim { margin-top: 10px; max-width: 34em; font-size: 22px; line-height: 1.36; letter-spacing: -.016em; }
.msg-head .badge-warning { height: 26px; padding: 0 10px; font-weight: 600; }
.wb-answer > .nf { margin-top: 20px; }
.msg-detail { margin-top: 22px; }
.msg-gap.gap-note { margin-top: 18px; padding: 12px 14px 12px 16px; border: 0; border-radius: 10px; background: rgba(225,145,54,.07); box-shadow: inset 3px 0 0 var(--brand-orange); }
.msg-next-row { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 8px; }
.msg-next .chip { min-height: 36px; padding: 0 14px; font-size: var(--fs-small); font-weight: 500; justify-content: flex-start; }
.msg-next .chip svg { width: 16px; height: 16px; }
.msg-next > p { font-weight: 600; color: var(--ink-2); }

/* figure: title spans the plate, tools sit on the eyebrow row; upright tabular numerals; legend inside the plate */
.nf-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; }
.nf-titles { display: contents; }
.nf-k { grid-column: 1; grid-row: 1; }
.nf-actions { grid-column: 2; grid-row: 1; margin: -6px -6px -6px 0; }
.nf-title { grid-column: 1 / -1; grid-row: 2; }
.nf-legend { margin-top: 10px; gap: 6px 18px; font-size: var(--fs-small); }
.sw-fo { border-top: 2.5px solid var(--success); position: relative; }
.sw-rep { border-top: 2px dashed var(--ink-3); }
.sw-null { width: 0; height: 14px; border-top: 0; border-left: 1.5px dashed var(--ink-3); vertical-align: -2px; }
.nf-svg .nf-h { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .06em; fill: var(--ink-2); }
.nf-svg .nf-tick { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; font-variant-numeric: tabular-nums; fill: var(--ink-2); }
.nf-svg .nf-tick.is-null { font-weight: 600; fill: var(--ink); }
.nf-svg .nf-est { font-family: var(--font-sans); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; fill: var(--ink); }
.nf-svg .nf-val { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; font-variant-numeric: tabular-nums; fill: var(--ink-3); }
.nf-svg .nf-axt { font-size: 12px; font-weight: 500; fill: var(--ink-2); }
.nf-svg .nf-dir { font-size: 12px; }
.nf-src rect { fill: var(--success-tint); stroke: var(--success-line); stroke-width: 1; }
.nf-svg .nf-src-t { font-family: var(--font-mono); font-size: 11px; font-weight: 500; fill: var(--success); }
.nf-row.is-rep .nf-src rect { fill: var(--success-tint); }
.nf-ci.is-rep, .nf-cap.is-rep { stroke: var(--ink-3); stroke-width: 1.75; stroke-dasharray: 5 4; }
.nf-pt.is-rep { fill: var(--raised); stroke: var(--ink-3); stroke-width: 1.75; }
.nf-row.is-hot .nf-src rect { fill: rgba(15,123,108,.2); }
.nf-row.is-hot .nf-lab { fill: var(--success); }

/* evidence rail */
.ev-meter { gap: 8px; }
.ev-seg { margin: -2px -4px; padding: 6px 4px 4px; width: calc(100% + 8px); border-radius: 8px; transition: background var(--d-2), color var(--d-2); }
.ev-seg:hover, .ev-seg.is-hot, .ev-seg.is-xhot { background: rgba(20,20,19,.04); }
.ev-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ev-seg.is-sel { background: var(--success-tint); color: var(--ink); }
.ev-seg b { font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; }
.is-gap > .ev-seg i { box-sizing: border-box; background: transparent; box-shadow: none; border: 1.5px dashed var(--brand-orange); }
.is-gap > .ev-seg:hover i, .is-gap > .ev-seg.is-hot i { box-shadow: 0 0 0 3px var(--warning-tint); }
.is-gap > .ev-seg.is-sel { background: var(--warning-tint); }
.ev-pass ol { gap: 10px; }
.ev-row { cursor: pointer; padding: 14px 14px 10px 14px; box-shadow: 0 0 0 1px rgba(20,20,19,.07), 0 1px 2px rgba(20,20,19,.04); border-radius: 12px; }
.ev-row:hover { box-shadow: 0 0 0 1px rgba(20,20,19,.12), 0 6px 16px -8px rgba(20,20,19,.16); }
.ev-row::before { display: none; }
.ev-row.is-gap { background: var(--surface); box-shadow: 0 0 0 1px var(--warning-line); }
.ev-row.is-hot, .ev-row.is-xhot, .ev-row.is-sel { box-shadow: 0 0 0 2px var(--success), 0 6px 16px -8px rgba(15,123,108,.3); }
.ev-row.is-gap.is-hot, .ev-row.is-gap.is-xhot, .ev-row.is-gap.is-sel { box-shadow: 0 0 0 2px var(--brand-orange), 0 6px 16px -8px rgba(225,145,54,.3); }
.ev-row-top { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "c t" ". r"; align-items: center; column-gap: 10px; row-gap: 2px; }
.ev-row-top .cite { grid-area: c; }
.ev-row-top b { grid-area: t; white-space: normal; overflow: visible; line-height: 1.35; font-size: var(--fs-ui); }
.ev-ref { grid-area: r; margin-left: 0; font-size: 12px; color: var(--ink-3); white-space: normal; }
.ev-quote { margin-top: 10px; padding: 1px 0 1px 12px; border-left: 2px solid var(--success-line); color: var(--ink); }
.ev-row.is-gap .ev-quote { border-left-color: var(--warning-line); }
.ev-row.is-hot mark.hl, .ev-row.is-xhot mark.hl, .ev-row.is-sel mark.hl { background-size: 100% 72%; }
.ev-row-foot { margin-top: 8px; }

/* the Research parent in the sidebar while a study or a source is open */
.side-link.is-parent { color: var(--ink); font-weight: 600; }
.side-link.is-parent svg { color: var(--accent); }

@media (max-width: 1360px) { .wb-title { font-size: 26px; } }
@media (max-width: 1100px) {
  .wb-dock::before { height: 24px; }
}
@media (max-width: 640px) {
  .wb-title { font-size: 24px; line-height: 1.3; }
  .wb-title-t { line-height: 1.3; }
  .wb-meta { flex-wrap: wrap; overflow: visible; row-gap: 6px; padding-left: 0; }
  .wb-meta .wb-meta-figs { display: none; }
  .wb-tabs { position: relative; top: auto; }
  .wb-ctx-open { margin-right: -6px; padding: 0 10px 0 14px; border-left: 1px solid var(--hairline) !important; border-radius: 0; color: var(--ink-2); font-weight: 500; }
  .wb-ctx-open svg { color: var(--success); }
  .wb-ask:not(.is-round) .wb-ask-q { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: var(--fs-ui); line-height: 1.5; }
  .wb-plan-btn { width: 100%; min-height: 46px; margin-left: 0; padding: 0 12px; border-radius: 12px; background: var(--sunken); }
  .wb-plan-pips { display: inline-flex; gap: 4px; margin-left: auto; }
  .wb-plan-pips i { width: 6px; height: 6px; border-radius: 50%; background: var(--hairline-strong); }
  .wb-plan-pips i.done { background: var(--success); }
  .wb-plan-pips i.active { background: var(--accent); }
  .wb-plan-sum { margin-left: 8px; font-size: var(--fs-small); color: var(--ink-2); }
  .wb-claim { font-size: 20px; line-height: 1.32; }
  .wb-answer > .nf { margin: 18px 0 0; padding: 14px 14px 10px; border-radius: var(--r-lg); box-shadow: 0 0 0 1px rgba(20,20,19,.07), 0 1px 2px rgba(20,20,19,.04); }
  .nf-actions .btn .nf-btn-l { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .nf-actions .btn { width: auto; padding: 0 10px; min-height: 44px; }
  .nf-actions .icon-btn { width: 44px; height: 44px; }
  .msg-next-row { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; overflow: visible; -webkit-mask: none; mask: none; }
  .msg-next-row .chip { width: 100%; min-height: 44px; font-size: var(--fs-ui); }
  button.cite::before { background: var(--success-tint); box-shadow: inset 0 0 0 1px var(--success-line); }
  .wb button.cite:not(.gap), .rd button.cite:not(.gap) { background: transparent; box-shadow: none; }
  .wb-dock { padding-top: 6px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .wb-body { padding-bottom: 32px; scroll-padding-bottom: 96px; }
  .msg-head .badge-warning { height: 26px; }
}

.msg-gap.gap-note { flex-direction: column; align-items: flex-start; gap: 6px; }
@media (max-width: 640px) {
  /* citation chips: the visible chip stays chip-sized and sits on the baseline; the 44px target is an invisible halo around it */
  button.cite, button.cite.gap, .msg-detail .cite, .wb-finding .cite { position: relative; z-index: 0; min-width: 26px; height: 20px; margin: 0 1px 0 2px; padding: 0 6px; vertical-align: 1px; }
  button.cite::before, button.cite.gap::before { left: -9px; right: -9px; top: -12px; bottom: -12px; background: transparent; box-shadow: none; border-radius: 0; }
  .wb button.cite:not(.gap), .rd button.cite:not(.gap) { background: var(--success-tint); box-shadow: inset 0 0 0 1px var(--success-line); }
  .wb button.cite.gap, .rd button.cite.gap { background: var(--warning-tint); box-shadow: inset 0 0 0 1px var(--warning-line); }
  .nf-legend { gap: 4px 14px; font-size: 12px; }
  .nf-legend .sw { width: 14px; }
}


/* ================================================================ AUDIT-FIX B · READER
   Ledger reader__desktop/phone: unclipped back link, breadcrumb study › document, reading progress on the reader bar's edge (no second
   gradient line), one selection idiom for sources and outline, the cited section as an evidence block with the record's own figure,
   a marker-style highlight distinct from text selection, identity and status clusters in the header, Inter H2s on one ramp, a flat
   margin note under a record card, a structured provenance strip, and on phones a bar that hides the app header while reading down. */
.rd-back { min-height: 36px; }
.rd-back span { font-size: var(--fs-ui); line-height: 1.4; padding-block: .1em .14em; }
.rd-top { position: sticky; }
.rd-progress { position: absolute; left: 0; right: 0; top: auto; bottom: -1px; height: 2px; z-index: 1; }
.rd-progress span { background: var(--accent); }
.rd-fmt button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.rd-fmt button svg { width: 15px; height: 15px; }
.rd-grid { grid-template-columns: 216px minmax(0, 640px) 248px; column-gap: 44px; }
.rd-src { padding: 9px 10px 9px 12px; }
.rd-src[aria-current="page"] { background: rgba(20,20,19,.045); box-shadow: inset 2px 0 0 var(--accent); }
.rd-src-t span { white-space: normal; }
.rd-toc a.has-cite::after { content: attr(data-cite-id); width: auto; height: 18px; padding: 0 5px; border-radius: 5px; display: inline-grid; place-items: center; background: var(--success-tint); box-shadow: inset 0 0 0 1px var(--success-line); color: var(--success); font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1; }
.rd-toc a.has-cite.is-gap::after { background: var(--warning-tint); box-shadow: inset 0 0 0 1px var(--warning-line); color: var(--warning); }
.rd-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; font-size: var(--fs-small); color: var(--ink-2); }
.rd-id, .rd-status { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.rd-id .rd-ref { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-small); color: var(--ink); letter-spacing: 0; }
.rd-sep { color: var(--ink-4); }
.rd-ix, .rd-acc { display: inline-flex; align-items: center; gap: 6px; }
.rd-facts .rd-ref { margin-left: 0; }
.rd-h { font-family: var(--font-sans); font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; margin-bottom: 10px; }
.rd-sec { padding-top: 36px; }
.rd-sec.is-evidence { position: relative; margin-top: 12px; padding: 22px 0 6px 20px; }
.rd-sec.is-evidence::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--success-line); }
.rd-sec.is-evidence .rd-h::after { content: "Cited"; margin-left: 10px; padding: 2px 7px; border-radius: 5px; background: var(--success-tint); color: var(--success); font-size: 12px; font-weight: 600; vertical-align: 3px; letter-spacing: 0; }
.rd-doc mark.hl { padding: 0 2px; margin: 0 -2px; border-radius: 2px; background-position: 0 92%; }
.rd-doc mark.hl.is-on { background-size: 100% 46%; }
.rd-doc mark.hl:hover { --hl: rgba(15,123,108,.22); cursor: pointer; }
.hl-tag.cite { height: 18px; min-width: 24px; padding: 0 5px; font-size: 11px; vertical-align: .3em; margin-left: 4px; }
.rd-fig { margin-top: 18px; }
.rd-fig .nf { margin: 0; box-shadow: 0 0 0 1px rgba(20,20,19,.07), 0 1px 2px rgba(20,20,19,.04); }
.rd-fig-note { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.rd-fig-note svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.rd-end { display: flex; flex-direction: column; gap: 2px; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--hairline); color: var(--ink-2); line-height: 1.5; }
.rd-end-a { display: inline-flex; align-items: center; gap: 8px; }
.rd-end-a svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.rd-end b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.rd-end-b { padding-left: 23px; }
.rd-next { padding: 14px 16px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(20,20,19,.08), 0 1px 2px rgba(20,20,19,.04); transition: box-shadow var(--d-3) var(--ease-out), transform var(--d-1) var(--ease-press), background var(--d-2); }
.rd-next:hover { box-shadow: 0 0 0 1px rgba(20,20,19,.12), 0 8px 20px -10px rgba(20,20,19,.2); }
.rd-next:active { transform: scale(.985); background: var(--sunken); }
.rd-next-k { display: flex; justify-content: space-between; gap: 12px; }
.rd-next-n { font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--ink-3); }
.rd-facts-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--raised); box-shadow: 0 0 0 1px rgba(20,20,19,.07); }
.rd-facts-card .rd-note-k { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.rd-facts-card .rail-dl { gap: 6px; }
.rd-note { padding: 14px 16px 10px; border-radius: 12px; box-shadow: 0 0 0 1px rgba(20,20,19,.08), 0 1px 2px rgba(20,20,19,.04); }
.rd-note::before { display: none; }
.rd-note.is-gap { box-shadow: 0 0 0 1px var(--warning-line); }
.rd-note-k { font-size: 12px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
.rd-note-claim { position: relative; padding-left: 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.rd-note-claim::before { content: "“"; position: absolute; left: -2px; top: -6px; font-family: var(--font-display, Goodly), serif; font-size: 28px; line-height: 1; color: var(--success); opacity: .55; }
.rd-fab-go { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 44px; padding: 0 2px 0 8px; font-size: var(--fs-small); font-weight: 600; color: var(--accent-ink); }
.rd-fab-go .rd-fab-chev { color: var(--accent-ink); }
.rd-fab > svg:first-child { color: var(--success); }
@media (max-width: 1380px) { .rd-grid { grid-template-columns: minmax(0, 640px) 248px; column-gap: 52px; } }
@media (max-width: 1180px) { .rd-grid { column-gap: 40px; grid-template-columns: minmax(0, 1fr) 232px; } }
@media (max-width: 1024px) {
  .rd-grid { grid-template-columns: minmax(0, 1fr); }
  .rd-page .rd-dock::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; background: linear-gradient(rgba(250,249,245,0), rgba(250,249,245,.95)); pointer-events: none; }
  .rd-page .rd-dock { --dock-bg: var(--raised); }
}
@media (max-width: 640px) {
  .rd-top { min-height: 56px; padding: 6px var(--gutter); gap: 8px; transition: transform var(--d-3) var(--ease-out); }
  .rd-page .app-top { transition: transform var(--d-3) var(--ease-out); }
  html.rd-hide-top .rd-page .app-top { transform: translateY(-100%); }
  html.rd-hide-top .rd-top { transform: translateY(calc(var(--topbar-h) * -1)); }
  .rd-back { width: 44px; min-height: 44px; margin-left: -12px; }
  .rd-srcsel .select-trigger { min-height: 44px; box-shadow: none; background: transparent; border-color: var(--hairline-strong); }
  .rd-fmt button { min-height: 44px; padding: 0 10px; }
  .rd-fmt button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rd-fmt button svg { width: 18px; height: 18px; }
  .rd-facts { flex-direction: column; align-items: flex-start; gap: 10px; }
  .rd-id .rd-ref { font-size: 14px; }
  .rd-h { font-size: 19px; line-height: 1.35; margin-bottom: 10px; }
  .rd-sec { padding-top: 34px; }
  .rd-sec.is-evidence { padding: 20px 0 4px 16px; }
  .rd-p + .rd-p { margin-top: 16px; }
  .hl-tag.cite { height: 18px; min-width: 24px; margin: 0 0 0 4px; padding: 0 5px; vertical-align: .3em; background: var(--success-tint); box-shadow: inset 0 0 0 1px var(--success-line); }
  .hl-tag.cite::before { left: -10px; right: -10px; top: -13px; bottom: -13px; background: transparent; box-shadow: none; }
  .rd-end { margin-top: 32px; }
  .rd-end-b { padding-left: 23px; }
  .rd-next { padding: 14px 16px; }
  .rd-fab { min-height: 52px; }
}
.nf-k { min-width: 0; }
.nf-k > span:not(.nf-unit) { flex: none; white-space: nowrap; }


/* ================================================================ AUDIT-FIX B · DEMO
   Ledger demo__desktop/phone: a compact two-column hero so plotted evidence reaches the first screen; the stage band desaturated toward
   paper and feathered (no hard edge); the window's panes end in a fade with room to scroll (no glyphs cut by the frame); a closed window
   card on phones on the page's 20px rail; S1 selected at rest; a lifted switch thumb; the closing form with a visible label, top-aligned
   columns and a clean link row. */
.demo-head { padding: calc(var(--nav-h) + 24px) 0 28px; }
.demo-head-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-areas: "k k" "h l"; align-items: end; column-gap: 56px; }
.demo-kicker { grid-area: k; }
.demo-head .t-display { grid-area: h; line-height: 1.1; padding-bottom: .04em; }
.demo-lede { grid-area: l; margin-top: 0; padding-bottom: 8px; max-width: 46ch; }
.demo-stage { padding-top: 28px; }
.demo-stage.atmo-canvas > .field { -webkit-mask: linear-gradient(#000 0, #000 62%, transparent); mask: linear-gradient(#000 0, #000 62%, transparent); }
.demo-stage.atmo-canvas > .field .veil { background: linear-gradient(180deg, rgba(250,249,245,.34), rgba(250,249,245,.5) 60%, rgba(250,249,245,.7)); }
.demo-window { box-shadow: 0 2px 6px rgba(5,15,40,.14), 0 50px 100px -44px rgba(5,15,40,.5), 0 0 0 1px rgba(20,20,19,.08); }
@media (min-width: 1101px) { .demo-frame { height: clamp(680px, calc(100dvh - 92px), 880px); } }
.demo-wb .wb-scroll, .demo-wb .wb-ctx-body { -webkit-mask: linear-gradient(#000 calc(100% - 44px), transparent); mask: linear-gradient(#000 calc(100% - 44px), transparent); }
.demo-wb .wb-body { padding-bottom: 72px; }
.demo-wb .ctx-pad { padding-bottom: 64px; }
.demo-hint { font-size: var(--fs-small); color: var(--ink-2); }
.demo-hint::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 14a8 8 0 0 1-8 8'/%3E%3Cpath d='M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2'/%3E%3Cpath d='M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1'/%3E%3Cpath d='M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10'/%3E%3Cpath d='M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 14a8 8 0 0 1-8 8'/%3E%3Cpath d='M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2'/%3E%3Cpath d='M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1'/%3E%3Cpath d='M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10'/%3E%3Cpath d='M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/%3E%3C/svg%3E") center / contain no-repeat; }
.demo-switch { padding: 3px; }
.demo-switch a { min-width: 140px; }
.demo-switch a[aria-current="true"] { box-shadow: 0 1px 2px rgba(20,20,19,.1), 0 0 0 1px rgba(20,20,19,.1); font-weight: 600; }
.demo-wb .wb-claim { font-size: 22px; }
.demo-close { padding: 80px 0 80px; }
.demo-close-in { align-items: start; column-gap: 80px; }
.demo-close-in .t-title { max-width: 13ch; }
.demo-ask-form { flex-wrap: wrap; padding: 6px 6px 6px 20px; }
.demo-ask-l { flex: 1 0 100%; padding: 8px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.demo-ask-form textarea { padding-top: 2px; }
.demo-close-note { display: flex; flex-direction: column; gap: 6px; margin-top: -4px; }
.demo-close-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.demo-close-links .link { display: inline-flex; align-items: center; min-height: 32px; font-size: var(--fs-ui); font-weight: 500; }
@media (max-width: 1100px) {
  .demo-wb .wb-scroll, .demo-wb .wb-ctx-body { -webkit-mask: none; mask: none; }
  .demo-wb .wb-body { padding-bottom: 28px; }
}
@media (max-width: 860px) { .demo-head-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "k" "h" "l"; } .demo-lede { margin-top: 14px; } }
@media (max-width: 760px) {
  .demo-head { padding: calc(var(--nav-h) + 16px) 0 18px; }
  .demo-head .t-display { line-height: 1.14; }
  .demo-lede { display: block; margin-top: 12px; padding-bottom: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--ink-2); max-width: 34ch; }
  .demo-stage { padding-top: 0; }
  .demo-stage.atmo-canvas > .field { height: 200px; -webkit-mask: linear-gradient(#000 0, #000 35%, transparent); mask: linear-gradient(#000 0, #000 35%, transparent); }
  .demo-stage-in { padding: 16px var(--gutter) 0; }
  .demo-window { border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 2px 6px rgba(5,15,40,.12), 0 0 0 1px rgba(20,20,19,.1); }
  .demo-frame { padding-bottom: 12px; }
  .demo-wb { --gutter: 16px; }
  .demo-wb .wb-title-chev { display: none; }
  .demo-wb .wb-study-btn { pointer-events: none; }
  .demo-close { padding: 36px 0 48px; }
  .demo-close-in { padding-top: 32px; border-top: 1px solid var(--hairline); }
  .demo-ask-form { padding: 10px; }
  .demo-ask-l { padding: 2px 4px 0; }
  .demo-ask-form textarea { min-height: 52px; padding: 12px 14px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
  .demo-ask-form textarea:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 3px rgba(20,20,19,.1); }
  .demo-close-links .link { min-height: 44px; }
}

@media (max-width: 1100px) { .wb-scroll { flex: 0 0 auto; } }
@media (min-width: 761px) { .demo-switch a { min-width: 140px; } }
@media (max-width: 760px) { .demo-switch a { min-width: 0; } }
@media (max-width: 640px) {
  .demo-wb .wb-tabs { top: auto; }
  .wb-meta { column-gap: 14px; }
  .wb-meta > span + span::before { display: none; }
}
@media (max-width: 760px) { .demo-wb .wb-ctx-open { width: 44px; padding: 0; justify-content: center; } .demo-wb .wb-ctx-open span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

/* audit-fix B · late pass: a visible splitter grip; the catalogue heading spans the page so grid and viewer share one top; one matted
   well for every preview (dark captures included); renderer meta wraps on phones instead of being cut; a single chevron on the title. */
.wb-handle::after { content: ""; position: absolute; top: 50%; left: 2px; width: 5px; height: 32px; margin-top: -16px; border-radius: 3px; background: var(--hairline-strong); transition: background var(--d-2); }
.wb-handle:hover::after, .wb-handle:focus-visible::after, .wb.is-resizing .wb-handle::after { background: var(--accent); }
.fg-atlas > .atlas-colhead { padding-top: 26px; }
.fg-atlas > .atlas-legend { margin-top: 2px; }
.fg-atlas .atlas-grid { padding-top: 16px; }
.fg-card .fg-thumb { padding: 8px; background: #f5f3ed; }
.fg-card .fg-thumb img { border-radius: 8px; background: #fffefa; box-shadow: 0 0 0 1px rgba(20,20,19,.06); }
.fg-card .fg-thumb.is-live { padding: 0; }
.wb-title-chev { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .fg-atlas > .atlas-colhead { padding-top: 22px; }
  .fg-card .gal-item-l { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; }
}
.rd-fig .nf-k .nf-unit { display: none; }

/* audit-fix B · 44px targets on phones without changing what is drawn: the element is the target, its visible chip is a pseudo layer,
   and negative margins keep the line box the height of the text */
.wb-gap-chip { height: auto; margin: 0; padding: 0; background: none; box-shadow: none; }
.wb-gap-chip:hover { background: none; }
.wb-gap-in { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 7px; border-radius: var(--r-pill); background: var(--warning-tint); box-shadow: inset 0 0 0 1px var(--warning-line); transition: background var(--d-2); }
.wb-gap-chip:hover .wb-gap-in { background: rgba(225,145,54,.22); }
@media (max-width: 640px) {
  .wb-gap-chip { height: 44px; margin: -10px 0; }
  button.cite, button.cite.gap, .msg-detail .cite, .wb-finding .cite, .hl-tag.cite { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; margin: -12px -8px -12px -6px; padding: 0 9px; vertical-align: middle; background: transparent !important; box-shadow: none !important; }
  button.cite::before, button.cite.gap::before, .hl-tag.cite::before { content: ""; position: absolute; z-index: -1; left: 8px; right: 8px; top: 12px; bottom: 12px; border-radius: 6px; background: var(--success-tint); box-shadow: inset 0 0 0 1px var(--success-line); }
  button.cite.gap::before, .hl-tag.cite.gap::before { background: var(--warning-tint); box-shadow: inset 0 0 0 1px var(--warning-line); }
  .hl-tag.cite { vertical-align: middle; margin-left: -4px; }
  .hl-tag.cite::before { top: 13px; bottom: 13px; }
  .rd-fmt button { min-width: 44px; justify-content: center; }
  .fg-page .gal-prov .select-trigger, .fg-page .gal-fieldsel .select-trigger { min-height: 44px; }
}
.fg-card .gal-item-l { white-space: normal; overflow: visible; text-overflow: clip; }
.wb .cite:not(.gap), .cite-pop .cite:not(.gap), .demo-hint .cite, .rd .cite:not(.gap), .rd-sheet .cite:not(.gap), .nf-svg .nf-src-t { color: #0a5c51; fill: #0a5c51; }
.fg-thumb.is-live.is-gap .fg-live-dot { background: var(--brand-orange); box-shadow: 0 0 0 3px var(--warning-tint); }