/* ui-src/styles/tokens-web.css. The browser app's mapping for --sb-ui-*: it owns its palette (there is no host theme
   to read), light by default and dark with the system, unless the user picked one (:root[data-theme]). Bundled
   with ui.css and the shell sheet into app.css by build-web.mjs.
   Spec 013 ledger 11: four neutral steps (bg, raised, hairline, muted), flat near-black dark, no gradients or blur.
   Ledger 6: --sb-ui-accent is the one accent. Scales (ledger 1, 13): space 4/8/12/16/24/40, radius 6/12/20,
   type 15 body / 13 small / 24 page title (the scale and the fonts live in src/home/type.css, shared with the plugins). */

:root {
  color-scheme: light;
  --sb-ui-bg: #ffffff;
  --sb-ui-bg-side: #f7f7f6;
  --sb-ui-control: #f7f7f6;
  --sb-ui-text: #19191a;
  --sb-ui-muted: #66666b;
  --sb-ui-faint: #9a9aa0;
  --sb-ui-line: #e7e7e5;
  --sb-ui-hover: #f0f0ee;
  --sb-ui-accent: #0f766e;
  --sb-ui-accent-tint: rgba(15, 118, 110, 0.1);
  --sb-ui-on-accent: #ffffff;
  --sb-ui-danger: #c9372c;
  --sb-ui-ok: #2b8a3e;
  --sb-ui-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  --sb-ui-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sb-ui-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sb-ui-bg: #0f0f10;
    --sb-ui-bg-side: #161618;
    --sb-ui-control: #1c1c1f;
    --sb-ui-text: #ececee;
    --sb-ui-muted: #9a9aa2;
    --sb-ui-faint: #6c6c74;
    --sb-ui-line: #26262a;
    --sb-ui-hover: #1d1d20;
    --sb-ui-accent: #3dc2b2;
    --sb-ui-accent-tint: rgba(61, 194, 178, 0.14);
    --sb-ui-on-accent: #07201d;
    --sb-ui-danger: #ff6b64;
    --sb-ui-ok: #5fd873;
    --sb-ui-shadow: none;
  }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --sb-ui-bg: #0f0f10;
    --sb-ui-bg-side: #161618;
    --sb-ui-control: #1c1c1f;
    --sb-ui-text: #ececee;
    --sb-ui-muted: #9a9aa2;
    --sb-ui-faint: #6c6c74;
    --sb-ui-line: #26262a;
    --sb-ui-hover: #1d1d20;
    --sb-ui-accent: #3dc2b2;
    --sb-ui-accent-tint: rgba(61, 194, 178, 0.14);
    --sb-ui-on-accent: #07201d;
    --sb-ui-danger: #ff6b64;
    --sb-ui-ok: #5fd873;
    --sb-ui-shadow: none;
}

/* ui-src/src/home/type.css. The fonts and the spacing, radius and type scale every Second Brain page shares: the web app
   (after tokens-web.css) and the plugins' Home (content/home/sb-home.css in Zotero, injected in Obsidian). No colour.
   Fraunces for headings, Inter for the interface (both SIL OFL, bundled). The -ext files hold accented Latin and load
   only when a page uses it. */
@font-face { font-family: "Fraunces"; src: url("fraunces.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fraunces"; src: url("fraunces-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fraunces"; src: url("fraunces-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fraunces"; src: url("fraunces-italic-ext.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Inter"; src: url("inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; src: url("inter-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --sbw-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sbw-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sbw-s1: 4px; --sbw-s2: 8px; --sbw-s3: 12px; --sbw-s4: 16px; --sbw-s5: 24px; --sbw-s6: 40px;
  --sbw-r1: 6px; --sbw-r2: 12px; --sbw-r3: 20px;
  --sbw-t-body: 15px; --sbw-t-small: 13px; --sbw-t-title: 24px;
}

/* ui-src/styles/ui.css. Component styles for the shared UI, written only against --sb-ui-* tokens (spec 005
   §3) — never a host theme variable or a color literal directly (the check-2 grep test enforces this). Each
   host supplies its own mapping in tokens-zotero.css / tokens-obsidian.css. Fixed in this sheet, not mapped:
   type 13 / 11.5 / 20 px, radii 6 / 10 / 18 / 999 px, spacing 4 / 8 / 12 / 16 px, icons 16 px / 1.5 px stroke. */

.sb-p-icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: var(--sb-ui-text);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sb-p-icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: var(--sb-ui-bg);
  border-radius: 6px;
  border: 1px solid var(--sb-ui-line);
}

.sb-p-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  font-family: var(--sb-ui-font);
  font-size: 13px;
}

.sb-p-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--sb-ui-line);
  background: var(--sb-ui-control);
  color: var(--sb-ui-text);
  font: inherit;
  cursor: pointer;
}

.sb-p-pill .sb-p-icon { stroke: var(--sb-ui-muted); }

.sb-p-pill.is-on {
  background: var(--sb-ui-accent);
  color: var(--sb-ui-on-accent);
  border-color: var(--sb-ui-accent);
}

.sb-p-pill.is-on .sb-p-icon { stroke: var(--sb-ui-on-accent); }

.sb-p-pill:hover { background: var(--sb-ui-hover); }
.sb-p-pill.is-on:hover { background: var(--sb-ui-accent); }

.sb-p-demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--sb-ui-bg);
  color: var(--sb-ui-text);
  font-family: var(--sb-ui-font);
}

/* ---------- artifacts (spec 007 E3): result cards, the side panel, the table and its card-list form ----------
   Sizes as everywhere: text 13 / 11.5 px; corners 6 / 10 / 999 px; spacing 4 / 8 / 12 / 16 px. Obsidian gives every
   button and input a fill, a shadow and a fixed height, so the quiet ones here are scoped under .sb-ai to win. */

.sb-ai-head { position: relative; }
.sb-ai .sb-ai-artifacts-button { border: 1px solid var(--sb-ui-line); border-radius: 999px; background: transparent; color: var(--sb-ui-text);
	font: inherit; font-size: 11.5px; padding: 2px 10px; height: auto; min-height: 0; box-shadow: none; cursor: pointer; }
.sb-ai .sb-ai-artifacts-button:hover { background: var(--sb-ui-hover); }
.sb-ai-making { margin-top: 6px; color: var(--sb-ui-muted); font-size: 11.5px; }

/* the card under an answer (Elicit 9.21.56) */
.sb-art-cards:empty { display: none; }
.sb-art-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.sb-art-card { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--sb-ui-line); border-radius: 10px;
	background: color-mix(in srgb, var(--sb-ui-accent) 6%, var(--sb-ui-bg)); cursor: pointer; min-width: 0; }
.sb-art-card:hover, .sb-art-card:focus-visible { border-color: color-mix(in srgb, var(--sb-ui-accent) 45%, var(--sb-ui-line)); outline: none; }
.sb-art-card-thumb { flex: none; width: 44px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 6px;
	border: 1px solid var(--sb-ui-line); background: var(--sb-ui-bg); color: var(--sb-ui-accent); }
.sb-art-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-art-card-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-art-card-meta { font-size: 11.5px; color: var(--sb-ui-muted); }
.sb-art-card.is-older .sb-art-card-meta { color: var(--sb-ui-faint); }
.sb-art-card-acts { flex: none; display: flex; gap: 2px; opacity: 0; }
.sb-art-card:hover .sb-art-card-acts, .sb-art-card:focus-within .sb-art-card-acts { opacity: 1; }
@media (hover: none) { .sb-art-card-acts { opacity: 1; } }
.sb-ai .sb-art-card-act, .sb-ai .sb-art-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-height: 0;
	padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--sb-ui-muted); box-shadow: none; cursor: pointer; }
.sb-ai .sb-art-card-act:hover, .sb-ai .sb-art-iconbtn:hover { background: var(--sb-ui-hover); color: var(--sb-ui-text); }
.sb-ai .sb-art-iconbtn.is-on { color: var(--sb-ui-accent); }

/* where the panel goes: beside the thread from 960 px, over it from 560, full view below (chat.js applyArtifactLayout) */
.sb-ai-artifact { flex: none; box-sizing: border-box; min-width: 0; display: flex; border-inline-start: 1px solid var(--sb-ui-line); background: var(--sb-ui-bg); position: relative; }
.sb-ai-artifact-handle { flex: none; width: 8px; margin-inline: -4px; cursor: col-resize; position: relative; z-index: 2; touch-action: none; }
.sb-ai-artifact-handle:hover, .sb-ai-artifact-handle.is-dragging, .sb-ai-artifact-handle:focus-visible {
	background: color-mix(in srgb, var(--sb-ui-accent) 35%, transparent); outline: none; }
.sb-ai.is-art-cover .sb-ai-artifact, .sb-ai.is-art-full .sb-ai-artifact, .sb-ai.is-art-expanded .sb-ai-artifact { flex: 1; border-inline-start: none; }
.sb-ai.is-art-cover .sb-ai-artifact-handle, .sb-ai.is-art-full .sb-ai-artifact-handle, .sb-ai.is-art-expanded .sb-ai-artifact-handle { display: none; }
.sb-ai.is-art-cover .sb-ai-main, .sb-ai.is-art-full .sb-ai-main, .sb-ai.is-art-expanded .sb-ai-main,
.sb-ai.is-art-cover .sb-ai-side, .sb-ai.is-art-full .sb-ai-side { display: none; }

.sb-art { flex: 1; min-width: 0; display: flex; flex-direction: row; position: relative; font-family: var(--sb-ui-font); font-size: 13px; color: var(--sb-ui-text); }
.sb-art [hidden] { display: none !important; }
.sb-art-head { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--sb-ui-line); min-width: 0; }
.sb-art-head-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 600; }
.sb-art-head-title .sb-ai-icon { color: var(--sb-ui-muted); }
.sb-art-head-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-ai .sb-art-back, .sb-ai .sb-art-version, .sb-ai .sb-art-sort, .sb-ai .sb-art-tool { display: inline-flex; align-items: center; gap: 4px; height: auto; min-height: 0; box-shadow: none;
	border-radius: 6px; background: transparent; color: var(--sb-ui-text); font: inherit; font-size: 12px; cursor: pointer; }
.sb-ai .sb-art-back { padding: 4px 8px 4px 4px; border: none; color: var(--sb-ui-muted); }
.sb-ai .sb-art-version { padding: 2px 6px 2px 8px; border: 1px solid var(--sb-ui-line); }
.sb-ai .sb-art-version.is-old { border-color: var(--sb-ui-accent); }
.sb-ai .sb-art-sort, .sb-ai .sb-art-tool { padding: 4px 8px; border: 1px solid var(--sb-ui-line); }
.sb-ai .sb-art-tool.is-on { border-color: var(--sb-ui-accent); }
.sb-art-tool-count { min-width: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; text-align: center; font-size: 11.5px; background: color-mix(in srgb, var(--sb-ui-accent) 18%, transparent); }
.sb-ai .sb-art-back:hover, .sb-ai .sb-art-version:hover, .sb-ai .sb-art-sort:hover, .sb-ai .sb-art-tool:hover { background: var(--sb-ui-hover); }
.sb-art-version .sb-ai-icon, .sb-art-sort .sb-ai-icon, .sb-art-tool .sb-ai-icon { width: 12px; height: 12px; }
.sb-art-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; font-size: 12px;
	background: color-mix(in srgb, var(--sb-ui-accent) 10%, var(--sb-ui-bg)); border-bottom: 1px solid var(--sb-ui-line); }
.sb-art-banner-text { flex: 1 1 200px; min-width: 0; }
.sb-ai .sb-art-banner-btn { border: 1px solid var(--sb-ui-line); border-radius: 999px; background: transparent; color: var(--sb-ui-text); font: inherit; font-size: 12px;
	padding: 2px 10px; height: auto; min-height: 0; box-shadow: none; cursor: pointer; }
.sb-ai .sb-art-banner-btn.is-primary { border-color: var(--sb-ui-accent); background: color-mix(in srgb, var(--sb-ui-accent) 18%, transparent); font-weight: 600; }
.sb-ai .sb-art-banner-btn:disabled { opacity: .5; cursor: default; }
/* spec 007 E8: the wait on unclear papers. Buttons carry long text and Obsidian's default button style is nowrap. */
.sb-ai .sb-art-banner.is-gate .sb-art-banner-btn { white-space: normal; text-align: left; max-width: 100%; }
.sb-art-gate { margin-top: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.sb-art-gate-why { font-size: 11px; color: var(--sb-ui-muted); overflow-wrap: anywhere; }
.sb-ai .sb-art-gate-toggle { border: 1px solid var(--sb-ui-line); border-radius: 999px; background: transparent; color: var(--sb-ui-text); font: inherit; font-size: 12px;
	padding: 2px 10px; height: auto; min-height: 0; box-shadow: none; cursor: pointer; white-space: normal; text-align: left; max-width: 100%; }
.sb-ai .sb-art-gate-toggle:not(.is-out) { border-color: var(--sb-ui-accent); background: color-mix(in srgb, var(--sb-ui-accent) 14%, transparent); }
.sb-ai .sb-art-gate-toggle.is-out { color: var(--sb-ui-muted); text-decoration: line-through; }
.sb-art-row.is-gate-out .sb-art-td:not(.is-first), .sb-art-rowcard.is-gate-out .sb-art-field { opacity: .55; }

.sb-art-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 12px; min-width: 0; }
.sb-art-search { flex: 1 1 96px; max-width: 260px; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px 8px;
	border: 1px solid var(--sb-ui-line); border-radius: 6px; color: var(--sb-ui-muted); }
.sb-art-search:focus-within { border-color: var(--sb-ui-accent); }
.sb-ai .sb-art-search-input { flex: 1; min-width: 0; height: auto; padding: 0; border: none; box-shadow: none; background: transparent; color: var(--sb-ui-text); font: inherit; outline: none; }
.sb-art-ticks { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; font-size: 11.5px; color: var(--sb-ui-muted); }
.sb-ai .sb-art-clear { border: none; background: transparent; padding: 0; height: auto; min-height: 0; box-shadow: none; color: var(--sb-ui-accent); font: inherit; cursor: pointer; }

.sb-art-body { flex: 1; min-height: 0; overflow: auto; }
.sb-art-empty { padding: 24px 16px; color: var(--sb-ui-muted); line-height: 1.45; }
.sb-art-loading { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

/* the table: first column and header row stay put while the rest scrolls */
.sb-art-table { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.sb-art-th { position: sticky; top: 0; z-index: 2; box-sizing: border-box; min-width: 240px; padding: 8px 12px; text-align: start; font-weight: 600; font-size: 12px;
	background: var(--sb-ui-bg-side); border-bottom: 1px solid var(--sb-ui-line); border-inline-end: 1px solid var(--sb-ui-line); white-space: nowrap; }
.sb-art-th.is-first { left: 0; z-index: 3; min-width: 280px; }
.sb-art-th-label { margin-inline-start: 8px; }
.sb-art-td { box-sizing: border-box; min-width: 240px; max-width: 360px; padding: 12px; vertical-align: top; line-height: 1.5; background: var(--sb-ui-bg);
	border-bottom: 1px solid var(--sb-ui-line); border-inline-end: 1px solid var(--sb-ui-line); overflow-wrap: anywhere; }
.sb-art-td.is-first { position: sticky; left: 0; z-index: 1; min-width: 280px; max-width: 320px; }
.sb-art-row.is-ticked .sb-art-td { background: color-mix(in srgb, var(--sb-ui-accent) 8%, var(--sb-ui-bg)); }
/* spec 011 U4: rows a routine added in this version. Ticked wins, so the highlight never hides a selection. */
.sb-art-row-new .sb-art-td { background: color-mix(in srgb, var(--sb-ui-accent) 6%, var(--sb-ui-bg)); }
.sb-art-row-new .sb-art-td.is-first { box-shadow: inset 3px 0 0 var(--sb-ui-accent); }
.sb-art-row.is-ticked.sb-art-row-new .sb-art-td { background: color-mix(in srgb, var(--sb-ui-accent) 8%, var(--sb-ui-bg)); }
.sb-art-first { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.sb-art-tick { flex: none; margin: 3px 0 0; }
.sb-art-label { font-weight: 600; line-height: 1.4; min-width: 0; }
.sb-art-paper { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sb-art-title { font-weight: 600; line-height: 1.35; color: var(--sb-ui-text); cursor: pointer; text-decoration: none; }
.sb-art-title:hover { text-decoration: underline; }
.sb-art-meta { font-size: 11.5px; color: var(--sb-ui-muted); }
.sb-art-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 2px; }
.sb-art-tag { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--sb-ui-line); color: var(--sb-ui-muted); }
.sb-art-tag.is-library { border-color: var(--sb-ui-accent); color: var(--sb-ui-text); }
.sb-art-doi { font-size: 11.5px; color: var(--sb-ui-accent); cursor: pointer; }
.sb-art-doi:hover { text-decoration: underline; }

/* cells: words first, then quiet grey chips */
.sb-art-value { white-space: pre-wrap; }
.sb-art-note { color: var(--sb-ui-muted); font-style: italic; }
.sb-art-fail { color: var(--sb-ui-danger); }
.sb-ai .sb-art-chip { display: inline-flex; align-items: baseline; gap: 4px; max-width: 100%; height: auto; min-height: 0; box-shadow: none; border: none; border-radius: 6px;
	padding: 0 6px; background: var(--sb-ui-hover); color: var(--sb-ui-muted); font: inherit; font-size: 11.5px; line-height: 1.6; cursor: pointer; vertical-align: baseline; }
.sb-ai .sb-art-chip:hover { color: var(--sb-ui-text); }
.sb-art-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-art-chip-more { color: var(--sb-ui-faint); }

/* pending cells: grey bars (Elicit 9.23.35) */
.sb-art-skel { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.sb-art-skel-bar { display: block; height: 8px; max-width: 100%; border-radius: 4px; background: var(--sb-ui-line); }
@media (prefers-reduced-motion: no-preference) {
	.sb-art-skel-bar { background: linear-gradient(90deg, var(--sb-ui-line) 0%, var(--sb-ui-hover) 50%, var(--sb-ui-line) 100%); background-size: 200% 100%;
		animation: sb-ai-shimmer 2.5s ease-in-out infinite; }
}

/* below 560 px: one card per row, each column a label and a value */
.sb-art-cardlist { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.sb-art-rowcard { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 12px; border: 1px solid var(--sb-ui-line); border-radius: 10px; overflow-wrap: anywhere; }
.sb-art-rowcard.sb-art-row-new { background: color-mix(in srgb, var(--sb-ui-accent) 6%, var(--sb-ui-bg)); border-inline-start: 3px solid var(--sb-ui-accent); }
.sb-art-rowcard.is-ticked { background: color-mix(in srgb, var(--sb-ui-accent) 8%, var(--sb-ui-bg)); }
.sb-art-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.5; }
.sb-art-field-label { font-size: 11.5px; font-weight: 600; color: var(--sb-ui-muted); }

/* menus and the chip popover */
.sb-art-pop { position: absolute; z-index: 10; box-sizing: border-box; min-width: 200px; max-height: 60%; overflow: auto; padding: 4px; border: 1px solid var(--sb-ui-line);
	border-radius: 10px; background: var(--sb-ui-bg); color: var(--sb-ui-text); font-size: 13px; box-shadow: 0 4px 16px color-mix(in srgb, var(--sb-ui-text) 16%, transparent); }
/* The Artifacts list hangs from the header bar, so 60% of its container would be a sliver: size it to the window. */
.sb-art-pop.sb-art-listmenu { max-height: min(60vh, 420px); }
.sb-art-pop-head { padding: 4px 8px; font-size: 11.5px; color: var(--sb-ui-muted); }
.sb-ai .sb-art-item { display: flex; align-items: center; justify-content: flex-start; text-align: start; gap: 8px; width: 100%; box-sizing: border-box; padding: 6px 8px; height: auto; min-height: 0; box-shadow: none; border: none;
	border-radius: 6px; background: transparent; color: var(--sb-ui-text); font: inherit; text-align: start; cursor: pointer; }
/* a menu row grows with its two lines whatever the host's <button> rule says (Obsidian pins the height of every button; Zotero caps it at 25px) */
.sb-art-pop .sb-art-item { height: auto !important; min-height: 0 !important; max-height: none !important; flex: none; line-height: 1.35; }
.sb-ai .sb-art-item:hover:not(:disabled) { background: var(--sb-ui-hover); }
.sb-ai .sb-art-item.is-selected { background: color-mix(in srgb, var(--sb-ui-accent) 14%, transparent); }
.sb-ai .sb-art-item:disabled { opacity: .45; cursor: default; }
.sb-art-item .sb-ai-icon { color: var(--sb-ui-muted); }
.sb-art-item-text { display: flex; flex-direction: column; min-width: 0; }
.sb-art-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-art-item-hint { font-size: 11.5px; color: var(--sb-ui-muted); }
.sb-art-evidence { width: 340px; }
.sb-art-ev { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.sb-art-ev + .sb-art-ev { border-top: 1px solid var(--sb-ui-line); }
.sb-art-ev-head { display: flex; align-items: center; gap: 8px; }
.sb-art-ev-name { flex: 1; min-width: 0; font-weight: 600; }
.sb-ai .sb-art-ev-open { border: 1px solid var(--sb-ui-line); border-radius: 999px; background: transparent; color: var(--sb-ui-text); font: inherit; font-size: 11.5px;
	padding: 1px 10px; height: auto; min-height: 0; box-shadow: none; cursor: pointer; }
.sb-ai .sb-art-ev-open:hover { background: var(--sb-ui-hover); }
.sb-art-ev-quote { margin: 0; padding-inline-start: 8px; border-inline-start: 2px solid var(--sb-ui-line); line-height: 1.45; }
.sb-art-ev-meta { display: flex; gap: 8px; font-size: 11.5px; color: var(--sb-ui-muted); }
.sb-art-unverified { color: var(--sb-ui-danger); font-weight: 600; }

/* a GitHub table in an answer (renderMarkdown): scrolls inside the answer, never widens the page */
.sb-ai-md table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 12.5px; margin: 4px 0; }
.sb-ai-md th, .sb-ai-md td { border: 1px solid var(--sb-ui-line); padding: 4px 8px; text-align: start; vertical-align: top; }
.sb-ai-md th { background: var(--sb-ui-bg-side); font-weight: 600; }

/* E4: the progress line, the "Stopped" banner, filter chips, "Keep these N" */
.sb-art-runbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 12px 0; font-size: 12px;
	background: color-mix(in srgb, var(--sb-ui-accent) 10%, var(--sb-ui-bg)); border-bottom: 1px solid var(--sb-ui-line); }
.sb-art-runbar.is-stopped { padding-bottom: 8px; }
.sb-art-runtext { flex: 1 1 160px; min-width: 0; }
.sb-art-runtrack { flex: 1 0 100%; height: 3px; margin: 0 -12px; background: var(--sb-ui-line); }
.sb-art-runfill { display: block; height: 100%; background: var(--sb-ui-accent); }
.sb-art-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 0 12px 8px; min-width: 0; }
.sb-art-fchip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 1px 2px 1px 8px; border: 1px solid var(--sb-ui-line); border-radius: 999px; font-size: 11.5px; color: var(--sb-ui-text); }
.sb-art-fchip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-ai .sb-art-fchip-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; min-height: 0; padding: 0; border: none; box-shadow: none;
	border-radius: 999px; background: transparent; color: var(--sb-ui-muted); cursor: pointer; }
.sb-ai .sb-art-fchip-x:hover { background: var(--sb-ui-hover); color: var(--sb-ui-text); }
.sb-art-fchip-x .sb-ai-icon { width: 10px; height: 10px; }
.sb-ai .sb-art-keep { margin-inline-start: auto; border: 1px solid var(--sb-ui-accent); border-radius: 999px; background: color-mix(in srgb, var(--sb-ui-accent) 14%, transparent); color: var(--sb-ui-text);
	font: inherit; font-size: 12px; font-weight: 600; padding: 2px 12px; height: auto; min-height: 0; box-shadow: none; cursor: pointer; }
.sb-ai .sb-art-keep:disabled { opacity: .5; cursor: default; }

/* cells while and after filling: a dashed underline where no quote checked out, a small retry, the chip's mark */
.sb-art-value.is-unverified { text-decoration: underline dashed; text-decoration-color: var(--sb-ui-muted); text-underline-offset: 3px; }
.sb-art-chip-unverified { color: var(--sb-ui-danger); font-weight: 600; }
.sb-ai .sb-art-retry { border: none; background: transparent; padding: 0; height: auto; min-height: 0; box-shadow: none; color: var(--sb-ui-accent); font: inherit; font-size: 11.5px; cursor: pointer; }
.sb-ai .sb-art-retry:hover { text-decoration: underline; }

/* the sheet Filters and Columns become below 560 px */
.sb-art-sheet { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; min-width: 0; background: var(--sb-ui-bg); color: var(--sb-ui-text); font-size: 13px; }
.sb-art-sheet-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--sb-ui-line); }
.sb-art-sheet-title { font-weight: 600; }
.sb-art-sheet-body { flex: 1; min-height: 0; overflow: auto; padding: 12px; box-sizing: border-box; }
.sb-col-pop, .sb-flt-pop { width: 340px; max-height: 70%; padding: 12px; }

/* Columns panel (Elicit 9.22.23) */
.sb-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sb-col-label { font-weight: 600; }
.sb-col-help { margin-top: 2px; font-size: 11.5px; line-height: 1.45; color: var(--sb-ui-muted); }
.sb-col-note { font-size: 12px; color: var(--sb-ui-muted); line-height: 1.45; }
.sb-ai .sb-col-input, .sb-ai .sb-flt-input { box-sizing: border-box; width: 100%; height: auto; padding: 6px 8px; border: 1px solid var(--sb-ui-line); border-radius: 6px; box-shadow: none;
	background: transparent; color: var(--sb-ui-text); font: inherit; outline: none; }
.sb-ai .sb-col-input { margin-top: 8px; }
.sb-ai .sb-col-input:focus, .sb-ai .sb-flt-input:focus { border-color: var(--sb-ui-accent); }
.sb-col-head { margin-bottom: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sb-ui-muted); }
.sb-ai .sb-col-row { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 6px 4px; height: auto; min-height: 0; border: none; box-shadow: none;
	border-radius: 6px; background: transparent; color: var(--sb-ui-text); font: inherit; text-align: start; cursor: pointer; }
.sb-ai .sb-col-row:hover { background: var(--sb-ui-hover); }
.sb-ai .sb-col-row.is-create { margin-top: 4px; color: var(--sb-ui-accent); }
.sb-col-row .sb-ai-icon { color: var(--sb-ui-muted); }
.sb-col-row-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-col-item { display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 6px; }
.sb-col-item.is-dragging { opacity: .5; }
.sb-col-item:hover { background: var(--sb-ui-hover); }
.sb-col-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-ai .sb-col-grip, .sb-ai .sb-col-x { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; min-height: 0; padding: 0; border: none; box-shadow: none;
	border-radius: 6px; background: transparent; color: var(--sb-ui-muted); cursor: pointer; }
.sb-ai .sb-col-grip { cursor: grab; }
.sb-ai .sb-col-x:hover { background: var(--sb-ui-hover); color: var(--sb-ui-text); }
.sb-col-grip .sb-ai-icon, .sb-col-x .sb-ai-icon { width: 12px; height: 12px; }
.sb-col-staged { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.sb-col-staged .sb-col-head { flex: 1 0 100%; margin-bottom: 0; }
.sb-col-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 1px 2px 1px 8px; border: 1px solid var(--sb-ui-accent); border-radius: 999px;
	background: color-mix(in srgb, var(--sb-ui-accent) 10%, transparent); }
.sb-col-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-col-foot { position: sticky; bottom: -12px; margin: 0 -12px -12px; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; background: var(--sb-ui-bg); border-top: 1px solid var(--sb-ui-line); }
.sb-col-confirm { line-height: 1.45; }
.sb-col-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-ai .sb-col-btn, .sb-ai .sb-flt-btn { border: 1px solid var(--sb-ui-line); border-radius: 999px; background: transparent; color: var(--sb-ui-text); font: inherit; font-size: 12px;
	padding: 3px 12px; height: auto; min-height: 0; box-shadow: none; cursor: pointer; }
.sb-ai .sb-col-btn:hover:not(:disabled), .sb-ai .sb-flt-btn:hover { background: var(--sb-ui-hover); }
.sb-ai .sb-col-btn.is-primary, .sb-ai .sb-flt-btn.is-primary { border-color: var(--sb-ui-accent); background: color-mix(in srgb, var(--sb-ui-accent) 18%, transparent); font-weight: 600; }
.sb-ai .sb-col-btn:disabled { opacity: .5; cursor: default; }

/* Filters popover (Elicit 9.22.31) */
.sb-flt { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sb-flt-head { position: sticky; top: -12px; z-index: 1; display: flex; justify-content: flex-end; gap: 8px; margin: -12px -12px 0; padding: 12px 12px 0; background: var(--sb-ui-bg); }
.sb-flt-sec { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--sb-ui-line); min-width: 0; }
.sb-flt-title { font-weight: 600; }
.sb-flt-sub { font-size: 11.5px; color: var(--sb-ui-muted); }
.sb-flt-check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.sb-flt-years { display: flex; gap: 8px; }
.sb-flt-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-flt-add { display: flex; gap: 8px; min-width: 0; }
.sb-flt-words { display: flex; flex-wrap: wrap; gap: 4px; }
.sb-flt-word { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px 0 8px; border: 1px solid var(--sb-ui-line); border-radius: 999px; font-size: 11.5px; }
.sb-ai .sb-flt-word-x { border: none; background: transparent; box-shadow: none; padding: 0 4px; height: auto; min-height: 0; color: var(--sb-ui-muted); font: inherit; cursor: pointer; }

/* ---------- Chat with papers (spec 007 §6, E5): a tab beside the set, a column when the set is expanded ---------- */
.sb-art-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-art-set { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.sb-art-tabs { display: flex; gap: 4px; padding: 6px 12px 0; border-bottom: 1px solid var(--sb-ui-line); min-width: 0; }
.sb-ai .sb-art-tab { height: auto; min-height: 0; box-shadow: none; padding: 6px 10px; margin-bottom: -1px; border: none; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0;
	background: transparent; color: var(--sb-ui-muted); font: inherit; font-size: 12px; cursor: pointer; }
.sb-ai .sb-art-tab:hover { color: var(--sb-ui-text); background: var(--sb-ui-hover); }
.sb-ai .sb-art-tab.is-on { color: var(--sb-ui-text); font-weight: 600; border-bottom-color: var(--sb-ui-accent); }
.sb-art-chatpane { flex: 1; min-height: 0; min-width: 0; display: flex; }
.sb-art-chatcol { flex: none; width: 400px; max-width: 45%; min-width: 0; display: flex; border-inline-start: 1px solid var(--sb-ui-line); }
.sb-pc { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; font-size: 13px; }
.sb-pc-head { display: none; padding: 10px 16px; border-bottom: 1px solid var(--sb-ui-line); font-weight: 600; }
.sb-pc.is-column .sb-pc-head { display: block; }
.sb-pc-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.sb-pc-threads { display: flex; flex-direction: column; }
.sb-pc-thread { display: flex; flex-direction: column; gap: 14px; padding: 16px; min-width: 0; }
.sb-pc-empty { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; min-width: 0; }
.sb-pc-empty-icon { width: 24px; height: 24px; stroke-width: 1.25; color: var(--sb-ui-accent); }
.sb-pc-empty-title { font-size: 16px; font-weight: 700; }
.sb-pc-empty-text { color: var(--sb-ui-muted); line-height: 1.45; }
.sb-pc-pills { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
.sb-ai .sb-pc-pill { justify-content: flex-start; text-align: start; white-space: normal; }
.sb-ai .sb-pc-pill > span { white-space: normal; }
.sb-ai-user-on { margin-top: 2px; font-size: 11.5px; color: var(--sb-ui-muted); }
.sb-pc-composer { flex: none; padding: 0 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.sb-pc-box { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 12px; border: 1px solid var(--sb-ui-line); border-radius: 14px; background: var(--sb-ui-bg); }
.sb-pc-box:focus-within { border-color: var(--sb-ui-accent); }
.sb-ai .sb-pc-input { flex: 1; min-width: 0; resize: none; border: none; box-shadow: none; outline: none; background: transparent; color: var(--sb-ui-text); font: inherit; padding: 4px 0; height: auto; min-height: 0; }
.sb-pc-scope { display: flex; align-items: center; gap: 8px; padding: 0 4px; font-size: 11.5px; color: var(--sb-ui-muted); min-width: 0; }
.sb-pc-scope-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-ai .sb-pc-scope-toggle { border: none; background: transparent; padding: 0; height: auto; min-height: 0; box-shadow: none; color: var(--sb-ui-accent); font: inherit; cursor: pointer; }
.sb-pc-actions { margin-top: 2px; }
.sb-ai .sb-pc-make { border: 1px solid var(--sb-ui-line); border-radius: 999px; background: transparent; color: var(--sb-ui-muted); font: inherit; font-size: 11.5px; padding: 2px 10px;
	height: auto; min-height: 0; box-shadow: none; cursor: pointer; }
.sb-ai .sb-pc-make:hover { background: var(--sb-ui-hover); color: var(--sb-ui-text); }
.sb-ai .sb-ai-error-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sb-ai .sb-ai-error-use { border: 1px solid var(--sb-ui-line); border-radius: 999px; background: transparent; color: var(--sb-ui-text); font: inherit; font-size: 12px; padding: 3px 12px;
	height: auto; min-height: 0; box-shadow: none; cursor: pointer; white-space: normal; text-align: left; }
.sb-ai .sb-ai-error-use:hover { background: var(--sb-ui-hover); }
.sb-ai .sb-ai-error-use[disabled] { opacity: 0.5; cursor: default; }
.sb-ai .sb-ai-error-none { color: var(--sb-ui-muted); font-size: 12px; }
.sb-art .sb-pc [hidden] { display: none !important; }

/* spec 007 E6: the grouped mode menu, the "On: ..." chip, "+ Add step", the picker, session cards and history marks.
   Written against --sb-ui-* only. Quiet buttons carry the extra .sb-ai class so Obsidian's button styling stays out. */
.sb-ai .sb-ai-modepick optgroup { font-style: normal; font-weight: 600; color: var(--sb-ui-faint); font-size: 11px; }
.sb-ai .sb-ai-modepick option { font-weight: 400; color: var(--sb-ui-text); }
.sb-ai-current[hidden] { display: none; }
.sb-ai-current { display: flex; flex-wrap: wrap; gap: 4px; }
.sb-ai-on { border-color: var(--sb-ui-accent); }
.sb-ai-on > .sb-ai-icon { color: var(--sb-ui-accent); }
.sb-addstep { position: relative; align-self: flex-start; }
.sb-ai .sb-addstep-btn { display: inline-flex; align-items: center; gap: 6px; height: auto; box-shadow: none; font: inherit; font-size: 11.5px;
	padding: 3px 10px 3px 8px; border-radius: 999px; cursor: pointer; border: 1px dashed var(--sb-ui-line); background: transparent; color: var(--sb-ui-muted); }
.sb-ai .sb-addstep-btn:hover { color: var(--sb-ui-text); background: var(--sb-ui-hover); }
.sb-addstep-btn > .sb-ai-icon { width: 12px; height: 12px; }
.sb-addstep-menu { min-width: 220px; max-height: none; overflow: visible; }

.sb-ai-selcard { flex: 0 0 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
	padding: 10px 12px; border-radius: 10px; border: 1px solid var(--sb-ui-line); }
.sb-ai-selcard-title { font-weight: 600; min-width: 0; }
.sb-ai-selcard-row { display: flex; flex-wrap: wrap; gap: 6px; }
/* Obsidian's button style is white-space: nowrap and Zotero caps a <button> at 25px; a label must wrap, never clip */
.sb-ai .sb-ai-selbtn { height: auto; max-height: none; white-space: normal; box-shadow: none; font: inherit; font-size: 12.5px; padding: 4px 12px;
	border-radius: 999px; cursor: pointer; color: var(--sb-ui-text); background: transparent; border: 1px solid var(--sb-ui-line); }
.sb-ai .sb-ai-selbtn:hover:not(:disabled) { background: var(--sb-ui-hover); }
.sb-ai .sb-ai-selbtn:disabled { opacity: 0.5; cursor: default; }
.sb-ai-cardrow { flex: 0 0 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.sb-ai .sb-ai-card { display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 10px; min-width: 0; max-width: 100%; box-sizing: border-box;
	height: auto; min-height: 84px; padding: 12px; border-radius: 10px; text-align: start; font: inherit; color: var(--sb-ui-text); cursor: pointer;
	border: 1px solid var(--sb-ui-line); background: transparent; box-shadow: none;
	/* Obsidian's button style is white-space: nowrap; a long title must wrap inside its card, never run into the next one */
	white-space: normal; overflow: hidden; }
.sb-ai .sb-ai-card:hover { background: var(--sb-ui-hover); }
.sb-ai-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.sb-ai-card-meta { display: flex; align-items: center; justify-content: flex-start; gap: 6px; min-width: 0; font-size: 11.5px; color: var(--sb-ui-muted); }
.sb-ai-card-meta > .sb-ai-icon { width: 12px; height: 12px; color: var(--sb-ui-accent); }
.sb-ai-card-when { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-ai-card-count, .sb-ai-conv-count { flex: none; margin-inline-start: auto; font-size: 10.5px; line-height: 1; padding: 2px 6px; border-radius: 999px;
	border: 1px solid var(--sb-ui-line); color: var(--sb-ui-muted); font-variant-numeric: tabular-nums; }
.sb-ai-conv.is-selected .sb-ai-conv-count { border-color: currentColor; color: inherit; }
.sb-ai-conv-routine { flex: none; width: 12px; height: 12px; margin-inline-start: auto; color: var(--sb-ui-faint); }
.sb-ai-conv-dot { display: none; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--sb-ui-accent); }
.sb-ai-conv.is-running .sb-ai-conv-dot { display: inline-block; }
.sb-ai-conv.is-selected .sb-ai-conv-dot { background: var(--sb-ui-on-accent); }
.sb-ai-pick { gap: 8px; }
.sb-ai-pick-list { display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 460px; margin-top: 8px; }
.sb-ai .sb-ai-pick-row { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; height: auto; box-shadow: none; text-align: start; font: inherit;
	color: var(--sb-ui-text); cursor: pointer; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--sb-ui-line); background: transparent; }
.sb-ai .sb-ai-pick-row:hover { background: var(--sb-ui-hover); }
.sb-ai-pick-row > .sb-ai-icon { color: var(--sb-ui-accent); }
.sb-ai-pick-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-ai-pick-hint { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--sb-ui-muted); }
.sb-ai-pick-detail { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; max-width: 460px; }
.sb-ai-pick-detail:empty, .sb-ai-pick-note:empty { display: none; }
.sb-ai-pick-note { font-size: 11.5px; color: var(--sb-ui-muted); }

/* Citations and links in answers read as clickable in both hosts: the theme's accent colour (Zotero's accent, Obsidian's
   interactive accent), underline on hover. Unresolved ones stay red (chat.js), pending ones stay muted. */
.sb-md .cite:not(.is-pending):not(.missing) { color: var(--sb-ui-accent); cursor: pointer; }
.sb-md .cite:not(.is-pending):not(.missing):hover { text-decoration: underline; text-underline-offset: 2px; }
.sb-md a { color: var(--sb-ui-accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* Math: KaTeX's MathML output, drawn natively by Gecko and Chromium. */
.sb-math math { font-size: 1.05em; font-family: "STIX Two Math", "Latin Modern Math", "Cambria Math", math; }
.sb-math-block { display: block; margin: 8px 0; overflow-x: auto; text-align: center; }
.sb-math-block math { display: block math; }
.sb-math.is-raw { font-family: var(--sb-ui-mono, monospace); font-size: 0.92em; }

/* ---------- panels (spec 005 D1): sections, rows, the search bar, the paper header, the status panel ----------
   Drawn to spec §4: text first; row actions and field outlines appear on hover or focus; one primary button; one line
   of status. Every rule is scoped under .sb-p, the class each host puts on a panel's root, so these beat Obsidian's
   own button / input rules (a fill, a shadow, a fixed height, white-space: nowrap) and Zotero's XHTML defaults.
   Type 13 / 11.5 / 20 px; radii 6 (rows), 10 (chips), 999 (pills); spacing 4 / 8 / 12 / 16 px. */

.sb-p { box-sizing: border-box; min-width: 0; font-family: var(--sb-ui-font); font-size: 13px; line-height: 1.4; color: var(--sb-ui-text); background: var(--sb-ui-bg); }
.sb-p *, .sb-p *::before, .sb-p *::after { box-sizing: border-box; }
.sb-p [hidden] { display: none !important; }

/* buttons: quiet text by default, one primary per card */
.sb-p .sb-p-btn, .sb-p .sb-p-tab, .sb-p .sb-p-linkbtn, .sb-p .sb-p-pop-item, .sb-p .sb-p-more, .sb-p .sb-p-section-toggle, .sb-p .sb-p-chip {
	font: inherit; height: auto; min-height: 0; box-shadow: none; white-space: normal; text-align: start; justify-content: flex-start; cursor: pointer; }
.sb-p .sb-p-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid transparent; border-radius: 6px;
	background: transparent; color: var(--sb-ui-muted); font-size: 12px; }
.sb-p .sb-p-btn:hover { background: var(--sb-ui-hover); color: var(--sb-ui-text); }
.sb-p .sb-p-btn.is-primary { background: var(--sb-ui-accent); color: var(--sb-ui-on-accent); font-weight: 500; padding: 4px 12px; }
.sb-p .sb-p-btn.is-primary:hover { background: var(--sb-ui-accent); filter: brightness(1.08); }
.sb-p .sb-p-btn.is-danger { color: var(--sb-ui-danger); }
.sb-p .sb-p-btn:disabled { opacity: .55; cursor: default; }
.sb-p .sb-p-btn .sb-p-icon { stroke: currentColor; }
.sb-p .sb-p-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; min-height: 0; padding: 0; border: none;
	border-radius: 6px; background: transparent; box-shadow: none; color: var(--sb-ui-muted); cursor: pointer; flex: none; }
.sb-p .sb-p-iconbtn:hover { background: var(--sb-ui-hover); color: var(--sb-ui-text); }
.sb-p .sb-p-iconbtn .sb-p-icon { stroke: currentColor; }
.sb-p .sb-p-btn:focus-visible, .sb-p .sb-p-iconbtn:focus-visible, .sb-p .sb-p-tab:focus-visible, .sb-p .sb-p-pill:focus-visible, .sb-p .sb-p-more:focus-visible,
.sb-p .sb-p-section-toggle:focus-visible, .sb-p .sb-p-row:focus-visible, .sb-p .sb-p-pop-item:focus-visible, .sb-p .sb-p-chip:focus-visible, .sb-p .sb-p-linkbtn:focus-visible {
	outline: 2px solid var(--sb-ui-accent); outline-offset: -1px; }
@media (hover: none), (pointer: coarse) { .sb-p .sb-p-iconbtn { width: 32px; height: 32px; } }

/* action groups show on hover or focus (always on a touch screen) */
.sb-p .sb-p-acts { display: inline-flex; align-items: center; gap: 2px; opacity: 0; flex: none; }
.sb-p .sb-p-row:hover .sb-p-acts, .sb-p .sb-p-row:focus-within .sb-p-acts,
.sb-p .sb-p-section-head:hover .sb-p-acts, .sb-p .sb-p-section-head:focus-within .sb-p-acts { opacity: 1; }
@media (hover: none) { .sb-p .sb-p-acts { opacity: 1; } }

/* the one status line: loading, error, empty */
.sb-p .sb-p-state { padding: 8px; color: var(--sb-ui-muted); font-size: 12px; overflow-wrap: anywhere; }
.sb-p .sb-p-state.is-error { color: var(--sb-ui-danger); }
.sb-p .sb-p-meta { color: var(--sb-ui-faint); font-size: 11.5px; overflow-wrap: anywhere; }

/* section */
.sb-p .sb-p-section { margin-bottom: 12px; }
.sb-p .sb-p-section-head { display: flex; align-items: center; gap: 4px; min-width: 0; }
.sb-p .sb-p-section-toggle { flex: 1; min-width: 0; box-sizing: border-box; margin: 0; display: flex; align-items: center; gap: 4px; padding: 4px; border: none; border-radius: 6px; background: transparent; color: var(--sb-ui-muted); }
.sb-p .sb-p-section-toggle:hover { color: var(--sb-ui-text); }
.sb-p .sb-p-section-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.sb-p .sb-p-count { color: var(--sb-ui-faint); font-size: 11.5px; font-weight: 400; margin-inline-start: 4px; }
.sb-p .sb-p-count:empty { display: none; }
.sb-p .sb-p-chevron { stroke: var(--sb-ui-faint); transition: transform .12s; }
.sb-p .sb-p-section.is-closed .sb-p-chevron { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .sb-p .sb-p-chevron { transition: none; } }

/* row */
.sb-p .sb-p-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border-radius: 6px; min-width: 0; }
.sb-p .sb-p-row.is-link { cursor: pointer; }
.sb-p .sb-p-row:hover, .sb-p .sb-p-row.is-selected { background: var(--sb-ui-hover); }
.sb-p .sb-p-row-main { flex: 1; min-width: 0; }
.sb-p .sb-p-row-side { flex: none; display: flex; align-items: center; gap: 4px; min-height: 20px; }
.sb-p .sb-p-row-title { display: flex; align-items: baseline; gap: 4px; min-width: 0; font-weight: 500; }
.sb-p .sb-p-row-icon { align-self: center; stroke: var(--sb-ui-faint); width: 14px; height: 14px; margin-inline-end: 2px; }
.sb-p .sb-p-row-text { min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sb-p .sb-p-row.is-link:hover .sb-p-row-text { color: var(--sb-ui-accent); }
.sb-p .sb-p-row-meta { color: var(--sb-ui-faint); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-p .sb-p-row-snippet { color: var(--sb-ui-muted); font-size: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sb-p .sb-p-badge { flex: none; font-size: 11.5px; line-height: 1.3; padding: 0 4px; border-radius: 4px; color: var(--sb-ui-muted); border: 1px solid var(--sb-ui-line); font-weight: 400; }
.sb-p .sb-p-passage { margin-top: 4px; padding: 4px 8px; border-radius: 6px; border-inline-start: 2px solid var(--sb-ui-line); }
.sb-p .sb-p-passage.is-link { cursor: pointer; }
.sb-p .sb-p-passage.is-link:hover { background: var(--sb-ui-hover); }
.sb-p .sb-p-passage-heading { color: var(--sb-ui-muted); font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-p .sb-p-score { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.sb-p .sb-p-score-bar { flex: none; width: 48px; height: 3px; border-radius: 2px; background: var(--sb-ui-line); overflow: hidden; }
.sb-p .sb-p-score-fill { display: block; height: 100%; border-radius: 2px; background: var(--sb-ui-accent); opacity: .75; }
.sb-p .sb-p-score-label { color: var(--sb-ui-faint); font-size: 11.5px; white-space: nowrap; }

/* tabs */
.sb-p .sb-p-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.sb-p .sb-p-tab { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--sb-ui-muted); }
.sb-p .sb-p-tab:hover { background: var(--sb-ui-hover); color: var(--sb-ui-text); }
.sb-p .sb-p-tab.is-on { background: var(--sb-ui-hover); color: var(--sb-ui-text); font-weight: 600; }

/* search bar: a plain line with an icon; the outline appears on hover or focus */
.sb-p .sb-p-searchbar { display: flex; flex-direction: column; gap: 8px; }
.sb-p .sb-p-searchbox { display: flex; align-items: center; gap: 8px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: var(--sb-ui-hover); }
.sb-p .sb-p-searchbox:hover { border-color: var(--sb-ui-line); }
.sb-p .sb-p-searchbox:focus-within { border-color: var(--sb-ui-accent); }
.sb-p .sb-p-searchbox .sb-p-icon { stroke: var(--sb-ui-faint); }
.sb-p .sb-p-input { flex: 1; min-width: 0; height: auto; padding: 8px 0; border: none; outline: none; box-shadow: none; background: transparent; color: var(--sb-ui-text); font: inherit; }
.sb-p .sb-p-input::placeholder { color: var(--sb-ui-faint); }
.sb-p .sb-p-pill-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; font-size: 12px; }
.sb-p .sb-p-pill { height: auto; min-height: 0; box-shadow: none; white-space: normal; padding: 4px 12px; font-size: 12px; }
.sb-p .sb-p-pill .sb-p-icon { width: 14px; height: 14px; }
.sb-p .sb-p-more { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--sb-ui-muted); font-size: 12px; }
.sb-p .sb-p-more:hover, .sb-p .sb-p-more.is-on { background: var(--sb-ui-hover); color: var(--sb-ui-text); }
.sb-p .sb-p-more .sb-p-icon { width: 12px; height: 12px; stroke: currentColor; }
.sb-p .sb-p-pop { position: absolute; z-index: 5; top: 100%; inset-inline-start: 0; margin-top: 4px; min-width: 180px; max-width: 100%; display: flex; flex-direction: column; padding: 4px;
	border: 1px solid var(--sb-ui-line); border-radius: 10px; background: var(--sb-ui-bg); box-shadow: 0 4px 16px color-mix(in srgb, var(--sb-ui-text) 18%, transparent); }
.sb-p .sb-p-pop-item { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: none; border-radius: 6px; background: transparent; color: var(--sb-ui-text); }
.sb-p .sb-p-pop-item:hover, .sb-p .sb-p-pop-item.is-selected { background: var(--sb-ui-hover); }
.sb-p .sb-p-pop-check { flex: none; width: 16px; height: 16px; }
.sb-p .sb-p-pop-check .sb-p-icon { stroke: var(--sb-ui-accent); }

/* the paper header */
.sb-p .sb-p-paper { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sb-p .sb-p-kicker { color: var(--sb-ui-accent); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.sb-p .sb-p-paper-title { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 650; overflow-wrap: anywhere; }
.sb-p .sb-p-authors { color: var(--sb-ui-text); overflow-wrap: anywhere; }
.sb-p .sb-p-linkbtn { display: inline; padding: 0; margin-inline-start: 4px; border: none; background: none; color: var(--sb-ui-accent); white-space: nowrap; }
.sb-p .sb-p-venue { color: var(--sb-ui-muted); }
.sb-p .sb-p-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sb-p .sb-p-chip { display: inline-block; padding: 0 8px; border: 1px solid var(--sb-ui-line); border-radius: 10px; background: transparent; color: var(--sb-ui-muted);
	font-family: var(--sb-ui-mono); font-size: 11.5px; text-decoration: none; overflow-wrap: anywhere; }
a.sb-p-chip, button.sb-p-chip { cursor: pointer; }
.sb-p .sb-p-chip.is-quiet { font-family: var(--sb-ui-font); }
.sb-p a.sb-p-chip:hover, .sb-p button.sb-p-chip:hover { color: var(--sb-ui-text); border-color: var(--sb-ui-accent); }
.sb-p .sb-p-paper-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--sb-ui-line); }

/* a highlight the user made */
.sb-p .sb-p-highlight { position: relative; padding: 8px 40px 8px 12px; margin-bottom: 8px; border-inline-start: 3px solid var(--sb-ui-hl, var(--sb-ui-accent)); border-radius: 0 6px 6px 0;
	background: color-mix(in srgb, var(--sb-ui-hl, var(--sb-ui-accent)) 10%, transparent); }
.sb-p .sb-p-highlight.is-underline .sb-p-highlight-text { text-decoration: underline; text-decoration-color: var(--sb-ui-hl, var(--sb-ui-accent)); }
.sb-p .sb-p-highlight-text { overflow-wrap: anywhere; }
.sb-p .sb-p-highlight-comment { margin-top: 4px; color: var(--sb-ui-muted); font-size: 12px; }
.sb-p .sb-p-highlight-page { position: absolute; top: 8px; inset-inline-end: 8px; color: var(--sb-ui-faint); font-size: 11.5px; }

/* progress and the status panel */
.sb-p .sb-p-progress { height: 6px; border-radius: 3px; background: var(--sb-ui-line); overflow: hidden; margin: 8px 0; }
.sb-p .sb-p-progress.is-small { height: 4px; margin: 0; flex: 1; }
.sb-p .sb-p-progress-fill { height: 100%; border-radius: inherit; background: var(--sb-ui-accent); transition: width .4s ease-out; }
.sb-p .sb-p-progress.is-indeterminate .sb-p-progress-fill { width: 30%; animation: sb-p-slide 1.4s ease-in-out infinite; }
@keyframes sb-p-slide { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.sb-p .sb-p-status { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sb-p .sb-p-status-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sb-p .sb-p-status-label { font-weight: 600; overflow-wrap: anywhere; }
.sb-p .sb-p-status.is-compact .sb-p-status-label { font-weight: 400; }
.sb-p .sb-p-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sb-ui-faint); }
.sb-p .sb-p-dot.is-running { background: var(--sb-ui-accent); animation: sb-p-pulse 1.6s ease-in-out infinite; }
.sb-p .sb-p-dot.is-idle { background: var(--sb-ui-ok); }
.sb-p .sb-p-dot.is-error { background: var(--sb-ui-danger); }
@keyframes sb-p-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
	.sb-p .sb-p-progress-fill { transition: none; }
	.sb-p .sb-p-progress.is-indeterminate .sb-p-progress-fill { animation: none; width: 100%; opacity: .4; }
	.sb-p .sb-p-dot.is-running { animation: none; }
}
.sb-p .sb-p-status-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 0; }
.sb-p .sb-p-coverage { margin: 8px 0; container-type: inline-size; }
.sb-p .sb-p-coverage-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 45%); gap: 12px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--sb-ui-line); }
.sb-p .sb-p-coverage-row.is-head { color: var(--sb-ui-muted); font-size: 11.5px; font-weight: 600; }
.sb-p .sb-p-coverage-name { overflow-wrap: anywhere; }
.sb-p .sb-p-coverage-cell { display: flex; align-items: center; gap: 8px; }
.sb-p .sb-p-num { font-variant-numeric: tabular-nums; color: var(--sb-ui-muted); text-align: end; min-width: 3.5em; }
/* by the pane's own width, not the window's: an Obsidian sidebar is narrow in a wide window */
@container (max-width: 420px) { .sb-p .sb-p-coverage-row { grid-template-columns: minmax(0, 1fr) auto; } .sb-p .sb-p-coverage-cell { grid-column: 1 / -1; } .sb-p .sb-p-coverage-row.is-head span:last-child { display: none; } }

/* the search panel (spec 005 D2) */
.sb-p.sb-p-search { display: flex; flex-direction: column; gap: 8px; min-height: 0; height: 100%; padding: 12px; }
.sb-p .sb-p-search-extra:empty, .sb-p .sb-p-search-footer:empty, .sb-p .sb-p-search-tools:empty { display: none; }
.sb-p .sb-p-search-statusrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-p .sb-p-search-statusrow .sb-p-state { padding: 0 8px; flex: 1; min-width: 0; }
.sb-p .sb-p-search-tools { flex: none; display: flex; gap: 4px; }
.sb-p .sb-p-results { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.sb-p .sb-p-search-footer { padding: 4px 0; }
.sb-p .sb-p-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 12px; color: var(--sb-ui-muted); }
.sb-p .sb-p-checks label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.sb-p .sb-p-checks .sb-p-btn { margin-inline-start: auto; }
.sb-p .sb-p-ok { color: var(--sb-ui-ok); }

/* item panes and reading pages (spec 005 D3) */
.sb-p.is-flat { background: transparent; }
.sb-p .sb-p-for { font-weight: 600; padding: 0 4px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-p .sb-p-subhead { color: var(--sb-ui-muted); font-size: 11.5px; font-weight: 600; margin: 8px 0 4px; }
.sb-p .sb-p-prose { overflow-wrap: anywhere; }
.sb-p .sb-p-note { padding: 8px 12px; margin-bottom: 8px; border-radius: 10px; background: var(--sb-ui-bg-side); overflow-wrap: anywhere; }
.sb-p .sb-p-note > :first-child { margin-top: 0; }
.sb-p .sb-p-note > :last-child { margin-bottom: 0; }
.sb-p .sb-p-para { margin: 0 0 8px; overflow-wrap: anywhere; }
.sb-p .sb-p-fulltext-head { margin: 12px 0 4px; font-size: 13px; font-weight: 600; }
.sb-p.sb-p-page { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
.sb-p.sb-p-page .sb-p-section { margin-top: 24px; margin-bottom: 0; }
.sb-p .sb-p-footer { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--sb-ui-line); display: flex; flex-direction: column; gap: 8px; }

/* duplicates and status views (spec 005 D4) */
.sb-p .sb-p-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb-p .sb-p-title { font-weight: 600; font-size: 13px; padding: 0 4px 8px; }
.sb-p .sb-p-head .sb-p-title { padding-bottom: 0; }
.sb-p.sb-p-wide { max-width: 900px; margin: 0 auto; padding: 12px; }
.sb-p .sb-p-tabs { margin: 8px 0; }
.sb-p .sb-p-group { border: 1px solid var(--sb-ui-line); border-radius: 10px; padding: 4px; margin-bottom: 8px; }
.sb-p .sb-p-group > .sb-p-meta { padding: 4px 8px 0; }
.sb-p .sb-p-callout { display: flex; align-items: center; gap: 12px; padding: 8px 12px; }
.sb-p .sb-p-callout-text { flex: 1; min-width: 0; }
.sb-p .sb-p-row-meta.is-wrap { white-space: normal; }
.sb-p .sb-p-removed { opacity: .35; text-decoration: line-through; pointer-events: none; }
.sb-p .sb-p-state { padding-inline: 4px; }

/* Depth slider (spec 011 U1): a three-stop range with its estimated cost beside it. */
.sb-ai-depth { width: 96px; }
.sb-ai-depth-label { color: var(--sb-ui-muted); font-size: 11.5px; white-space: nowrap; }

/* Sources view (spec 011 U2): each paper once, the quotes behind its cells under it. */
.sb-art-sources { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; }
.sb-art-source-title { all: unset; cursor: pointer; font-weight: 600; color: var(--sb-ui-text); }
.sb-art-source-title:hover { text-decoration: underline; }
.sb-art-source-quote { margin: 4px 0 0; color: var(--sb-ui-muted); }
.sb-art-source-quote.is-unverified { text-decoration: underline dashed; text-underline-offset: 3px; }
.sb-art-source-column, .sb-art-source-from { color: var(--sb-ui-faint); }

/* A follow-up under an answer (spec 011 U2): one quiet chip, not a button row. */
.sb-ai-followup { all: unset; cursor: pointer; margin: 6px 0 0; padding: 3px 10px; border: 1px solid var(--sb-ui-line); border-radius: 999px; color: var(--sb-ui-muted); font-size: 12px; }
.sb-ai-followup:hover { background: var(--sb-ui-hover); color: var(--sb-ui-text); }
.sb-ai-followup:focus-visible { outline: 2px solid var(--sb-ui-accent); outline-offset: 2px; }
.sb-ai-followup[disabled] { opacity: 0.5; cursor: default; }

/* spec 012 R4: the reading radar's digest. Hairlines and type, no boxes; the accent marks only the one primary action. */
.sb-dg-summary { padding: 10px 12px; font-size: 13px; color: var(--sb-ui-muted); border-bottom: 1px solid var(--sb-ui-line); }
.sb-dg-line { font-size: 13px; line-height: 1.45; color: var(--sb-ui-text); }
.sb-dg-line.is-muted { color: var(--sb-ui-muted); }
.sb-dg-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; margin-top: 4px; }
.sb-ai .sb-dg-act { display: inline-flex; align-items: center; width: auto; height: auto; min-height: 0; padding: 2px 0; margin: 0; border: none; border-radius: 6px; box-shadow: none; background: transparent;
	font: inherit; font-size: 12px; line-height: 1.4; color: var(--sb-ui-muted); white-space: nowrap; cursor: pointer; }
.sb-ai .sb-dg-act:hover:not(:disabled) { color: var(--sb-ui-text); text-decoration: underline; }
.sb-ai .sb-dg-act.is-primary { color: var(--sb-ui-accent); font-weight: 600; }
.sb-ai .sb-dg-act:disabled { opacity: .5; cursor: default; }
.sb-dg-state { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--sb-ui-muted); }
.sb-ai .sb-dg-act { gap: 5px; }
.sb-dg-act .sb-lucide, .sb-dg-act .sb-logo, .sb-dg-state svg { flex: none; width: 14px; height: 14px; }
.sb-lucide { flex: none; vertical-align: -2px; }
.sb-dg-act.is-icon svg { width: 16px; height: 16px; }
.sb-ai .sb-dg-act.is-icon { padding: 3px 4px; }
.sb-dg-act.is-icon .sb-dg-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sb-art-row.is-dismissed .sb-art-td, .sb-art-rowcard.is-dismissed { opacity: .55; }
.sb-art-row.is-dismissed .sb-art-title, .sb-art-rowcard.is-dismissed .sb-art-title { color: var(--sb-ui-muted); font-weight: 500; }
.sb-dg-toast { position: absolute; z-index: 12; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px);
	padding: 8px 14px; border-radius: 12px; background: var(--sb-ui-text); color: var(--sb-ui-bg); font-size: 13px; box-shadow: var(--sb-ui-shadow); }
.sb-ai .sb-dg-toast .sb-dg-act { color: var(--sb-ui-bg); font-weight: 600; font-size: 13px; text-decoration: underline; }
.sb-ai .sb-dg-toast .sb-dg-act:hover:not(:disabled) { color: var(--sb-ui-bg); opacity: .8; }
.sb-art-table.is-radar { width: 100%; }
.sb-art-table.is-radar .sb-art-td.is-first, .sb-art-table.is-radar .sb-art-th.is-first { max-width: none; border-inline-end: none; }

/* spec 015: the small ↗ beside a link (always the system browser) and the link menu */
.sb-link-menu { position: fixed; z-index: 1000; max-height: none; }
.sb-link-out { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 2px; padding: 0; vertical-align: -3px; border: 0; border-radius: 4px; background: transparent; color: var(--sb-ui-muted); cursor: pointer; opacity: 0; }
.sb-link-out .sb-ai-icon { width: 12px; height: 12px; }
:hover > .sb-link-out, .sb-link-out:focus-visible { opacity: 1; }
@media (hover: none) { .sb-link-out { opacity: .7; width: 24px; height: 24px; } }
.sb-link-out:hover { color: var(--sb-ui-text); background: var(--sb-ui-hover); }
/* ---------- Settings (spec 016 U2): sections on the left, plain rows on the right ----------
   One component for every app. It measures its own width (container query), so the same sheet serves a wide
   window, a narrow Zotero pane and the 360 px phone. Rows have no boxes: a label, one grey sentence, the control. */
.sbs { container-type: inline-size; min-height: 100%; font: 15px/1.45 var(--sb-ui-font); color: var(--sb-ui-text); background: var(--sb-ui-bg); }
.sbs-frame { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 100%; min-height: 100%; }
.sbs-side { box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 16px 12px; border-right: 1px solid var(--sb-ui-line); background: var(--sb-ui-bg-side); min-width: 0; }
.sbs-search { box-sizing: border-box; width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--sb-ui-line); border-radius: 8px; background: var(--sb-ui-bg); color: var(--sb-ui-text); font: inherit; font-size: 14px; }
.sbs-search::placeholder { color: var(--sb-ui-faint); }
.sbs-nav { display: flex; flex-direction: column; gap: 2px; }
.sbs-nav-item { display: flex; align-items: center; gap: 12px; box-sizing: border-box; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--sb-ui-text); font: inherit; text-align: left; cursor: pointer; white-space: nowrap; }
.sbs-nav-item:hover { background: var(--sb-ui-hover); }
.sbs-nav-item.is-active { background: var(--sb-ui-hover); color: var(--sb-ui-accent); font-weight: 500; }
.sbs-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sbs-pane { box-sizing: border-box; min-width: 0; padding: 24px 40px 40px; max-width: 760px; }
.sbs-group { margin: 0 0 32px; }
.sbs-title { margin: 0 0 8px; font-size: 20px; font-weight: 600; }
.sbs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 24px; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--sb-ui-line); }
.sbs-row.is-stacked { grid-template-columns: minmax(0, 1fr); }
.sbs-text { display: flex; flex-direction: column; min-width: 0; }
.sbs-label { font-size: 15px; }
.sbs-help { margin: 0; font-size: 13px; line-height: 1.4; color: var(--sb-ui-muted); }
.sbs-help.is-bad { color: var(--sb-ui-danger); }
.sbs-control { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; min-width: 0; }
.sbs-row.is-stacked .sbs-control { display: block; padding-top: 4px; }
.sbs-note { grid-column: 1 / -1; margin: 0; min-height: 0; font-size: 13px; color: var(--sb-ui-danger); }
.sbs-note:empty { display: none; }
.sbs-input, .sbs-select { box-sizing: border-box; height: 36px; max-width: 100%; padding: 0 12px; border: 1px solid var(--sb-ui-line); border-radius: 8px; background: var(--sb-ui-bg); color: var(--sb-ui-text); font: inherit; font-size: 14px; }
.sbs-input { width: 260px; }
.sbs-input.is-number { width: 96px; }
.sbs-input.is-wide { width: 100%; height: auto; padding: 8px 12px; font-family: var(--sb-ui-mono); font-size: 13px; resize: vertical; }
.sbs-radios { display: flex; flex-direction: column; gap: 8px; }
.sbs-radio { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.sbs-reset { padding: 0; border: 0; background: none; color: var(--sb-ui-accent); font: inherit; font-size: 13px; cursor: pointer; }
.sbs-reset:hover { text-decoration: underline; }
.sbs-placeholder, .sbs-empty, .sbs-banner { margin: 0; color: var(--sb-ui-muted); }
.sbs-banner { margin-bottom: 16px; font-size: 13px; }
.sbs-switch, .sbs-advanced { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.sbs-switch input, .sbs-advanced input { position: absolute; opacity: 0; width: 0; height: 0; }
.sbs-switch-track { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: var(--sb-ui-line); transition: background 120ms; }
.sbs-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--sb-ui-bg); box-shadow: var(--sb-ui-shadow); transition: transform 120ms; }
input:checked + .sbs-switch-track { background: var(--sb-ui-accent); }
input:checked + .sbs-switch-track::after { transform: translateX(16px); }
input:focus-visible + .sbs-switch-track { outline: 2px solid var(--sb-ui-accent); outline-offset: 2px; }
.sbs-advanced { padding: 16px 0 0; color: var(--sb-ui-muted); font-size: 13px; }
.sbs-row.is-bare { display: block; min-height: 0; padding: 0; border-bottom: 0; }
/* Models section (spec 016 U3) */
.sbm { display: grid; gap: 28px; }
.sbm-head { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sb-ui-muted); }
.sbm-group { min-width: 0; }
.sbm-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--sb-ui-line); }
.sbm-row .sbs-text { flex: 1 1 220px; }
.sbm-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; min-width: 0; }
.sbm-select { max-width: 100%; }
.sbm-quiet { color: var(--sb-ui-muted); font-size: 14px; }
.sbm-link { padding: 0; border: 0; background: none; color: var(--sb-ui-accent); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.sbm-link:hover { text-decoration: underline; }
.sbm-link.is-quiet { color: var(--sb-ui-muted); font-weight: 400; }
.sbm-pill { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--sb-ui-accent) 16%, transparent); color: var(--sb-ui-accent); font-size: 12px; font-weight: 600; vertical-align: 1px; }
.sbm-pill.is-off { background: none; border: 1px solid var(--sb-ui-line); color: var(--sb-ui-muted); }
.sbm-tasks { margin: 0 0 0 14px; padding-left: 14px; border-left: 2px solid var(--sb-ui-line); }
.sbm-tasks .sbm-row { min-height: 48px; }
.sbm-models { display: grid; margin: 2px 0 6px 4px; padding-left: 14px; border-left: 2px solid var(--sb-ui-line); }
.sbm-model { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 5px 0; font-size: 14px; cursor: pointer; }
.sbm-model input { margin: 0; align-self: center; }
.sbm-model-hint { color: var(--sb-ui-muted); font-size: 13px; }
.sbm-add-link { justify-self: start; padding: 5px 0; }
.sbm-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 5px 0; }
.sbm-add-input { flex: 1 1 200px; width: auto; min-width: 0; }
.sbm-foot { margin: 0; color: var(--sb-ui-muted); font-size: 13px; }
.sbm-overlay { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; }
.sbm-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--sb-ui-text) 45%, transparent); }
.sbm-drawer { position: relative; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; width: min(420px, 100%); height: 100%; padding: 24px; overflow-y: auto; background: var(--sb-ui-bg); border-left: 1px solid var(--sb-ui-line); box-shadow: var(--sb-ui-shadow); }
.sbm-drawer-title { margin: 0; font-size: 20px; font-weight: 600; }
.sbm-field { position: relative; display: flex; flex-direction: column; gap: 4px; }
.sbm-input { width: 100%; }
.sbm-reveal { position: absolute; right: 12px; top: 28px; height: 36px; display: flex; align-items: center; }
.sbm-field input[type="password"], .sbm-field input[type="text"] { padding-right: 56px; }
.sbm-drawer-models { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sbm-found { display: grid; max-height: 240px; overflow-y: auto; }
.sbm-drawer-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 8px; }
.sbs-mcp-item, .sbs-mcp-entry { padding: 8px 0; }
.sbs-mcp-head, .sbs-mcp-entry { display: flex; align-items: center; gap: 12px; }
.sbs-mcp-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sbs-mcp-trust { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sb-ui-muted); }
.sbs-mcp-tools { margin: 4px 0 0; padding-inline-start: 1.2em; font-size: 12px; }
.sbs-mcp-tools .is-hidden { color: var(--sb-ui-muted); }
.sbs-mcp-catalog { margin-top: 8px; }
.sbs-mcp-catalog > summary { cursor: pointer; color: var(--sb-ui-accent); }
/* Connect guide (server spec 020 G3): numbered steps, fields, Connect and test, a status line */
.sbs-mcp-keyline { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.sbs-guide { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 12px; padding: 12px; border: 1px solid var(--sb-ui-line); border-radius: 8px; }
.sbs-guide-steps { margin: 0; padding-inline-start: 1.3em; display: flex; flex-direction: column; gap: 10px; }
.sbs-guide-step > .sbs-label { display: block; margin-bottom: 2px; }
.sbs-guide-field { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.sbs-guide-field .sb-input { max-width: 28rem; width: 100%; box-sizing: border-box; }
.sbs-guide-open { margin-top: 6px; }
.sbs-guide-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sbs-guide-status.is-good { color: var(--sb-ui-accent); }
.sbs-guide-custom > .sb-button { align-self: flex-start; }

/* Sources chips (settings > Sources and tools). Flat: a thin line, a tint when on, no fills, shadows or gradients. */
.sbs-sources { display: grid; gap: 4px; min-width: 0; }
.sbs-src-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sbs-src-menu { position: relative; flex: none; }
.sbs-src-more { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--sb-ui-muted); font-size: 18px; line-height: 1; cursor: pointer; list-style: none; user-select: none; }
.sbs-src-more::-webkit-details-marker { display: none; }
.sbs-src-more:hover, .sbs-src-menu[open] > .sbs-src-more { background: var(--sb-ui-hover); }
.sbs-src-more:focus-visible { outline: 2px solid var(--sb-ui-accent); outline-offset: 2px; }
.sbs-src-menu-list { position: absolute; z-index: 5; top: 36px; inset-inline-end: 0; display: grid; min-width: 220px; padding: 4px; border: 1px solid var(--sb-ui-line); border-radius: 10px; background: var(--sb-ui-bg); box-shadow: var(--sb-ui-shadow); }
.sbs-src-item { box-sizing: border-box; width: 100%; min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--sb-ui-text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.sbs-src-item:hover, .sbs-src-item:focus-visible { background: var(--sb-ui-hover); outline: none; }
.sbs-src-panel { margin: 8px 0; padding: 12px 0; border-top: 1px solid var(--sb-ui-line); border-bottom: 1px solid var(--sb-ui-line); }
.sbs-src-panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.sbs-src-group { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 14px; padding: 16px 0; border-top: 1px solid var(--sb-ui-line); }
.sbs-src-group:first-of-type { border-top: 0; }
.sbs-src-group > :not(.sbs-ring):not(.sbs-src-heading) { grid-column: 1 / -1; }
.sbs-src-group > .sbs-src-heading:first-child { grid-column: 1 / -1; }
.sbs-src-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--sb-ui-text); }
.sbs-src-note, .sbs-src-empty, .sbs-src-footer { margin: 0; font-size: 13px; line-height: 1.4; color: var(--sb-ui-muted); }
.sbs-src-footer { padding-top: 12px; border-top: 1px solid var(--sb-ui-line); }
.sbs-ring { flex: none; width: 56px; height: 56px; }
.sbs-ring-arc { stroke: var(--sb-ui-line); }
.sbs-ring-arc.is-lit { stroke: var(--sb-ui-accent); }
.sbs-ring-center { fill: var(--sb-ui-text); font-size: 13px; font-weight: 600; }
.sbs-src-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.sbs-chip { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; max-width: 100%; min-height: 36px; padding: 6px 14px 6px 10px; border: 1px solid var(--sb-ui-line); border-radius: 999px; background: transparent; color: var(--sb-ui-muted); font: inherit; font-size: 14px; cursor: pointer; }
.sbs-chip-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sb-ui-faint); }
.sbs-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbs-chip-detail { flex: none; font-size: 13px; color: var(--sb-ui-muted); }
.sbs-chip:hover { background: var(--sb-ui-hover); }
.sbs-chip:focus-visible { outline: 2px solid var(--sb-ui-accent); outline-offset: 2px; }
.sbs-chip[aria-pressed="true"] { border-color: transparent; background: var(--sb-ui-accent-tint); color: var(--sb-ui-text); }
.sbs-chip.is-ok .sbs-chip-dot { background: var(--sb-ui-accent); }
.sbs-chip.is-warn .sbs-chip-dot { background: var(--sb-ui-faint); }
.sbs-chip.is-bad .sbs-chip-dot { background: var(--sb-ui-danger); }
.sbs-chip.is-bad .sbs-chip-detail { color: var(--sb-ui-danger); }
.sbs-src-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; font-size: 13px; line-height: 1.4; color: var(--sb-ui-muted); }
.sbs-src-status .sbs-chip-dot { align-self: center; }
.sbs-src-status.is-ok .sbs-chip-dot { background: var(--sb-ui-accent); }
.sbs-src-status .sbs-chip-label { color: var(--sb-ui-text); overflow: visible; white-space: normal; }
.sbs-src-live { grid-column: 1 / -1; margin: 0; min-height: 0; font-size: 13px; color: var(--sb-ui-muted); }
.sbs-src-live:empty { display: none; }
.sbs-chip[aria-busy="true"] { opacity: .6; cursor: progress; }

/* Host-proofing: Obsidian and Zotero style every bare button, select and heading (fill, shadow, centred content,
   their own margins). These rules sit under .sbs, so two classes outrank the host's `button:not(.x)` and heading rules. */
.sbs button { box-shadow: none; }
.sbs .sbs-nav-item { justify-content: flex-start; height: 44px; background: none; }
.sbs .sbs-nav-item:hover, .sbs .sbs-nav-item.is-active { background: var(--sb-ui-hover); }
.sbs .sbm-link, .sbs .sbs-reset { height: auto; padding: 0; background: none; }
.sbs .sbm-link, .sbs .sbs-reset { color: var(--sb-ui-accent); }
.sbs .sbm-link.is-quiet { color: var(--sb-ui-muted); }
.sbs .sbm-head { margin: 0 0 4px; padding: 0; font-size: 12px; }
.sbs .sbs-title { margin: 0 0 8px; padding: 0; font-size: 20px; }
.sbs .sbs-row { grid-template-columns: minmax(220px, 1fr) auto; }
.sbs .sbs-row.is-stacked { grid-template-columns: minmax(0, 1fr); }
.sbs .sbs-select { width: auto; min-width: 140px; max-width: 240px; }
.sbs .sbs-chip { height: auto; justify-content: flex-start; font-weight: 400; background: transparent; }
.sbs .sbs-chip:hover { background: var(--sb-ui-hover); }
.sbs .sbs-chip[aria-pressed="true"], .sbs .sbs-chip[aria-pressed="true"]:hover { background: var(--sb-ui-accent-tint); }
.sbs .sbs-src-title { margin: 0; padding: 0; font-size: 15px; }
.sbs .sbs-src-more { height: 32px; padding: 0; background: none; }
.sbs .sbs-src-item { height: auto; justify-content: flex-start; background: none; }
.sbs .sbs-src-item:hover { background: var(--sb-ui-hover); }

/* Narrow: the sections become a strip along the top and the rows stack. */
@container (max-width: 560px) {
  .sbm-row { align-items: flex-start; }
  .sbm-ctl { width: 100%; justify-content: flex-start; }
  .sbm-ctl .sbm-select { flex: 1 1 100%; }
  .sbs .sbs-select { max-width: 100%; }
  .sbs-frame { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .sbs-side { border-right: 0; border-bottom: 1px solid var(--sb-ui-line); padding: 12px 16px 8px; gap: 8px; }
  .sbs-nav { flex-direction: row; overflow-x: auto; gap: 4px; scrollbar-width: none; margin-inline: -4px; }
  .sbs-nav::-webkit-scrollbar { display: none; }
  .sbs .sbs-nav-item { flex: none; height: 40px; padding: 0 12px; }
  .sbs-pane { padding: 16px 16px 40px; }
  .sbs .sbs-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sbs-control { justify-content: flex-start; }
  .sbs .sbs-row:has(.sbs-switch) { grid-template-columns: minmax(0, 1fr) auto; }
  .sbs-input { width: 100%; }
  .sbs-input.is-number { width: 96px; }
  .sbs .sbs-chip { min-height: 44px; }
  .sbs .sbs-chip-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
  .sbs-src-menu-list { inset-inline-end: -4px; max-width: calc(100vw - 32px); }
}

/* Source logos (logos.js): beside a name, at text size */
.sb-logo { flex: none; vertical-align: -2px; }
.sbs-named { display: inline-flex; align-items: center; gap: 6px; }
.sb-logo-mono circle { fill: var(--sb-ui-line); }
.sb-logo-mono text { fill: var(--sb-ui-muted); font: 600 10px var(--sb-ui-font, inherit); }

/* Who made it (avatars.js): a person or Second Brain's AI */
.sb-avatar { flex: none; vertical-align: -3px; }
.sb-avatar-initials { font: 700 10px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0.02em; }
/* in a gutter, out of the flow (a class, not :has(): Zotero 7's engine predates it): they change no height, so a new question still lands at the top of the view */
.sb-ai-user.has-avatar { position: relative; padding-left: 38px; }
.sb-ai-user > .sb-ai-avatar { position: absolute; left: 10px; top: 8px; }
.sb-ai-answer.has-avatar { position: relative; padding-left: 30px; }
.sb-ai-answer > .sb-ai-avatar { position: absolute; left: 0; top: 0; }
.sb-p-row-title > .sb-avatar { margin-inline-end: 6px; }

/* ui-src/src/home/home.css. Home (src/home/home.js) and the page basics it and the Sources page stand on, for the web
   app and the plugins alike. Tokens only (--sb-ui-* from each host's map, the --sbw-* scale and fonts from
   src/home/type.css). The web app concatenates it before shell.css; Zotero loads it from content/home/sb-home.css and
   Obsidian injects it when Home opens. url()s name files that every build puts beside this sheet. */


/* The browser's default controls, at the lowest specificity so every component rule still wins. */
:where(.sbw, .sbw-login, .sb-home-view) :is(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.sbw, .sb-home-view) :is(input, select, textarea) { background: var(--sb-ui-bg); border: 1px solid var(--sb-ui-line); border-radius: 6px; padding: 4px 8px; }
:where(.sbw, .sbw-overlay, .sbw-login, .sb-home-view) .sb-button { background: var(--sb-ui-control); color: var(--sb-ui-text); border: 1px solid var(--sb-ui-line); border-radius: 6px; padding: 4px 12px; cursor: pointer; text-decoration: none; display: inline-block; }
:where(.sbw, .sbw-overlay, .sbw-login, .sb-home-view) .sb-button:hover { background: var(--sb-ui-hover); }
:where(.sbw, .sbw-overlay, .sbw-login, .sb-home-view) .sb-button.is-primary { background: var(--sb-ui-accent); color: var(--sb-ui-on-accent); border-color: transparent; }
:where(.sbw, .sbw-overlay, .sbw-login, .sb-home-view) .sb-button:disabled { opacity: 0.5; cursor: default; }

.sbw-page { box-sizing: border-box; max-width: 760px; margin: 0 auto; padding: var(--sbw-s5) var(--sbw-s4) var(--sbw-s6); }
.sbw-h1 { margin: 0 0 var(--sbw-s5); font-family: var(--sbw-serif); font-size: 32px; font-weight: 400; font-optical-sizing: auto; letter-spacing: -0.01em; line-height: 1.15; }
.sbw-lead, .sbw-hint { margin: 0 0 var(--sbw-s3); color: var(--sb-ui-muted); font-size: var(--sbw-t-small); }
.sbw-quiet { margin: 0 calc(-1 * var(--sbw-s2)) 0 auto; display: inline-flex; align-items: center; gap: var(--sbw-s1); padding: var(--sbw-s1) var(--sbw-s2); border-radius: var(--sbw-r1); color: var(--sb-ui-muted); font-weight: 400; text-decoration: none; }
.sbw-quiet:hover { background: var(--sb-ui-hover); color: var(--sb-ui-text); }
/* quiet text buttons (Collections, Clear, ‹ ›, Previous and Next) are <button>s: take the browser's frame off */
button.sbw-quiet { border: 0; background: none; font: inherit; color: var(--sb-ui-muted); cursor: pointer; }
:is(.sbw, .sb-home-view) .sbw-quiet-icon { stroke: currentColor; }

/* Home: Folio-style covers. Each tone is a muted photo-like colour; a soft light from the top and a fine grain stand in
   for the image. White text stays readable on every tone in both themes. */
.sbw-home { max-width: 1120px; }
.sbw-home-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sbw-s3); margin-bottom: var(--sbw-s5); }
.sbw-home-top .sbw-h1 { margin: 0; font-size: clamp(32px, 4vw, 44px); }
.sbw-home-date, .sbw-home-count { margin: 0; color: var(--sb-ui-faint); font-size: var(--sbw-t-small); white-space: nowrap; }
.sbw-covers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sbw-s5); }
@media (max-width: 1099px) { .sbw-covers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Folio: a photo under a dark veil, near-square corners and a soft lift off the page. */
.sbw-cover { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; aspect-ratio: 3 / 4; min-width: 0; padding: var(--sbw-s5) var(--sbw-s4) var(--sbw-s6); border-radius: 2px; color: #fff; text-align: center; text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 18px rgba(0, 0, 0, 0.45); background-color: var(--tone); background-image: radial-gradient(90% 60% at 50% 50%, rgba(0, 0, 0, 0.32), transparent 75%), linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.68)), var(--photo, none); background-size: cover; background-position: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 24px -12px rgba(0, 0, 0, 0.35); transition: filter 150ms ease-out; }
.sbw-cover:hover { filter: brightness(1.08); }
/* A research report reads as a bound volume: a hairline frame inset from the edge. */
.sbw-cover.is-report::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(255, 255, 255, 0.4); pointer-events: none; }
.sbw-cover-body { display: flex; flex-direction: column; align-items: center; gap: var(--sbw-s2); min-width: 0; max-width: 100%; }
.sbw-cover-label { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.92; }
.sbw-cover-title { overflow-wrap: anywhere; font-family: var(--sbw-serif); font-size: 21px; font-weight: 400; line-height: 1.15; letter-spacing: -0.01em; }
.sbw-cover.is-report .sbw-cover-title { font-size: 18px; }
.sbw-cover-rule { width: 40px; height: 1px; margin: var(--sbw-s1) 0; background: rgba(255, 255, 255, 0.6); }
.sbw-cover-line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-family: var(--sbw-serif); font-style: italic; font-size: 14px; line-height: 1.4; opacity: 0.95; }
.sbw-cover-by { max-width: 100%; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.72; }
.sbw-cover-foot { position: absolute; left: var(--sbw-s3); right: var(--sbw-s3); bottom: var(--sbw-s4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; letter-spacing: 0.04em; opacity: 0.88; }
.sbw-cover.is-new::after { content: ""; position: absolute; top: var(--sbw-s4); right: var(--sbw-s4); width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); }
/* Home sections: Today across the full width, then shelves with a hairline heading and Previous / Next. */
.sbw-home-body { display: flex; flex-direction: column; gap: var(--sbw-s6); }
.sbw-today { display: flex; flex-direction: column; gap: var(--sbw-s5); }
.sbw-cover.sbw-today-banner { aspect-ratio: auto; min-height: 220px; padding: var(--sbw-s6) var(--sbw-s5); }
.sbw-today-banner .sbw-cover-title { font-size: clamp(28px, 3.4vw, 40px); }
.sbw-today-banner .sbw-cover-line { font-size: 16px; }
.sbw-papers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sbw-s5) var(--sbw-s6); }
.sbw-papers-head { grid-column: 1 / -1; margin: var(--sbw-s2) 0 0; padding-top: var(--sbw-s4); border-top: 1px solid var(--sb-ui-line); font-family: var(--sbw-serif); font-size: 20px; font-weight: 400; }
.sbw-paper { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sbw-s4); min-width: 0; padding-top: var(--sbw-s4); border-top: 1px solid var(--sb-ui-line); }
.sbw-paper.has-figure { grid-template-columns: minmax(0, 1fr) 144px; }
.sbw-papers.is-one .sbw-paper.has-figure { grid-template-columns: minmax(0, 1fr) 208px; }
.sbw-paper-text { display: flex; flex-direction: column; gap: var(--sbw-s1); min-width: 0; }
/* Every figure gets the same 4:3 frame on the right, filled and cropped from the top (where panel (a) usually is),
   on white since most are drawn on white. The paper's link shows it whole. */
.sbw-paper-figure-box { display: none; align-self: start; aspect-ratio: 4 / 3; overflow: hidden; background: #fff; border: 1px solid var(--sb-ui-line); border-radius: 4px; }
.sbw-paper.has-figure .sbw-paper-figure-box { display: block; }
.sbw-paper-figure { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.sbw-paper-more { margin-top: var(--sbw-s1); }
.sbw-paper-more > summary { width: fit-content; color: var(--sb-ui-muted); font-size: var(--sbw-t-small); cursor: pointer; list-style: none; }
.sbw-paper-more > summary::-webkit-details-marker { display: none; }
.sbw-paper-more > summary::after { content: " ↓"; }
.sbw-paper-more[open] > summary::after { content: " ↑"; }
.sbw-paper-more > summary:hover { color: var(--sb-ui-text); }
.sbw-paper-abstract { margin: var(--sbw-s2) 0 0; color: var(--sb-ui-text); font-size: 14px; line-height: 1.6; }
.sbw-paper-title { font-family: var(--sbw-serif); font-size: 18px; line-height: 1.3; color: var(--sb-ui-text); text-decoration: none; }
a.sbw-paper-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.sbw-paper-meta { margin: 0; color: var(--sb-ui-faint); font-size: var(--sbw-t-small); }
.sbw-paper-why { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; margin: var(--sbw-s1) 0 0; color: var(--sb-ui-muted); font-size: 14px; line-height: 1.5; }
.sbw-today-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sbw-s3); margin-bottom: calc(-1 * var(--sbw-s3)); }
.sbw-today-nav { display: flex; gap: var(--sbw-s2); }
.sbw-today-nav .sbw-quiet { margin: 0; font-size: var(--sbw-t-small); }
.sbw-today-nav .sbw-quiet[hidden], .sbw-layout[hidden] { display: none; }
.sbw-today-bar .sbw-layout { margin: 0 0 0 auto; }
.sbw-paper-source { margin: var(--sbw-s1) 0 0; color: var(--sb-ui-faint); font-size: 12px; letter-spacing: 0.01em; }
.sbw-shelf { display: flex; flex-direction: column; gap: var(--sbw-s4); }
.sbw-shelf-head { display: flex; align-items: baseline; gap: var(--sbw-s3); padding-top: var(--sbw-s4); border-top: 1px solid var(--sb-ui-line); }
.sbw-shelf-title { margin: 0; font-family: var(--sbw-serif); font-size: 24px; font-weight: 400; letter-spacing: -0.005em; }
.sbw-shelf-count { color: var(--sb-ui-faint); font-size: var(--sbw-t-small); }
.sbw-pager { display: flex; align-items: center; justify-content: center; gap: var(--sbw-s3); }
.sbw-pager .sbw-quiet { margin: 0; }
.sbw-pager .sbw-quiet:disabled { opacity: 0.35; cursor: default; background: none; }
.sbw-pager-where { color: var(--sb-ui-faint); font-size: var(--sbw-t-small); font-variant-numeric: tabular-nums; }
@media (max-width: 699px) {
  .sbw-papers { grid-template-columns: minmax(0, 1fr); }
  .sbw-paper.has-figure, .sbw-papers.is-one .sbw-paper.has-figure { grid-template-columns: minmax(0, 1fr) 96px; }
  .sbw-cover.sbw-today-banner { min-height: 180px; }
}
/* A chat is a text card on the page: no photo, the page's own colours, the same type. */
.sbw-cover.is-text { aspect-ratio: auto; min-height: 200px; justify-content: flex-start; align-items: flex-start; padding: var(--sbw-s5) var(--sbw-s4) var(--sbw-s6); text-align: left; color: var(--sb-ui-text); text-shadow: none; background: var(--sb-ui-bg); border: 1px solid var(--sb-ui-line); box-shadow: none; }
.sbw-cover.is-text:hover { filter: none; background: var(--sb-ui-hover); }
.sbw-cover.is-text .sbw-cover-body { align-items: flex-start; }
.sbw-cover.is-text .sbw-cover-label { color: var(--sb-ui-faint); opacity: 1; }
.sbw-cover.is-text .sbw-cover-title { font-size: 19px; }
.sbw-cover.is-text .sbw-cover-rule { background: var(--sb-ui-line); }
.sbw-cover.is-text .sbw-cover-line { color: var(--sb-ui-muted); opacity: 1; }
.sbw-cover.is-text .sbw-cover-by, .sbw-cover.is-text .sbw-cover-foot { color: var(--sb-ui-faint); opacity: 1; }
.sbw-cover.is-text .sbw-cover-foot { left: var(--sbw-s4); text-align: left; }
.sbw-cover.is-text.is-new::after { background: var(--sb-ui-accent); box-shadow: none; }
.sbw-papers.is-one { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.sbw-papers.is-one .sbw-paper-why { display: block; -webkit-line-clamp: unset; overflow: visible; }
/* Two columns only when the issue is at least 960 px wide (each column then has room for its paper and its actions);
   narrower, the papers read as one column, like the "one column" choice in Settings > General. */
.sbw-today { container-type: inline-size; }
@container (max-width: 959px) {
  .sbw-papers { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .sbw-papers .sbw-paper-why { display: block; -webkit-line-clamp: unset; overflow: visible; }
}
.sbw-layout { display: flex; justify-content: flex-end; gap: var(--sbw-s1); }
.sbw-layout-btn { padding: 3px 12px; border: 1px solid var(--sb-ui-line); border-radius: 999px; background: none; color: var(--sb-ui-muted); font-size: var(--sbw-t-small); cursor: pointer; }
.sbw-layout-btn:hover { color: var(--sb-ui-text); }
.sbw-layout-btn[aria-pressed="true"] { background: var(--sb-ui-hover); color: var(--sb-ui-text); }
@media (max-width: 699px) { .sbw-layout { display: none; } }
/* Cover photos (covers/, NASA Image Library, credits in covers/CREDITS.txt): sky-* are space for radar issues, earth-* labs, instruments and orbit. */
.sbw-photo-sky-1 { --photo: url("cover-sky-01.webp"); }
.sbw-photo-sky-2 { --photo: url("cover-sky-02.webp"); }
.sbw-photo-sky-3 { --photo: url("cover-sky-03.webp"); }
.sbw-photo-sky-4 { --photo: url("cover-sky-04.webp"); }
.sbw-photo-sky-5 { --photo: url("cover-sky-05.webp"); }
.sbw-photo-sky-6 { --photo: url("cover-sky-06.webp"); }
.sbw-photo-earth-1 { --photo: url("cover-earth-01.webp"); }
.sbw-photo-earth-2 { --photo: url("cover-earth-02.webp"); }
.sbw-photo-earth-3 { --photo: url("cover-earth-03.webp"); }
.sbw-photo-earth-4 { --photo: url("cover-earth-04.webp"); }
.sbw-photo-earth-5 { --photo: url("cover-earth-05.webp"); }
.sbw-photo-earth-6 { --photo: url("cover-earth-06.webp"); }
.sbw-photo-earth-7 { --photo: url("cover-earth-07.webp"); }
.sbw-photo-earth-8 { --photo: url("cover-earth-08.webp"); }
.sbw-photo-earth-9 { --photo: url("cover-earth-09.webp"); }
.sbw-photo-earth-10 { --photo: url("cover-earth-10.webp"); }
.sbw-photo-earth-11 { --photo: url("cover-earth-11.webp"); }
.sbw-photo-earth-12 { --photo: url("cover-earth-12.webp"); }
.sbw-photo-earth-13 { --photo: url("cover-earth-13.webp"); }
.sbw-photo-earth-14 { --photo: url("cover-earth-14.webp"); }
.sbw-photo-wide-1 { --photo: url("cover-wide-01.webp"); }
.sbw-photo-wide-2 { --photo: url("cover-wide-02.webp"); }
.sbw-photo-wide-3 { --photo: url("cover-wide-03.webp"); }
.sbw-photo-wide-4 { --photo: url("cover-wide-04.webp"); }
.sbw-photo-wide-5 { --photo: url("cover-wide-05.webp"); }
.sbw-photo-wide-6 { --photo: url("cover-wide-06.webp"); }
.sbw-tone-0 { --tone: #8a4a35; } /* rust */
.sbw-tone-1 { --tone: #5e6e4f; } /* sage */
.sbw-tone-2 { --tone: #6f4f3e; } /* clay */
.sbw-tone-3 { --tone: #344f70; } /* slate blue */
.sbw-tone-4 { --tone: #57563a; } /* olive */
.sbw-tone-5 { --tone: #234a45; } /* pine */
.sbw-tone-6 { --tone: #5d636e; } /* stone */
.sbw-tone-7 { --tone: #2c2b29; } /* charcoal */
@media (max-width: 699px) {
  .sbw-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sbw-s3); }
  .sbw-cover { aspect-ratio: 3 / 4; padding: var(--sbw-s4) var(--sbw-s3) var(--sbw-s6); }
  .sbw-cover-title, .sbw-cover.is-report .sbw-cover-title, .sbw-cover.is-text .sbw-cover-title { font-size: 17px; }
  .sbw-cover.is-text { min-height: 160px; }
  .sbw-cover-line { font-size: 12px; -webkit-line-clamp: 2; }
  .sbw-cover-by { display: none; }
  .sbw-home-top { flex-direction: column; gap: var(--sbw-s1); }
}
@media (prefers-reduced-motion: reduce) { .sbw-cover { transition: none; } }

/* The plugins' Home view (HomeView): the page scrolls inside its tab or pane, in the host's colours. */
.sb-home-view { box-sizing: border-box; flex: 1; min-height: 0; height: 100%; overflow: auto; background: var(--sb-ui-bg); color: var(--sb-ui-text); font: var(--sbw-t-body)/1.45 var(--sbw-sans); }
.sb-home-view :is(button, [role="link"]) { cursor: pointer; }
.sb-home-view :focus-visible { outline: 2px solid var(--sb-ui-accent); outline-offset: 1px; }

/* ui-src/src/web/shell.css. The web app's frame and pages. Tokens only (--sb-ui-*); the palette lives in
   styles/tokens-web.css. Concatenated after ui.css into app.css by build-web.mjs. */

html, body { height: 100%; margin: 0; }
body { background: var(--sb-ui-bg); color: var(--sb-ui-text); font: 15px/1.45 var(--sb-ui-font); -webkit-text-size-adjust: 100%; }
:where(.sbw, .sbw-login) button { cursor: pointer; }
:where(.sbw, .sbw-login) :focus-visible, :where(.sbw-overlay) :focus-visible { outline: 2px solid var(--sb-ui-accent); outline-offset: 1px; }

/* Sign-in page and the Settings QR */
.sbw-login { box-sizing: border-box; max-width: 420px; margin: 0 auto; padding: var(--sbw-s6) var(--sbw-s4); }
.sbw-login-form { display: flex; flex-direction: column; gap: var(--sbw-s3); }
.sbw-login-form[hidden] { display: none; }
.sbw-login-logo { display: block; width: 160px; height: 160px; margin: 0 auto; }
.sbw-login-form label { display: flex; flex-direction: column; gap: var(--sbw-s1); }
.sbw-login-form input { font-size: 16px; padding: var(--sbw-s2) var(--sbw-s3); } /* 16 px: iOS zooms smaller fields */
.sbw-login-form .sb-button { padding: var(--sbw-s3) var(--sbw-s4); font-size: var(--sbw-t-body); }
/* setup-view.js: saved servers above the add form; the https warning stands out */
.sbw-setup .sbw-setup-servers { margin-bottom: var(--sbw-s4); }
.sbw-setup .sbw-row { align-items: center; }
.sbw-setup-server { display: flex; flex-direction: column; min-width: 0; }
.sbw-setup-server .sbw-row-detail { text-align: left; }
.sbw-setup-actions { display: flex; gap: var(--sbw-s2); align-items: center; flex-shrink: 0; }
.sbw-setup-warning { color: var(--sb-ui-danger); }
.sbw-qr { width: min(240px, 100%); margin: var(--sbw-s3) 0; border: 1px solid var(--sb-ui-line); border-radius: var(--sbw-r1); overflow: hidden; line-height: 0; }
.sbw-qr svg { width: 100%; height: auto; display: block; }
.sbw-phone-url { box-sizing: border-box; width: 100%; font: 12px var(--sb-ui-mono); color: var(--sb-ui-muted); }
.sbw-command { display: block; box-sizing: border-box; max-width: 100%; margin: 0 0 var(--sbw-s3); padding: var(--sbw-s2) var(--sbw-s3); background: var(--sb-ui-bg-side); border: 1px solid var(--sb-ui-line); border-radius: var(--sbw-r1); font: 12px var(--sb-ui-mono); overflow-wrap: anywhere; user-select: all; }

/* Layout below 700 px is a 56 px bottom bar (ledger 12); 56 px icon rail from 700 px; 224 px labeled rail from 960 px (ledger 2). */
.sbw { height: 100vh; height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; background: var(--sb-ui-bg); font-size: var(--sbw-t-body); }

.sbw-rail { position: relative; order: 2; display: flex; flex-direction: row; align-items: stretch; box-sizing: border-box; min-height: 56px; padding: 0 var(--sbw-s2) env(safe-area-inset-bottom); min-width: 0; background: var(--sb-ui-bg); border-top: 1px solid var(--sb-ui-line); border-radius: var(--sbw-r3) var(--sbw-r3) 0 0; }
.sbw-brand { display: none; align-items: center; gap: 10px; font-size: 23px; font-weight: 600; letter-spacing: -0.01em; color: var(--sb-ui-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbw-brand-mark { width: 30px; height: 30px; flex: none; border-radius: 6px; }
.sbw-nav { flex: 1; display: flex; flex-direction: row; justify-content: space-around; gap: var(--sbw-s1); }
.sbw-spacer { display: none; }
.sbw-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; box-sizing: border-box; min-width: 0; padding: var(--sbw-s1) 0; border: 0; background: none; color: var(--sb-ui-muted); text-decoration: none; cursor: pointer; font-size: 11px; line-height: 1.2; }
.sbw-more { flex: none; width: 56px; }
.sbw-nav-item:hover { color: var(--sb-ui-text); }
.sbw-nav-item.is-active { color: var(--sb-ui-accent); }
.sbw-nav-item[hidden] { display: none; }
.sbw .sbw-nav-icon { stroke: currentColor; flex: none; }
.sbw-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Folio's Inbox count: how many new papers wait on Home. Shown only beside a label. */
.sbw-nav-badge { display: none; margin-left: auto; min-width: 20px; height: 20px; box-sizing: border-box; align-items: center; justify-content: center; padding: 0 6px; border-radius: 999px; background: var(--sb-ui-text); color: var(--sb-ui-bg); font-size: 11px; font-weight: 600; line-height: 1; }
.sbw-nav-badge[hidden] { display: none !important; }

.sbw-menu { position: absolute; right: var(--sbw-s2); bottom: calc(100% + var(--sbw-s2)); z-index: 20; min-width: 160px; display: flex; flex-direction: column; padding: var(--sbw-s1); background: var(--sb-ui-bg); border: 1px solid var(--sb-ui-line); border-radius: var(--sbw-r2); box-shadow: var(--sb-ui-shadow); }
.sbw-menu[hidden] { display: none; }
.sbw-menu-item { padding: var(--sbw-s2) var(--sbw-s3); border-radius: var(--sbw-r1); color: var(--sb-ui-text); text-decoration: none; white-space: nowrap; }
.sbw-menu button.sbw-menu-item { border: 0; background: none; text-align: left; font: inherit; color: var(--sb-ui-text); }
.sbw-menu-item:hover { background: var(--sb-ui-hover); }

/* overflow: clipped, so an absolutely placed child deep inside a scrolling view (visually hidden labels) cannot
   stretch the document and let the whole page scroll past the app */
.sbw-main { position: relative; order: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.sbw-view { flex: 1; min-width: 0; min-height: 0; overflow: auto; }
.sbw-view[hidden] { display: none !important; } /* beats .sbw-view-page.is-fill (views.css), else Settings shows under Routines */
.sbw-view-chat { display: flex; overflow: hidden; }

.sbw .sb-ai-empty-title, .sbw .sb-rt-title { font-family: var(--sbw-serif); font-weight: 400; font-size: 28px; letter-spacing: -0.01em; line-height: 1.15; }
.sbw .sb-ai-history-newchat { padding: 3px 12px; background: transparent; color: var(--sb-ui-text); border: 1px solid var(--sb-ui-line); border-radius: 999px; font-size: var(--sbw-t-small); cursor: pointer; }
.sbw .sb-ai-history-newchat:hover { background: var(--sb-ui-hover); }
.sbw-h2 { display: flex; align-items: center; gap: var(--sbw-s3); margin: 0 0 var(--sbw-s2); padding: 0 var(--sbw-s3); font-size: var(--sbw-t-small); font-weight: 600; color: var(--sb-ui-muted); }
.sbw .sbw-h2-icon { stroke: currentColor; }
.sbw-caption { margin: 0; padding: 0 var(--sbw-s3); font-size: var(--sbw-t-small); color: var(--sb-ui-faint); }
.sbw-summary { margin: 0 0 var(--sbw-s2); padding: 0 var(--sbw-s3); font-style: italic; }
.sbw-section { margin: 0 0 var(--sbw-s5); }
.sbw-list { display: flex; flex-direction: column; margin-bottom: var(--sbw-s3); }
.sbw-link { color: var(--sb-ui-accent); }
.sbw-cta { margin-top: var(--sbw-s1); }

/* Content rows: 56 px, one title line, one meta line, hairline below, no box (ledger 3). */
.sbw-card { display: flex; align-items: center; gap: var(--sbw-s3); box-sizing: border-box; min-height: 56px; padding: 0 var(--sbw-s3); min-width: 0; border-bottom: 1px solid var(--sb-ui-line); color: var(--sb-ui-text); text-decoration: none; }
.sbw-card:hover { background: var(--sb-ui-hover); }
.sbw .sbw-card-icon { stroke: var(--sb-ui-muted); flex: none; }
.sbw-card-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.sbw-card-title, .sbw-card-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbw-card-title { font-size: var(--sbw-t-body); line-height: 1.3; }
.sbw-card-meta { color: var(--sb-ui-muted); font-size: var(--sbw-t-small); line-height: 1.3; }
.sbw-dot { flex: none; width: 6px; height: 6px; margin: 0 5px; border-radius: 50%; background: var(--sb-ui-accent); }
.sbw-card.is-new .sbw-card-title { font-weight: 600; }


.sbw-choices { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.sbw-choice { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sbw-row { display: flex; justify-content: space-between; gap: var(--sbw-s3); padding: var(--sbw-s3); border-bottom: 1px solid var(--sb-ui-line); min-width: 0; }
.sbw-row-name { font-weight: 600; }
.sbw-row-detail { color: var(--sb-ui-muted); text-align: right; min-width: 0; overflow-wrap: anywhere; }
/* Settings > Folders (server spec 018): name, what it is and its path on the left; On and Remove on the right */
.sbw-folder { align-items: center; }
.sbw-folder-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sbw-folder .sbw-row-detail { text-align: left; }
.sbw-folder-path { color: var(--sb-ui-muted); font-size: 0.85em; overflow-wrap: anywhere; }
.sbw-folder-on { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sbw-folder.is-off .sbw-folder-text, .sbw-folder.is-ignored .sbw-folder-text { opacity: 0.6; }
.sbw-folders-add { display: flex; flex-wrap: wrap; gap: var(--sbw-s2); margin-top: var(--sbw-s3); }
.sbw-folders-add input:first-child { flex: 1 1 16rem; min-width: 0; }
.sbw-folders-add input:nth-child(2) { flex: 0 1 10rem; min-width: 0; }

.sbw-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; background: rgba(0, 0, 0, 0.35); }
.sbw-dialog { box-sizing: border-box; width: min(440px, 100%); max-height: 100%; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--sb-ui-bg); color: var(--sb-ui-text); border: 1px solid var(--sb-ui-line); border-radius: var(--sbw-r2); box-shadow: var(--sb-ui-shadow); font: 13px/1.45 var(--sb-ui-font); }
.sbw-dialog-title { font-weight: 600; font-size: 14px; }
.sbw-dialog-text { margin: 0; overflow-wrap: anywhere; }
.sbw-dialog-input { box-sizing: border-box; width: 100%; background: var(--sb-ui-bg); color: var(--sb-ui-text); border: 1px solid var(--sb-ui-line); border-radius: 6px; padding: 6px 8px; font: inherit; }
.sbw-dialog-buttons { display: flex; justify-content: flex-end; gap: 8px; }
.sbw-dialog-list { display: flex; flex-direction: column; gap: 2px; max-height: 40vh; overflow: auto; }
.sbw-dialog-row { display: flex; gap: 8px; align-items: flex-start; padding: 6px 4px; border-radius: 6px; cursor: pointer; }
.sbw-dialog-row:hover { background: var(--sb-ui-hover); }
.sbw-dialog-row-text { display: flex; flex-direction: column; min-width: 0; }
.sbw-dialog-row-detail, .sbw-dialog-empty { color: var(--sb-ui-muted); font-size: 11.5px; }

.sbw-toasts { position: fixed; z-index: 60; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; max-width: calc(100vw - 32px); pointer-events: none; }
.sbw-toast { padding: 8px 14px; border-radius: 999px; background: var(--sb-ui-text); color: var(--sb-ui-bg); box-shadow: var(--sb-ui-shadow); overflow-wrap: anywhere; }

@media (min-width: 700px) {
  .sbw { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .sbw-rail { order: 0; flex-direction: column; align-items: stretch; gap: var(--sbw-s2); padding: var(--sbw-s3) var(--sbw-s2); border-top: 0; border-radius: 0; border-right: 1px solid var(--sb-ui-line); background: var(--sb-ui-bg); }
  .sbw-main { order: 0; }
  .sbw-nav { flex: none; flex-direction: column; justify-content: flex-start; }
  .sbw-spacer { display: block; flex: 1; }
  .sbw-nav-item, .sbw-more { flex: none; width: 100%; height: 40px; flex-direction: row; justify-content: center; gap: var(--sbw-s3); padding: 0; border-radius: var(--sbw-r1); font-size: var(--sbw-t-body); }
  .sbw-nav-label { display: none; }
  .sbw-nav-item:hover { background: var(--sb-ui-hover); }
  .sbw-nav-item.is-active { background: var(--sb-ui-hover); color: var(--sb-ui-text); font-weight: 500; }
  .sbw-menu { left: calc(100% + var(--sbw-s2)); right: auto; bottom: var(--sbw-s3); }
  .sbw-page { padding: var(--sbw-s6) var(--sbw-s6) var(--sbw-s6); }
}
@media (min-width: 960px) {
  .sbw { grid-template-columns: 224px minmax(0, 1fr); }
  .sbw-brand { display: flex; padding: var(--sbw-s1) var(--sbw-s3) var(--sbw-s2); }
  .sbw-nav { gap: var(--sbw-s1); }
  .sbw-nav-item, .sbw-more { justify-content: flex-start; height: 44px; padding: 0 var(--sbw-s3); color: var(--sb-ui-text); opacity: 0.86; }
  .sbw-nav-item.is-active, .sbw-nav-item:hover { opacity: 1; }
  .sbw-nav-badge { display: inline-flex; }
  .sbw-nav-label { display: inline; }
  .sbw-menu { left: var(--sbw-s2); right: var(--sbw-s2); bottom: calc(var(--sbw-s3) + 48px); }
}

.sb-openalex-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sbw-s2); }
.sb-openalex-key input { flex: 1 1 14em; min-width: 0; }
.sb-openalex-link { color: var(--sb-ui-accent); }
.sb-openalex-key .sbw-hint { flex-basis: 100%; margin: 0; }

/* Settings is the shared SettingsView (src/settings), which brings its own sidebar and padding: no page padding here,
   and the sections list and the rows scroll on their own. */
.sbw-page.sbw-settings { padding: 0; max-width: none; height: 100%; box-sizing: border-box; }
.sbw-settings .sbs, .sbw-settings .sbs-frame { height: 100%; min-height: 0; }
.sbw-settings .sbs-side { overflow-y: auto; }
.sbw-settings .sbs-pane { overflow-y: auto; max-width: none; }
.sbw-settings .sbs-pane > * { max-width: 720px; }
.sbw-settings .sbw-hint { margin: var(--sbw-s2) 0; font-size: var(--sbw-t-small); color: var(--sb-ui-muted); }
@container (max-width: 560px) { .sbw-settings .sbs-side { overflow-y: visible; } }

/* Building the index (server spec 019): the current stage's bar, its line, the stage list; a thin bar under the header */
.sbw-progress { display: flex; flex-direction: column; gap: var(--sbw-s2); margin-bottom: var(--sbw-s3); }
.sbw-progress-line { margin: 0; color: var(--sb-ui-muted); overflow-wrap: anywhere; }
.sbw-progress-track { height: 6px; border-radius: 3px; background: var(--sb-ui-line); overflow: hidden; }
.sbw-progress-fill { height: 100%; background: var(--sb-ui-accent); transition: width 0.4s ease; }
.sbw-progress-stages { display: flex; flex-wrap: wrap; gap: var(--sbw-s2) var(--sbw-s3); margin: 0; padding: 0; list-style: none; font-size: 0.9em; color: var(--sb-ui-muted); }
.sbw-progress-stage.is-running { color: inherit; font-weight: 600; }
.sbw-progress-stage.is-skipped { opacity: 0.6; }
.sbw-progress-mark { display: inline-block; min-width: 1.1em; }
.sbw-progress .sb-button { align-self: flex-start; }
.sbw-header-progress { display: block; position: sticky; top: 0; z-index: 5; }
.sbw-header-progress .sbw-progress-track { height: 3px; border-radius: 0; }

/* Radar onboarding, seed papers (server spec 021 G1): your papers, more like these, the count */
.sbw-seeds { display: flex; flex-direction: column; gap: var(--sbw-s3); margin: var(--sbw-s3) 0; }
.sbw-seeds-h2 { font-size: 1.1em; margin: 0 0 var(--sbw-s1, 4px); }
.sbw-seeds-ask { display: flex; flex-wrap: wrap; gap: var(--sbw-s2); margin: var(--sbw-s2) 0; }
.sbw-seeds-ask .sb-input { flex: 1 1 12rem; min-width: 0; }
.sbw-seeds-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sbw-seeds-paper { padding: 6px 0; border-bottom: 1px solid var(--sb-ui-line); display: flex; align-items: center; gap: var(--sbw-s2); }
.sbw-seeds-paper label { display: grid; grid-template-columns: auto 1fr; column-gap: var(--sbw-s2); align-items: start; flex: 1; min-width: 0; }
.sbw-seeds-title { overflow-wrap: anywhere; flex: 1; min-width: 0; }
.sbw-seeds-meta { grid-column: 2; color: var(--sb-ui-muted); font-size: 0.9em; }
.sbw-seeds-meta.is-in { color: var(--sb-ui-accent); }
.sbw-seeds-picked, .sbw-seeds-collections { display: flex; flex-wrap: wrap; gap: var(--sbw-s2); margin-top: var(--sbw-s2); }
.sbw-seeds-collections .sbw-hint { flex-basis: 100%; margin: 0; }
.sbw-seeds-count { font-weight: 600; margin: 0; }

/* Rating a paper where it is read (Home's issue): the radar's three actions as small outlined buttons, Undo in a toast */
.sbw-paper .sb-dg-acts { margin-top: var(--sbw-s2); gap: var(--sbw-s2); }
.sbw-paper .sb-dg-act, .sbw-today .sb-dg-toast .sb-dg-act { font: inherit; font-size: 13px; line-height: 1.3; padding: 4px 12px; border: 1px solid var(--sb-ui-line); border-radius: 999px; background: transparent; color: var(--sb-ui-text); cursor: pointer; white-space: nowrap; }
.sbw-paper .sb-dg-act { display: inline-flex; align-items: center; gap: 6px; }
.sbw-paper .sb-dg-act.is-icon { padding: 4px 9px; }
.sbw-paper .sb-dg-act:hover:not(:disabled) { border-color: var(--sb-ui-accent); color: var(--sb-ui-accent); }
.sbw-paper .sb-dg-act.is-primary { border-color: var(--sb-ui-accent); color: var(--sb-ui-accent); font-weight: 600; }
.sbw-paper .sb-dg-act:disabled { opacity: .5; cursor: default; }
.sbw-paper.is-dismissed { opacity: .55; }
.sbw-today .sb-dg-toast { position: fixed; bottom: 24px; }
.sbw-today .sb-dg-toast .sb-dg-act { color: var(--sb-ui-bg); border-color: transparent; text-decoration: underline; padding: 0; }
.sbw-chip-logo { margin-inline-end: 6px; vertical-align: -2px; }
.sbw-src-logo { color: var(--sb-ui-text); }
.sbw-note-author { margin-inline-end: 6px; }
.sbw-chip > .sb-avatar { margin-inline-end: 6px; }

/* Abstracts read as set text: justified, hyphenated so the gaps stay even (the paper reader, Home's papers) */
.sbw-abstract, .sbw-paper-abstract, .sbw-paper-why { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

/* ui-src/src/web/views.css. Library, Notes and the two readers of the web app (spec 013 W2). Tokens only; the
   palette is styles/tokens-web.css. Concatenated after src/web/shell.css into app.css by build-web.mjs.
   Ledger 7 (library: 224 px tree, flat table, tick column on hover), 8 (reader: 220 / article / 320, collapses below 960),
   12 (phone bar of four plus More), 3 (56 px content rows), 13 (spacing). */

/* ---- the phone bar: Routines and Projects live under More below 700 px */
.sbw-nav-item.is-wide-only { display: none; }
.sbw-menu-item.is-phone-only { display: block; }
@media (min-width: 700px) {
  .sbw-nav-item.is-wide-only { display: flex; }
  .sbw-menu-item.is-phone-only { display: none; }
}

/* ---- pages that scroll inside themselves */
.sbw-view-page.is-fill { display: flex; flex-direction: column; overflow: hidden; }
.sbw-view-page.is-fill > .sbw-slot, .sbw-view-page.is-fill > .sbw-lib { flex: 1; min-height: 0; }
.sbw-slot { min-width: 0; }
.sbw-spacer-x { flex: 1; }
.sbw-linkbtn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }

/* ---- Library */
.sbw-lib { --lib-gutter: var(--sbw-s4); position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--sb-ui-bg); }
.sbw-lib-tree { display: none; flex: none; max-height: 45%; overflow: auto; box-sizing: border-box; padding: var(--sbw-s3) var(--sbw-s2); border-bottom: 1px solid var(--sb-ui-line); font-size: var(--sbw-t-small); }
.sbw-lib.show-tree .sbw-lib-tree { display: block; }
.sbw-tree-head { padding: 0 var(--sbw-s3) var(--sbw-s2); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sb-ui-muted); }
.sbw-tree-row { display: flex; align-items: center; gap: var(--sbw-s1); box-sizing: border-box; min-height: 32px; padding-inline-end: var(--sbw-s3); border-radius: var(--sbw-r1); color: var(--sb-ui-text); text-decoration: none; }
.sbw-tree-row:hover { background: var(--sb-ui-hover); }
.sbw-tree-row.is-selected { background: var(--sb-ui-accent-tint); }
.sbw-tree-row:not([style]) { padding-inline-start: var(--sbw-s3); }
.sbw-tree-twist { flex: none; width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--sb-ui-muted); }
.sbw-tree-twist .sb-p-icon { width: 12px; height: 12px; stroke: currentColor; transform: rotate(-90deg); transition: transform 0.12s; }
.sbw-tree-twist .sb-p-icon.is-open { transform: none; }
.sbw-tree-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbw-tree-count { flex: none; color: var(--sb-ui-muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.sbw-tree-empty { padding: 0 var(--sbw-s3); }

.sbw-lib-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; container-type: inline-size; }
.sbw-lib-head, .sbw-lib-bar, .sbw-lib-status, .sbw-lib-cols { padding-inline: var(--lib-gutter); }
.sbw-lib-head { padding-top: var(--sbw-s4); }
.sbw-lib-title { margin-bottom: var(--sbw-s3); }
.sbw-lib-crumb { color: var(--sb-ui-muted); font-weight: 400; }
.sbw-lib-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sbw-s2) var(--sbw-s3); padding-bottom: var(--sbw-s3); }
.sbw-lib-search { flex: 1 1 200px; max-width: 360px; min-width: 0; box-sizing: border-box; padding: 6px 12px; border-radius: var(--sbw-r1); }
.sbw-lib-sort { display: inline-flex; align-items: center; gap: 2px; font-size: var(--sbw-t-small); }
.sbw-lib-sort-label { color: var(--sb-ui-faint); margin-inline-end: var(--sbw-s1); }
.sbw-lib-sortbtn { border: 0; background: none; padding: 4px 8px; border-radius: var(--sbw-r1); color: var(--sb-ui-muted); font: inherit; }
.sbw-lib-sortbtn:hover { background: var(--sb-ui-hover); color: var(--sb-ui-text); }
.sbw-lib-sortbtn.is-on { color: var(--sb-ui-text); font-weight: 600; }
.sbw-lib-sortbtn[data-dir="1"].is-on::after { content: " \2193"; }
.sbw-lib-sortbtn[data-dir="-1"].is-on::after { content: " \2191"; }
.sbw-lib-collections, .sbw-lib-clear { margin: 0; }
.sbw-lib-status { margin: 0; padding-bottom: var(--sbw-s2); min-height: 20px; }
.sbw-lib-status.is-error { color: var(--sb-ui-danger); }
.sbw-lib-cols { display: none; }

.sbw-lib-scroll { flex: 1; min-height: 0; overflow: auto; padding-inline: var(--lib-gutter); border-top: 1px solid var(--sb-ui-line); }
.sbw-lib-scroll[hidden], .sbw-lib-cols[hidden] { display: none; }
.sbw-lib-space { position: relative; }
.sbw-lib-rows { position: absolute; inset: 0 0 auto 0; }
.sbw-lib-row { position: absolute; top: 0; left: 0; right: 0; height: 56px; box-sizing: border-box; display: grid; grid-template-columns: 32px minmax(0, 1fr) 44px; align-items: center; border-bottom: 1px solid var(--sb-ui-line); cursor: pointer; }
.sbw-lib-row:hover, .sbw-lib-row.is-ticked { background: var(--sb-ui-hover); }
.sbw-lib-text { display: flex; flex-direction: column; min-width: 0; padding-inline: var(--sbw-s1); }
.sbw-lib-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sb-ui-text); text-decoration: none; line-height: 1.3; }
.sbw-lib-link:hover { text-decoration: underline; }
.sbw-lib-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sb-ui-muted); font-size: var(--sbw-t-small); line-height: 1.3; }
.sbw-lib-authors, .sbw-lib-venue { display: none; }
.sbw-lib-year { text-align: end; color: var(--sb-ui-muted); font-size: var(--sbw-t-small); font-variant-numeric: tabular-nums; }
.sbw-chk { display: flex; align-items: center; justify-content: center; height: 100%; cursor: pointer; }
.sbw-chk input { margin: 0; opacity: 0; accent-color: var(--sb-ui-accent); cursor: pointer; }
.sbw-lib-row:hover .sbw-chk input, .sbw-lib-row:focus-within .sbw-chk input, .sbw-lib.has-ticks .sbw-chk input, .sbw-chk input:checked { opacity: 1; }
@media (hover: none) { .sbw-chk input { opacity: 1; } }
.sbw-lib-ask { white-space: nowrap; }
.sbw-lib-ask[hidden], .sbw-lib-clear[hidden] { display: none; }

@container (min-width: 760px) {
  .sbw-lib-cols { display: grid; grid-template-columns: 32px minmax(0, 1fr) 200px 56px 160px; padding-block: var(--sbw-s2); border-top: 1px solid var(--sb-ui-line); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sb-ui-muted); }
  .sbw-lib-cols > :nth-child(4) { text-align: end; }
  .sbw-lib-cols > :nth-child(5) { padding-inline-start: var(--sbw-s3); }
  .sbw-lib-scroll { border-top: 0; }
  .sbw-lib-row { grid-template-columns: 32px minmax(0, 1fr) 200px 56px 160px; }
  .sbw-lib-sub { display: none; }
  .sbw-lib-authors, .sbw-lib-venue { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sb-ui-muted); font-size: var(--sbw-t-small); padding-inline-end: var(--sbw-s3); }
  .sbw-lib-venue { padding-inline-start: var(--sbw-s3); }
}

@media (min-width: 700px) {
  .sbw-lib { --lib-gutter: var(--sbw-s5); flex-direction: row; }
  .sbw-lib-tree { display: block; flex: none; width: 224px; max-height: none; border-bottom: 0; border-right: 1px solid var(--sb-ui-line); padding-top: var(--sbw-s5); }
  .sbw-lib.hide-tree .sbw-lib-tree { display: none; }
}
@media (min-width: 960px) { .sbw-lib { --lib-gutter: var(--sbw-s6); } }

/* ---- Notes */
.sbw-notes-search { width: 100%; max-width: none; margin-bottom: var(--sbw-s4); }
.sbw-note-row .sbw-card-title { font-size: var(--sbw-t-body); }

/* ---- readers (paper and note) */
.sbw-reader-wrap { height: 100%; display: flex; flex-direction: column; min-height: 0; container-type: inline-size; background: var(--sb-ui-bg); }
.sbw-reader-status { padding: var(--sbw-s5) var(--sbw-s4); }
.sbw-reader-bar { flex: none; display: flex; align-items: center; gap: var(--sbw-s2); box-sizing: border-box; min-height: 48px; padding: var(--sbw-s2) var(--sbw-s4); border-bottom: 1px solid var(--sb-ui-line); }
.sbw-reader-bar .sbw-quiet, .sbw-reader-bar .sb-button { margin: 0; text-decoration: none; white-space: nowrap; }
.sbw-reader-back { color: var(--sb-ui-muted); }
.sbw-reader { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.sbw-reader-toc { display: none; overflow: auto; padding: var(--sbw-s5) var(--sbw-s2); border-right: 1px solid var(--sb-ui-line); font-size: var(--sbw-t-small); }
.sbw-toc-item { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--sbw-s2); box-sizing: border-box; min-height: 32px; padding: 4px var(--sbw-s3); border: 0; border-radius: var(--sbw-r1); background: none; color: var(--sb-ui-text); font: inherit; text-align: start; cursor: pointer; }
.sbw-toc-item:hover { background: var(--sb-ui-hover); }
.sbw-toc-item.is-level-2 { padding-inline-start: var(--sbw-s5); color: var(--sb-ui-muted); }
.sbw-toc-item.is-level-3 { padding-inline-start: 36px; color: var(--sb-ui-muted); }

.sbw-reader-article { min-width: 0; overflow: auto; box-sizing: border-box; padding: var(--sbw-s5) var(--sbw-s4) var(--sbw-s6); }
.sbw-reader-head, .sbw-reader-section, .sbw-note-body { max-width: 680px; margin-inline: auto; }
.sbw-reader-head { margin-bottom: var(--sbw-s5); }
.sbw-reader-title { margin: 0 0 var(--sbw-s3); font-size: var(--sbw-t-title); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.sbw-reader-authors { margin: 0 0 var(--sbw-s1); }
.sbw-reader-venue { margin: 0 0 var(--sbw-s2); color: var(--sb-ui-muted); font-size: var(--sbw-t-small); }
.sbw-reader-doi { color: var(--sb-ui-accent); font-size: var(--sbw-t-small); text-decoration: none; overflow-wrap: anywhere; }
.sbw-reader-doi:hover { text-decoration: underline; }
.sbw-reader-section { margin-bottom: var(--sbw-s5); }
.sbw-reader-section#sbw-sec-pdf { max-width: none; }
.sbw-reader-h2 { margin: 0 0 var(--sbw-s3); font-size: var(--sbw-t-small); font-weight: 600; color: var(--sb-ui-muted); }
.sbw-pdf { position: relative; }
.sbw-pdf-bar { display: flex; align-items: center; gap: var(--sbw-s2); max-width: 1000px; margin: 0 auto var(--sbw-s2); color: var(--sb-ui-muted); font-size: var(--sbw-t-small); }
.sbw-pdf-pages { display: flex; flex-direction: column; align-items: center; gap: var(--sbw-s3); }
.sbw-pdf-page { position: relative; max-width: 100%; background: #fff; box-shadow: 0 0 0 1px var(--sb-ui-line); --scale-round-x: 1px; --scale-round-y: 1px; }
.sbw-pdf-canvas { position: absolute; inset: 0; display: block; }
.sbw-pdf-marks { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; }
.sbw-pdf-mark { position: absolute; background: color-mix(in srgb, var(--sbw-mark) 45%, transparent); }
.sbw-pdf-mark.is-waiting { outline: 1px dashed var(--sbw-mark); outline-offset: 1px; }
.sbw-pdf-problem { color: var(--sb-ui-danger); }
.sbw-hl-bar { position: absolute; z-index: 5; display: flex; flex-direction: column; gap: var(--sbw-s2); padding: var(--sbw-s2); border: 1px solid var(--sb-ui-line); border-radius: var(--sbw-r2); background: var(--sb-ui-bg); box-shadow: var(--sb-ui-shadow); }
.sbw-hl-bar[hidden] { display: none; }
.sbw-hl-swatches { display: flex; gap: 4px; }
.sbw-hl-swatch { width: 28px; height: 28px; padding: 0; border: 2px solid var(--sb-ui-bg); border-radius: 50%; background: var(--sbw-mark); box-shadow: 0 0 0 1px var(--sb-ui-line); cursor: pointer; }
.sbw-hl-swatch:hover, .sbw-hl-swatch:focus-visible { box-shadow: 0 0 0 2px var(--sbw-mark); outline: none; }
.sbw-hl-comment { width: 100%; box-sizing: border-box; }
/* PDF.js's text layer (from its pdf_viewer.css, Apache-2.0): transparent text over the drawn page, for selecting */
.sbw-pdf .textLayer { position: absolute; inset: 0; overflow: clip; line-height: 1; text-align: initial; opacity: 1; z-index: 1; transform-origin: 0 0; -webkit-text-size-adjust: none; text-size-adjust: none; forced-color-adjust: none; caret-color: CanvasText;
  --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); }
.sbw-pdf .textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.sbw-pdf .textLayer > :not(.markedContent), .sbw-pdf .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height)); --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.sbw-pdf .textLayer .markedContent { display: contents; }
.sbw-pdf .textLayer span[role="img"] { user-select: none; cursor: default; }
.sbw-pdf .textLayer ::selection { background: color-mix(in srgb, AccentColor, transparent 75%); }
.sbw-pdf .textLayer br::selection { background: transparent; }
.sbw-pdf .textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }
.sbw-pdf .textLayer.selecting .endOfContent { top: 0; }
.sbw-pdf-missing { padding: var(--sbw-s4) 0; }
.sbw-pdf-missing-title { margin: 0 0 var(--sbw-s1); font-weight: 600; }
.sbw-highlights { max-width: 680px; }

.sbw-prose { --measure: 32.5em; font-family: "Iowan Old Style", "Charter", Georgia, serif; font-size: 18px; line-height: 1.6; overflow-wrap: anywhere; }
p.sbw-prose { margin: 0 0 var(--sbw-s3); max-width: var(--measure); }
.sbw-note-body > :where(p, ul, ol, blockquote, h1, h2, h3, h4) { max-width: var(--measure); }
.sbw-note-body > :first-child { margin-top: 0; }
.sbw-note-body h1, .sbw-note-body h2, .sbw-note-body h3, .sbw-note-body h4 { font-family: var(--sbw-serif); font-weight: 500; line-height: 1.3; margin: 1.6em 0 0.5em; }
.sbw-note-body h1 { font-size: 22px; } .sbw-note-body h2 { font-size: 19px; } .sbw-note-body h3, .sbw-note-body h4 { font-size: 16px; }
.sbw-note-body p, .sbw-note-body ul, .sbw-note-body ol, .sbw-note-body blockquote, .sbw-note-body pre { margin: 0 0 var(--sbw-s3); }
.sbw-note-body blockquote { padding-inline-start: var(--sbw-s3); border-inline-start: 2px solid var(--sb-ui-line); color: var(--sb-ui-muted); }
.sbw-note-body code { font-family: var(--sb-ui-mono); font-size: 0.85em; background: var(--sb-ui-bg-side); padding: 0 4px; border-radius: 4px; }
.sbw-note-body pre { overflow: auto; padding: var(--sbw-s3); background: var(--sb-ui-bg-side); border-radius: var(--sbw-r1); }
.sbw-note-body pre code { background: none; padding: 0; }
.sbw-note-body img { max-width: 100%; height: auto; }
.sbw-note-body table { border-collapse: collapse; display: block; overflow: auto; max-width: 100%; font-family: var(--sb-ui-font); font-size: var(--sbw-t-small); }
.sbw-note-body th, .sbw-note-body td { border: 1px solid var(--sb-ui-line); padding: 4px 8px; }
.sbw-note-body a { color: var(--sb-ui-accent); }
.sbw-note-body .wikilink.is-missing { color: var(--sb-ui-muted); border-bottom: 1px dotted var(--sb-ui-faint); }
.sbw-note-body a.sbw-cite { text-decoration: none; }

.sbw-reader-panel { display: none; box-sizing: border-box; overflow: auto; padding: var(--sbw-s3); }
.sbw-reader.is-panel-open .sbw-reader-panel { display: block; position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; width: min(360px, 100%); background: var(--sb-ui-bg); border-left: 1px solid var(--sb-ui-line); box-shadow: var(--sb-ui-shadow); }
.sbw-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--sbw-s3); margin: 0 0 var(--sbw-s2); font-size: var(--sbw-t-small); }
.sbw-facts dt { color: var(--sb-ui-muted); }
.sbw-facts dd { margin: 0; overflow-wrap: anywhere; }

@container (min-width: 960px) {
  .sbw-reader { grid-template-columns: 200px minmax(0, 1fr); }
  .sbw-reader.is-panel-open { grid-template-columns: 200px minmax(0, 1fr) 320px; }
  .sbw-reader-toc { display: block; }
  .sbw-reader.is-panel-open .sbw-reader-panel { position: static; width: auto; box-shadow: none; z-index: auto; }
  .sbw-reader-article { padding-inline: var(--sbw-s5); }
}

/* Reading wants the room: the rail drops to its 56 px icons so the article keeps ~68 characters a line beside the
   200 px contents and the 320 px panel (readwise-2 does the same). */
@media (min-width: 960px) {
  .sbw.is-reading { grid-template-columns: 56px minmax(0, 1fr); }
  .sbw.is-reading .sbw-brand, .sbw.is-reading .sbw-nav-label { display: none; }
  .sbw.is-reading .sbw-nav-item, .sbw.is-reading .sbw-more { justify-content: center; padding: 0; }
  .sbw.is-reading .sbw-menu { left: calc(100% + var(--sbw-s2)); right: auto; bottom: var(--sbw-s3); }
}

.sbw-panel-block { margin-bottom: var(--sbw-s4); }
.sbw-panel-h { margin: 0 0 var(--sbw-s2); padding: 0 var(--sbw-s1); font-size: var(--sbw-t-small); font-weight: 600; color: var(--sb-ui-text); }

/* a phone's bar keeps the actions and drops the words on the two icon buttons */
@container (max-width: 559px) {
  .sbw-reader-back span, .sbw-reader-toggle span { display: none; }
  .sbw-reader-bar { padding-inline: var(--sbw-s3); }
}

/* A numbered source list ("1. Title" over its address, from readerMarkdown): no bullet, the address small and quiet. */
.sbw-reader-article li:has(> strong:first-child + a + br + a) { list-style: none; margin-left: -1.2em; padding: 2px 0 6px; }
.sbw-reader-article li:has(> strong:first-child + a + br + a) > strong { font-weight: 500; color: var(--sb-ui-faint); font-variant-numeric: tabular-nums; }
.sbw-reader-article li > br + a { font-family: var(--sb-ui-font); font-size: 12px; color: var(--sb-ui-faint); text-decoration: none; overflow-wrap: anywhere; }
.sbw-reader-article li > br + a:hover { text-decoration: underline; }
.sbw-reader-article li:has(> strong:first-child + a + br + a) > strong + a { color: var(--sb-ui-text); text-decoration-color: var(--sb-ui-line); text-underline-offset: 3px; }
.sbw-reader-article li:has(> strong:first-child + a + br + a) > strong + a:hover { text-decoration-color: currentColor; }
.sbw-img-gone, .sbw-reader-article a.sbw-img-gone { display: inline-block; padding: 6px 10px; border: 1px dashed var(--sb-ui-line); border-radius: 6px; color: var(--sb-ui-faint); font-family: var(--sb-ui-font); font-size: 12px; text-decoration: none; }
.sbw-reader-article a:has(> img[src*="i.ytimg.com"]) { display: inline-block; position: relative; }
.sbw-reader-article a:has(> img[src*="i.ytimg.com"])::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 40px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }

/* Note tables: scroll sideways when wide; drag a header edge to resize a column (resizableTable). */
.sbw-table-wrap { max-width: 100%; overflow-x: auto; margin: 0 0 1em; }
.sbw-table-wrap table, .sbw-note-body .sbw-table-wrap table { display: table; max-width: none; overflow: visible; margin: 0; }
.sbw-table-wrap th { position: relative; }
.sbw-col-grip { position: absolute; top: 0; right: -4px; bottom: 0; width: 8px; cursor: col-resize; touch-action: none; z-index: 1; }
.sbw-col-grip::after { content: ""; position: absolute; top: 20%; bottom: 20%; left: 3px; width: 2px; border-radius: 1px; background: transparent; }
.sbw-col-grip:hover::after, .sbw-table-wrap.is-resizing .sbw-col-grip::after { background: var(--sb-ui-accent); }
.sbw-table-wrap.is-resizing { cursor: col-resize; user-select: none; }
.sbw-table-wrap td, .sbw-table-wrap th { overflow-wrap: anywhere; }

/* ---- the in-app browser (spec 015 B3): a panel over the content area, closed like the full-screen views */
.sbw-browser { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; min-width: 0; background: var(--sb-ui-bg); }
.sbw-browser[hidden] { display: none; }
.sbw-browser-bar { flex: none; display: flex; align-items: center; gap: var(--sbw-s1); box-sizing: border-box; min-height: 48px; padding: 0 var(--sbw-s3); border-bottom: 1px solid var(--sb-ui-line); }
.sbw-browser-tool { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--sb-ui-muted); cursor: pointer; }
.sbw-browser-tool:hover:not(:disabled) { background: var(--sb-ui-hover); color: var(--sb-ui-text); }
.sbw-browser-tool:disabled { opacity: .35; cursor: default; }
.sbw-browser-text { flex: none; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--sb-ui-muted); font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; }
.sbw-browser-text:hover { background: var(--sb-ui-hover); color: var(--sb-ui-text); }
.sbw-browser-where { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; line-height: 1.25; }
.sbw-browser-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--sb-ui-text); }
.sbw-browser-address { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--sb-ui-muted); }
.sbw-browser-body { flex: 1; min-height: 0; overflow: auto; }
.sbw-browser-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.sbw-browser-article { box-sizing: border-box; max-width: 680px; margin-inline: auto; padding: var(--sbw-s4) var(--sbw-s4) var(--sbw-s5, 48px); }
.sbw-browser-article img { max-width: 100%; height: auto; }
.sbw-browser-article .sbw-note-body a { overflow-wrap: anywhere; }
.sbw-browser-status { padding: var(--sbw-s4); }
.sbw-browser-card { box-sizing: border-box; max-width: 420px; margin: 18vh auto 0; padding: var(--sbw-s4); text-align: center; }
.sbw-browser-card-title { margin: 0 0 var(--sbw-s2); font-size: 18px; font-weight: 600; }
@media (max-width: 480px) {
  .sbw-browser-bar { gap: 0; padding: 0 var(--sbw-s2); }
  .sbw-browser-text { padding: 6px 6px; font-size: 12px; }
}

/* Open in Zotero / Obsidian: the app's own logo before the words */
.sbw-brand-button { display: inline-flex; align-items: center; gap: 6px; }
/* Settings > Routines: each routine is a row that opens the routines page */
.sbw-routines { display: grid; gap: var(--sbw-s3); justify-items: start; }
.sbw-routines .sbw-list { width: 100%; }
.sbw-routines a.sbw-row { color: inherit; text-decoration: none; border-radius: var(--sbw-r1); }
.sbw-routines a.sbw-row:hover { background: var(--sb-ui-hover); }

/* Home's guided setup for a new user (setup-card.js, spec 023) */
.sbw-setup { margin: 0 0 var(--sbw-s6); padding: var(--sbw-s4) var(--sbw-s5); border: 1px solid var(--sb-ui-line); border-radius: var(--sbw-r2); background: var(--sb-ui-bg); }
.sbw-setup-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sbw-s3); margin-bottom: var(--sbw-s2); }
.sbw-setup-title { margin: 0; font-size: 1.25em; font-weight: 600; }
.sbw-setup-count { color: var(--sb-ui-muted); font-size: 0.9em; }
.sbw-setup-steps { list-style: none; margin: 0; padding: 0; }
.sbw-setup-step { padding: var(--sbw-s2) 0; border-top: 1px solid var(--sb-ui-line); }
.sbw-setup-step:first-child { border-top: 0; }
.sbw-setup-line { display: flex; align-items: center; gap: var(--sbw-s3); }
.sbw-setup-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--sb-ui-line); display: inline-flex; align-items: center; justify-content: center; }
.sbw-setup-step.is-done .sbw-setup-mark { border-color: var(--sb-ui-accent); background: var(--sb-ui-accent); color: var(--sb-ui-bg); }
.sbw-setup-step.is-open .sbw-setup-mark { border-color: var(--sb-ui-accent); }
.sbw-setup-logo { flex: none; width: 22px; height: 22px; border-radius: 4px; color: var(--sb-ui-accent); }
.sbw-setup-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sbw-setup-name { font-weight: 600; }
.sbw-setup-step.is-done .sbw-setup-name { color: var(--sb-ui-muted); }
.sbw-setup-detail { color: var(--sb-ui-muted); font-size: 0.92em; }
.sbw-setup-body { margin: var(--sbw-s2) 0 var(--sbw-s1) calc(44px + 2 * var(--sbw-s3)); display: flex; flex-direction: column; gap: var(--sbw-s2); align-items: flex-start; }
.sbw-setup-lead { margin: 0; }
.sbw-setup-row { display: flex; align-items: center; gap: var(--sbw-s2); width: 100%; max-width: 560px; }
.sbw-setup-found { flex: 1; font-family: var(--sb-ui-mono, ui-monospace, monospace); font-size: 0.92em; }
.sbw-setup-path { flex: 1; min-width: 0; }
.sbw-setup-list { margin: 0; padding-left: 1.2em; color: var(--sb-ui-muted); }
.sbw-setup-link { color: var(--sb-ui-accent); }
.sbw-setup-foot { display: flex; gap: var(--sbw-s2); }
.sbw-setup-say { margin: var(--sbw-s2) 0 0; color: var(--sb-ui-danger, #b42318); }
.sbw-setup-say:empty { display: none; }
.sbw-setup-hide { margin-top: var(--sbw-s2); }

/* ui/src/sources/sources.css. The Sources page and Home's first-run top half (spec 014 G1). Tokens only; concatenated
   after views.css into app.css by build-web.mjs. Quiet type over boxes: a serif headline, hairlines, one accent. */

.sbw-sources { min-width: 0; }
.sbw-page.sbw-sources { max-width: 880px; }
.sbw-src-title { margin: 0 0 var(--sbw-s5); max-width: 18ch; font-family: var(--sbw-serif); font-size: clamp(32px, 5.2vw, 52px); font-weight: 400; font-optical-sizing: auto; letter-spacing: -0.015em; line-height: 1.08; }
.sbw-src-title em { font-style: italic; }
.sbw-src-h2 { margin: 0; font-family: var(--sbw-serif); font-size: 20px; font-weight: 400; letter-spacing: -0.005em; }
.sbw-src-hint { margin: var(--sbw-s1) 0 var(--sbw-s3); color: var(--sb-ui-muted); font-size: var(--sbw-t-small); }

/* the ring and the one suggestion */
.sbw-src-hero { display: flex; align-items: center; gap: var(--sbw-s5); margin-bottom: var(--sbw-s6); padding-bottom: var(--sbw-s5); border-bottom: 1px solid var(--sb-ui-line); }
.sbw-src-ring { flex: none; width: 112px; display: flex; flex-direction: column; align-items: center; }
.sbw-src-ring-svg { width: 112px; height: 112px; display: block; }
.sbw-src-ring-track { stroke: var(--sb-ui-line); }
.sbw-src-ring-fill { stroke: var(--sb-ui-accent); transition: stroke-dasharray 0.25s ease; }
.sbw-src-ring-n { fill: var(--sb-ui-text); font-family: var(--sbw-serif); font-size: 34px; }
.sbw-src-ring-label { margin-top: calc(-1 * var(--sbw-s3)); color: var(--sb-ui-muted); font-size: var(--sbw-t-small); }
.sbw-src-suggest { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sbw-s3); }
.sbw-src-suggest-text { margin: 0; font-family: var(--sbw-serif); font-size: clamp(18px, 2.4vw, 22px); line-height: 1.3; overflow-wrap: anywhere; }

/* chip groups */
.sbw-src-group { margin: 0 0 var(--sbw-s5); min-width: 0; }
.sbw-chips { display: flex; flex-wrap: wrap; gap: var(--sbw-s2); }
.sbw-chip { display: inline-flex; align-items: center; gap: var(--sbw-s2); box-sizing: border-box; max-width: 100%; min-height: 36px; padding: 0 var(--sbw-s3) 0 var(--sbw-s4); border: 1px solid var(--sb-ui-line); border-radius: var(--sbw-r3); background: var(--sb-ui-bg); color: var(--sb-ui-text); font: inherit; font-size: var(--sbw-t-small); text-align: left; cursor: pointer; }
.sbw-chip:hover { background: var(--sb-ui-hover); }
.sbw-chip.is-on { background: var(--sb-ui-accent-tint); border-color: var(--sb-ui-accent); }
.sbw-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbw-chip-mark { flex: none; display: inline-flex; color: var(--sb-ui-muted); }
.sbw-chip.is-on .sbw-chip-mark { color: var(--sb-ui-accent); }
:is(.sbw, .sb-home-view) .sbw-chip-icon { width: 14px; height: 14px; stroke: currentColor; }
.sbw-chip.is-learned { cursor: default; padding-right: 0; }
.sbw-chip.is-learned:hover { background: var(--sb-ui-accent-tint); }
.sbw-chip-tag { flex: none; padding: 0 6px; border: 1px solid var(--sb-ui-line); border-radius: 6px; font-size: 11.5px; color: var(--sb-ui-muted); }
.sbw-chip-x { flex: none; align-self: stretch; min-width: 36px; border: 0; border-radius: 0 var(--sbw-r3) var(--sbw-r3) 0; background: transparent; color: var(--sb-ui-muted); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
.sbw-chip-x:hover { background: var(--sb-ui-hover); color: var(--sb-ui-text); }
.sbw-src-learning { margin: var(--sbw-s3) 0 0; color: var(--sb-ui-muted); font-size: var(--sbw-t-small); }
.sbw-src-learning-h { font-family: var(--sbw-serif); font-style: italic; }

.sbw-src-add { display: flex; gap: var(--sbw-s2); margin-top: var(--sbw-s3); max-width: 480px; }
.sbw-src-input { flex: 1; min-width: 0; box-sizing: border-box; padding: var(--sbw-s2) var(--sbw-s3); font-size: 16px; } /* 16 px: iOS zooms smaller fields */
.sbw-src-note { min-height: 0; margin-top: var(--sbw-s2); font-size: var(--sbw-t-small); color: var(--sb-ui-muted); overflow-wrap: anywhere; }
.sbw-src-note:empty { display: none; }
.sbw-src-note.is-error { color: var(--sb-ui-danger); }
.sbw-src-pick { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 480px; margin-top: var(--sbw-s1); padding: var(--sbw-s2) var(--sbw-s3); border: 1px solid var(--sb-ui-line); border-radius: var(--sbw-r1); background: var(--sb-ui-bg); color: var(--sb-ui-text); font: inherit; text-align: left; cursor: pointer; }
.sbw-src-pick:hover { background: var(--sb-ui-hover); }
.sbw-src-pick-meta { color: var(--sb-ui-muted); font-size: 12px; overflow-wrap: anywhere; }

.sbw-src-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sbw-s3); margin: var(--sbw-s5) 0 var(--sbw-s6); }
.sbw-src-actions .sbw-quiet { margin: 0; }
.sbw-src-save { padding: var(--sbw-s2) var(--sbw-s5); }
.sbw-src-status { flex-basis: 100%; margin: 0; min-height: 1.4em; color: var(--sb-ui-muted); font-size: var(--sbw-t-small); }
.sbw-src-status.is-error { color: var(--sb-ui-danger); }
.sbw-src-home { color: var(--sb-ui-accent); }

/* the explainer: today's cover in the middle, the sources around it on dashed lines */
.sbw-src-explain { border-top: 1px solid var(--sb-ui-line); padding-top: var(--sbw-s5); }
.sbw-src-diagram { display: block; width: 100%; max-width: 520px; height: auto; margin: var(--sbw-s4) auto 0; }
.sbw-src-link { stroke: var(--sb-ui-faint); stroke-width: 1; fill: none; }
.sbw-src-link.is-ghost { opacity: 0.35; }
.sbw-src-node { fill: var(--sb-ui-bg); stroke: var(--sb-ui-line); stroke-width: 1.5; }
.sbw-src-node.is-ghost { stroke-dasharray: 3 4; opacity: 0.6; }
.sbw-src-mono { fill: var(--sb-ui-text); font-family: var(--sb-ui-font); font-size: 13px; font-weight: 600; }
.sbw-src-cover { fill: var(--sb-ui-bg-side); stroke: var(--sb-ui-line); stroke-width: 1; }
.sbw-src-cover-label { fill: var(--sb-ui-muted); font-family: var(--sb-ui-font); font-size: 8px; letter-spacing: 0.12em; }
.sbw-src-cover-title { fill: var(--sb-ui-text); font-family: var(--sbw-serif); font-size: 18px; }
.sbw-src-cover-rule { stroke: var(--sb-ui-text); stroke-width: 1; }
.sbw-src-cover-date { fill: var(--sb-ui-muted); font-family: var(--sb-ui-font); font-size: 10px; }
.sbw-src-powered { margin: var(--sbw-s2) 0 var(--sbw-s5); text-align: center; font-family: var(--sbw-serif); font-style: italic; color: var(--sb-ui-muted); }
.sbw-src-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sbw-s5); }
.sbw-src-col-title { margin: 0 0 var(--sbw-s2); font-size: var(--sbw-t-small); font-weight: 600; }
.sbw-src-col-text { margin: 0; color: var(--sb-ui-muted); font-size: var(--sbw-t-small); line-height: 1.5; }

.sbw-today-chat { margin-left: auto; }
.sbw-today-chat[hidden] { display: none; }
.sbw-today-sources { margin-left: var(--sbw-s3); }
.sbw-today-chat[hidden] + .sbw-today-sources { margin-left: auto; }
.sbw-today-sources + .sbw-layout { margin-left: var(--sbw-s3); }

@media (max-width: 699px) {
  .sbw-src-hero { flex-direction: column; align-items: flex-start; gap: var(--sbw-s3); }
  .sbw-src-cols { grid-template-columns: minmax(0, 1fr); gap: var(--sbw-s4); }
  .sbw-src-add { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .sbw-src-ring-fill { transition: none; } }