/* Veridell — generated stylesheet bundle. Do not edit.
 * Built from 11 sheets in cascade order:
 * styles.css > app.css > responsive.css > system.css > article-layout.css > mobile.css > polish.css > design-system.css > amigo-ui.css > preferences.css > refine.css
 */
/* ── styles.css ── */
:root { color-scheme: light dark; --ivory: #f5f0e6; --forest: #173b32; --charcoal: #242824; --copper: #b46a45; --sage: #c8d5c3; --sand: #e8dfd0; --bg: var(--ivory); --surface: #fbf8f1; --surface-2: var(--sand); --text: var(--charcoal); --muted: #5c6259; --faint: #5b6258; --ok: #1f5c48; --warn: #8a4a24; --danger: #9b2c2c; --border: #e0d6c4; --border-2: #cfc3ac; --focus: var(--copper-ink); --primary: var(--forest); --accent: var(--copper); --copper-ink: #9a5636; --copper-deep: #8a4f24; --forest-ink: #173b32; --accent-2: #44705f; --on-primary: #f7f4ec; --topbar-h: 62px; --radius-xl: 24px; --radius-lg: 20px; --radius: 16px; --radius-sm: 14px; --radius-xs: 12px; --shadow-sm: 0 1px 2px rgba(36, 40, 36, .06); --shadow: 0 1px 2px rgba(36, 40, 36, .05), 0 12px 28px -14px rgba(23, 59, 50, .22); --shadow-lg: 0 2px 6px rgba(36, 40, 36, .06), 0 34px 60px -30px rgba(23, 59, 50, .38); --maxw: 1200px; --font-head: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Tiro Devanagari Hindi', serif; --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Devanagari', 'Helvetica Neue', Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; }

[data-theme="dark"] { --bg: #101713; --surface: #1a2620; --surface-2: #21302a; --text: #ede8dd; --muted: #a9b0a6; --faint: #848c84; --ok: #7fc4a5; --warn: #e0a271; --danger: #f08a8a; --border: #2a382f; --border-2: #3a4a40; --primary: var(--sage); --accent: #d08a62; --copper-ink: #d08a62; --copper-deep: #8a4f24; --forest-ink: #a8d5c0; --accent-2: #7fb3a0; --on-primary: #101713; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 28px -14px rgba(0, 0, 0, .7); --shadow-lg: 0 2px 6px rgba(0, 0, 0, .45), 0 34px 60px -30px rgba(0, 0, 0, .9); }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; text-size-adjust: 100%; }

body { margin: 0px; font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; min-height: 100vh; overflow-x: hidden; }

body::before { content: ""; position: fixed; inset: 0px; z-index: -2; pointer-events: none; background: radial-gradient(56vw 40vw at 10% -6%, color-mix(in srgb, var(--sage) 42%, transparent), transparent 62%),
    radial-gradient(46vw 36vw at 96% 0%, color-mix(in srgb, var(--copper) 16%, transparent), transparent 58%); }

body::after { content: ""; position: fixed; inset: 0px; z-index: -1; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--forest) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--forest) 6%, transparent) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(78% 55% at 50% 0%, rgb(0, 0, 0) 22%, transparent 100%); }

.grain { position: fixed; inset: 0px; z-index: 1; pointer-events: none; opacity: 0.32; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }

[data-theme="dark"] .grain { mix-blend-mode: screen; opacity: 0.16; }

a { color: var(--accent-2); text-decoration: none; }

a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--font-head); letter-spacing: -0.01em; line-height: 1.18; font-weight: 600; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }

.skip-link { position: absolute; left: -999px; top: 0px; z-index: 99; background: var(--primary); color: var(--on-primary); padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0; }

.skip-link:focus { left: 0px; }

.btn { font-style: inherit; font-variant: inherit; font-stretch: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-family: var(--font-body); font-size: 14.5px; font-weight: 500; cursor: pointer; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); padding: 10px 16px; line-height: 1.15; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: transform 0.12s, border-color 0.16s, background 0.16s, color 0.16s; white-space: nowrap; -webkit-tap-highlight-color: transparent; }

.btn:hover { border-color: var(--accent); text-decoration: none; }

.btn:active { transform: scale(0.985); }

.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.btn-primary:hover { background: var(--copper-deep); border-color: var(--copper-deep); color: rgb(255, 255, 255); }

[data-theme="dark"] .btn-primary { background: var(--sage); color: var(--on-primary); border-color: var(--sage); }

[data-theme="dark"] .btn-primary:hover { background: var(--copper-ink); border-color: var(--copper-ink); color: var(--on-primary); }

.btn-ghost { background: transparent; border-color: var(--border-2); }

.btn-ghost:hover { background: var(--surface-2); }

.btn-icon { padding: 9px; width: 40px; height: 40px; }

/* A filled icon inherits the text colour; a stroke icon declares fill="none"
   and must keep it. Without the guard the theme glyph — a stroke circle and
   two lines — was filled solid and rendered as a black dot in the header. */
.btn svg { width: 17px; height: 17px; display: block; }
.btn svg:not([fill="none"]) { fill: currentcolor; }

.topbar { position: sticky; top: 0px; z-index: 60; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.3) blur(14px); border-bottom: 1px solid var(--border-2); }

.topbar-inner { max-width: var(--maxw); margin: 0px auto; padding: 11px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }

.brand:hover { text-decoration: none; }

.brand-mark { width: 34px; height: 34px; flex: 0 0 auto; border-radius: var(--radius-sm); display: grid; place-items: center; }

.brand-mark svg { width: 100%; height: 100%; display: block; border-radius: var(--radius-sm); }

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }

.brand-text strong { font-family: var(--font-head); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }

.brand-text small { color: var(--faint); font-size: 10.5px; letter-spacing: 0.03em; }

.searchbar { flex: 1 1 320px; display: flex; align-items: flex-end; gap: 8px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 7px 8px 7px 14px; min-width: 200px; box-shadow: var(--shadow-sm); transition: border-color 0.18s, box-shadow 0.18s; }

.searchbar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }

.searchbar textarea, .searchbar input { flex: 1 1 0%; border: 0px; background: transparent; color: var(--text); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-family: var(--font-body); font-size: 15px; min-width: 50px; padding: 6px 2px; resize: none; max-height: 140px; overflow-y: auto; }

.searchbar textarea::placeholder, .searchbar input::placeholder { color: var(--faint); }

.searchbar textarea:focus, .searchbar input:focus { outline: none; }

.searchbar:has(textarea:focus-visible), .searchbar:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.searchbar input::-webkit-search-cancel-button { appearance: none; }

.mode { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-xs); background: var(--surface-2); flex: 0 0 auto; align-self: center; }

.mode-btn { font-style: inherit; font-variant: inherit; font-stretch: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-family: var(--font-body); font-size: 12.5px; font-weight: 500; cursor: pointer; border: 0px; background: transparent; color: var(--muted); padding: 6px 10px; border-radius: var(--radius-xs); line-height: 1; }

.mode-btn.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

.depth { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.depth-label { font-size: 12px; color: var(--faint); }

.depth-btn { font-style: inherit; font-variant: inherit; font-stretch: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-family: var(--font-body); font-size: 12.5px; font-weight: 500; cursor: pointer; border: 1px solid var(--border-2); background: var(--surface); color: var(--muted); padding: 7px 12px; border-radius: 999px; line-height: 1; }

.depth-btn:hover { border-color: var(--accent); color: var(--text); }

.depth-btn.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

[data-theme="dark"] .depth-btn.is-active { background: var(--sage); border-color: var(--sage); color: var(--on-primary); }

.topnav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }

.topnav a { color: var(--muted); padding: 8px 11px; font-size: 14px; font-weight: 500; border-radius: var(--radius-xs); }

.topnav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }

.nav-sep { width: 1px; height: 20px; background: var(--border-2); margin: 0px 4px; }

.langbar { border-bottom: 1px solid var(--border); background: var(--surface); }

.langbar-inner { max-width: var(--maxw); margin: 0px auto; padding: 9px 16px; display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }

.langbar select, .select { font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-family: var(--font-body); padding: 7px 10px; border-radius: var(--radius-xs); border: 1px solid var(--border-2); background: var(--surface); color: var(--text); max-width: 260px; }

.suggest { position: absolute; left: 50%; transform: translateX(-50%); width: min(720px, 100% - 20px); top: 100%; margin-top: 8px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 70; }

.suggest-item { display: flex; gap: 12px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--border); color: var(--text); }

.suggest-item:last-child { border-bottom: 0px; }

.suggest-item:hover, .suggest-item.active { background: var(--surface-2); text-decoration: none; }

.suggest-item.active { box-shadow: inset 3px 0 0 var(--accent); }

.suggest-item .si-title { font-weight: 600; }

.suggest-item .si-desc { color: var(--muted); font-size: 13px; }

main { display: block; min-height: 62vh; }

.wrap { max-width: var(--maxw); margin: 0px auto; padding: 26px 16px 72px; }

.wrap-narrow { max-width: 820px; margin: 0px auto; padding: 26px 16px 72px; }

.hero { padding: 56px 16px 8px; text-align: center; position: relative; }

.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--muted); border: 1px solid var(--border-2); border-radius: 999px; padding: 6px 13px; margin-bottom: 20px; background: var(--surface); }

.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--copper); }

.hero h1 { font-size: clamp(34px, 7vw, 62px); margin: 0px 0px 16px; font-weight: 600; letter-spacing: -0.02em; }.hero p.lede { font-size: clamp(15.5px, 2vw, 18.5px); color: var(--muted); margin: 0px auto 26px; max-width: 660px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }

.chip { border: 1px solid var(--border-2); background: var(--surface); color: var(--text); padding: 8px 14px; font-size: 13.5px; font-weight: 400; cursor: pointer; text-decoration: none; border-radius: 999px; transition: transform 0.12s, border-color 0.16s, color 0.16s; }

.chip:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); text-decoration: none; }

.nudge { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); padding: 12px 16px; margin-bottom: 20px; }

.nudge span { color: var(--muted); font-size: 14px; }

.sec { margin-top: 46px; animation: 0.45s ease 0s 1 normal both running rise; }

.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--border-2); padding-bottom: 9px; }

.sec-head h2 { font-size: 22px; margin: 0px; font-weight: 600; }

@keyframes rise { 
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: none; }
}

.aotd { display: grid; grid-template-columns: 1fr; overflow: hidden; border: 1px solid var(--border-2); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }

@media (min-width: 820px) {
  .aotd { grid-template-columns: 1.05fr 0.95fr; align-items: stretch; }
}.aotd-body { padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 12px; }

.aotd-body h2 { font-size: clamp(23px, 3.2vw, 33px); margin: 0px; }

.aotd-body p { color: var(--muted); margin: 0px; font-size: 15px; }

.aotd-body .row-cta { margin-top: 6px; display: flex; gap: 10px; flex-wrap: wrap; }

.howsteps { display: grid; gap: 14px; grid-template-columns: 1fr; counter-reset: how 0; }

@media (min-width: 620px) {
  .howsteps { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .howsteps { grid-template-columns: repeat(4, 1fr); }
}

.howstep { position: relative; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); padding: 20px 18px 18px; }

.howstep::before { counter-increment: how 1; content: counter(how); display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-family: var(--font-head); font-size: 15px; font-weight: 600; }

[data-theme="dark"] .howstep::before { background: var(--sage); color: var(--on-primary); }

.howstep h3 { margin: 0px 0px 6px; font-size: 17px; }

.howstep p { margin: 0px; color: var(--muted); font-size: 13.5px; }

@media (min-width: 1000px) {
  .howstep:not(:last-child)::after { content: ""; position: absolute; top: 34px; right: -14px; width: 14px; height: 1px; background: var(--border-2); }
}

.topics-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }

@media (min-width: 760px) {
  .topics-grid { grid-template-columns: repeat(4, 1fr); }
}

.topic-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; transition: transform 0.14s, border-color 0.16s; }

.topic-card:hover { transform: translateY(-2px); border-color: var(--accent); text-decoration: none; }

.topic-card .ic { width: 32px; height: 32px; border-radius: var(--radius-xs); display: grid; place-items: center; background: color-mix(in srgb, var(--sage) 55%, transparent); color: var(--forest-ink); }

[data-theme="dark"] .topic-card .ic { background: color-mix(in srgb, var(--sage) 22%, transparent); color: var(--sage); }

.topic-card .ic svg { width: 17px; height: 17px; fill: currentcolor; }

.topic-card h3 { margin: 0px; font-size: 15.5px; }

.topic-card p { margin: 0px; color: var(--muted); font-size: 12.5px; }

.feature .ic { width: 36px; height: 36px; border-radius: var(--radius-xs); display: grid; place-items: center; background: color-mix(in srgb, var(--sage) 55%, transparent); color: var(--forest-ink); margin-bottom: 4px; }

[data-theme="dark"] .feature .ic { background: color-mix(in srgb, var(--sage) 22%, transparent); color: var(--sage); }

.feature .ic svg { width: 18px; height: 18px; fill: currentcolor; }

.feature h3 { margin: 0px; font-size: 16px; }

.feature p { margin: 0px; color: var(--muted); font-size: 13.5px; }

.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }

@media (min-width: 560px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
}

.card { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; color: var(--text); transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s; }

.card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--shadow); }

a.card { text-decoration: none; }

.card-thumb { aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }

.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }

.card:hover .card-thumb img { transform: scale(1.04); }

.card-thumb.placeholder { display: grid; place-items: center; }

.card-thumb.placeholder svg { width: 30px; height: 30px; }

.card-body { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 7px; flex: 1 1 0%; }

.card-body h2, .card-body h3 { margin: 0px; font-size: 16px; font-weight: 600; }

.card-body p { margin: 0px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }

.card-meta { margin-top: auto; color: var(--faint); font-size: 12px; }

.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; border-radius: 999px; padding: 5px 11px; background: color-mix(in srgb, var(--sage) 55%, transparent); color: var(--forest-ink); }

[data-theme="dark"] .badge { background: color-mix(in srgb, var(--sage) 22%, transparent); color: var(--sage); }

.badge.accent { background: var(--copper-deep); color: rgb(255, 255, 255); }

[data-theme="dark"] .badge.accent { color: var(--on-primary); }

.article-head { margin-bottom: 4px; }

.article-title { font-size: clamp(28px, 5vw, 44px); margin: 0px 0px 8px; font-weight: 600; }

.article-sub { color: var(--muted); margin: 0px 0px 18px; font-size: 13.5px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.article-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0px 24px; }

.article-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }

.article-grid .toc-rail { display: none; }

.article-grid.rail-open .toc-rail { display: grid; order: -1; }

@media (min-width: 960px) {
  .article-grid.rail-open { grid-template-columns: minmax(0px, 1fr) 300px; gap: 44px; }
  .article-grid.rail-open .toc-rail { order: 0; }
}

.answer-card { border: 1px solid var(--border-2); border-radius: var(--radius-lg); background: var(--surface); padding: 22px; box-shadow: var(--shadow); position: relative; overflow: hidden; }

.answer-card::before { content: ""; position: absolute; inset: 0px 0px auto; height: 3px; background: var(--copper); }

.answer-card h2 { margin: 0px 0px 14px; font-family: var(--font-body); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.13em; color: var(--copper-ink); font-weight: 600; }

.answer-card .core { font-size: 17px; line-height: 1.75; max-width: var(--measure); }

.answer-card .core p { margin: 0px 0px 11px; }

.answer-card .core p:last-child { margin-bottom: 0px; }

.factbox { border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); overflow: hidden; }

.factbox h2, .factbox h3 { margin: 0px; padding: 12px 15px; font-family: var(--font-body); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; background: var(--surface-2); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: 8px; align-items: center; color: var(--muted); font-weight: 600; }

.factbox-src { font-size: 11px; letter-spacing: 0px; text-transform: none; }

.factbox dl { margin: 0px; }

.factbox .row { display: grid; grid-template-columns: 40% 1fr; gap: 10px; padding: 10px 15px; border-bottom: 1px solid var(--border); font-size: 13.5px; }

.factbox .row:last-child { border-bottom: 0px; }

.factbox dt { color: var(--muted); }

.factbox dd { margin: 0px; word-break: break-word; }

.toc-rail { position: sticky; top: 86px; display: grid; gap: 16px; }

.toc { border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); padding: 7px; max-height: 46vh; overflow: auto; }

.toc h3 { margin: 7px 11px; font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); font-weight: 600; }

.toc a { display: block; padding: 7px 11px; color: var(--muted); font-size: 13.5px; border-radius: var(--radius-xs); }

.toc a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }

.toc a.lvl3 { padding-left: 24px; font-size: 13px; }

.toc a.active { background: color-mix(in srgb, var(--sage) 55%, transparent); color: var(--forest-ink); font-weight: 600; }

[data-theme="dark"] .toc a.active { background: color-mix(in srgb, var(--sage) 22%, transparent); color: var(--sage); }

.prose { max-width: var(--measure); }

.prose table { display: block; max-width: 100%; overflow-x: auto; }

.prose h2 { font-size: 25px; margin: 36px 0px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border-2); }

.prose p { margin: 0px 0px 15px; }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; margin: 10px 0px 24px; width: fit-content; max-width: 100%; }

.tab { border: 0px; background: transparent; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: var(--muted); cursor: pointer; padding: 9px 15px; border-radius: var(--radius-xs); }

.tab:hover { color: var(--text); }

.tabpanel[hidden] { display: none; }

.tabpanel { animation: 0.3s ease 0s 1 normal both running rise; }

.gallery { columns: 150px 2; column-gap: 12px; }

@media (min-width: 800px) {
  .gallery { columns: 200px 3; }
}

.gallery figure { break-inside: avoid; margin: 0px 0px 14px; }

.gallery img { width: 100%; display: block; border-radius: var(--radius-sm); background: var(--surface-2); }

.gallery figcaption { font-size: 12px; color: var(--muted); padding: 7px 2px 0px; line-height: 1.5; }

.gallery .imgcredit { display: block; color: var(--faint); font-size: 11.5px; }

.gallery .imgcredit a { color: inherit; text-decoration: underline; }

.timeline { list-style: none; margin: 0px; padding: 0px; }

.timeline li { position: relative; padding: 0px 0px 20px 26px; border-left: 1px solid var(--border-2); }

.timeline li::before { content: ""; position: absolute; left: -5px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--copper); }

.timeline .yr { font-family: var(--font-head); font-weight: 600; color: var(--copper-ink); margin-right: 7px; font-variant-numeric: tabular-nums; }

.state { text-align: center; padding: 60px 20px; color: var(--muted); }

.spinner {
  display: inline-block;
  width: 28px; height: 28px;
  margin: 0 auto 14px;
  border: 2px solid var(--border-2, #d4ddd6);
  border-top-color: var(--accent, #438c6b);
  border-radius: 50%;
  background: none;
  animation: amigo-shared-spin .85s linear infinite;
}
@keyframes amigo-shared-spin { to { transform: rotate(360deg); } }

@keyframes spin { 
  100% { transform: rotate(360deg); }
}

.error-box { border: 1px solid color-mix(in srgb, #a5432a 40%, var(--border-2)); border-radius: var(--radius); background: color-mix(in srgb, #a5432a 7%, var(--surface)); padding: 20px; }

.error-box h2 { margin: 0px 0px 8px; font-size: 18px; }

.error-box p { margin: 0px 0px 12px; color: var(--muted); }

.site-foot { border-top: 1px solid var(--border-2); background: var(--surface); margin-top: 60px; }

.foot-inner { max-width: var(--maxw); margin: 0px auto; padding: 38px 16px 12px; display: grid; grid-template-columns: 1fr; gap: 26px; }

@media (min-width: 720px) {
  .foot-inner { grid-template-columns: 1.7fr 1fr 1fr; }
}

.foot-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }

.foot-brand .brand-mark { width: 28px; height: 28px; }

.foot-brand strong { font-family: var(--font-head); font-size: 16px; }

.foot-col strong { display: block; margin-bottom: 10px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); font-weight: 600; }

.foot-col p { color: var(--muted); font-size: 13.5px; margin: 0px; max-width: 44ch; }

.foot-col ul { list-style: none; margin: 0px; padding: 0px; display: grid; gap: 7px; }

.foot-col a { color: var(--muted); font-size: 13.5px; }

.foot-col a:hover { color: var(--accent); }

.foot-legal { max-width: var(--maxw); margin: 0px auto; padding: 14px 16px 30px; }

.foot-legal p { color: var(--faint); font-size: 12px; margin: 0px 0px 6px; max-width: 95ch; }

.page { max-width: 760px; margin: 0px auto; }

.page h1 { font-size: clamp(28px, 5vw, 40px); margin: 0px 0px 10px; }

.page h2 { font-size: 22px; margin: 32px 0px 10px; }

.page h3 { font-size: 17px; margin: 22px 0px 8px; }

.page p, .page li { color: var(--text); }

.page .lead { color: var(--muted); font-size: 17px; margin: 0px 0px 22px; }

.page ul, .page ol { padding-left: 22px; }

.page li { margin-bottom: 8px; }

.page .updated { color: var(--faint); font-size: 12.5px; margin-top: 34px; border-top: 1px solid var(--border); padding-top: 14px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--primary); color: var(--on-primary); padding: 12px 20px; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); z-index: 200; font-size: 14px; max-width: 90vw; }

[data-theme="dark"] .toast { background: var(--sage); color: var(--on-primary); }

.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }

.pill { border: 1px solid var(--border-2); border-radius: 999px; padding: 6px 13px; font-size: 13px; color: var(--muted); background: var(--surface); }

.pill:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

.hr { height: 1px; background: var(--border-2); border: 0px; margin: 30px 0px; }.ask-head { margin-bottom: 22px; }

.ask-head .article-sub { margin-bottom: 0px; }.ask-note { margin-top: 22px; padding: 13px 16px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); color: var(--muted); font-size: 12.5px; max-width: var(--measure); background: var(--surface); }

.topic-block { border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); padding: 16px 18px; margin-bottom: 14px; }

.topic-block h3 { margin: 0px 0px 12px; font-size: 17px; display: flex; gap: 10px; align-items: baseline; }

.md { max-width: var(--measure); }

.md h2 { font-family: var(--font-body); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.13em; color: var(--copper-ink); margin: 24px 0px 10px; font-weight: 600; }

.md h3 { font-size: 19px; margin: 22px 0px 10px; }

.md p { margin: 0px 0px 14px; }

.md ul, .md ol { padding-left: 24px; margin: 0px 0px 14px; }

.md li { margin-bottom: 7px; }

.md code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-family: var(--mono); font-size: 0.92em; }

.md blockquote { margin: 16px 0px; padding: 8px 16px; border-left: 3px solid var(--copper); color: var(--muted); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.md hr { border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--border-2); margin: 22px 0px; }

.md strong { font-weight: 600; }.md-raw { margin-top: 14px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface-2); padding: 14px 16px; white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: var(--muted); max-width: var(--measure); }

@media (max-width: 700px) {
  .topbar-inner { gap: 8px; padding: 10px 12px; }
  .brand-text small { display: none; }
  .topnav { margin-left: auto; }
  .topnav a { padding: 8px 10px; font-size: 13px; }
  .nav-sep { display: none; }
  .hero { padding-top: 36px; }
  .wrap { padding: 22px 12px 64px; }
  .aotd-body { padding: 20px 18px 22px; }
  .btn { padding: 10px 15px; }
  .factbox .row { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

@media print {
.topbar, .site-foot, .toc-rail, .article-actions, .tabs, .mode, .depth, .toast, .grain, .nudge { display: none !important; }
  body { background: rgb(255, 255, 255); }
  body::before, body::after { display: none; }
}

.btn-sm { padding: 7px 12px; font-size: 13px; }

.saved-list { list-style: none; margin: 0px; padding: 0px; display: grid; gap: 10px; }

.saved-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); padding: 10px 12px; }

.saved-main { display: flex; align-items: center; gap: 12px; flex: 1 1 0%; min-width: 0px; color: var(--text); text-decoration: none; }

.saved-main:hover { text-decoration: none; }

.saved-main img { width: 54px; height: 54px; object-fit: cover; border-radius: var(--radius-xs); flex: 0 0 auto; }

.saved-ph { width: 54px; height: 54px; border-radius: var(--radius-xs); background: color-mix(in srgb, var(--sage) 55%, transparent); flex: 0 0 auto; }

.saved-text { display: flex; flex-direction: column; min-width: 0px; }

.saved-text strong { font-family: var(--font-head); font-size: 15.5px; font-weight: 600; }

.saved-text small { color: var(--muted); font-size: 12.5px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.saved-del { flex: 0 0 auto; color: var(--muted); }

.saved-del:hover { color: var(--copper-ink); border-color: var(--copper-ink); }

.src-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }

@media (min-width: 700px) {
  .src-grid { grid-template-columns: repeat(2, 1fr); }
}

.src-group { border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); padding: 16px; }.src-credit { margin: 12px 0px 0px; color: var(--faint); font-size: 11.5px; }

.src-credit a { color: inherit; text-decoration: underline; }

.composer { position: relative; max-width: 760px; margin: 0px auto; text-align: left; }

.composer .searchbar { display: block; padding: 15px 16px 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border-2); box-shadow: var(--shadow); transition: border-color 0.18s, box-shadow 0.18s; }

.composer .searchbar textarea { display: block; width: 100%; font-size: 16.5px; line-height: 1.6; min-height: 30px; max-height: 200px; padding: 2px 0px; resize: none; }

.composer-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

.composer .suggest { left: 0px; transform: none; width: 100%; top: 100%; margin-top: 8px; }.article-grid { max-width: 780px; margin-left: auto; margin-right: auto; }

.article-grid.rail-open { max-width: var(--maxw); }
.article-head, .ask-head, .article-actions, .tabs, .answer-card, .md-raw, .ask-note { max-width: 780px; margin-left: auto; margin-right: auto; }

.prose { max-width: 100%; }

.page { max-width: 780px; }

.points-list { list-style: none; counter-reset: pt 0; margin: 0px; padding: 0px; display: grid; gap: 12px; }

.points-list > li { counter-increment: pt 1; position: relative; padding: 14px 16px 14px 52px; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); }

.points-list > li::before { content: counter(pt); position: absolute; left: 14px; top: 13px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--forest) 12%, transparent); color: var(--forest-ink); font-family: var(--font-head); font-size: 13px; font-weight: 600; }

[data-theme="dark"] .points-list > li::before { background: color-mix(in srgb, var(--sage) 20%, transparent); color: var(--text); }.point-from { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--faint); }

.chip-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 13.5px; font-weight: 500; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface); color: var(--muted); transition: border-color 0.16s, color 0.16s, background 0.16s; }

.chip-btn svg { width: 15px; height: 15px; fill: currentcolor; flex: 0 0 auto; }

.chip-btn:hover { color: var(--text); border-color: var(--accent); }

.chip-btn.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.deep-btn { margin-left: 8px; }

.foot-version { margin: 10px 0px 0px; color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }.topbar { backdrop-filter: saturate(150%) blur(14px); background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }

.card, .topic-card, .aotd, .src-group, .answer-card, .points-list > li { transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.22s, border-color 0.22s; }

.card:hover, .topic-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 40%, var(--border-2)); }

.sec-head { gap: 14px; }

.sec-head h2 { letter-spacing: -0.015em; }

.sec-head .more { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }

.aotd { box-shadow: var(--shadow); border-radius: var(--radius-lg); overflow: hidden; }

@media (max-width: 700px) {
  .btn { min-height: 44px; }
  .chip-btn { min-height: 40px; }
  .sec { margin-bottom: 34px; }
}.prose, .prose p, .prose li, .prose dd, .prose dt, .prose td, .prose th, .prose blockquote { overflow-wrap: break-word; word-break: normal; }

.prose > *, .prose .mw-parser-output > * { max-width: 100%; }
.prose .infobox, .prose table.infobox, .prose .thumb, .prose .thumbinner, .prose .thumb.tright, .prose figure, .prose .gallerybox, .prose .sidebar, .prose .side-box { float: none !important; clear: both !important; width: auto !important; max-width: 100% !important; margin-left: 0px !important; margin-right: 0px !important; }

.prose img, .prose video, .prose svg, .prose math { max-width: 100% !important; height: auto !important; }

.table-scroll { max-width: 100%; overflow-x: auto; margin: 18px 0px; }

.table-scroll > table { margin: 0px; }

.prose code, .prose pre, .prose samp, .prose kbd { overflow-wrap: break-word; white-space: pre-wrap; }

.prose pre { overflow-x: auto; max-width: 100%; }

[data-theme="sepia"] { --focus: #a8642f; --aura-1: color-mix(in srgb, var(--sand) 42%, transparent); --aura-2: color-mix(in srgb, var(--copper) 14%, transparent); --aura-3: color-mix(in srgb, var(--sage) 20%, transparent); color-scheme: light; --bg: #f3e9d2; --surface: #faf3e2; --surface-2: #e9dcbd; --text: #3a3226; --muted: #675c48; --faint: #685c46; --border: #ddcfae; --border-2: #cdbb94; --primary: #3f4a34; --accent: #a8642f; --copper-ink: #8a4f24; --copper-deep: #7d451f; --forest-ink: #173b32; --accent-2: #4a6b4a; --on-primary: #faf3e2; --shadow-sm: 0 1px 2px rgba(80, 62, 30, .07); --shadow: 0 1px 2px rgba(80, 62, 30, .06), 0 12px 28px -14px rgba(80, 62, 30, .25); --shadow-lg: 0 2px 6px rgba(80, 62, 30, .08), 0 34px 60px -30px rgba(80, 62, 30, .35); }

[data-theme="sepia"] .grain { mix-blend-mode: multiply; opacity: 0.22; }

.read-progress { position: fixed; top: 0px; left: 0px; right: 0px; height: 3px; z-index: 60; background: transparent; pointer-events: none; }

.read-progress span { display: block; height: 100%; width: 0px; background: linear-gradient(90deg, var(--forest), var(--copper)); transition: width 0.1s linear; }

[data-theme="dark"] .read-progress span, [data-theme="sepia"] .read-progress span { background: linear-gradient(90deg, var(--accent-2), var(--accent)); }

.bottom-nav { display: none; }

@media (max-width: 700px) {
  .bottom-nav { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0px; right: 0px; bottom: 0px; z-index: 55; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(150%) blur(14px); border-top: 1px solid var(--border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .bottom-nav a { display: grid; justify-items: center; gap: 3px; padding: 6px 2px; border-radius: var(--radius-sm); font-size: 11px; color: var(--muted); text-decoration: none; }
  .bottom-nav a[aria-current="page"] { background: var(--copper-deep); color: rgb(255, 255, 255); }
  .bottom-nav svg { width: 21px; height: 21px; }
  .site-foot { padding-bottom: 84px; }
}

.panel { position: relative; border: 1px solid var(--border-2); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); padding: 24px 24px 26px; overflow: hidden; }

.panel::before, .answer-card::before { content: ""; position: absolute; inset: 0px 0px auto; height: 3px; background: linear-gradient(90deg, var(--forest), var(--copper)); }

.panel + .panel, .panel + .sec, .sec + .panel { margin-top: 20px; }

.panel-head { margin: 0px 0px 16px; font-family: var(--font-body); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em; color: var(--copper-ink); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.panel-head .more { font-size: 11px; letter-spacing: 0.05em; text-transform: none; color: var(--faint); font-weight: 400; }

.panel .prose { max-width: 100%; }

.panel .prose > h2:first-child, .panel .prose > .mw-parser-output > h2:first-child { margin-top: 0px; }

.panel .points-list { margin-top: 4px; }

.src-group { position: relative; border: 1px solid var(--border-2); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); padding: 20px 20px 22px; overflow: hidden; }

.src-group::before { content: ""; position: absolute; inset: 0px 0px auto; height: 3px; background: linear-gradient(90deg, var(--forest), var(--copper)); }

.src-group h3 { margin: 0px 0px 12px; font-family: var(--font-body); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em; color: var(--copper-ink); }

.src-group h3 a { color: inherit; }

.src-group .point-text, .src-group .src-credit { color: var(--faint); font-size: 12px; margin: 8px 0px 0px; }

.src-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.topic-block { position: relative; border: 1px solid var(--border-2); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); padding: 20px 22px; overflow: hidden; }

.topic-block::before { content: ""; position: absolute; inset: 0px 0px auto; height: 3px; background: linear-gradient(90deg, var(--forest), var(--copper)); }

.topic-block h3 { margin: 0px 0px 10px; font-size: 18px; font-family: var(--font-head); }

.topic-block p { margin: 0px; color: var(--text); font-size: 16px; line-height: 1.7; }

.topic-block + .topic-block { margin-top: 16px; }

.sec:has(> .sec-head) { position: relative; border: 1px solid var(--border-2); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); padding: 24px 24px 26px; overflow: hidden; margin-top: 22px; }

.sec:has(> .sec-head)::before { content: ""; position: absolute; inset: 0px 0px auto; height: 3px; background: linear-gradient(90deg, var(--forest), var(--copper)); }

.sec:has(> .sec-head) > .sec-head { border-bottom: 0px; padding-bottom: 0px; margin-bottom: 16px; align-items: baseline; }

.sec:has(> .sec-head) > .sec-head h2 { font-family: var(--font-body); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em; color: var(--copper-ink); line-height: 1.5; }

.sec:has(> .sec-head) > .sec-head .more { font-size: 11px; letter-spacing: 0.05em; text-transform: none; color: var(--faint); }

.sec:has(> .sec-head) + .sec:has(> .sec-head) { margin-top: 20px; }

.article-grid .sec:has(> .sec-head), .article-grid .panel { max-width: 100%; }

.wrap > .sec:has(> .sec-head):first-child, #homeBody > .sec:has(> .sec-head):first-child { margin-top: 0px; }

.line-list { list-style: none; margin: 0px; padding: 0px; display: grid; gap: 11px; }

.line-list > li { position: relative; padding-left: 24px; font-size: 16.5px; line-height: 1.7; color: var(--text); }

.line-list > li::before { content: ""; position: absolute; left: 3px; top: 0.68em; width: 7px; height: 7px; border-radius: 50%; background: var(--copper); }

.answer-card .core .line-list > li { font-size: 17px; }

.src-group .line-list > li { font-size: 16px; }

.points-list .line-list { gap: 8px; margin-top: 6px; }

.points-list .line-list > li { padding-left: 22px; font-size: 16px; }

.points-list .line-list > li::before { top: 0.62em; width: 6px; height: 6px; background: var(--accent-2); }

:root { --card-w: 1200px; --measure: 720px; }

.wrap, .wrap-narrow { max-width: var(--card-w); }

.article-grid, .article-grid.rail-open { max-width: var(--card-w); }
.article-head, .ask-head, .article-actions, .tabs, .answer-card, .md-raw, .ask-note { max-width: var(--card-w); }

.page { max-width: var(--card-w); position: relative; border: 1px solid var(--border-2); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); padding: 30px 32px 34px; overflow: hidden; }

.page::before { content: ""; position: absolute; inset: 0px 0px auto; height: 3px; background: linear-gradient(90deg, var(--forest), var(--copper)); }

.panel .prose, .panel .md, .answer-card .core, .answer-card .md, .page > p, .page > ul, .page > ol, .page > blockquote { max-width: var(--measure); }

.page > h2, .page > h3 { max-width: var(--measure); }

.panel .prose { max-width: var(--measure); }

.article-grid.rail-open .panel .prose { max-width: 100%; }

@media (min-width: 960px) {
}

@media (max-width: 700px) {
  .page { padding: 22px 18px 26px; }
  .panel, .sec:has(> .sec-head) { padding: 20px 18px 22px; }
  .answer-card { padding: 20px 18px 22px; }
}.sk-line { height: 14px; border-radius: 7px; background-color: var(--surface-2); background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 70%, transparent), transparent); background-size: 200% 100%; background-repeat: no-repeat; animation: 1.4s ease-in-out 0s infinite normal none running sk; }

.sk-60 { width: 60%; }

.sk-80 { width: 80%; }

.sk-90 { width: 90%; }

@keyframes sk { 
  0% { background-position: 200% 0px; }
  100% { background-position: -200% 0px; }
}

@media (prefers-reduced-motion: reduce) {
  .sk-line { animation: auto ease 0s 1 normal none running none; }
}

button.point-from { font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 12.5px; color: var(--accent-2); background: none; border: 0px; padding: 0px; cursor: pointer; text-align: left; }

button.point-from:hover { text-decoration: underline; }

.langbar-inner input#langSelect { font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 14px; padding: 7px 10px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); min-width: 9ch; max-width: 22ch; }

.sec, .topic-block, .src-group, .prose figure, .prose .thumb, .prose img { contain-intrinsic-size: auto 260px; }

.prose img:not([width]) { aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface-2); }

.dash-hero, .article-head, .answer-card { content-visibility: visible; contain-intrinsic-size: none; }

.evidence { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0px 0px 16px; padding: 12px 16px; border: 1px solid var(--border); border-left-width: 4px; border-left-style: solid; border-left-color: var(--accent-2); border-radius: var(--radius-sm); background: var(--surface); max-width: var(--card-w); }

.evidence-note { font-size: 13.5px; color: var(--muted); flex: 1 1 320px; }

.evidence.is-ok { border-left-color: var(--ok); }

.evidence.is-warn { border-left-color: var(--warn); }.method-note { max-width: var(--card-w); margin: 22px 0px 0px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface); padding: 0px; }

.method-note > summary { cursor: pointer; padding: 13px 16px; font-size: 13.5px; font-weight: 600; color: var(--copper-ink); }

.method-note > ul, .method-note > p { padding: 0px 16px; }

.method-note > ul { margin: 4px 0px 0px; }

.method-note > p { margin: 10px 0px 14px; }

.source-card { border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; margin-bottom: 12px; }

.sc-title { margin: 0px 0px 6px; font-size: 15.5px; font-family: var(--font-body); font-weight: 600; }

.sc-title a { text-decoration: none; }

.sc-title a:hover { text-decoration: underline; }

.sc-kind { margin-left: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border: 1px solid var(--border-2); border-radius: 999px; padding: 1px 8px; }.sc-meta { margin: 8px 0px 0px; display: grid; gap: 4px; }

.sc-meta .row { display: flex; gap: 10px; font-size: 12.5px; }

.sc-meta dt { color: var(--faint); min-width: 92px; }

.sc-meta dd { margin: 0px; color: var(--muted); }

.sc-meta code { font-family: var(--mono); font-size: 12px; }

.trust-strip { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin: 16px 0px 0px; padding: 0px; list-style: none; font-size: 13px; color: var(--muted); }

.trust-strip li::before { content: "✓"; color: var(--forest-ink); font-weight: 700; }

.example-prompts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0px 0px; padding: 0px; list-style: none; }

.example-prompts button { font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 13.5px; border: 1px solid var(--border-2); border-radius: 999px; background: var(--surface); color: var(--text); padding: 8px 14px; min-height: 40px; cursor: pointer; }

.example-prompts button:hover { border-color: var(--accent); color: var(--accent-2); }.sc-meta .row:first-child dd { font-weight: 600; color: var(--text); }

.sc-kind { text-transform: none; letter-spacing: 0px; font-size: 11.5px; }

.scope-note { max-width: var(--card-w); margin: 0px 0px 14px; padding: 13px 16px; border: 1px solid var(--border); border-left: 4px solid var(--copper); border-radius: var(--radius-sm); background: var(--surface); font-size: 13.5px; color: var(--muted); }

.scope-note p { margin: 0px 0px 6px; }

.scope-note p:last-child { margin: 0px; }

.qa { display: grid; gap: 0px; }

.qa-q { margin: 0px 0px 14px; }

.qa-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--copper-ink); margin-bottom: 6px; }

.qa-question { font-family: var(--font-head); font-size: clamp(24px, 3.4vw, 34px); line-height: 1.25; margin: 0px; letter-spacing: -0.01em; }

.qa-alt { margin: 8px 0px 0px; font-size: 13.5px; color: var(--muted); }

.qa-answer { margin-bottom: 16px; }.source-card { scroll-margin-top: 88px; }

.curated { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--faint); }

.mic-btn { position: relative; flex: 0 0 auto; }

.mic-btn.is-listening { color: var(--copper-ink); border-color: var(--copper); }

.mic-btn.is-listening::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid var(--copper); animation: 1.4s ease-out 0s infinite normal none running micPulse; }

@keyframes micPulse { 
  0% { opacity: 0.8; transform: scale(0.96); }
  100% { opacity: 0; transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .mic-btn.is-listening::after { animation: auto ease 0s 1 normal none running none; opacity: 0.5; }
}

.voice-status:empty { display: none; }

.voice-status { margin: 6px 0px 0px; font-size: 12.5px; color: var(--muted); text-align: center; }

:root { --font-display: 'Lora', 'Tiro Devanagari Hindi', Georgia, serif; --aura-1: color-mix(in srgb, var(--sage) 37%, transparent); --aura-2: color-mix(in srgb, var(--copper) 16%, transparent); --aura-3: color-mix(in srgb, var(--forest) 10%, transparent); --glow: 0 0 0 1px color-mix(in srgb, var(--copper) 34%, transparent),
          0 0 22px -6px color-mix(in srgb, var(--copper) 45%, transparent); --ease: cubic-bezier(.22, .61, .36, 1); }

[data-theme="dark"] { --focus: var(--accent); --bg: #070b09; --surface: #121a16; --surface-2: #1a241e; --border: #22302a; --border-2: #2e3f36; --aura-1: color-mix(in srgb, var(--forest) 27%, transparent); --aura-2: color-mix(in srgb, var(--copper) 21%, transparent); --aura-3: color-mix(in srgb, var(--sage) 10%, transparent); }

body::before { background: radial-gradient(52vw 38vw at 12% -4%, var(--aura-1), transparent 64%),
    radial-gradient(46vw 34vw at 92% 6%, var(--aura-2), transparent 62%),
    radial-gradient(60vw 44vw at 50% 108%, var(--aura-3), transparent 66%); animation: auraDrift 34s var(--ease) infinite alternate; will-change: transform; }

@keyframes auraDrift { 
  0% { transform: translate3d(0px, 0px, 0px) scale(1); }
  50% { transform: translate3d(-2.5%, 1.8%, 0px) scale(1.06); }
  100% { transform: translate3d(2%, -2.2%, 0px) scale(1.02); }
}

body::after { opacity: 0.55; }

h1, h2, h3, .article-title, .qa-question, .hero h1, .brand strong, .sec-head h2 { font-family: var(--font-display); }

.panel-head, .qa-label, .kicker, .btn, .tab, .mode-btn, .badge, .sc-kind, .src-credit { font-family: var(--font-body); }

h1, .hero h1, .article-title, .qa-question { letter-spacing: -0.025em; font-weight: 600; }

.hero h1 { font-size: clamp(36px, 7.2vw, 66px); line-height: 1.06; }

.qa-question { font-size: clamp(25px, 3.5vw, 36px); line-height: 1.18; }

.article-title { line-height: 1.12; }

.kicker, .qa-label, .panel-head, .sec-head .more, .badge, .sc-kind { letter-spacing: 0.1em; font-weight: 600; }

.panel, .answer-card, .sec:has(> .sec-head), .source-card, .page, .card, .topic-card { border-radius: var(--radius-lg); box-shadow: var(--shadow); transition: box-shadow .24s var(--ease), transform .24s var(--ease), border-color .24s var(--ease); }

a.card:hover, .topic-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.btn, .tab, .mode-btn, .chip-btn, .pill, button.point-from, .example-prompts button { transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); }

.btn:not(:disabled):hover { transform: translateY(-1px); }

.btn:not(:disabled):active { transform: translateY(0px); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }

.composer .searchbar { transition: box-shadow .24s var(--ease), border-color .24s var(--ease); }

.composer .searchbar:focus-within { border-color: color-mix(in srgb, var(--copper) 55%, var(--border-2)); box-shadow: var(--glow); }

.topbar { box-shadow: rgba(0, 0, 0, 0.55) 0px 8px 24px -22px; }

.prose a, .md a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

@media (prefers-reduced-motion: reduce) {
  body::before { animation: auto ease 0s 1 normal none running none; }
  .btn, .card, .topic-card, .panel, .answer-card, .source-card { transition: none; }
  a.card:hover, .topic-card:hover { transform: none; }
}.evidence { margin: 0px 0px 14px; padding: 12px 15px; border-radius: var(--radius-sm); border: 1px solid var(--border-2); background: var(--surface); }

.evidence-head { margin: 0px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }

.evidence-label { font-weight: 600; font-size: 14px; }

.evidence-label::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 2px; vertical-align: 1px; background: currentcolor; }

.evidence-note { font-size: 13.5px; color: var(--muted); }

.evidence-explainer { margin: 6px 0px 0px; font-size: 12px; color: var(--faint); line-height: 1.5; }

.evidence.is-ok .evidence-label { color: var(--ok); }

.evidence.is-warn .evidence-label { color: var(--warn); }
.btn, .mic-btn, .depth-btn, .mode-btn, .bottom-nav a { min-height: 36px; }

@media (pointer: coarse) {
.btn, .mic-btn, .depth-btn, .mode-btn, .bottom-nav a { min-height: 44px; }
  .pill, .tab, .badge { min-height: 24px; }
}

@media (pointer: coarse) and (min-width: 900px) {
.btn, .mic-btn, .depth-btn, .mode-btn { min-height: 40px; }
}

.aotd-media { margin: 0px; display: grid; place-items: center; background: var(--surface-2); border-right: 1px solid var(--border); overflow: hidden; }

.aotd-media img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: contain; object-position: center center; }.qa-answer .line-list li { font-size: 18px; line-height: 1.72; padding: 10px 0px 10px 18px; }

.qa-answer .line-list li + li { border-top: 1px solid var(--border); }

.qa-answer h2 { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper-ink); }

.qa .panel .line-list li { font-size: 16.5px; line-height: 1.68; }

@media (max-width: 560px) {
  .qa-answer .line-list li { font-size: 16.5px; padding: 9px 0px 9px 16px; }
  .qa .panel .line-list li { font-size: 15.5px; }
}

.fb-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0px 12px; }

.fb-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--border-2); background: var(--surface); color: var(--text); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 14px; transition: border-color .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease); }

.fb-btn:hover { border-color: var(--copper); transform: translateY(-1px); }

.fb-btn.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--sage) 42%, var(--surface)); font-weight: 600; }

.fb-emoji { font-size: 18px; line-height: 1; }.fb-note { margin-top: 6px; }

.fb-note label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }

.fb-note textarea { width: 100%; max-width: 560px; padding: 10px 12px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 15px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); resize: vertical; }

.fb-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.fb-thanks { margin: 10px 0px 0px; font-size: 13.5px; color: var(--ok); min-height: 1em; }

.fb-thanks:empty { display: none; }

@media (pointer: coarse) {
.btn, .mic-btn, .depth-btn, .mode-btn, .bottom-nav a, .fb-btn, .suggest-item { min-height: 48px; }
  .pill, .tab, .badge { min-height: 28px; }
}

@media (pointer: coarse) and (min-width: 900px) {
}

.suggest { transform-origin: center top; animation: growFromOrigin .18s var(--ease) both; }

.fb-note:not([hidden]) { transform-origin: left top; animation: growFromOrigin .18s var(--ease) both; }

@keyframes growFromOrigin { 
  0% { opacity: 0; transform: translateY(-4px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0px) scale(1); }
}

@media (max-width: 900px) {
  .bottom-nav { backdrop-filter: saturate(1.4) blur(18px); background: color-mix(in srgb, var(--bg) 78%, transparent); }
}

.composer .searchbar { border-radius: var(--radius-xl); }

@media (prefers-reduced-motion: reduce) {
  .suggest, .fb-note:not([hidden]) { animation: auto ease 0s 1 normal none running none; }
}

.topbar, .bottom-nav { background: color-mix(in srgb, var(--bg) 92%, transparent); }

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .topbar { background: color-mix(in srgb, var(--bg) 84%, transparent); }
  .bottom-nav { background: color-mix(in srgb, var(--bg) 84%, transparent); }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar, .bottom-nav { background: var(--bg); }
}

.status-strip { position: sticky; top: 0px; z-index: 58; padding: 7px 16px; font-family: var(--font-body); font-size: 13px; font-weight: 500; text-align: center; line-height: 1.45; border-bottom: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); }

.status-strip[hidden] { display: none; }

.status-strip.is-warn { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); border-bottom-color: var(--warn); }

.status-strip.is-ok { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); border-bottom-color: var(--ok); }

.topic-head { display: flex; align-items: center; gap: 10px; min-width: 0px; }

.topic-head > span:last-child { overflow-wrap: anywhere; }

.topic-num { flex: 0 0 auto; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-xs); background: var(--surface-2); color: var(--muted); font-family: var(--font-body); font-size: 12.5px; font-weight: 700; }

.topic-goto { border: 0px; background: none; cursor: pointer; color: var(--copper-ink); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 12.5px; white-space: nowrap; }

.topic-goto:hover { text-decoration: underline; }

.topic-block { margin-bottom: 14px; }

.topic-block .line-list { margin: 4px 0px 0px; }

.source-answer { padding-top: 4px; }

.source-answer .src-credit { margin-top: 8px; }

.src-records { margin-top: 18px; }

.src-records > summary { cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--copper-ink); padding: 8px 0px; list-style: none; }

.src-records > summary::-webkit-details-marker { display: none; }

.src-records > summary::before { content: "▸ "; display: inline-block; transition: transform .18s var(--ease); }

.src-records[open] > summary::before { content: "▾ "; }

:root { --glass-fill: 88%; --glass-blur: 20px; --glass-sat: 150%; --glass-edge: color-mix(in srgb, var(--copper) 22%, var(--border-2)); --glass-top: color-mix(in srgb, #ffffff 55%, transparent); --glass-shadow: 0 1px 2px rgba(36, 40, 36, .05), 0 18px 40px -26px rgba(23, 59, 50, .4); }

[data-theme="dark"] { --glass-fill: 80%; --glass-sat: 140%; --glass-edge: color-mix(in srgb, #ffffff 22%, transparent); --glass-top: color-mix(in srgb, #ffffff 26%, transparent); --glass-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 22px 48px -28px rgba(0, 0, 0, .8); }

[data-theme="sepia"] { --glass-fill: 90%; --glass-edge: color-mix(in srgb, var(--copper) 26%, var(--border-2)); }

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .glass { background-color: var(--glass-fill, var(--surface)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); background-image: linear-gradient(180deg, var(--glass-top), transparent 42%); contain: layout style paint; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--bg); border: 1px solid var(--border-2); }
}

.topbar, .bottom-nav, .status-strip, .composer .searchbar, .toast { border-radius: 0px; }

.topbar { border-radius: 0px; }

.composer .searchbar, .toast { border-radius: var(--radius-xl); }

.panel, .answer-card, .source-card, .sec:has(> .sec-head), .prose, .topic-block { background: var(--surface); backdrop-filter: none; }

@media (prefers-reduced-transparency: reduce) {
  .glass, .topbar, .bottom-nav, .status-strip, .composer .searchbar, .toast { background-image: none !important; backdrop-filter: none !important; border: 1px solid var(--border-2) !important; box-shadow: none !important; }
}

[data-comfort="opaque"] .glass, [data-comfort="opaque"] .topbar, [data-comfort="opaque"] .bottom-nav, [data-comfort="opaque"] .status-strip, [data-comfort="opaque"] .composer .searchbar, [data-comfort="opaque"] .toast { background-image: none !important; backdrop-filter: none !important; border: 1px solid var(--border-2) !important; box-shadow: none !important; }

[data-comfort="opaque"] body::before { display: none !important; }

[data-comfort="opaque"] body::after { opacity: 0.25 !important; }

#comfortBtn[aria-pressed="true"] { background: color-mix(in srgb, var(--copper) 16%, transparent); border-color: var(--copper-ink); color: var(--copper-ink); }.app-shell { display: grid; grid-template-columns: 236px minmax(0px, 1fr); align-items: start; max-width: 1720px; margin: 0px auto; width: 100%; }

.app-shell:has(.app-rail:not(:empty)) { grid-template-columns: 236px minmax(0px, 1fr) 304px; }

.app-main { min-width: 0px; display: flex; flex-direction: column; min-height: 60vh; }

.app-side { position: sticky; top: var(--topbar-h, 64px); align-self: start; max-height: calc(100vh - var(--topbar-h, 64px)); overflow-y: auto; padding: 18px 12px 28px; display: flex; flex-direction: column; gap: 22px; }.side-link { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-family: var(--font-body); font-size: 14px; font-weight: 500; border: 1px solid transparent; transition: background .16s var(--ease), border-color .16s var(--ease); }

.side-link:hover { background: var(--surface-2); }

.side-link[aria-current="page"] { background: color-mix(in srgb, var(--forest) 12%, var(--surface)); border-color: color-mix(in srgb, var(--forest) 26%, transparent); font-weight: 650; }

.side-link svg { flex: 0 0 auto; width: 18px; height: 18px; opacity: 0.78; }

.side-link[aria-current="page"] svg { opacity: 1; }.rail-card { padding: 15px 16px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }

.rail-card + .rail-card { margin-top: 14px; }

.rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 11px; }

.rail-head h2, .rail-head h3 { margin: 0px; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }

.rail-more { font-size: 12px; color: var(--copper-ink); text-decoration: none; white-space: nowrap; }

.rail-more:hover { text-decoration: underline; }

.trend-row { display: flex; align-items: center; gap: 11px; padding: 7px 0px; text-decoration: none; color: var(--text); }

.trend-row + .trend-row { border-top: 1px solid var(--border); }

.trend-row:hover .trend-name { color: var(--copper-ink); text-decoration: underline; }

.trend-rank { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--surface-2); color: var(--muted); font-family: var(--font-body); font-size: 11.5px; font-weight: 700; }

.trend-body { min-width: 0px; flex: 1 1 0%; }

.trend-name { display: block; font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }

.trend-meta { display: block; font-size: 11.5px; color: var(--faint); margin-top: 1px; }

.trend-spark { flex: 0 0 auto; width: 46px; height: 20px; color: var(--copper); opacity: 0.75; }

.src-row { display: flex; align-items: center; gap: 10px; padding: 8px 0px; }

.src-row + .src-row { border-top: 1px solid var(--border); }

.src-mark { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); color: var(--muted); font-family: var(--font-display); font-size: 12px; font-weight: 700; }

.src-body { min-width: 0px; flex: 1 1 0%; }

.src-name { display: block; font-size: 13.5px; font-weight: 600; }

.src-kind { display: block; font-size: 11.5px; color: var(--faint); }

.wisdom blockquote { margin: 0px; font-family: var(--font-display); font-size: 16px; line-height: 1.5; letter-spacing: -0.01em; color: var(--text); }

.wisdom cite { display: block; margin-top: 9px; font-size: 12.5px; color: var(--faint); font-style: normal; }

@media (max-width: 1420px) {
  .app-shell:has(.app-rail:not(:empty)) { grid-template-columns: 236px minmax(0px, 1fr); }
  .app-rail { display: none; }
}

@media (max-width: 1040px) {
  .app-shell, .app-shell:has(.app-rail:not(:empty)) { grid-template-columns: minmax(0px, 1fr); }
  .app-side { display: none; }
}

.dash { display: flex; flex-direction: column; gap: 22px; padding: 18px 20px 8px; }

.dash-hero { position: relative; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--border); min-height: 330px; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px 28px 24px; background: var(--surface); isolation: isolate; }

.dash-hero::after { content: ""; position: absolute; inset: 0px; z-index: -1; background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 62%),
    radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--accent-2) 9%, transparent) 0%, transparent 58%); }

.dash-hero-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border)); color: var(--accent-2); font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 14px; }

.dash-hero h1 { margin: 0px 0px 10px; color: var(--text); font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -0.025em; max-width: 15ch; }

.dash-hero h1 .dash-grad { background-image: linear-gradient(120deg, var(--forest), var(--copper)); background-clip: text; color: transparent; }

.dash-hero p { margin: 0px 0px 18px; color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 56ch; }

.dash-hero-ask { max-width: 720px; }

.dash-hero-ask .searchbar { background: rgba(255, 255, 255, 0.96); border-color: rgba(255, 255, 255, 0.5); }

.dash-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }

.dash-action { display: flex; flex-direction: column; gap: 4px; padding: 15px 16px 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; transition: transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease); }

.dash-action:hover { transform: translateY(-2px); border-color: var(--border-2); box-shadow: var(--shadow); }

.dash-action .ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--forest) 12%, var(--surface-2)); color: var(--forest-ink); margin-bottom: 6px; }

.dash-action .ic svg { width: 18px; height: 18px; }

.dash-action h3 { margin: 0px; font-size: 15px; font-family: var(--font-display); letter-spacing: -0.01em; }

.dash-action p { margin: 0px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.dash-band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 13px; }

.dash-band-head h2 { margin: 0px; font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; }

.dash-band-head h2 .ic { color: var(--copper); display: inline-grid; place-items: center; }

.dash-band-head h2 .ic svg { width: 19px; height: 19px; }

.dash-band-head p { margin: 3px 0px 0px; font-size: 13px; color: var(--muted); }

.q-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }

.q-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); text-decoration: none; transition: transform .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease); }

.q-card:hover { transform: translateY(-2px); border-color: var(--border-2); box-shadow: var(--shadow); }

.q-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }

.q-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.q-tag { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(9, 20, 16, 0.72); color: rgb(255, 255, 255); font-family: var(--font-body); font-size: 11px; font-weight: 600; backdrop-filter: blur(6px); }

.q-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 0%; }

.q-body h3 { margin: 0px; font-size: 15px; font-family: var(--font-display); line-height: 1.3; letter-spacing: -0.01em; }

.q-body p { margin: 0px; font-size: 12.5px; color: var(--muted); line-height: 1.5; flex: 1 1 0%; }

.q-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--faint); font-family: var(--font-body); }

.q-foot .srcs { display: inline-flex; align-items: center; gap: 5px; }

.q-foot .srcs svg { width: 13px; height: 13px; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }

.cat-card { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 10px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; text-align: center; transition: transform .16s var(--ease), border-color .16s var(--ease); }

.cat-card:hover { transform: translateY(-2px); border-color: var(--border-2); }

.cat-card .ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--copper) 14%, var(--surface-2)); color: var(--copper-ink); }

.cat-card .ic svg { width: 17px; height: 17px; }

.cat-card strong { font-size: 13.5px; font-family: var(--font-display); }

.cat-card span { font-size: 11.5px; color: var(--faint); }

@media (max-width: 900px) {
  .dash { padding: 14px 14px 6px; gap: 18px; }
  .dash-hero { padding: 22px 18px 20px; min-height: 300px; }
}

.dash-hero .trust-strip { margin-top: 16px; color: rgba(255, 255, 255, 0.88); }

.dash-hero .trust-strip li::before { color: var(--sage); }

.dash-depth { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }

.dash-hero .depth-btn { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.92); }

.dash-hero .depth-btn:hover { background: rgba(255, 255, 255, 0.24); color: rgb(255, 255, 255); }.dash-hero .depth-btn[aria-pressed="true"], .dash-hero .depth-btn.is-active { background: rgba(255, 255, 255, 0.95); color: var(--charcoal); border-color: rgba(255, 255, 255, 0.95); }

.dash-hero .mode-btn { color: rgba(255, 255, 255, 0.78); }

.dash-hero .mode-btn.is-active { background: rgba(255, 255, 255, 0.95); color: var(--charcoal); box-shadow: none; }

.dash-hero .chip-btn { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.92); }

.dash-hero .chip-btn:hover { background: rgba(255, 255, 255, 0.24); color: rgb(255, 255, 255); }

.dash-hero .chip-btn.is-active { background: rgba(255, 255, 255, 0.95); color: var(--charcoal); border-color: rgba(255, 255, 255, 0.95); }

.dash-hero .chips .chip { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); color: rgb(255, 255, 255); }

.dash-hero .chips .chip:hover { background: rgba(255, 255, 255, 0.24); }

.dash-hero .chips > span { color: rgba(255, 255, 255, 0.75) !important; }

:root { --elev-1: 0 1px 2px rgba(36, 40, 36, .05); --elev-2: 0 1px 2px rgba(36, 40, 36, .05), 0 10px 24px -16px rgba(23, 59, 50, .28); --elev-3: 0 2px 4px rgba(36, 40, 36, .05), 0 22px 48px -22px rgba(23, 59, 50, .34); --sheen: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 38%); --t-sm: clamp(12.5px, .78vw + 10px, 13.5px); --t-md: clamp(15px, .95vw + 12px, 17px); --t-xl: clamp(20px, 1.6vw + 14px, 26px); }

[data-theme="dark"] { --elev-1: 0 1px 2px rgba(0, 0, 0, .4); --elev-2: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 24px -16px rgba(0, 0, 0, .8); --elev-3: 0 2px 4px rgba(0, 0, 0, .45), 0 22px 48px -22px rgba(0, 0, 0, .9); --sheen: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 38%); }

[data-theme="sepia"] { --elev-1: 0 1px 2px rgba(80, 62, 30, .06); --elev-2: 0 1px 2px rgba(80, 62, 30, .06), 0 10px 24px -16px rgba(80, 62, 30, .28); --elev-3: 0 2px 4px rgba(80, 62, 30, .06), 0 22px 48px -22px rgba(80, 62, 30, .32); --sheen: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 38%); }

.dash-action, .q-card, .cat-card, .panel, .answer-card, .source-card, .howstep, .rail-card { box-shadow: var(--elev-1); background-image: var(--sheen); background-repeat: no-repeat; background-size: 100% 46px; }

.dash-action:hover, .q-card:hover, .cat-card:hover { box-shadow: var(--elev-2); transform: translateY(-2px); }

.rail-card, .toast { box-shadow: var(--elev-2); }

.dash-hero { box-shadow: var(--elev-3); }

.dash-band-head h2 { font-size: var(--t-xl); }

.dash-action h3, .q-body h3 { font-size: var(--t-md); }
.dash-action p, .q-body p, .howstep p { font-size: var(--t-sm); }

.rail-head h2, .rail-head h3 { font-size: var(--t-md); }

.trend-name, .src-name { font-size: var(--t-sm); }

.cat-card strong { font-size: var(--t-sm); }

.dash { gap: 26px; }

.dash-band-head { margin-bottom: 15px; }

.dash-action, .q-card, .cat-card, .rail-card, .howstep { border-color: transparent; }

.dash-action:hover, .q-card:hover, .cat-card:hover { border-color: var(--border-2); }

.dash-action .ic, .cat-card .ic { box-shadow: rgba(255, 255, 255, 0.35) 0px 1px 0px inset; }

.side-link, .trend-row, .src-row, .chip, .btn, .depth-btn { transition: background .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease); }

.side-link:hover { transform: translateX(2px); }

.trend-row:hover, .src-row:hover { background: var(--surface-2); border-radius: var(--radius-sm); }

@media (prefers-reduced-motion: reduce) {
  .dash-action:hover, .q-card:hover, .cat-card:hover, .side-link:hover { transform: none; }
}

.dash-hero { text-align: center; align-items: center; }

.dash-hero h1 { margin-inline: auto; }

.dash-hero p { margin-inline: auto; }

.dash-hero-ask { margin-inline: auto; width: 100%; }

.dash-hero .example-prompts, .dash-hero .trust-strip, .dash-hero .chips, .dash-hero .dash-depth { justify-content: center; }

.dash-hero .dash-hero-badge { align-self: center; }

.topbar { background-color: var(--surface); backdrop-filter: saturate(1.35) blur(16px); border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 1px solid var(--border-2); border-radius: 0px; box-shadow: none; background-image: none; contain: none; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--bg); }
}

.dash-clock-line { display: flex; justify-content: center; margin-top: 16px; }

.hero-clock { display: inline-flex; align-items: center; gap: 10px; padding: 7px 15px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.26); color: rgb(255, 255, 255); font-family: var(--font-body); font-size: 13.5px; backdrop-filter: blur(8px); }

.hero-clock svg { opacity: 0.82; flex: 0 0 auto; }

.hero-clock strong { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

.hero-clock span { color: rgba(255, 255, 255, 0.86); }

::selection { background: color-mix(in srgb, var(--copper) 42%, transparent); color: var(--text); }

[data-theme="dark"] ::selection { background: color-mix(in srgb, var(--copper) 55%, transparent); color: rgb(255, 255, 255); }

.tab[aria-selected="true"] { background: var(--surface); color: var(--text); font-weight: 650; box-shadow: var(--elev-1); }

.tab[aria-selected="true"]::after { content: ""; display: block; height: 2px; margin: 6px auto -9px; width: 60%; border-radius: 2px; background: var(--copper); }

.tabs { gap: 2px; }

.chip-btn[aria-pressed="true"], .mode-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--forest) 14%, var(--surface)); border-color: var(--forest-ink); color: var(--text); font-weight: 650; }

.crisis { position: fixed; inset: 0px; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 32px 22px 40px; overflow-y: auto; background: rgb(10, 12, 11); color: rgb(242, 239, 233); font-family: var(--font-body); animation: crisisIn .9s var(--ease) both; }

@keyframes crisisIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}@keyframes wave { 
  0%, 62%, 100% { transform: rotate(0deg); }
  72% { transform: rotate(-24deg); }
  84% { transform: rotate(6deg); }
  92% { transform: rotate(-14deg); }
}@keyframes blink { 
  0%, 96%, 100% { transform: scaleY(1); }
  98% { transform: scaleY(0.12); }
}@keyframes caret { 
  50% { opacity: 0; }
}

.crisis-help { width: 100%; max-width: 620px; display: grid; gap: 11px; opacity: 0; }

.crisis-help.shown { animation: helpIn .7s var(--ease) .1s both; }

@keyframes helpIn {
}

.crisis-where { text-align: center; font-size: 13.5px; color: rgb(154, 167, 159); margin: 0px; }

.crisis-line { display: flex; align-items: flex-start; gap: 14px; padding: 15px 17px; border-radius: 16px; background: rgb(20, 26, 23); border: 1px solid rgb(35, 45, 40); text-decoration: none; color: inherit; transition: background .18s var(--ease), border-color .18s var(--ease); }

.crisis-line:hover { background: rgb(26, 34, 30); border-color: rgb(51, 64, 58); }

.crisis-line .num { flex: 0 0 auto; font-family: var(--font-body); font-size: 19px; font-weight: 700; color: rgb(168, 230, 200); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

.crisis-line .meta { min-width: 0px; }

.crisis-line .name { display: block; font-size: 14.5px; font-weight: 600; }

.crisis-line .detail { display: block; font-size: 12.5px; color: rgb(154, 167, 159); margin-top: 3px; line-height: 1.5; }

.crisis-emergency { text-align: center; font-size: 13.5px; color: rgb(154, 167, 159); }

.crisis-emergency strong { color: rgb(242, 239, 233); }

.crisis-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 4px; }

.crisis-btn { font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 13.5px; cursor: pointer; padding: 10px 18px; border-radius: 999px; background: transparent; color: rgb(207, 216, 210); border: 1px solid rgb(51, 64, 58); transition: background .18s var(--ease), color .18s var(--ease); }

.crisis-btn:hover { background: rgb(26, 34, 30); color: rgb(242, 239, 233); }

@media (prefers-reduced-motion: reduce) {
  .crisis, .crisis-help.shown { animation: auto ease 0s 1 normal none running none; }}

:root { --clay-shade: color-mix(in srgb, var(--forest) 22%, transparent); --clay-light: rgba(255, 255, 255, .75); }

[data-theme="dark"] { --clay-shade: rgba(0, 0, 0, .5); --clay-light: rgba(255, 255, 255, .07); }

[data-theme="sepia"] { --clay-shade: color-mix(in srgb, #6b5327 22%, transparent); --clay-light: rgba(255, 255, 255, .7); }

.btn-primary, .depth-btn, .chip, .crisis-btn, .mode-btn, .tab { box-shadow: 0 10px 20px -10px var(--clay-shade),
    inset 0 -6px 12px -8px var(--clay-shade),
    inset 0 8px 14px -8px var(--clay-light); }

.btn-primary:active, .depth-btn:active, .chip:active, .mode-btn:active { transform: translateY(1px) scale(0.985); }

.btn-primary:focus-visible, .depth-btn:focus-visible, .chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.dash-action, .q-card, .cat-card, .rail-card, .panel, .answer-card, .source-card, .howstep { box-shadow: 0 14px 26px -16px var(--clay-shade); }

.dash-action:hover, .q-card:hover, .cat-card:hover { box-shadow: 0 18px 30px -16px var(--clay-shade),
    inset 0 8px 14px -10px var(--clay-light); }

.dash-action, .q-card, .cat-card, .rail-card { border-radius: var(--radius-lg); }

.btn-primary, .depth-btn, .chip { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .btn-primary:active, .depth-btn:active, .chip:active, .mode-btn:active { transform: none; }
}

:root { --glow-a: color-mix(in srgb, var(--copper) 40%, transparent); --glow-b: color-mix(in srgb, var(--sage) 50%, transparent); --glow-c: color-mix(in srgb, var(--forest) 26%, transparent); }

[data-theme="dark"] { --glow-a: color-mix(in srgb, var(--copper) 52%, transparent); --glow-b: color-mix(in srgb, var(--sage) 42%, transparent); --glow-c: color-mix(in srgb, var(--sage) 22%, transparent); }

.dash-hero .searchbar::after, .composer .searchbar::after { content: ""; position: absolute; inset: 0px; border-radius: inherit; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.5) 48%, transparent 66%) 130% 0px / 260% 100%; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), background-position .9s var(--ease); }

.dash-hero .searchbar:focus-within::after, .composer .searchbar:focus-within::after { opacity: 1; background-position: -30% 0px; }

.bottom-nav a::before { content: ""; position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%); height: 2px; width: 0px; border-radius: 2px; background: linear-gradient(90deg, var(--copper), var(--sage)); transition: width .22s var(--ease); }

.bottom-nav a[aria-current="page"]::before { width: 22px; }

.bottom-nav a { position: relative; }

.btn-primary:hover, .depth-btn:hover { box-shadow: 0 14px 26px -10px var(--glow-a),
    inset 0 -6px 12px -8px var(--clay-shade),
    inset 0 8px 14px -8px var(--clay-light); transform: translateY(-1px); }

.dash-action:hover, .q-card:hover, .cat-card:hover, .rail-card:hover, .howstep:hover { box-shadow: 0 20px 34px -18px var(--glow-a),
    0 6px 14px -10px var(--glow-c),
    inset 0 8px 14px -10px var(--clay-light); }

.dash-action .ic, .cat-card .ic { transition: transform .2s var(--ease), background .2s var(--ease); }

.dash-action:hover .ic, .cat-card:hover .ic { transform: translateY(-2px) scale(1.06); }

.trend-row:hover, .src-row:hover { background: linear-gradient(90deg, var(--glow-b), transparent 70%); }

.dash-hero-badge { background-image: linear-gradient(100deg, rgba(255, 255, 255, .16), var(--glow-a), rgba(255, 255, 255, .16)); background-size: 200% 100%; animation: 9s linear 0s infinite normal none running sheen; }

@keyframes sheen {
  100% { background-position: -100% 0px; }
}

body::before { animation-duration: 34s, 46s; }

@media (prefers-reduced-motion: reduce) {
  .dash-hero-badge { animation: auto ease 0s 1 normal none running none; }
  .dash-hero .searchbar::after, .composer .searchbar::after { transition: none; }
  .btn-primary:hover, .depth-btn:hover { transform: none; }
  .dash-action:hover .ic, .cat-card:hover .ic { transform: none; }
  .bottom-nav a::before { transition: none; }
}.art-figure { margin: 0px; display: grid; justify-items: center; gap: 7px; }

.art-figure img { display: block; max-width: 100%; height: auto; max-height: 440px; width: auto; border-radius: var(--radius); border: 1px solid var(--border-2); background: var(--surface-2); }

.art-figure figcaption { font-size: 12.5px; color: var(--muted); line-height: 1.5; text-align: center; max-width: 62ch; }:root { --float-1: 0 18px 38px -18px rgba(12, 30, 22, .22), 0 4px 10px -6px rgba(12, 30, 22, .12); --float-2: 0 30px 60px -26px rgba(12, 30, 22, .28), 0 8px 18px -10px rgba(12, 30, 22, .14); }

[data-theme="dark"] { --float-1: 0 18px 38px -18px rgba(0, 0, 0, .62), 0 4px 10px -6px rgba(0, 0, 0, .4); --float-2: 0 30px 60px -26px rgba(0, 0, 0, .7), 0 8px 18px -10px rgba(0, 0, 0, .45); }

.dash-action, .q-card, .cat-card, .rail-card, .howstep, .source-card { box-shadow: var(--float-1); }

.dash-action:hover, .q-card:hover, .cat-card:hover, .rail-card:hover, .howstep:hover { box-shadow: var(--float-2); }

.q-grid, .cat-grid, .topics-grid, .src-grid { perspective: 1200px; transform-style: preserve-3d; }

.q-grid > *, .cat-grid > *, .topics-grid > * { transform: translateZ(0px); }

@keyframes floatIn { 
  0% { opacity: 0; transform: translateY(14px) rotateX(3deg); }
}

.dash-action, .cat-card, .q-card, .howstep, .rail-card { animation: floatIn .5s var(--ease) both; }

.dash-action:nth-child(2), .cat-card:nth-child(2), .howstep:nth-child(2) { animation-delay: 0.07s; }

.dash-action:nth-child(3), .cat-card:nth-child(3), .howstep:nth-child(3) { animation-delay: 0.14s; }

.dash-action:nth-child(4), .cat-card:nth-child(4), .howstep:nth-child(4) { animation-delay: 0.21s; }

.dash-action:nth-child(5), .cat-card:nth-child(5) { animation-delay: 0.28s; }

.dash-action:nth-child(6), .cat-card:nth-child(6) { animation-delay: 0.35s; }

.btn-primary, .depth-btn, .chip, .chip-btn, .mode-btn, .tab, .btn, .bottom-nav a, .dash-action, .q-card, .cat-card, .rail-card, .howstep { transition-duration: 0.3s; transition-timing-function: var(--ease); }

.btn-primary, .depth-btn, .chip, .dash-action, .cat-card, .q-card, .rail-card, .howstep, .bottom-nav a { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .dash-action, .cat-card, .q-card, .howstep, .rail-card { animation: auto ease 0s 1 normal none running none; }
  .btn-primary, .depth-btn, .chip, .chip-btn, .mode-btn, .tab, .btn, .bottom-nav a, .dash-action, .q-card, .cat-card, .rail-card, .howstep { will-change: auto; }
}

/* ── app.css ── */
/* Veridell — additions on top of the design system.
 *
 * styles.css is the original Veridell design system, kept intact. Everything
 * in this file is either a new component the rebuild introduced (the language
 * menu, the offline strip's spacing) or a small correction to a rule that did
 * not survive the move from a captured page to a live app.
 */

/* --------------------------------------------------------- corrections */

/* The bottom bar carries five destinations, not four. */
.bottom-nav { grid-template-columns: repeat(5, 1fr); }

/* The placeholder tile in Saved/History centres an icon. */
.saved-ph { display: grid; place-items: center; color: var(--forest-ink); }
.saved-ph svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* .dash-action headings are styled as h3 in the design system; make the
   h2 fallback look identical wherever an older template still emits one. */
.dash-action h2 { margin: 0; font-size: 15px; font-family: var(--font-display); letter-spacing: -0.01em; }

/* Give the reading-progress bar room to breathe above the sticky topbar. */
.read-progress { z-index: 61; }

/* Article body: keep infobox/figure removal from leaving a gap. */
.panel .prose > .mw-parser-output:empty { display: none; }

/* --------------------------------------------------------- language menu */

.lang-menu {
  position: fixed;
  z-index: 300;
  min-width: 190px;
  max-height: min(60vh, 420px);
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: rise 0.16s var(--ease) both;
}

.lang-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.lang-menu-item:hover { background: var(--surface-2); }

.lang-menu-item.is-active {
  background: color-mix(in srgb, var(--forest) 14%, var(--surface));
  color: var(--text);
  font-weight: 650;
}

.lang-menu-item.is-active::after { content: " ✓"; color: var(--copper-ink); }

/* --------------------------------------------------------- offline strip */

.status-strip { letter-spacing: 0.01em; }

/* --------------------------------------------------------- tiny helpers */

/* Buttons that carry an icon and a label inside .article-actions. */ .article-actions .btn svg, .row-cta .btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
}

/* The bookmark toggle shows its on-state clearly. */
.btn.is-on { border-color: var(--accent); color: var(--copper-ink); }

/* Feedback form controls reuse the searchbar shell, full width. */
form.panel .searchbar,
form.panel .select {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text);
  resize: vertical;
}

form.panel .select { cursor: pointer; }

/* A skeleton line used by the rail and cards. */
.rail-card .sk-line { display: block; height: 12px; border-radius: 6px; margin: 8px 0; }

@media (prefers-reduced-motion: reduce) {
  .lang-menu { animation: none; }
}

/* Suggest rows: title above description, thumbnail fixed size. */
.suggest-item > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.suggest-item .si-title { display: block; font-weight: 600; }
.suggest-item .si-desc { display: block; color: var(--muted); font-size: 13px; }
.suggest-item img { width: 34px; height: 34px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: var(--surface-2); }

/* The article rail is the narrow column; the prose is the wide one. The design
   system moved the rail with `order:-1` for a DOM that had it last, so pin the
   order now that the rail is appended after the panel. */
.article-grid.rail-open .toc-rail { order: 0; }
.article-grid.rail-open .panel { order: -1; }
.toc-rail .factbox { margin-top: 0; }

/* ---------------------------------------------------------- icon sizing */

/* Icons injected from JS carry a viewBox but no width/height, so anywhere the
   design system does not already set a size they would stretch to fill. Pin
   the few containers that rely on the markup's own width/height. */
.dash-hero-badge svg { width: 14px; height: 14px; flex: 0 0 auto; }
.hero-clock svg { width: 17px; height: 17px; }
.state .ic svg { width: 34px; height: 34px; }
.saved-ph svg { width: 20px; height: 20px; }
.src-mark svg { width: 14px; height: 14px; }

/* --------------------------------------------------- the hero gradient */

/* In the captured stylesheet `.dash-grad` kept `background-clip: text` and
   `color: transparent` but lost its gradient, which left the second half of
   the headline invisible. Restore it. */
.dash-hero h1 .dash-grad {
  background-image: linear-gradient(100deg, var(--copper) 0%, #d08a62 45%, var(--accent-2) 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
[data-theme="dark"] .dash-hero h1 .dash-grad {
  background-image: linear-gradient(100deg, #d08a62 0%, #e0a271 45%, var(--accent-2) 100%);
}

/* ------------------------------------------------------- small screens */

@media (max-width: 700px) {
  .dash-hero-badge { align-self: center; text-align: center; }
  /* Keep every navigation option reachable; just tighten it so it wraps
     neatly instead of overflowing. */
  .topbar-inner { gap: 6px; }
  .topnav { margin-left: auto; }
  .topnav a { padding: 7px 8px; font-size: 12.5px; }
}

/* ======================================================================
   The hero assumes a dark panel
   ======================================================================
   The design system styles every control inside .dash-hero for a dark
   background — white text on translucent white. The hero itself is not
   dark (it inherits the page background, and its own gradient was lost in
   the capture), so in light mode the depth buttons, the meaning switch, the
   chips and the clock were white on cream and effectively invisible.
   Restore the theme-aware styling for all of them. */

.dash-hero .searchbar { background: var(--surface); border-color: var(--border-2); }
.dash-hero .depth-btn { background: var(--surface); border-color: var(--border-2); color: var(--text); }
.dash-hero .depth-btn:hover { background: var(--surface-2); color: var(--text); }
.dash-hero .depth-btn.is-active,
.dash-hero .depth-btn[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.dash-hero .mode-btn { color: var(--muted); }
.dash-hero .mode-btn.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.dash-hero .chip-btn { background: var(--surface); border-color: var(--border-2); color: var(--text); }
.dash-hero .chip-btn:hover { background: var(--surface-2); color: var(--text); }
.dash-hero .chip-btn.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.dash-hero .chips .chip { background: var(--surface); border-color: var(--border-2); color: var(--text); }
.dash-hero .chips .chip:hover { background: var(--surface-2); color: var(--accent); }
.dash-hero .chips > span { color: var(--faint) !important; }
.dash-hero .trust-strip { color: var(--muted); }
.dash-hero .trust-strip li::before { color: var(--forest-ink); }
.dash-hero .hero-clock { background: var(--surface); border-color: var(--border-2); color: var(--text); }
.dash-hero .hero-clock span { color: var(--muted); }
.dash-hero .example-prompts button { background: var(--surface); border-color: var(--border-2); color: var(--text); }
.dash-hero .example-prompts button:hover { background: var(--surface-2); color: var(--accent); }

/* ------------------------------------------------------------ depth row */

/* The depth control is a row of three choices plus the meaning switch. Let it
   stretch the width it has instead of huddling in the middle. */
.dash-depth { width: 100%; justify-content: space-between; row-gap: 10px; }
.depth { flex: 1 1 auto; }
.dash-hero .dash-depth { justify-content: center; }
@media (max-width: 700px) {
  .dash-depth { justify-content: center; }
}

/* ------------------------------------------------------- topic breakdown */

/* Each topic block opens short, with one control to read the whole section. */
.topic-block .topic-short { margin: 0 0 10px; color: var(--text); font-size: 16px; line-height: 1.7; }
.topic-block .topic-full[hidden] { display: none; }
.topic-block .topic-more {
  margin-top: 10px;
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  color: var(--copper-ink);
  border-radius: 999px;
  padding: 5px 13px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.topic-block .topic-more:hover { border-color: var(--accent); }
.topic-block .topic-more::after { content: " ▾"; }
.topic-block.is-open .topic-more::after { content: " ▴"; }
.topic-block .topic-short strong { font-weight: 600; }

/* --------------------------------------------------------------- feedback */

/* The emoji feedback row on answers and articles. */
.fb-btn { font-family: var(--font-body); font-size: 13.5px; color: var(--text); }
.fb-emoji { font-family: var(--font-body); }

/* --------------------------------------------------------- language bar */

.langbar { border-radius: var(--radius); margin: 0 0 18px; border: 1px solid var(--border-2); }
.langbar-inner { flex-wrap: wrap; gap: 8px; }
.langbar .pill { cursor: pointer; }

/* ------------------------------------------------------------ scope note */

.scope-note {
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--copper);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  max-width: var(--measure);
}

/* -------------------------------------------------------- article tables */

.prose .table-scroll { margin: 18px 0; }
.prose .table-scroll > table { margin: 0; border-collapse: collapse; font-size: 14px; }
.prose .table-scroll th,
.prose .table-scroll td { padding: 8px 12px; border: 1px solid var(--border-2); text-align: left; }
.prose .table-scroll th { background: var(--surface-2); font-weight: 650; }

/* ----------------------------------------------------------- feedback box */

.feedback { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--border); }
.feedback .panel-head { margin-bottom: 10px; }
.feedback .fb-note textarea { font: inherit; font-size: 14.5px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); resize: vertical; }
.btn-sm { padding: 8px 13px; font-size: 13.5px; }

/* Keep the topbar tidy when the wrapped rows appear on a narrow screen. */
.topbar-inner { row-gap: 6px; }

/* ======================================================================
   Reading views use the whole width
   ======================================================================
   An article is the point of the page, so the discover rail steps aside and
   the reading column takes the space. On a laptop the article is then the
   full width of the shell; on a phone it is the single column. */
[data-view="article"] .app-rail,
[data-view="library"] .app-rail,
[data-view="work"] .app-rail,
[data-view="ask"] .app-rail,
[data-view="search"] .app-rail { display: none !important; }

/* The design system hides the sidebar and collapses the shell to one column
   below 1041px. The override has to follow the same breakpoint, or the
   now-empty sidebar column eats the page on a tablet. */
[data-view="article"] .app-shell,
[data-view="article"] .app-shell:has(.app-rail:not(:empty)),
[data-view="library"] .app-shell,
[data-view="library"] .app-shell:has(.app-rail:not(:empty)),
[data-view="work"] .app-shell,
[data-view="work"] .app-shell:has(.app-rail:not(:empty)),
[data-view="ask"] .app-shell,
[data-view="ask"] .app-shell:has(.app-rail:not(:empty)),
[data-view="search"] .app-shell,
[data-view="search"] .app-shell:has(.app-rail:not(:empty)) { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 1041px) {
  [data-view="article"] .app-shell,
  [data-view="article"] .app-shell:has(.app-rail:not(:empty)),
  [data-view="library"] .app-shell,
  [data-view="library"] .app-shell:has(.app-rail:not(:empty)),
  [data-view="work"] .app-shell,
  [data-view="work"] .app-shell:has(.app-rail:not(:empty)),
  [data-view="ask"] .app-shell,
  [data-view="ask"] .app-shell:has(.app-rail:not(:empty)),
  [data-view="search"] .app-shell,
  [data-view="search"] .app-shell:has(.app-rail:not(:empty)) { grid-template-columns: 236px minmax(0, 1fr); }
}

[data-view="article"] .wrap { max-width: var(--maxw); }
[data-view="article"] .panel .prose { max-width: 78ch; }.toc-jump {
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 16px 18px 18px;
  margin: 0 0 22px;
  max-height: 62vh;
  overflow: auto;
}
.toc-jump[hidden] { display: none; }
.toc-jump-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.toc-jump-head h2 {
  margin: 0; font-family: var(--font-body); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--copper-ink);
}
.toc-jump-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc-jump-list a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--radius-xs); color: var(--text); font-size: 14.5px;
}
.toc-jump-list a:hover { background: var(--surface-2); text-decoration: none; }
.toc-jump-list .topic-num { width: 22px; height: 22px; font-size: 11.5px; }

/* --------------------------------------------------- pictures in topics */

.topic-figure { margin: 0 0 12px; display: grid; gap: 6px; }
.topic-figure img {
  display: block; width: auto; max-width: 100%; max-height: 300px;
  border-radius: var(--radius); border: 1px solid var(--border-2); background: var(--surface-2);
}
.topic-figure figcaption { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ----------------------------------------------------------- library */

.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.card-meta-extra { font-size: 11.5px; color: var(--faint); }
.chip.is-active {
  background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 600;
}
.chip.is-active:hover { color: var(--on-primary); }

/* ======================================================================
   The article template the audit asks for
   ====================================================================== */

/* Breadcrumbs: Home > Source > Article. Real links, current page last. */
.crumbs { margin: 0 0 14px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 13px; }
.crumbs li { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.crumbs li + li::before { content: "›"; color: var(--faint); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current="page"] { color: var(--text); font-weight: 600; }

/* Reading measure for the breakdown: 65-85 characters a line, not 110. */
.topic-block .topic-short p,
.topic-block .topic-full p,
.topic-block .topic-short,
.topic-block .topic-full { max-width: 78ch; }
.topic-block .line-list > li { max-width: 78ch; }

/* Inline citation markers in the full article text. */
.prose sup.cite a,
.prose sup.reference a {
  font-size: 0.72em; padding: 0 2px; color: var(--copper-ink); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.prose sup.cite a:hover { text-decoration: underline; }

/* The reference list. */
.reference-list { counter-reset: ref; margin: 0; padding: 0; list-style: none; max-width: 82ch; }
.reference-list li {
  counter-increment: ref; position: relative; padding: 9px 0 9px 34px;
  border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--muted);
  overflow-wrap: break-word; scroll-margin-top: 90px;
}
.reference-list li::before {
  content: "[" counter(ref) "]"; position: absolute; left: 0; top: 9px;
  color: var(--copper-ink); font-variant-numeric: tabular-nums; font-weight: 600;
}
.reference-list li:target { background: color-mix(in srgb, var(--sage) 45%, transparent); border-radius: var(--radius-xs); }

/* Per-image credit and licence inside a gallery caption. */

/* The modification notice sits with the sources, not hidden in the footer. */
.modification-notice { border-top: 1px dashed var(--border-2); padding-top: 10px; margin-top: 12px; }

/* A long reference list should not push the page wide. */
.references, .sec:has(.reference-list) { overflow-wrap: break-word; }

/* ======================================================================
   Contents with reading progress
   ====================================================================== */

.toc-jump-head h2 { margin: 0; }
.toc-jump-meta { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.toc-jump-bar {
  height: 3px; border-radius: 999px; background: var(--surface-2);
  margin: 10px 0 12px; overflow: hidden;
}
.toc-jump-bar > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--forest), var(--copper));
  transition: width 220ms var(--ease);
}
@media (prefers-reduced-motion: reduce) { .toc-jump-bar > span { transition: none; } }

.toc-jump-list a { position: relative; }
.toc-mark {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid var(--border-2); background: transparent;
}
.toc-jump-list .is-current { background: var(--surface-2); }
.toc-jump-list .is-current .toc-mark { border-color: var(--copper); background: var(--copper); }
.toc-jump-list .is-current .toc-label { font-weight: 600; }
.toc-jump-list .is-read .toc-mark { border-color: var(--forest); background: var(--forest); }
.toc-jump-list .is-read .toc-label { color: var(--muted); }
.toc-jump-list .toc-label { min-width: 0; overflow-wrap: anywhere; }

/* Anchored headings must clear the sticky header. */
.topic-block, .prose h2, .prose h3, .sec[id] { scroll-margin-top: 84px; }

/* ======================================================================
   Interaction polish the guidelines call for
   ====================================================================== */

/* A visible focus ring, only for keyboard users. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.topbar :focus-visible { outline-offset: -2px; }

/* Comfortable hit targets, and no double-tap zoom on controls. */
button, .btn, [role="button"], .tab, .chip, .depth-btn, .chip-btn {
  touch-action: manipulation;
  min-height: 40px;
}
.btn-icon, .btn-sm { min-height: 36px; min-width: 36px; }
.toc-jump-list a, .side-link, .bottom-nav a { min-height: 40px; }

/* iOS zooms the page when a focused input is under 16px. */
@media (max-width: 700px) {
  input, select, textarea, .searchbar textarea, .searchbar input { font-size: 16px; }
}

/* Tap highlight follows the design rather than the platform default. */
* { -webkit-tap-highlight-color: rgba(180, 106, 69, 0.18); }

/* ======================================================================
   Evidence Desk: the composer, the shell, and calmer surfaces
   ====================================================================== */

.composer-label {
  display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 6px 2px;
}
.mode-help { margin: 8px 2px 0; font-size: 13px; color: var(--muted); }
.composer-prompt { margin: 8px 2px 0; font-size: 13px; color: var(--danger); }
.searchbar { flex-wrap: wrap; }
.searchbar .composer-label { flex: 1 1 100%; }
.searchbar .mode-help, .searchbar .composer-prompt { flex: 1 1 100%; }

/* The mode control is a segmented choice, labelled in plain language. */
.mode { background: var(--surface-2); border-radius: 999px; padding: 3px; display: inline-flex; gap: 2px; }
.mode-btn { min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; }

/* Grouped sidebar: a heading per group, not one long list. */
.side-heading {
  margin: 16px 0 6px; padding: 0 12px; font-family: var(--font-body);
  font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--copper-ink);
}
.side-heading:first-child { margin-top: 4px; }
.side-note { margin: 8px 12px 4px; font-size: 12px; line-height: 1.5; color: var(--faint); }

/* Four destinations on a phone, not five. */
.bottom-nav { grid-template-columns: repeat(4, 1fr); }

/* Ordinary reading sections use borders and contrast, not heavy shadows.
   Shadows are reserved for menus and dialogs, which float above the page. */
.sec:has(> .sec-head), .panel, .toc-jump { box-shadow: none; border: 1px solid var(--border-2); }
.lang-menu, .suggest { box-shadow: var(--float-1); }

/* Muted text and borders need to survive the contrast check. */
:root { --muted: #4f554d; --faint: #545b52; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --muted: #a8b0a6; --faint: #9aa29a; }
}
[data-theme="dark"] { --muted: #a8b0a6; --faint: #9aa29a; }

/* A calm reading measure for the answer, matching the article. */
.qa-answer .line-list > li, .points-list .point-text { max-width: 72ch; }

/* Small pieces the Evidence Desk additions need. */
.lang-menu-title {
  margin: 0 0 6px; padding: 4px 12px 0; font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper-ink);
}
.selected-note {
  margin: 0 0 12px; font-size: 13px; color: var(--muted);
  padding-left: 12px; border-left: 2px solid var(--copper);
}
.selected-note a { color: var(--copper-ink); font-weight: 600; }
.method-summary { margin-left: auto; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.method-note > summary { display: flex; align-items: baseline; gap: 10px; }
.error-query { font-size: 14px; color: var(--text); font-weight: 600; }
.error-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

.foot-build { color: var(--faint); }

/* ======================================================================
   Contents in the side rail, and the article read as points
   ====================================================================== */

/* The rail sits at the top of the side and stays put while reading. */
.toc-rail .toc-jump { position: sticky; top: 84px; }
.toc-rail .toc-jump-list { max-height: min(62vh, 560px); overflow-y: auto; }
.article-grid:not(.rail-open) > .toc-rail { display: none; }

/* The article reads the way the breakdown reads: one point per sentence. */
.points-prose { margin: 0 0 18px; padding-left: 22px; display: grid; gap: 8px; }
.points-prose > li { line-height: 1.62; max-width: 72ch; }
.points-prose > li::marker { color: var(--copper); }
.prose .points-prose { margin-bottom: 20px; }

/* Markdown actions stay out of the way until asked for. */
.md-disclosure { position: relative; display: inline-block; }
.md-disclosure-panel {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px;
  padding: 10px; border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  background: var(--surface-2);
}

/* On a phone the rail becomes a block above the content, closed by default. */
@media (max-width: 1039px) {
  .article-grid { grid-template-columns: 1fr; }
  .article-grid > .toc-rail { order: -1; }
  .toc-rail .toc-jump { position: static; }
  .toc-rail .toc-jump-list { max-height: 50vh; }
}

/* ======================================================================
   Corrections: the focus ring, the rail, and the action row
   ====================================================================== */

/* `#main` is focused after every render so a screen reader starts at the top.
   It is not a control, so it must not draw a focus ring — that ring was
   drawing a box around the whole page. */
#main:focus, #main:focus-visible, [tabindex="-1"]:focus-visible { outline: none; }

/* One scroller in the rail, not two nested ones fighting over the Close
   button. */
.toc-rail .toc-jump {
  position: sticky; top: 84px;
  display: flex; flex-direction: column;
  max-height: calc(100vh - 116px);
  padding: 16px 16px 14px;
}
.toc-rail .toc-jump-head { flex: 0 0 auto; align-items: center; margin-bottom: 8px; }
.toc-rail .toc-jump-head .btn { min-height: 32px; padding: 0 10px; font-size: 13px; }
.toc-rail .toc-jump-bar { flex: 0 0 auto; margin: 8px 0 10px; }
.toc-rail .toc-jump-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; max-height: none; padding-right: 2px; }
.toc-rail .toc-jump-list a { align-items: flex-start; padding: 7px 8px; font-size: 14px; }
.toc-rail .toc-jump-list .toc-mark { margin-top: 6px; }
.toc-rail .toc-jump-list .toc-label { min-width: 0; overflow-wrap: anywhere; }

/* The rail itself, and the panel beside it. */
.toc-rail { display: grid; gap: 16px; align-content: start; }
.toc-rail > * { min-width: 0; }.md-disclosure { display: inline-flex; flex-direction: column; align-items: flex-start; }
.md-disclosure-panel { margin-top: 6px; }

/* Actions live in the rail, collapsed until asked for. */
.rail-actions-body .btn { justify-content: flex-start; min-height: 40px; width: 100%; }
.rail-actions-body .md-disclosure { width: 100%; }
.rail-actions-body .md-disclosure > .btn { width: 100%; }
.rail-actions-body .md-disclosure-panel { width: 100%; }
.rail-actions-body .md-disclosure-panel .btn { width: auto; }

/* Anchored targets must clear the sticky header when jumped to. */
.topic-block, .prose h2, .prose h3, .prose h4, .sec[id], [id^="topic-"] { scroll-margin-top: 96px; }

/* The reading views use the width the shell gives them. */
[data-view="article"] #main, [data-view="ask"] #main, [data-view="search"] #main {
  max-width: none; width: 100%;
}
.article-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
@media (min-width: 1560px) { .article-grid { grid-template-columns: minmax(0, 1fr) 360px; } }

/* ======================================================================
   The composer, the sidebar, and the width of the reading views
   ====================================================================== */

/* A composer reads top to bottom: label, the field, then the controls on one
   line with the mode choice and the submit at the end. It was a wrapped flex
   row, which put the controls in a different place on every page. */
.searchbar:has(> .composer-tools) {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
  align-items: stretch; padding: 14px 16px 12px;
}
.searchbar:has(> .composer-tools) > .composer-label { grid-column: 1 / -1; margin: 0; }
.searchbar:has(> .composer-tools) > textarea { width: 100%; min-height: 42px; }
.searchbar:has(> .composer-tools) > .composer-tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0;
  justify-content: flex-start;
}
.searchbar:has(> .composer-tools) > .composer-tools > .mode { margin-left: auto; }
.searchbar:has(> .composer-tools) > .composer-tools > .btn-icon { width: 40px; height: 40px; min-height: 40px; }
.searchbar:has(> .composer-tools) > .composer-tools > button[type="submit"] { min-height: 40px; padding: 0 22px; }
.searchbar:has(> .composer-tools) > .mode-help,
.searchbar:has(> .composer-tools) > .composer-prompt { grid-column: 1 / -1; margin: 0; }

/* One icon size in the sidebar, so the list reads as a list. */
.side-link { gap: 10px; padding: 9px 12px; font-size: 14.5px; }
.side-link > svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* The answer uses the width the shell gives it. */
.wrap-narrow:has(.qa-wide), .qa-wide { max-width: none; width: 100%; }
.qa-wide > .article-grid { width: 100%; }
.article-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* The reading views carry their own contents rail, so the discovery rail
   beside them would be a second column of noise — and it was squeezing the
   answer to 900px. */
[data-view="article"] .app-rail, [data-view="ask"] .app-rail, [data-view="search"] .app-rail { display: none; }

/* The section number must not collide with the label it belongs to. */
.toc-jump-list .topic-num { width: auto; min-width: 26px; padding: 0 5px; }
.toc-jump-list a > .topic-num { flex: 0 0 auto; }
.toc-jump-list .toc-label { flex: 1 1 auto; }

/* ======================================================================
   The composer: the suggestion list, and the field's height
   ====================================================================== */

/* The glass shell carries `contain: layout style paint`, and `paint` clips a
   child to the shell's own box. The suggestion list is a child of the
   composer that opens *below* it, so it was being clipped away — typing
   looked like nothing was happening. Drop containment on the composer only. */
.searchbar.glass { contain: none; }

/* The suggestion list needs to sit above the answer beneath it. */
.searchbar .suggest { z-index: 80; }

/* An empty field must show its whole placeholder. It wraps to two lines on a
   phone, and the textarea was staying one line tall, so the second line was
   cut in half — the "squashed" search bar. */
@media (max-width: 700px) {
  .searchbar:has(> .composer-tools) > textarea { min-height: 54px; }
}

/* ======================================================================
   The article reads across the whole width, contents at the top
   ======================================================================
   The reader asked for two things: the article should use the width the
   site has, not a narrow column squeezed beside a rail; and the contents
   ("jump to a section") should sit at the top, not down the side. So the
   side rail is gone from the reading views, the contents panel opens above
   the answer, and every control is one row. */

.panel-wide { max-width: none; width: 100%; }
.panel-wide .prose,
.panel-wide .topic-block .topic-short,
.panel-wide .topic-block .topic-full,
.panel-wide .topic-block .line-list > li { max-width: 88ch; }

/* The contents panel, above the answer, closed until asked for. */
.toc-top { margin: 0 0 20px; }
.toc-top[hidden] { display: none; }
.toc-top .toc-jump { position: static; max-height: min(64vh, 620px); overflow: auto; }

/* One row of controls, all on the same line. The Markdown disclosure opens
   as a floating panel so it cannot push its neighbours out of line — that
   ragged row was the "scattered" look. */
.art-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.art-actions > .btn, .art-actions > .md-disclosure > .btn { min-height: 40px; height: 40px; white-space: nowrap; }
.art-actions .md-disclosure { position: relative; }
.art-actions .md-disclosure-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 90;
  margin-top: 0; min-width: 220px;
}

/* The contents button in the header should not look active when there is
   nothing to show. */
#tocBtn[aria-expanded="true"] { border-color: var(--accent); color: var(--copper-ink); }

/* The reading views use the site's width. */
[data-view="article"] .wrap, [data-view="ask"] .wrap { max-width: var(--maxw); }

/* The base .article-grid rule used to come after the phone rule below, so a
   phone kept the two-column layout and the answer was squeezed into a sliver.
   Keep the stacking rule last, where it wins. */
@media (max-width: 1039px) {
  .article-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The Markdown actions panel is hidden with the `hidden` attribute, but the
   panel's own `display: flex` outranks the browser's [hidden] rule, so it was
   showing all the time. Once the panel left the collapsed rail and joined the
   top row, that became visible. Pin it. */
.md-disclosure-panel[hidden] { display: none; }

/* ======================================================================
   The article as points
   ======================================================================
   The reader wanted the article to read the way the core answer reads —
   one sentence, one point — not like a Wikipedia page and not as a separate
   "breakdown" of collapsed topic boxes. So each section is a heading and the
   same .line-list the core answer uses. */

.point-block { margin: 0 0 24px; scroll-margin-top: 96px; }
.point-block-head {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 19px; line-height: 1.25;
}
.point-block-head .topic-num {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  color: var(--copper-ink); min-width: 1.4em; font-variant-numeric: tabular-nums;
}
.point-block .line-list { margin: 0; }
.point-block .line-list > li { max-width: 88ch; }

/* ======================================================================
   The article is one centred column
   ======================================================================
   The reader asked for the article to sit centred, with the pictures centred
   in it, and the whole thing to read as one ordered column. The reading
   column is centred in the shell and the gallery is centred inside it. */

.panel-wide { max-width: 900px; margin-inline: auto; }
.panel-wide .gallery { justify-content: center; }
.panel-wide .gallery figure,
.panel-wide .art-figure,
.panel-wide .topic-figure { margin-inline: auto; text-align: center; }
.panel-wide figure img,
.panel-wide .gallery img,
.panel-wide .art-figure img { margin-inline: auto; }

/* The tabs and the top controls line up on the same centred axis. */
[data-view="article"] .tabs { justify-content: center; }

/* One aligned column: the heading, the controls, the tabs and the article all
   sit on the same centred axis, instead of a wide head above a narrow body. */
[data-view="article"] .wrap { max-width: 940px; }
.panel-wide { max-width: none; }

/* ======================================================================
   The article keeps Wikipedia's structure, read as points
   ======================================================================
   Sections, pictures and tables stay where Wikipedia puts them; each
   paragraph is re-read as one point per sentence; and the pictures are
   centred in the column. */

.art-section { margin: 0 0 26px; scroll-margin-top: 96px; }
.art-section-head {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px;
  font-family: var(--font-head); font-weight: 600; font-size: 22px; line-height: 1.25;
}
.art-section-head .topic-num {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  color: var(--copper-ink); min-width: 1.4em; font-variant-numeric: tabular-nums;
}

/* Pictures and tables: no floats, centred, never wider than the column. */
.art-body .thumb, .art-body figure, .art-body .gallery,
.art-body .thumbinner, .art-body .floatright, .art-body .floatleft, .art-body .tright, .art-body .tleft {
  float: none !important; margin-inline: auto !important; max-width: 100% !important; text-align: center;
}
.art-body img { max-width: 100%; height: auto; margin-inline: auto; }
.art-body .thumbcaption, .art-body figcaption { text-align: center; }
.art-body .table-scroll { margin: 18px auto; }

/* ======================================================================
   The article spreads across the width, with no side panel
   ======================================================================
   The reader asked for the article to spread out the way the core answer
   does, and for the left-hand panel to be gone — the contents is the
   "Jump to a section" button at the top instead. */

[data-view="article"] .wrap { max-width: none; }
.panel-wide .line-list > li,
.art-body > p,
.art-body > ul > li { max-width: 104ch; }

/* No side navigation on the article: the header still carries the
   destinations, and the contents is the button at the top. */
[data-view="article"] .app-side { display: none !important; }
[data-view="article"] .app-shell,
[data-view="article"] .app-shell:has(.app-rail:not(:empty)) { grid-template-columns: minmax(0, 1fr); }

/* ======================================================================
   Veridell v5 — "Morphisms"
   ======================================================================
   Not one style painted over everything. Each morphism is given the job
   it is actually good at, and only that job — which is the rule the
   design references all agree on: one base material per surface, never a
   different style on every card.

   The system, surface by surface:

     · AURORA / MESH  — the background. A slow, soft colour field behind
       the page so the glass layer above it has something to refract.

     · SKELETON PAPER — grain and a faint paper tooth under the reading
       surfaces, so long prose sits on something that feels like a page.

     · LIQUID GLASS (glassmorphism, navigation layer only) — the top bar,
       the side rail, the bottom dock, and every floating overlay (the
       suggestion list, the language menu, the toast). Apple's guidance is
       explicit that the glass material belongs to the functional layer
       that floats above content, never to the content cards themselves,
       and that glass is never stacked on glass. That is how it is used
       here: translucent, blurred, saturating, with one hairline highlight
       along the top edge and a deep, soft shadow beneath.

     · CLAYMORPHISM — the content layer: every card, panel, article
       surface and the hero. Inflated soft-3D shapes: big radii, a light
       inner shadow top-left, a darker one bottom-right, a soft drop, and
       a gentle gradient across the face for volume.

     · NEUMORPHISM — the controls that should feel pressed rather than
       raised: text fields, the segmented switches, tabs and the active
       state of a control. Used only there, and always with a visible
       border, because neumorphism on its own cannot clear the 3:1
       non-text contrast a control edge needs.

     · BENTO — the layout of the dashboard bands and the category grid:
       tiles of two sizes that lock together, one idea per tile.

     · MICRO-INTERACTION — a lift, a squish, a specular sweep. Never the
       only signal for a state.

   Accessibility is a floor, not a finish: text 4.5:1, control edges 3:1,
   a visible focus ring in the brand's ink, and real fallbacks for
   reduced motion, reduced transparency, increased contrast and print.
   ====================================================================== */

:root {
  --ease-out: cubic-bezier(.22, .68, .3, 1);
  --focus: var(--copper-ink);

  /* ---------------------------------------------------- clay (content) */
  --clay-r: 26px;
  --clay-r-lg: 34px;
  --clay-r-sm: 16px;
  --clay-r-pill: 999px;

  --clay-face: linear-gradient(145deg,
      color-mix(in srgb, var(--surface) 100%, #ffffff 8%),
      color-mix(in srgb, var(--surface) 94%, var(--sand)));
  --clay-hi: inset 6px 6px 12px color-mix(in srgb, #ffffff 92%, transparent);
  --clay-lo: inset -7px -7px 14px color-mix(in srgb, var(--forest) 13%, transparent);
  --clay-drop: 0 22px 40px -22px color-mix(in srgb, var(--forest) 46%, transparent),
               0 8px 16px -12px color-mix(in srgb, var(--forest) 30%, transparent);

  --clay-press-hi: inset -5px -5px 10px color-mix(in srgb, #ffffff 70%, transparent);
  --clay-press-lo: inset 6px 6px 12px color-mix(in srgb, var(--forest) 20%, transparent);

  --clay-cta: linear-gradient(145deg,
      color-mix(in srgb, var(--copper) 92%, #ffffff), var(--copper-deep));
  --clay-cta-hi: inset 6px 6px 13px color-mix(in srgb, #ffffff 40%, transparent);
  --clay-cta-lo: inset -7px -7px 14px color-mix(in srgb, #000000 26%, transparent);
  --clay-cta-drop: 0 20px 34px -20px color-mix(in srgb, var(--copper-deep) 80%, transparent);

  /* --------------------------------------- liquid glass (navigation) */
  --glass-bg: color-mix(in srgb, var(--surface) 60%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--surface) 82%, transparent);
  --glass-line: color-mix(in srgb, #ffffff 62%, transparent);
  --glass-hi: inset 0 1px 0 color-mix(in srgb, #ffffff 55%, transparent);
  --glass-drop: 0 18px 44px -24px color-mix(in srgb, var(--forest) 62%, transparent),
                0 6px 16px -12px color-mix(in srgb, var(--forest) 34%, transparent);
  --glass-blur: 22px;
  --glass-sat: 1.6;

  /* ------------------------------------- neumorphism (pressed controls) */
  --neo-face: linear-gradient(145deg,
      color-mix(in srgb, var(--surface) 88%, var(--bg)),
      color-mix(in srgb, var(--surface) 97%, #ffffff));
  --neo-in: inset 5px 5px 11px color-mix(in srgb, var(--forest) 16%, transparent),
            inset -5px -5px 11px color-mix(in srgb, #ffffff 92%, transparent);
  --neo-edge: color-mix(in srgb, var(--border-2) 92%, var(--forest));

  /* --------------------------------------------------- paper (prose) */
  --paper-tooth: radial-gradient(color-mix(in srgb, var(--forest) 7%, transparent) .5px, transparent .6px);
  --paper-bg: color-mix(in srgb, var(--surface) 97%, var(--sand));
}

[data-theme="dark"] {
  --focus: var(--sage);

  --clay-face: linear-gradient(145deg,
      color-mix(in srgb, var(--surface) 100%, #ffffff 6%),
      color-mix(in srgb, var(--surface) 88%, #000000));
  --clay-hi: inset 6px 6px 14px color-mix(in srgb, #ffffff 7%, transparent);
  --clay-lo: inset -7px -7px 16px color-mix(in srgb, #000000 55%, transparent);
  --clay-drop: 0 26px 46px -24px rgba(0, 0, 0, .92), 0 10px 20px -14px rgba(0, 0, 0, .72);

  --clay-press-hi: inset -5px -5px 10px color-mix(in srgb, #ffffff 5%, transparent);
  --clay-press-lo: inset 6px 6px 12px color-mix(in srgb, #000000 60%, transparent);

  --clay-cta: linear-gradient(145deg,
      color-mix(in srgb, var(--accent) 92%, #ffffff),
      color-mix(in srgb, var(--accent) 60%, #000000));
  --clay-cta-drop: 0 22px 38px -20px color-mix(in srgb, #000000 85%, transparent);

  --glass-bg: color-mix(in srgb, var(--surface) 52%, transparent);
  --glass-bg-strong: color-mix(in srgb, var(--surface) 86%, transparent);
  --glass-line: color-mix(in srgb, #ffffff 16%, transparent);
  --glass-hi: inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent);
  --glass-drop: 0 20px 48px -24px rgba(0, 0, 0, .95), 0 8px 18px -12px rgba(0, 0, 0, .8);

  --neo-face: linear-gradient(145deg,
      color-mix(in srgb, var(--surface) 82%, #000000),
      color-mix(in srgb, var(--surface) 100%, #ffffff 4%));
  --neo-in: inset 5px 5px 12px color-mix(in srgb, #000000 62%, transparent),
            inset -5px -5px 12px color-mix(in srgb, #ffffff 6%, transparent);
  --neo-edge: color-mix(in srgb, var(--border-2) 86%, #ffffff);

  --paper-tooth: radial-gradient(color-mix(in srgb, #ffffff 4%, transparent) .5px, transparent .6px);
  --paper-bg: color-mix(in srgb, var(--surface) 96%, #000000);
}

[data-theme="sepia"] {
  --clay-face: linear-gradient(145deg, #faf3e2, #e9dcbd);
  --clay-hi: inset 6px 6px 12px rgba(255, 255, 255, .9);
  --clay-lo: inset -7px -7px 14px rgba(120, 96, 60, .16);
  --clay-drop: 0 22px 40px -22px rgba(120, 96, 60, .5), 0 8px 16px -12px rgba(120, 96, 60, .3);
  --glass-bg: color-mix(in srgb, var(--surface) 66%, transparent);
  --glass-line: rgba(255, 255, 255, .7);
  --paper-bg: #f6ecd7;
}

/* ======================================================================
   1 · AURORA — the background
   ====================================================================== */

body::before {
  background:
    radial-gradient(60vw 46vw at 12% -10%, color-mix(in srgb, var(--sage) 38%, transparent), transparent 66%),
    radial-gradient(52vw 40vw at 100% 4%, color-mix(in srgb, var(--copper) 20%, transparent), transparent 62%),
    radial-gradient(70vw 50vw at 50% 112%, color-mix(in srgb, var(--forest) 12%, transparent), transparent 70%);
  filter: blur(10px);
  animation: auroraDrift 48s var(--ease-out) infinite alternate;
}
@keyframes auroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(1.6%, -1.4%, 0) scale(1.05); }
}
body::after { opacity: 0; }   /* the old grid belongs to the glass era */
.grain { opacity: .14; }
[data-theme="dark"] .grain { opacity: .08; }

::selection { background: color-mix(in srgb, var(--copper) 32%, transparent); color: var(--text); }

* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--copper) 45%, var(--border-2)) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--copper) 38%, var(--border-2));
  border: 3px solid transparent; border-radius: 999px; background-clip: padding-box;
}

/* ======================================================================
   2 · LIQUID GLASS — the navigation layer
   ======================================================================
   Glass is used only for chrome that floats above content. Everything is
   translucent, blurred and slightly over-saturated, with a single bright
   hairline on the top edge — the tell that makes it read as a sheet of
   material rather than a grey box. */

.topbar { background: transparent; border-bottom: 0; box-shadow: none; padding-top: 12px; }

.topbar-inner {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-line);
  border-radius: var(--clay-r-pill);
  box-shadow: var(--glass-hi), var(--glass-drop);
  padding: 9px 14px;
}

.app-side {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-line);
  border-radius: var(--clay-r-lg);
  box-shadow: var(--glass-hi), var(--glass-drop);
}

.bottom-nav, .bottom-nav.glass {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-hi), 0 -10px 34px -20px color-mix(in srgb, var(--forest) 55%, transparent), var(--glass-drop);
}

.suggest, .lang-menu, .toast {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-line);
  border-radius: var(--clay-r);
  box-shadow: var(--glass-hi), var(--glass-drop);
}
.suggest-item:hover, .suggest-item.active, .lang-menu-item:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.lang-menu-item.is-active { background: var(--clay-cta); color: #fff; }
[data-theme="dark"] .lang-menu-item.is-active { background: var(--clay-cta); color: var(--on-primary); }
.lang-menu-item.is-active::after { color: inherit; }

/* The nav links themselves stay flat and legible — glass is the sheet,
   not every word on it. */
.topnav a { border-radius: var(--clay-r-pill); transition: background-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.topnav a:hover { background: color-mix(in srgb, var(--surface) 62%, transparent); }
.topnav a[aria-current="page"] {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow: inset 0 0 0 1px var(--glass-line);
}
.side-link { border-radius: 14px; transition: background-color .2s var(--ease-out), box-shadow .2s var(--ease-out), color .2s var(--ease-out); }
.side-link:hover { background: color-mix(in srgb, var(--surface) 58%, transparent); }
.side-link[aria-current="page"] {
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--glass-line);
}
.side-heading { color: var(--copper-ink); }
.bottom-nav a[aria-current="page"] { color: var(--copper-ink); }

/* A browser without backdrop-filter gets an opaque sheet, not a mess. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .topbar-inner, .app-side, .bottom-nav, .suggest, .lang-menu, .toast {
    background: var(--surface);
  }
}

/* ======================================================================
   3 · CLAYMORPHISM — the content layer
   ====================================================================== */

.panel, .answer-card, .sec:has(> .sec-head), .source-card, .page,
.src-group, .topic-block, .factbox, .toc, .toc-jump, .rail-card,
.howstep, .ask-note, .method-note, .langbar, .aotd, .evidence,
.scope-note, .saved-item, .state, .error-box, .md-raw, .rail-actions,
.article-grid .panel {
  background: var(--clay-face);
  border: 0;
  border-radius: var(--clay-r-lg);
  box-shadow: var(--clay-hi), var(--clay-lo), var(--clay-drop);
}

.panel::before, .answer-card::before, .sec:has(> .sec-head)::before,
.src-group::before, .topic-block::before, .page::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 6px; border-radius: var(--clay-r-lg) var(--clay-r-lg) 0 0;
  background: linear-gradient(90deg, var(--forest), var(--accent-2) 45%, var(--copper));
  opacity: .9;
}

.card, .q-card, .cat-card, .dash-action, .topic-card, .howstep {
  background: var(--clay-face);
  border: 0;
  border-radius: var(--clay-r);
  box-shadow: var(--clay-hi), var(--clay-lo), var(--clay-drop);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.card:hover, .q-card:hover, .cat-card:hover, .dash-action:hover,
.topic-card:hover, .howstep:hover {
  transform: translateY(-5px);
  box-shadow: var(--clay-hi), var(--clay-lo),
              0 30px 52px -24px color-mix(in srgb, var(--forest) 55%, transparent),
              0 12px 22px -14px color-mix(in srgb, var(--copper) 45%, transparent);
}
.card-thumb, .q-thumb { background: color-mix(in srgb, var(--surface-2) 92%, var(--sand)); }
.card-thumb.placeholder { box-shadow: var(--neo-in); border-radius: 0; }

.cat-card .ic, .dash-action .ic, .topic-card .ic, .feature .ic,
.site-intro .intro-card .ic {
  background: var(--clay-face);
  border-radius: 14px;
  box-shadow: inset 3px 3px 6px color-mix(in srgb, #ffffff 85%, transparent),
              inset -4px -4px 8px color-mix(in srgb, var(--forest) 12%, transparent),
              0 8px 14px -10px color-mix(in srgb, var(--forest) 45%, transparent);
  color: var(--copper-ink);
}
[data-theme="dark"] .cat-card .ic, [data-theme="dark"] .dash-action .ic,
[data-theme="dark"] .topic-card .ic, [data-theme="dark"] .feature .ic {
  box-shadow: inset 3px 3px 6px color-mix(in srgb, #ffffff 6%, transparent),
              inset -4px -4px 8px color-mix(in srgb, #000000 55%, transparent),
              0 8px 14px -10px rgba(0, 0, 0, .8);
}

/* ======================================================================
   4 · CONTROLS — clay when raised, neumorphic when pressed
   ====================================================================== */

.btn {
  border: 1px solid color-mix(in srgb, var(--border-2) 55%, transparent);
  border-radius: var(--clay-r-pill);
  background: var(--clay-face);
  color: var(--text);
  box-shadow: var(--clay-hi), var(--clay-lo), var(--clay-drop);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active {
  transform: translateY(1px) scale(.97);
  box-shadow: var(--clay-press-hi), var(--clay-press-lo), 0 6px 12px -10px color-mix(in srgb, var(--forest) 50%, transparent);
}

/* The primary action is the one deeply-tinted piece of clay, with a
   specular sweep on hover so it reads as the loudest thing on the page. */
.btn-primary, .btn-primary:hover {
  background-image: var(--clay-cta),
    linear-gradient(115deg, transparent 38%, color-mix(in srgb, #ffffff 34%, transparent) 50%, transparent 62%);
  background-size: 100% 100%, 240% 100%;
  background-position: 0 0, 130% 0;
  border-color: transparent;
  color: #fff;
  box-shadow: var(--clay-cta-hi), var(--clay-cta-lo), var(--clay-cta-drop);
  transition: background-position .7s var(--ease-out), filter .18s var(--ease-out),
              transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.btn-primary:hover { background-position: 0 0, -30% 0; filter: brightness(1.04); }
[data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-primary:hover {
  background-image: var(--clay-cta),
    linear-gradient(115deg, transparent 38%, color-mix(in srgb, #ffffff 30%, transparent) 50%, transparent 62%);
  background-size: 100% 100%, 240% 100%;
  color: var(--on-primary);
  box-shadow: var(--clay-cta-hi), var(--clay-cta-lo), var(--clay-cta-drop);
}
.btn-primary:active { box-shadow: var(--clay-press-hi), var(--clay-press-lo), var(--clay-cta-drop); }
.btn-ghost { background: var(--clay-face); }
.btn-icon { border-radius: 50%; }

/* Small clay blobs: chips, pills, badges. Each keeps a border so its edge
   clears the contrast a control needs. */
.chip, .pill, .depth-btn, .chip-btn, .example-prompts button, .sc-kind,
.badge, .saved-del, .btn-sm {
  border: 1px solid color-mix(in srgb, var(--border-2) 62%, transparent);
  background: var(--clay-face);
  border-radius: var(--clay-r-pill);
  box-shadow: inset 3px 3px 7px color-mix(in srgb, #ffffff 80%, transparent),
              inset -4px -4px 8px color-mix(in srgb, var(--forest) 11%, transparent),
              0 8px 15px -12px color-mix(in srgb, var(--forest) 45%, transparent);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out);
}
[data-theme="dark"] .chip, [data-theme="dark"] .pill, [data-theme="dark"] .depth-btn,
[data-theme="dark"] .chip-btn, [data-theme="dark"] .example-prompts button,
[data-theme="dark"] .badge {
  box-shadow: inset 3px 3px 7px color-mix(in srgb, #ffffff 6%, transparent),
              inset -4px -4px 8px color-mix(in srgb, #000000 55%, transparent),
              0 8px 15px -12px rgba(0, 0, 0, .8);
}
.chip:hover, .pill:hover, .depth-btn:hover, .chip-btn:hover, .example-prompts button:hover { transform: translateY(-2px); border-color: var(--glass-line); }
.chip:active, .pill:active, .depth-btn:active, .chip-btn:active, .example-prompts button:active { transform: translateY(1px) scale(.97); }

/* An active control is pressed *into* the surface — neumorphism's one job. */
.depth-btn.is-active, .chip-btn.is-active, .chip.is-active,
.dash-hero .depth-btn[aria-pressed="true"], .dash-hero .chip-btn.is-active,
.mode-btn.is-active, .tab[aria-selected="true"], .tab.is-active,
.toc a.active {
  background: var(--clay-cta);
  color: #fff;
  border-color: transparent;
  box-shadow: inset 4px 4px 9px color-mix(in srgb, #000000 24%, transparent),
              inset -4px -4px 9px color-mix(in srgb, #ffffff 22%, transparent);
}
[data-theme="dark"] .depth-btn.is-active, [data-theme="dark"] .chip-btn.is-active,
[data-theme="dark"] .mode-btn.is-active, [data-theme="dark"] .dash-hero .depth-btn[aria-pressed="true"],
[data-theme="dark"] .toc a.active { background: var(--clay-cta); color: var(--on-primary); }
.badge { color: var(--copper-ink); }
.badge.accent, .badge.accent:hover { background: var(--clay-cta); color: #fff; border-color: transparent; box-shadow: var(--clay-cta-hi), var(--clay-cta-lo), var(--clay-cta-drop); }
[data-theme="dark"] .badge { color: var(--sage); }

/* Fields are pressed in, not raised, and keep a visible edge. */
.searchbar, .composer .searchbar, .select, .langbar select,
form.panel .searchbar, form.panel .select, .feedback .fb-note textarea,
.langbar-inner input#langSelect {
  background: var(--neo-face);
  border: 1px solid var(--neo-edge);
  border-radius: var(--clay-r);
  box-shadow: var(--neo-in);
  transition: box-shadow .24s var(--ease-out), border-color .24s var(--ease-out);
}
.searchbar:focus-within, .composer .searchbar:focus-within,
.select:focus, .langbar select:focus,
form.panel .searchbar:focus-within, .feedback .fb-note textarea:focus {
  border-color: var(--copper);
  box-shadow: var(--neo-in), 0 0 0 3px color-mix(in srgb, var(--copper) 30%, transparent);
}

/* Segmented controls: a pressed track with a raised thumb. */
.mode, .tabs { background: var(--neo-face); border: 1px solid var(--neo-edge); box-shadow: var(--neo-in); border-radius: var(--clay-r-pill); }
.tabs { padding: 5px; }
.mode { padding: 4px; }
.mode-btn { border-radius: var(--clay-r-pill); }
.tab { border-radius: var(--clay-r-pill); }

/* ======================================================================
   5 · HERO — clay card, aurora pebbles, gradient headline
   ====================================================================== */

.dash-hero {
  position: relative;
  background: var(--clay-face);
  border: 0;
  border-radius: var(--clay-r-lg);
  box-shadow: var(--clay-hi), var(--clay-lo), var(--clay-drop);
}
.dash-hero::after { display: none; }
.dash-hero .searchbar, .dash-hero-ask .searchbar {
  background: var(--neo-face);
  border: 1px solid var(--neo-edge);
  box-shadow: var(--neo-in);
}
.dash-hero .depth-btn, .dash-hero .chip-btn, .dash-hero .chips .chip,
.dash-hero .example-prompts button {
  background: var(--clay-face);
  border: 1px solid color-mix(in srgb, var(--border-2) 62%, transparent);
  color: var(--text);
  box-shadow: inset 3px 3px 7px color-mix(in srgb, #ffffff 80%, transparent),
              inset -4px -4px 8px color-mix(in srgb, var(--forest) 11%, transparent);
}
[data-theme="dark"] .dash-hero .depth-btn, [data-theme="dark"] .dash-hero .chip-btn,
[data-theme="dark"] .dash-hero .chips .chip, [data-theme="dark"] .dash-hero .example-prompts button {
  box-shadow: inset 3px 3px 7px color-mix(in srgb, #ffffff 6%, transparent),
              inset -4px -4px 8px color-mix(in srgb, #000000 55%, transparent);
}
.dash-hero .depth-btn:hover, .dash-hero .chip-btn:hover, .dash-hero .chips .chip:hover,
.dash-hero .example-prompts button:hover { background: var(--clay-face); color: var(--copper-ink); border-color: var(--glass-line); }
.dash-hero .depth-btn[aria-pressed="true"], .dash-hero .depth-btn.is-active,
.dash-hero .chip-btn.is-active, .dash-hero .mode-btn.is-active {
  background: var(--clay-cta); border-color: transparent; color: #fff;
  box-shadow: inset 4px 4px 9px color-mix(in srgb, #000000 22%, transparent),
              inset -4px -4px 9px color-mix(in srgb, #ffffff 22%, transparent);
}
.dash-hero .mode { background: var(--neo-face); box-shadow: var(--neo-in); border: 1px solid var(--neo-edge); }
.dash-hero .trust-strip li::before { color: var(--copper-ink); }

/* Two small clay pebbles, low-contrast, tucked into the corners. */
.dash-hero::before {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  width: 132px; height: 132px; top: -46px; left: -58px;
  filter: blur(1.5px); opacity: .55;
  background: radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--sage) 96%, #fff), color-mix(in srgb, var(--sage) 68%, var(--forest)));
  box-shadow: inset 8px 8px 18px color-mix(in srgb, #ffffff 40%, transparent),
              inset -10px -10px 22px color-mix(in srgb, #000000 16%, transparent),
              0 26px 44px -30px color-mix(in srgb, var(--forest) 55%, transparent);
}
[data-theme="dark"] .dash-hero::before { opacity: .3; }

.dash-hero-badge {
  background: var(--clay-face);
  border: 1px solid color-mix(in srgb, var(--border-2) 50%, transparent);
  box-shadow: inset 3px 3px 7px color-mix(in srgb, #ffffff 80%, transparent),
              inset -4px -4px 8px color-mix(in srgb, var(--forest) 11%, transparent);
}
[data-theme="dark"] .dash-hero-badge { box-shadow: inset 3px 3px 7px color-mix(in srgb, #ffffff 6%, transparent), inset -4px -4px 8px color-mix(in srgb, #000000 55%, transparent); }

.dash-hero h1 .dash-grad {
  background: linear-gradient(120deg, var(--forest) 0%, var(--accent-2) 44%, var(--copper) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
[data-theme="dark"] .dash-hero h1 .dash-grad {
  background: linear-gradient(120deg, var(--sage) 0%, var(--accent-2) 46%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-clock {
  background: var(--clay-face);
  border: 1px solid color-mix(in srgb, var(--border-2) 45%, transparent);
  box-shadow: inset 3px 3px 7px color-mix(in srgb, #ffffff 80%, transparent),
              inset -4px -4px 8px color-mix(in srgb, var(--forest) 11%, transparent);
}
[data-theme="dark"] .hero-clock { box-shadow: inset 3px 3px 7px color-mix(in srgb, #ffffff 6%, transparent), inset -4px -4px 8px color-mix(in srgb, #000000 55%, transparent); }

.kicker {
  background: var(--clay-face);
  border: 1px solid color-mix(in srgb, var(--border-2) 50%, transparent);
  box-shadow: inset 3px 3px 7px color-mix(in srgb, #ffffff 78%, transparent),
              inset -4px -4px 8px color-mix(in srgb, var(--forest) 11%, transparent);
}
.kicker::before { background: var(--clay-cta); }

/* ======================================================================
   6 · BENTO — the dashboard and category bands
   ====================================================================== */

.dash { gap: 26px; }
@media (min-width: 900px) {
  .dash-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dash-actions > :first-child { grid-column: span 2; }
  .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cat-grid > :nth-child(4n + 1) { grid-column: span 2; }
}
@media (min-width: 1200px) {
  .dash-actions { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dash-actions > :nth-child(2) { grid-column: span 2; }
}

/* ======================================================================
   7 · SKELETON PAPER — the reading surfaces
   ====================================================================== */

.prose, .md, .page, .answer-card .core {
  background-image: var(--paper-tooth);
  background-size: 4px 4px;
}
.prose, .md { border-radius: var(--clay-r-sm); }
.page { background-color: var(--paper-bg); }
.panel .prose, .answer-card .core { background-image: none; }

/* ======================================================================
   8 · SECTION HEADS, ARTICLE BITS, FOOTER
   ====================================================================== */

.sec-head { border-bottom: 0; padding-bottom: 10px; position: relative; }
.sec-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--copper) 45%, transparent), transparent 78%);
}
.sec-head h2 { letter-spacing: -.02em; }

.article-title, .qa-question, .page h1 { letter-spacing: -.025em; }
.prose h2 { border-bottom: 0; position: relative; }
.prose h2::after {
  content: ""; display: block; width: 64px; height: 5px; border-radius: 5px; margin-top: 8px;
  background: linear-gradient(90deg, var(--forest), var(--copper));
}
.prose h3 { letter-spacing: -.01em; }
.prose .thumb, .gallery img, .topic-figure img, .art-body img, .aotd-media img {
  border-radius: var(--clay-r);
  box-shadow: var(--clay-hi), var(--clay-lo), var(--clay-drop);
}
.points-list > li {
  background: var(--clay-face); border: 0; border-radius: var(--clay-r-sm);
  box-shadow: inset 4px 4px 9px color-mix(in srgb, #ffffff 78%, transparent),
              inset -5px -5px 10px color-mix(in srgb, var(--forest) 11%, transparent),
              0 12px 22px -18px color-mix(in srgb, var(--forest) 45%, transparent);
}
[data-theme="dark"] .points-list > li {
  box-shadow: inset 4px 4px 9px color-mix(in srgb, #ffffff 5%, transparent),
              inset -5px -5px 10px color-mix(in srgb, #000000 55%, transparent),
              0 12px 22px -18px rgba(0, 0, 0, .8);
}
.points-list > li::before {
  background: var(--clay-face);
  box-shadow: inset 2px 2px 4px color-mix(in srgb, #ffffff 80%, transparent), inset -3px -3px 6px color-mix(in srgb, var(--forest) 14%, transparent);
  color: var(--copper-ink);
}
.factbox h3, .panel-head { color: var(--copper-ink); }

.site-foot {
  background: var(--clay-face);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-top: 0;
  box-shadow: inset 0 6px 14px color-mix(in srgb, var(--forest) 8%, transparent);
}
.foot-col strong { color: var(--copper-ink); }

/* ======================================================================
   9 · STATIC INTRO BLOCK (the crawlable home page)
   ====================================================================== */

.site-intro { padding: 46px 0 10px; }
.site-intro .kicker { margin-bottom: 20px; }
.site-intro h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 6.4vw, 60px);
  line-height: 1.06; letter-spacing: -.025em; margin: 0 0 16px;
}
.site-intro h1 .grad {
  background: linear-gradient(120deg, var(--forest) 0%, var(--accent-2) 44%, var(--copper) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
[data-theme="dark"] .site-intro h1 .grad {
  background: linear-gradient(120deg, var(--sage), var(--accent-2) 46%, var(--accent));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.site-intro .lead { font-size: clamp(16px, 2vw, 19px); color: var(--muted); max-width: 62ch; margin: 0 0 26px; }
.site-intro .intro-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 0 0 28px; }
@media (min-width: 620px) { .site-intro .intro-grid { grid-template-columns: 1fr 1fr; } }
.site-intro .intro-card {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 20px 22px; border-radius: var(--clay-r);
  background: var(--clay-face); border: 0;
  box-shadow: var(--clay-hi), var(--clay-lo), var(--clay-drop);
}
.site-intro .intro-card h2 { font-size: 16px; margin: 0 0 4px; font-family: var(--font-body); font-weight: 650; }
.site-intro .intro-card p { margin: 0; color: var(--muted); font-size: 14px; }
.site-intro .intro-card .ic { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; }
.site-intro .intro-card .ic svg { width: 18px; height: 18px; fill: currentColor; }
.site-intro .intro-links { display: flex; flex-wrap: wrap; gap: 12px; }
.site-intro .intro-links a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--clay-r-pill); font-weight: 550; font-size: 14.5px;
  color: var(--text); background: var(--clay-face);
  border: 1px solid color-mix(in srgb, var(--border-2) 55%, transparent);
  box-shadow: var(--clay-hi), var(--clay-lo), var(--clay-drop); text-decoration: none;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.site-intro .intro-links a:hover { transform: translateY(-2px); text-decoration: none; }
.site-intro .intro-links a:active { transform: translateY(1px) scale(.97); box-shadow: var(--clay-press-hi), var(--clay-press-lo); }
.site-intro .intro-links a::after { content: "→"; opacity: .6; }

/* ======================================================================
   10 · MISC
   ====================================================================== */

.evidence, .scope-note {
  box-shadow: inset 9px 0 0 -5px var(--copper), var(--clay-hi), var(--clay-lo), var(--clay-drop);
}
.evidence.is-ok { box-shadow: inset 9px 0 0 -5px var(--ok), var(--clay-hi), var(--clay-lo), var(--clay-drop); }
.evidence.is-warn { box-shadow: inset 9px 0 0 -5px var(--warn), var(--clay-hi), var(--clay-lo), var(--clay-drop); }

.saved-main img, .saved-ph { border-radius: 14px; }
.saved-ph { background: var(--neo-face); box-shadow: var(--neo-in); }
.src-mark {
  background: var(--clay-face); border-radius: 10px;
  box-shadow: inset 2px 2px 5px color-mix(in srgb, #ffffff 80%, transparent), inset -3px -3px 6px color-mix(in srgb, var(--forest) 12%, transparent);
}
.sk-line { background: color-mix(in srgb, var(--border-2) 60%, transparent); }
.read-progress span { background: linear-gradient(90deg, var(--forest), var(--accent-2), var(--copper)); }
[data-theme="dark"] .read-progress span { background: linear-gradient(90deg, var(--sage), var(--accent-2), var(--accent)); }

/* The contents button is hidden by the app on views that have no contents
   rail; make sure `hidden` wins over the header's flex rules. */
#tocBtn[hidden] { display: none !important; }

/* ======================================================================
   11 · THE FLOOR — motion, transparency, contrast, comfort, print
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .card:hover, .q-card:hover, .cat-card:hover, .dash-action:hover,
  .topic-card:hover, .howstep:hover, .btn:hover, .chip:hover, .pill:hover { transform: none; }
  .btn:active, .chip:active, .pill:active { transform: none; }
  .btn-primary:hover { background-position: 0 0, 130% 0; }
}

/* Readers who ask the system to reduce transparency get solid chrome. */
@media (prefers-reduced-transparency: reduce) {
  .topbar-inner, .app-side, .bottom-nav, .suggest, .lang-menu, .toast {
    background: var(--surface) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Increased contrast: firm up every control edge and every hairline. */
@media (prefers-contrast: more) {
  .btn, .chip, .pill, .depth-btn, .chip-btn, .badge, .example-prompts button,
  .searchbar, .composer .searchbar, .select, .mode, .tabs {
    border-color: var(--text) !important;
  }
  .topbar-inner, .app-side, .bottom-nav { border-color: var(--text) !important; }
}

/* The in-app reading-comfort switch (data-comfort="opaque"): flatten the
   translucency and the clay gradient, keep the shapes. */
[data-comfort="opaque"] .topbar-inner,
[data-comfort="opaque"] .app-side,
[data-comfort="opaque"] .bottom-nav,
[data-comfort="opaque"] .suggest,
[data-comfort="opaque"] .lang-menu,
[data-comfort="opaque"] .toast,
[data-comfort="opaque"] .composer .searchbar {
  background: var(--surface) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid var(--border-2) !important;
  box-shadow: none !important;
}
[data-comfort="opaque"] body::before { display: none !important; }

@media print {
  .topbar-inner, .app-side, .bottom-nav, .site-intro { box-shadow: none !important; }
  .panel, .page, .answer-card, .card { background: #fff !important; box-shadow: none !important; }
  .prose, .md, .page { background-image: none !important; }
}

/* ======================================================================
   12 · THE ARTICLE'S LEAD PICTURE
   ======================================================================
   Sits at the top of the reading panel, where a reader looks for it. */

.lead-figure { max-width: 620px; margin: 4px auto 18px; }
.lead-figure img {
  margin: 0 auto; max-height: 360px; border: 0;
  background: color-mix(in srgb, var(--surface-2) 92%, var(--sand));
  box-shadow: var(--clay-hi), var(--clay-lo), var(--clay-drop);
}
.lead-figure figcaption { text-align: center; color: var(--faint); }

/* ======================================================================
   13 · LAYOUT REPAIR
   ======================================================================
   The reading view had drifted into a full-bleed panel with a narrow
   column lost inside it, blocks with no space between them, and a header
   that wrapped to 142px on a phone. This section puts the page back into
   one column with a real rhythm, and keeps pictures inside it. */

/* --- one centred reading column, for the header and the body alike --- */
[data-view="article"] .wrap {
  max-width: 1160px;
  margin-inline: auto;
  padding: 18px 20px 72px;
}
[data-view="article"] .article-head,
[data-view="article"] .article-actions,
[data-view="article"] .langbar,
[data-view="article"] .tabs { max-width: 100%; margin-inline: 0; }

.panel.panel-wide {
  max-width: 100%;
  margin-inline: auto;
  padding: 30px 36px 36px;
}
/* Every block in the article shares one measure, so the headline, the
   facts, the pictures and the prose all line up. */
.panel.panel-wide > * { max-width: 74ch; margin-inline: auto; }

/* --- vertical rhythm: nothing sticks to anything --- */
.lead-figure { margin: 0 auto 28px; }
.panel-wide .factbox { margin: 0 auto 30px; }
.panel-wide .art-section { margin: 0 auto 30px; }
.panel-wide .art-section:last-of-type { margin-bottom: 34px; }
.panel-wide .art-section-head { margin-bottom: 14px; }
.panel-wide .art-body > * + * { margin-top: 12px; }
.panel-wide .art-body > .line-list { margin-top: 0; }

/* --- pictures: contained, centred, never stretched or cropped --- */
.prose img:not([width]), .art-body img { aspect-ratio: auto !important; }
.art-body img,
.art-body .thumb img,
.art-body figure img {
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
  border-radius: var(--clay-r-sm);
}
.art-body figure,
.art-body .thumb,
.art-body .thumbinner {
  max-width: 100% !important;
  margin: 20px auto !important;
  float: none !important;
  width: auto !important;
}
.art-body figcaption,
.art-body .thumbcaption {
  text-align: center;
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.5;
  margin-top: 6px;
}
.lead-figure img { max-width: 100%; max-height: 340px; object-fit: contain; }

/* Tables scroll inside the column instead of pushing it wide. */
.panel-wide .table-scroll { max-width: 100%; }

/* --- the header stops wrapping on a phone --- */
@media (max-width: 860px) {
  /* The four text links live in the bottom dock on small screens; keeping
     them in the header as well is what pushed it to three rows. */
  .topnav a { display: none; }
}
@media (max-width: 700px) {
  .topbar { padding-top: 8px; }
  .topbar-inner {
    padding: 6px 10px;
    gap: 6px;
    flex-wrap: nowrap;
    border-radius: 999px;
  }
  .topnav { flex-wrap: nowrap; gap: 3px; margin-left: auto; }
  .btn-icon { width: 32px; height: 32px; min-height: 32px; padding: 6px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-text strong { font-size: 15.5px; }
  .nav-sep { display: none; }

  [data-view="article"] .wrap { padding: 12px 12px 64px; }
  .panel.panel-wide { padding: 18px 16px 22px; }
  .panel.panel-wide > * { max-width: 100%; }
  .lead-figure { margin-bottom: 20px; }
  .panel-wide .factbox { margin-bottom: 22px; }
  .panel-wide .art-section { margin-bottom: 22px; }
  .lead-figure img { max-height: 260px; }
}
@media (max-width: 400px) {
  /* (the two low-value header buttons this block used to hide are gone) */
}

/* ======================================================================
   14 · HEADER, FACT NOTE AND LEAD PICTURE — the last of the collisions
   ======================================================================
   The floating pill left the page visible in the gutters either side of
   it, so text slid out from behind its edges while scrolling. The header
   is a full-width glass bar again: same material, no gaps for content to
   leak through. */

.topbar {
  padding-top: 0;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid color-mix(in srgb, var(--border-2) 58%, transparent);
  box-shadow: 0 10px 30px -24px color-mix(in srgb, var(--forest) 60%, transparent);
}
.topbar-inner {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 10px 16px;
}
[data-theme="dark"] .topbar { background: color-mix(in srgb, var(--bg) 78%, transparent); }

/* Anchor jumps land below the sticky header, not under it. */
html { scroll-padding-top: 84px; }

/* The fact box note sat in the rounded corner and lost its first letters. */
.factbox .src-credit { margin: 0; padding: 10px 15px 14px; }

/* A lead picture is a picture, not a billboard. */
.lead-figure { max-width: min(100%, 560px); }
.lead-figure img { max-height: 300px; }

/* ======================================================================
   15 · THE ACTION AND CATEGORY BANDS
   ======================================================================
   The earlier bento spans assumed a column count that the real content
   never fills, so five action cards left the fifth one stranded alone on
   a second row with a hole beside it. These bands simply flow: every
   tile the same height, wrapping evenly at any width. */

.dash-actions { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.dash-actions > * { grid-column: auto !important; }
.dash-actions .dash-action { min-height: 108px; }

.cat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.cat-grid > * { grid-column: auto !important; }

@media (min-width: 1200px) {
  .dash-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* The trending spark line was drawn past the card edge. */
.trend-row { overflow: hidden; }
.trend-spark { flex: 0 0 auto; width: 46px; max-width: 46px; overflow: visible; }

/* ======================================================================
   17 · AURA — the new look
   ======================================================================
   The reference is a dark glass workspace with colour blooming behind it:
   deep charcoal, violet and pink and cyan light, panels that float, and
   one loud gradient on the thing you are meant to press. This layer
   repaints the whole site in that language — the tokens first, then the
   surfaces, the controls and the chrome. Light mode is the same idea in
   daylight: soft paper, the same colour, less weight. */

:root :root {
  /* Colour comes from styles.css. These three only exist so the gradient
     washes below have somewhere to point; they are the site's own hues. */
  --aura-1: var(--copper);
  --aura-2: var(--forest);
  --aura-3: var(--sage);
}

[data-theme="dark"] {

  /* glass, recut for the dark room */
  --glass-bg: color-mix(in srgb, #ffffff 7%, transparent);
  --glass-bg-strong: color-mix(in srgb, #0d1018 82%, transparent);
  --glass-line: color-mix(in srgb, #ffffff 14%, transparent);
  --glass-hi: inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent);
  --glass-drop: 0 30px 60px -30px rgba(0, 0, 0, .85), 0 8px 22px -14px rgba(0, 0, 0, .7);

  --clay-face: linear-gradient(160deg, color-mix(in srgb, #ffffff 6%, transparent), color-mix(in srgb, #ffffff 2%, transparent));
  --clay-hi: inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent);
  --clay-lo: inset 0 -1px 0 color-mix(in srgb, #000000 40%, transparent);
  --clay-drop: 0 26px 50px -28px rgba(0, 0, 0, .85);
  /* the same three, in their dark-theme values */
  --aura-1: var(--accent);
  --aura-2: var(--accent-2);
  --aura-3: var(--sage);
}

/* The colour field: violet top-left, pink right, cyan bottom. */
body::before {
  background:
    radial-gradient(46vw 38vw at 6% -8%, color-mix(in srgb, var(--aura-2) 62%, transparent), transparent 64%),
    radial-gradient(40vw 34vw at 98% 4%, color-mix(in srgb, var(--aura-1) 52%, transparent), transparent 62%),
    radial-gradient(54vw 42vw at 74% 104%, color-mix(in srgb, var(--aura-3) 42%, transparent), transparent 66%),
    radial-gradient(40vw 30vw at 16% 92%, color-mix(in srgb, var(--aura-2) 34%, transparent), transparent 66%);
  filter: blur(18px) saturate(1.2);
}
[data-theme="dark"] body::before { opacity: .78; }

/* Surfaces: one glass sheet for every panel and card. */
.panel, .answer-card, .sec:has(> .sec-head), .source-card, .page,
.src-group, .topic-block, .factbox, .toc, .toc-jump, .rail-card,
.howstep, .ask-note, .method-note, .langbar, .aotd, .evidence,
.scope-note, .saved-item, .state, .error-box, .md-raw, .rail-actions,
.card, .q-card, .cat-card, .dash-action, .topic-card, .dash-hero {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-hi), var(--glass-drop);
}
.panel::before, .answer-card::before, .sec:has(> .sec-head)::before,
.src-group::before, .topic-block::before, .page::before {
  background: linear-gradient(90deg, var(--aura-2), var(--aura-1) 52%, var(--aura-3));
  opacity: .95;
}
.card:hover, .q-card:hover, .cat-card:hover, .dash-action:hover, .topic-card:hover {
  border-color: color-mix(in srgb, var(--aura-1) 55%, transparent);
  box-shadow: var(--glass-hi), 0 34px 60px -28px color-mix(in srgb, var(--aura-2) 60%, transparent);
}

/* Controls: the loud gradient belongs to the primary action only. */
.btn {
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-hi);
}
.btn-primary, .btn-primary:hover, [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-primary:hover {
  background-image: linear-gradient(135deg, var(--aura-1), var(--aura-2) 78%),
    linear-gradient(115deg, transparent 38%, color-mix(in srgb, #ffffff 30%, transparent) 50%, transparent 62%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 22px 40px -22px color-mix(in srgb, var(--aura-1) 80%, transparent);
}
.chip, .pill, .depth-btn, .chip-btn, .example-prompts button, .badge, .saved-del, .btn-sm {
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-hi);
}
.depth-btn.is-active, .chip-btn.is-active, .chip.is-active,
.mode-btn.is-active, .tab[aria-selected="true"], .tab.is-active, .toc a.active,
.dash-hero .depth-btn[aria-pressed="true"], .dash-hero .chip-btn.is-active {
  background: linear-gradient(135deg, var(--aura-1), var(--aura-2));
  color: #fff; border-color: transparent;
  box-shadow: 0 14px 26px -16px color-mix(in srgb, var(--aura-1) 80%, transparent);
}

/* Fields are wells, not slabs. */
.searchbar, .composer .searchbar, .select, .langbar select,
form.panel .searchbar, form.panel .select, .feedback .fb-note textarea,
.langbar-inner input#langSelect, .mode, .tabs {
  background: color-mix(in srgb, #000000 18%, transparent);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent);
}
[data-theme="light"] .searchbar, [data-theme="light"] .composer .searchbar,
[data-theme="light"] .select, [data-theme="light"] .mode, [data-theme="light"] .tabs {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.searchbar:focus-within, .composer .searchbar:focus-within,
.select:focus, form.panel .searchbar:focus-within {
  border-color: color-mix(in srgb, var(--aura-2) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aura-2) 26%, transparent);
}

/* Chrome. */
.topbar {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  border-bottom: 1px solid var(--glass-line);
  box-shadow: 0 14px 40px -30px rgba(0, 0, 0, .9);
}
.app-side { background: var(--glass-bg); border: 1px solid var(--glass-line); box-shadow: var(--glass-hi), var(--glass-drop); }
.side-link[aria-current="page"], .topnav a[aria-current="page"] {
  background: linear-gradient(135deg, color-mix(in srgb, var(--aura-1) 26%, transparent), color-mix(in srgb, var(--aura-2) 30%, transparent));
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 14%, transparent);
}
.bottom-nav, .bottom-nav.glass {
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  border: 1px solid var(--glass-line);
  box-shadow: 0 -10px 40px -24px rgba(0,0,0,.9);
}
.site-foot { background: color-mix(in srgb, var(--bg) 70%, transparent); border-top: 1px solid var(--glass-line); box-shadow: none; }

/* Headline accent. */
.dash-hero h1 .dash-grad, .site-intro h1 .grad,
[data-theme="dark"] .dash-hero h1 .dash-grad, [data-theme="dark"] .site-intro h1 .grad {
  background: linear-gradient(120deg, var(--aura-3), var(--aura-2) 45%, var(--aura-1));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.dash-hero::before { background: radial-gradient(circle at 32% 28%, var(--aura-2), color-mix(in srgb, var(--aura-2) 40%, #000)); }
.hero-clock, .kicker, .dash-hero-badge { background: var(--glass-bg); border: 1px solid var(--glass-line); box-shadow: var(--glass-hi); }

/* Icon tiles: the glyph inherited the card's text colour, which left it
   nearly invisible on the clay surface. Give it its own contrast. */
.cat-card .ic, .dash-action .ic, .topic-card .ic, .feature .ic, .site-intro .intro-card .ic {
  color: var(--copper-ink);
}
[data-theme="dark"] .cat-card .ic, [data-theme="dark"] .dash-action .ic,
[data-theme="dark"] .topic-card .ic, [data-theme="dark"] .feature .ic,
[data-theme="dark"] .site-intro .intro-card .ic {
  color: var(--accent);
}

/* Brand: one word, one mark. The old two-line lockup read as a heading with
   a subtitle, which made the header heavy on a phone. */
.brand-text { display: none; }
.brand-word {
  font-family: var(--font-head, 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Tiro Devanagari Hindi', serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text, #242824);
  line-height: 1;
}
.brand-mark svg { width: 32px; height: 32px; display: block; }
.brand { gap: 10px; }

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── the Translate tab ──────────────────────────────────────────────────
   The tab opens on the languages themselves, in their own scripts, with a
   filter for the reader who knows what they are looking for. Choosing one
   replaces the list with the translated article — one press, no second step.
   The translated copy is a clone of the reading layout, so it inherits every
   rule below; only its text differs. */
.tr-panel { margin: 4px 0 26px; }

.tr-choose {
  padding: 20px 20px 18px;
  border: 1px solid var(--border-2); border-radius: var(--radius-lg);
  background: var(--surface);
}
.tr-title {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-size: clamp(19px, 2.3vw, 23px);
  line-height: 1.25;
}
.tr-sub { margin: 0 0 16px; max-width: 68ch; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

.tr-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.tr-filter {
  flex: 1 1 240px; min-width: 0; min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border-2); border-radius: 999px;
  background: var(--surface-2, var(--surface)); color: var(--text);
  font: inherit; font-size: 13.5px;
}
.tr-filter:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.tr-edition { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.tr-edition > span { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

.tr-group {
  margin: 16px 0 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--faint);
}
.tr-group:first-child { margin-top: 0; }
.tr-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.tr-lang {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 10px 12px;
  border: 1px solid var(--border-2); border-radius: var(--radius-xs);
  background: var(--surface-2, var(--surface)); color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease, transform .14s ease;
}
.tr-lang:hover { border-color: var(--accent); transform: translateY(-1px); }
.tr-lang[hidden] { display: none; }
.tr-lang b { font-size: 15px; font-weight: 600; line-height: 1.3; }
.tr-lang span { font-size: 11.5px; color: var(--muted); }
.tr-lang .tr-tier { font-size: 10px; font-style: normal; color: var(--faint); }
.tr-lang.is-suggested { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-2)); }
.tr-empty { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.tr-empty[hidden] { display: none; }

/* The reading state: what is on screen, and the way out of it. */
.tr-readbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--border-2); border-radius: var(--radius);
  background: var(--surface);
}
.tr-current { margin: 0; font-size: 14px; font-weight: 600; }
.tr-grow { flex: 1 1 auto; }

.tr-select {
  flex: 0 1 auto; min-width: 0; max-width: 320px;
  min-height: 36px; padding: 6px 10px;
  border: 1px solid var(--border-2); border-radius: 10px;
  background: var(--surface-2, var(--surface)); color: var(--text);
  font: inherit; font-size: 13px;
}
.tr-select:disabled { opacity: .6; }
.tr-status { margin: 10px 2px 0; font-size: 12.5px; color: var(--muted); }
.tr-track {
  height: 3px; margin: 10px 2px 0; overflow: hidden;
  border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent);
}
.tr-track span {
  display: block; height: 100%; width: 0;
  border-radius: inherit; background: var(--accent);
  transition: width .25s var(--ease-out, ease);
}
.tr-track[hidden] { display: none; }
.tr-body:not(:empty) { margin-top: 18px; }
.tr-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0 0 18px; padding: 12px 14px;
  border: 1px solid var(--border-2); border-left: 3px solid var(--accent);
  border-radius: var(--radius); background: var(--surface);
}
.tr-note p { margin: 0; flex: 1 1 320px; font-size: 13px; color: var(--text); }
.tr-note .tr-partial { flex-basis: 100%; color: var(--muted); font-size: 12.5px; }
.tr-note .tr-hint { flex-basis: 100%; color: var(--muted); font-size: 12px; }

/* Said before anything leaves the browser, so it is readable rather than fine
   print, but quiet enough not to compete with the article. */
.tr-disclosure {
  margin: 14px 2px 0; padding: 9px 11px;
  border: 1px solid var(--border-2); border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  font-size: 12px; line-height: 1.5; color: var(--muted);
}

/* A passage the provider could not translate keeps its original words; this
   marks it so a reader can see which parts are still in the source language
   instead of assuming the whole page was translated. */
[data-untranslated="true"] {
  border-left: 2px solid color-mix(in srgb, var(--accent-2, var(--accent)) 70%, transparent);
  padding-left: 10px;
}
.tr-body[dir="rtl"] { text-align: right; }
@media (max-width: 640px) {
  .tr-choose { padding: 16px 14px; }
  .tr-group-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .tr-edition { flex-basis: 100%; }
  .tr-select { max-width: none; flex: 1 1 auto; }
}

/* Fuller translation offer */
.translate-offer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 0 0 20px; padding: 14px 16px;
  border: 1px solid var(--border-2); border-left: 3px solid var(--accent);
  border-radius: var(--radius); background: var(--surface);
}
.translate-offer p { margin: 0; flex: 1 1 320px; font-size: 14px; color: var(--text); }
.translate-offer .translate-status { font-size: 12px; color: var(--muted); }
.translated-article {
  margin: 26px 0; padding: 22px;
  border: 1px solid var(--border-2); border-radius: var(--radius-lg);
  background: var(--surface);
}
.translated-article h2 { margin: 0 0 6px; font-size: 20px; }
.translated-article p { margin: 0 0 14px; line-height: 1.7; color: var(--text); }
@media (max-width: 640px) {
  .translate-offer { padding: 12px; }
  .translated-article { padding: 16px; }
}

/* ======================================================================
   · THE QUESTION BOX, SIMPLIFIED
   ----------------------------------------------------------------------
   Two fixes from reading the page as a reader rather than as a stylesheet.

   1. The Search / Ask switch. It used to be a neumorphic pill with a hairline
      border and an inset shadow, which on a dark screen reads as a thin line
      drawn through the question box — the one thing in the whole composer
      that looked like a mistake. It is now a flat segmented control, the way
      Google's own AI mode does it: no border, no inset, a quiet track and a
      solid fill under the active word. The state is legible at a glance and
      nothing is drawn that is not information.

   2. The left column. `.app-side` was glass — a 52%-opaque surface with an
      18px blur behind it. Over a dark page that produced a smeared grey
      rectangle whose text sat on top of blurred text, which is exactly the
      "dark and foggy" the reader described. Navigation is not decoration, so
      it is now opaque: the sheet is the surface, and the blur stays for the
      floating things (menus, the header pill) where it belongs.
   ====================================================================== */

.mode,
.tabs {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: 0;
  box-shadow: none;
  padding: 3px;
  gap: 2px;
  border-radius: 999px;
}
[data-theme="dark"] .mode,
[data-theme="dark"] .tabs { background: color-mix(in srgb, #ffffff 8%, transparent); }

.mode-btn,
.tab {
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 550;
  transition: background-color .16s var(--ease-out), color .16s var(--ease-out);
}
.mode-btn:hover,
.tab:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }

.mode-btn.is-active,
.tab.is-active,
.tab[aria-selected="true"] {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 14%, transparent);
}
[data-theme="dark"] .mode-btn.is-active,
[data-theme="dark"] .tab.is-active,
[data-theme="dark"] .tab[aria-selected="true"] {
  background: color-mix(in srgb, #ffffff 14%, transparent);
  color: #fff;
  box-shadow: none;
}
/* The hero on the home page carries its own tint; keep the same flat rule. */
.dash-hero .mode { background: color-mix(in srgb, var(--text) 6%, transparent); border: 0; box-shadow: none; }
.dash-hero .mode-btn.is-active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 14%, transparent); }
[data-theme="dark"] .dash-hero .mode { background: color-mix(in srgb, #ffffff 8%, transparent); }
[data-theme="dark"] .dash-hero .mode-btn.is-active { background: color-mix(in srgb, #ffffff 14%, transparent); color: #fff; box-shadow: none; }

/* Navigation is opaque: text over blurred text is not a design. */
.app-side,
[data-theme="dark"] .app-side,
[data-theme="light"] .app-side {
  background: var(--surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--border-2);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent);
}
[data-theme="dark"] .app-side { border-color: var(--border-2); }
.app-side .side-link:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.app-side .side-link[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: none;
}

/* ======================================================================
   · THE ARTICLE PAGE, SQUARED UP
   ----------------------------------------------------------------------
   Three things in the reader looked loose rather than designed:

   1. The tab strip. It was a centred flex row inside a padded column, so
      when the two labels were wider than the space the row overflowed and
      the first pill was cut off at the left edge — "Full article" appeared
      to start outside the page. It now starts where the text starts, wraps
      instead of overflowing, and never clips.
   2. The language bar. Its pills ran past the right edge of the card. The
      inner row wraps now, and the bar keeps its own padding.
   3. The action row. Five buttons of different widths wrapped into two
      ragged lines. They share one height and one gap, and the row wraps as
      a block rather than as a pile.
   ====================================================================== */

[data-view="article"] .tabs {
  justify-content: flex-start;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  overflow: visible;
  margin-bottom: 18px;
}
.tabs { padding: 4px; }
.tab {
  min-height: 34px;
  padding: 0 16px;
  font-size: 13px;
  white-space: nowrap;
}

.langbar {
  overflow: visible;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.langbar-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.langbar-inner > span:first-child {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.langbar .pill-row { display: flex; flex-wrap: wrap; gap: 6px; }
.langbar .pill { white-space: nowrap; }

.art-actions {
  gap: 8px;
  align-items: stretch;
  margin-bottom: 14px;
}
.art-actions > .btn,
.art-actions > .md-disclosure > .btn {
  height: 38px;
  min-height: 38px;
  padding: 0 13px;
  font-size: 13px;
  white-space: nowrap;
}

/* The facts table is read, not scanned: give the label column a fixed share
   and let the value column breathe, instead of two ragged columns. */
.factbox dl { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr); }
.factbox .row { display: contents; }
/* Two factbox shapes exist in the pages: rows wrapped in .row, and bare
   dt/dd pairs. Both are laid out the same way here. */
.factbox dl > dt,
.factbox .row dt {
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--border-2);
  font-size: 12.5px;
  color: var(--muted);
  align-self: stretch;
}
.factbox dl > dd,
.factbox .row dd {
  margin: 0;
  padding: 9px 0 9px 12px;
  border-bottom: 1px solid var(--border-2);
  border-left: 1px solid var(--border-2);
  font-size: 13px;
  line-height: 1.55;
}
.factbox dl > .row:last-child dt,
.factbox dl > .row:last-child dd,
.factbox dl > dt:last-of-type,
.factbox dl > dd:last-of-type { border-bottom: 0; }

/* A loading state is a sentence with a wheel, not a card the height of a
   paragraph with nothing in it. */
.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 34px 20px;
  min-height: 0;
}
.state .spinner { margin: 0; }
.state p { margin: 0; font-size: 13.5px; }
@media (max-width: 640px) {
  .factbox dl { grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); }
  .factbox .row dt, .factbox .row dd { font-size: 12.5px; padding-top: 8px; padding-bottom: 8px; }
  .art-actions > .btn span { display: inline; }
}

/* ======================================================================
   Search results — a result is a row, not a thin card
   ======================================================================
   The results used to be the same four-column card grid the dashboard uses
   for browsing. In a grid each card is only a thumb wide, so the title broke
   over three lines and the snippet was cut to a hundred characters: eighteen
   matches read as eighteen thin strips. A row gives the title a full line,
   the snippet a readable measure and the picture a fixed square, so the list
   scans top to bottom the way a search page should. */

.sresults { max-width: 980px; }
[data-view="search"] .sresults { max-width: 980px; }

.sresults .sbar { margin: 0 0 20px; }
.sresults .composer { margin: 0; }
/* A taller field on the results page: the query is long here, and a one-line
   strip of text in the middle of the page was the complaint. */
.sresults .searchbar:has(> .composer-tools) > textarea { min-height: 56px; padding: 10px 4px; font-size: 16px; }

.sres-head { margin: 0 0 14px; }
.sres-head h1 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.sres-sub { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.sres-sub .mono { font-family: var(--mono); font-size: 12.5px; }

.sres-count {
  margin: 18px 0 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--faint);
}

.sres-list { display: flex; flex-direction: column; gap: 2px; }
.sres-row {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 16px 16px 16px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: inherit;
  transition: background-color .14s ease, border-color .14s ease;
}
.sres-row:hover, .sres-row:focus-visible {
  background: var(--surface);
  border-color: var(--border);
  text-decoration: none;
}
.sres-row.is-skeleton { pointer-events: none; }

.sres-thumb {
  flex: 0 0 auto;
  width: 84px; height: 84px;
  display: grid; place-items: center;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-sm);
}
.sres-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sres-thumb.placeholder svg { width: 100%; height: 100%; display: block; opacity: .55; }

.sres-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.sres-src {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sres-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }
.sres-title {
  font-family: var(--font-head);
  font-size: 18.5px; font-weight: 600; line-height: 1.32;
  color: var(--text);
  overflow-wrap: anywhere;
}
.sres-row:hover .sres-title { color: var(--accent); }
.sres-snippet {
  font-size: 14px; line-height: 1.62; color: var(--muted);
  max-width: 74ch;
}

/* The one offer above the list: the same query, answered. */
.sres-ask {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px;
  margin: 0 0 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: inherit;
  transition: border-color .14s ease, background-color .14s ease;
}
.sres-ask:hover { border-color: var(--accent); text-decoration: none; }
.sres-ask-ic {
  flex: 0 0 auto; width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--copper-ink);
}
.sres-ask-ic svg { width: 19px; height: 19px; }
.sres-ask-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sres-ask-text strong { font-size: 14.5px; }
.sres-ask-text span { font-size: 13px; color: var(--muted); line-height: 1.5; }
.sres-ask-go { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--copper-ink); white-space: nowrap; }

@media (max-width: 640px) {
  .sres-row { gap: 12px; padding: 12px 6px; }
  .sres-thumb { width: 62px; height: 62px; border-radius: 11px; }
  .sres-title { font-size: 16px; }
  .sres-snippet { font-size: 13px; }
  .sres-ask { flex-wrap: wrap; gap: 10px; }
  .sres-ask-go { width: 100%; }
}

/* The search skeleton uses a shorter first line than the card grid does. */
.sres-row .sk-40 { width: 40%; }

/* ======================================================================
   20 · THE COMPOSER, SIZED LIKE A SEARCH BOX AND NOT A FORM
   ======================================================================
   The composer had grown into a four-row panel: an uppercase label, the
   field, a control row, then a line of help text. On the home page and on
   the results page that read as a card bigger than the content under it,
   and the text a reader typed sat in a thin strip in the middle of it —
   nothing like the one-line box an AI search page puts in front of you.

   So: one rounded box, the field is the box, and the controls sit inside
   its lower edge at their natural size. The label stays in the document
   for screen readers (it is the field's only visible name) but it no
   longer takes a row of its own. */

.searchbar:has(> .composer-tools) {
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 8px 10px 8px 14px;
  border-radius: 26px;
}

/* The label is still there for assistive technology; it is not a heading
   a sighted reader needs to see above a search box. */
.searchbar:has(> .composer-tools) > .composer-label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.searchbar:has(> .composer-tools) > textarea,
.sresults .searchbar:has(> .composer-tools) > textarea {
  min-height: 46px;
  padding: 11px 2px 6px;
  font-size: 16.5px;
  line-height: 1.5;
  border: 0;
  background: transparent;
  box-shadow: none;
  resize: none;
}
.searchbar:has(> .composer-tools) > textarea:focus { outline: none; }

/* The controls sit on the box's own baseline, small and out of the way. */
.searchbar:has(> .composer-tools) > .composer-tools {
  gap: 6px;
  padding: 0 0 2px;
  align-items: center;
}
.searchbar:has(> .composer-tools) > .composer-tools > .btn-icon {
  width: 34px; height: 34px; min-height: 34px; padding: 7px;
}
.searchbar:has(> .composer-tools) > .composer-tools > .mode {
  margin-left: 0;
  padding: 2px;
}
.searchbar:has(> .composer-tools) > .composer-tools > .mode .mode-btn {
  min-height: 30px;
  padding: 0 12px;
  font-size: 13px;
}
.searchbar:has(> .composer-tools) > .composer-tools > button[type="submit"] {
  margin-left: auto;
  min-height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
}

/* The help line was a third row of prose under a search box. It stays
   available to a screen reader through aria-describedby, and is shown
   only when the field is focused, where it explains the two modes. */
.searchbar:has(> .composer-tools) > .mode-help {
  grid-column: 1 / -1;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 12px;
  transition: max-height .18s ease, opacity .18s ease;
}
.searchbar:has(> .composer-tools):focus-within > .mode-help {
  max-height: 40px;
  opacity: 1;
  padding: 2px 2px 4px;
}

@media (max-width: 700px) {
  .searchbar:has(> .composer-tools) { padding: 6px 8px 6px 12px; border-radius: 22px; }
  .searchbar:has(> .composer-tools) > textarea { min-height: 42px; font-size: 16px; padding: 10px 2px 4px; }
  .searchbar:has(> .composer-tools) > .composer-tools > .mode .mode-btn { padding: 0 10px; }
  .searchbar:has(> .composer-tools) > .composer-tools > button[type="submit"] { padding: 0 14px; }
}

/* The "ask this instead" card was a second panel above the results; it is
   now one compact line that does not compete with the list. */
.sres-ask {
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
}
.sres-ask-ic { width: 30px; height: 30px; border-radius: 9px; }
.sres-ask-ic svg { width: 16px; height: 16px; }
.sres-ask-text { flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sres-ask-text strong { font-size: 14px; }
.sres-ask-text span { font-size: 12.5px; }

/* Nothing in the reading view may push the page sideways: long chemical
   names, URLs and wide tables stay inside the column. */
[data-view="article"] .art-body,
[data-view="article"] .panel-wide { overflow-wrap: anywhere; }
[data-view="article"] .art-body table { max-width: 100%; }
[data-view="article"] .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 700px) {
  [data-view="article"] .wrap { padding: 10px 12px 72px; max-width: 100%; }
  .panel.panel-wide { padding: 16px 14px 22px; }
  .panel.panel-wide > * { max-width: 100%; }
  .art-body > ul > li,
  .topic-block .line-list > li,
  .point-block .line-list > li { max-width: 100%; }
}

/* A last guard against a sideways scrollbar anywhere in the shell. */
html, body { max-width: 100%; overflow-x: hidden; }
.app-main, #main { min-width: 0; max-width: 100%; }

/* ======================================================================
   22 · THE HOME BANDS — five tiles on one row, and the depth pair together
   ====================================================================== */

/* The action band used `auto-fit` with a 180px minimum, which fits four
   tiles in a 760px window and leaves the fifth — Sources — stranded alone on
   a second row with a hole beside it. Five tiles are five tiles: they get
   five columns as soon as there is room for five, two on a phone, and the
   odd one out takes the whole row so it reads as a deliberate last card
   rather than a leftover. */
.dash-actions {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.dash-actions .dash-action {
  min-height: 0;
  padding: 16px 15px;
}
.dash-actions .dash-action h2,
.dash-actions .dash-action h3 { font-size: 14.5px; }
.dash-actions .dash-action p { font-size: 12.5px; line-height: 1.5; margin: 4px 0 0; }

@media (min-width: 720px) {
  .dash-actions { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .dash-actions .dash-action { padding: 18px 16px; }
}
@media (max-width: 560px) {
  .dash-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* five cards in two columns: the fifth spans the row instead of leaving a gap */
  .dash-actions > :last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
}

/* The depth control and the meaning switch were pushed to opposite ends of a
   full-width row, which left a hand's width of nothing between them. They are
   one decision — how deep, and whether to rank by meaning — so they sit
   together, centred, with a normal gap. */
.dash-depth {
  justify-content: center;
  gap: 10px;
  row-gap: 10px;
}
.depth { flex: 0 1 auto; }

@media (max-width: 700px) {
  .dash-depth { justify-content: center; gap: 8px; }
}

/* ======================================================================
   23 · THE ARTICLE OF THE DAY IS A CARD, NOT A CARD IN A CARD
   ======================================================================
   The picture sat in a tinted panel with a hard border down its right edge,
   inside a bordered, shadowed card — so the eye read two frames and a boxed
   photograph. The picture now sits in the card's own surface with no inner
   panel and no divider; the card keeps the only border. */

.aotd {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.aotd-media {
  margin: 0;
  background: transparent;
  border: 0;
  border-right: 0;
  display: block;
  overflow: hidden;
}
.aotd-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}
@media (max-width: 860px) {
  /* one column: the picture is the top of the card, so it keeps the card's
     own corners and needs no divider under it either */
  .aotd-media { border-right: 0; border-bottom: 0; }
  .aotd-media img { max-height: 260px; border-radius: 0; }
}

/* On a phone the depth row broke into three lines — the label, then two
   buttons, then "Deep dive" alone. The label goes, the three choices stay
   together, and the meaning switch takes the next line as a unit. */
@media (max-width: 700px) {
  .dash-depth { flex-direction: column; align-items: center; gap: 8px; }
  .dash-depth .depth-label { display: none; }
  .depth { flex-wrap: nowrap; }
  .depth .depth-btn { padding: 0 10px; font-size: 12.5px; }
}

/* ---------------------------------------------------------------- credits */

/* One page that says who made the site and what it stands on. It reuses the
   clay surfaces the rest of the site already speaks, and adds only the shapes
   that are particular to it: the maker card, the timeline and the contributor
   rows. Nothing here is a new colour or a new radius. */

.credit-maker {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px 22px;
  align-items: center;
  margin: 6px 0 22px;
  padding: 22px;
  background: var(--clay-face, var(--surface));
  border-radius: var(--clay-r-lg, var(--radius-lg));
  box-shadow: var(--clay-hi, var(--shadow-sm)), var(--clay-lo, none), var(--clay-drop, var(--shadow));
}

.credit-avatar {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--forest), var(--copper));
  color: var(--ivory);
  flex: 0 0 auto;
}

.credit-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.credit-initials { font-family: var(--font-head); font-size: 30px; letter-spacing: .02em; }
.credit-avatar img + .credit-initials { opacity: 0; }

.credit-who .kicker { display: block; margin-bottom: 4px; }
.credit-name { font-family: var(--font-head); font-size: 27px; line-height: 1.15; margin: 0 0 6px; }
.credit-who p { margin: 0 0 8px; color: var(--muted); font-size: 14.5px; line-height: 1.55; max-width: 60ch; }
.credit-links { font-size: 13.5px; color: var(--muted); }

.credit-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 0 0 26px;
  padding: 0;
}

.credit-facts > div {
  padding: 12px 14px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.credit-facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-bottom: 4px; }
.credit-facts dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text); }

.credit-timeline { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--border-2); }
.credit-timeline li { position: relative; padding: 0 0 18px 14px; }
.credit-timeline li::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--bg);
}
.credit-timeline .credit-when { display: block; font-size: 12.5px; color: var(--faint); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; }
.credit-timeline strong { display: block; font-size: 15.5px; margin-bottom: 3px; }
.credit-timeline p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 62ch; }

.credit-licence { margin: 6px 0 0; font-size: 12.5px; color: var(--faint); }

.credit-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.credit-people li {
  display: grid;
  grid-template-columns: minmax(140px, 1.1fr) minmax(0, 2fr) auto;
  gap: 4px 16px;
  align-items: baseline;
  padding: 11px 14px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.credit-person-name { font-weight: 600; font-size: 14.5px; }
.credit-person-role { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.credit-person-count { font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 620px) {
  .credit-maker { grid-template-columns: 1fr; justify-items: start; padding: 18px; }
  .credit-avatar { width: 76px; height: 76px; }
  .credit-name { font-size: 23px; }
  .credit-people li { grid-template-columns: 1fr auto; }
  .credit-person-role { grid-column: 1 / -1; }
}
/* ------------------------------------------------------------------------
   Credits & contributions — brand-led editorial redesign (v2)
   Keeps third-party marks inside neutral logo wells and gives every entry
   one clear role, description and destination. All colours follow the global
   theme tokens; no third-party mark is recoloured or shadowed.
   ------------------------------------------------------------------------ */
.credits-page { max-width: 1040px; }
.credits-page > .article-head { margin-bottom: 20px; }
.credit-identity {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: clamp(20px, 3.4vw, 32px);
  margin: 4px 0 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--copper) 16%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface));
  box-shadow: var(--im-clay-shadow, var(--shadow-sm));
}
.credit-identity-brand { display: flex; align-items: center; gap: 18px; min-width: 0; flex: 1 1 440px; }
.credit-identity-mark { width: 76px; height: 76px; flex: 0 0 auto; border-radius: 23px; box-shadow: 0 7px 20px rgba(20, 48, 35, .13); }
.credit-identity-copy { min-width: 0; }
.credit-identity-copy .kicker { display: block; margin-bottom: 5px; font-size: 10.5px; letter-spacing: .13em; }
.credit-identity-copy h2 { margin: 0 0 5px; font-family: var(--font-head); font-size: clamp(25px, 4vw, 34px); line-height: 1.05; color: var(--text); }
.credit-identity-copy p { margin: 0; max-width: 56ch; color: var(--muted); font-size: 14px; line-height: 1.6; }
.credit-identity-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.credit-origin-chip, .credit-identity-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 11px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text);
  font-size: 11.5px; font-weight: 650; white-space: nowrap;
}
.credit-origin-chip { border-color: color-mix(in srgb, #16834a 28%, var(--border)); background: color-mix(in srgb, #16834a 8%, var(--surface)); }
.credit-maker-v2 { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px 22px; padding: 20px 22px; }
.credit-maker-v2 .credit-avatar { width: 84px; height: 84px; }
.credit-maker-v2 .credit-who .kicker { font-size: 10.5px; letter-spacing: .13em; }
.credit-maker-v2 .credit-name { font-size: clamp(22px, 3vw, 28px); }
.credit-maker-v2 .credit-links { margin: 8px 0 0; }
.credit-facts-v2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.credit-facts-v2 > div { min-height: 78px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--border); box-shadow: none; }
.credit-section { margin-top: 34px; }
.credit-section-intro { max-width: 72ch; margin: -4px 0 18px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.credit-stack-group { margin: 22px 0 26px; }
.credit-stack-group-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 5px 18px; margin-bottom: 12px; }
.credit-stack-group-heading h3 { margin: 0; color: var(--text); font-size: 16px; font-weight: 750; }
.credit-stack-group-heading p { margin: 0; max-width: 62ch; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.credit-stack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 12px; }
.credit-stack-card {
  display: flex; flex-direction: column; min-width: 0; min-height: 220px; padding: 16px;
  border: 1px solid var(--border); border-radius: 19px; background: var(--surface); color: var(--text);
  text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--im-motion), border-color .2s, box-shadow .2s;
}
.credit-stack-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); box-shadow: var(--shadow); text-decoration: none; }
.credit-stack-card:focus-visible, .credit-person-card:focus-visible, .credit-sarvam-logo:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.credit-stack-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.credit-logo-frame {
  position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 54px; height: 54px; overflow: hidden;
  border: 1px solid rgba(20, 42, 30, .08); border-radius: 15px; background: #fff; color: #26342c;
}
.credit-logo-fallback { display: grid; place-items: center; width: 100%; height: 100%; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.credit-logo-image { position: absolute; inset: 0; width: 100%; height: 100%; padding: 6px; object-fit: contain; background: #fff; }
.credit-role-chip { display: inline-flex; align-items: center; max-width: 65%; padding: 5px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.25; text-align: right; }
.credit-stack-name { margin: 0 0 6px; font-size: 15.5px; line-height: 1.3; font-weight: 750; }
.credit-stack-description { flex: 1; margin: 0 0 12px; color: var(--muted); font-size: 12.8px; line-height: 1.58; }
.credit-stack-licence { display: block; padding-top: 9px; border-top: 1px solid var(--border); color: var(--faint); font-size: 11px; line-height: 1.45; }
.credit-stack-open { margin-top: 7px; color: var(--accent); font-size: 11px; font-weight: 700; }
.credit-sarvam-card {
  display: grid; grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); align-items: center; gap: 22px;
  padding: clamp(16px, 2.5vw, 24px); border: 1px solid var(--border); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-sm);
}
.credit-sarvam-logo {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid rgba(20, 42, 30, .08); border-radius: 15px; background: #fff; color: #171717; text-decoration: none;
}
.credit-sarvam-logo img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.credit-sarvam-fallback { display: none; font-size: 23px; font-weight: 780; letter-spacing: -.04em; }
.credit-sarvam-logo:not(.has-image) .credit-sarvam-fallback { display: block; }
.credit-sarvam-copy { min-width: 0; }
.credit-role-chip-featured { max-width: none; margin-bottom: 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.credit-sarvam-copy h3 { margin: 0 0 7px; font-size: 21px; }
.credit-sarvam-copy p { margin: 0 0 10px; max-width: 67ch; color: var(--muted); font-size: 13.5px; line-height: 1.65; }
.credit-official-link { color: var(--accent); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.credit-official-link:hover { text-decoration: underline; }
.credit-disclosure-note { margin: 12px 0 0; padding: 11px 13px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--surface-2); color: var(--muted); font-size: 12px; line-height: 1.6; }
.credit-people-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.credit-person-card {
  display: grid; grid-template-columns: 54px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; align-items: start; gap: 2px 12px;
  min-width: 0; min-height: 168px; padding: 15px; border: 1px solid var(--border); border-radius: 18px;
  background: var(--surface); color: var(--text); text-decoration: none; box-shadow: var(--shadow-sm);
  transition: transform .2s var(--im-motion), border-color .2s, box-shadow .2s;
}
.credit-person-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: var(--shadow); text-decoration: none; }
.credit-person-avatar-v2 { grid-column: 1; grid-row: 1 / span 3; position: relative; width: 54px; height: 54px; border-radius: 16px; background: var(--surface-2); color: var(--text); }
.credit-person-avatar-v2 img { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; padding: 4px; border-radius: inherit; object-fit: contain; background: var(--surface); }
.credit-person-avatar-v2:has(img[src*="galeoindus"]) img { object-fit: cover; padding: 0; }
.credit-person-kind { grid-column: 2; align-self: center; color: var(--accent); font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.credit-person-card .credit-person-name { grid-column: 2; margin: 2px 0 4px; font-size: 14px; line-height: 1.35; }
.credit-person-card .credit-person-role { grid-column: 2; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.credit-person-open { grid-column: 2; margin-top: 8px; color: var(--accent); font-size: 11px; font-weight: 700; }
.credits-page .line-list { display: grid; gap: 8px; }
.credits-page .line-list > li { font-size: 13px; line-height: 1.6; }

@media (max-width: 700px) {
  .credit-identity { align-items: flex-start; }
  .credit-identity-brand { flex-basis: 100%; gap: 13px; }
  .credit-identity-mark { width: 62px; height: 62px; border-radius: 18px; }
  .credit-identity-tags { width: 100%; }
  .credit-facts-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credit-sarvam-card { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .credit-sarvam-logo { max-width: 190px; }
}
@media (max-width: 480px) {
  .credit-maker-v2 { grid-template-columns: 1fr; }
  .credit-maker-v2 .credit-avatar { width: 72px; height: 72px; }
  .credit-stack-grid, .credit-people-grid { grid-template-columns: 1fr; }
  .credit-stack-card { min-height: 0; }
  .credit-person-card { min-height: 0; }
  .credit-identity-copy p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .credit-stack-card, .credit-person-card { transition: none; }
  .credit-stack-card:hover, .credit-person-card:hover { transform: none; }
}

/* ------------------------------------------------------- the build stamp */

/* The footer chip names the build this page came from, and turns amber when
   version.json says the site has moved on. A reader should never have to guess
   whether they are looking at today's build or last week's. */
.foot-version .is-stale { color: var(--warn); font-weight: 600; }
.foot-build.is-stale::before { content: ""; }

.chat-version {
  margin: 0;
  padding: 10px 18px 22px;
  color: var(--faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.chat-version .is-stale { color: var(--warn); font-weight: 600; }

/* The research desk footer carries the same chip, inline with its own line. */
.main-footer .foot-version { margin: 0; font-size: 12px; }

/* ── responsive.css ── */
/* ══════════════════════════════════════════════════════════════════════════
   Veridell — every screen
   ══════════════════════════════════════════════════════════════════════════
   One sheet that makes the whole site answer to the device it is on, rather
   than to one width. Four ranges, each with its own rhythm:

     phone      ≤ 600px    one column, thumb-sized targets, no hover reliance
     tablet     601–1024   two columns where it helps, wider gutters
     laptop     1025–1440  the full three-zone layout
     desktop    > 1440     capped measure, so lines do not run away

   Type is fluid everywhere (clamp), so nothing jumps between breakpoints.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── fluid type and spacing, for every device ─────────────────────────── */
:root {
  --fluid-h1: clamp(1.9rem, 1.2rem + 3.2vw, 3.4rem);
  --fluid-h2: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  --fluid-body: clamp(0.95rem, 0.92rem + 0.18vw, 1.06rem);
  --fluid-gap: clamp(0.75rem, 0.4rem + 1.2vw, 1.6rem);
  --fluid-pad: clamp(1rem, 0.6rem + 1.8vw, 2.6rem);
  --tap: 44px;
}

body { font-size: var(--fluid-body); }

/* every heading scales instead of stepping */
.dash-hero h1,
.article-title,
.hero h1,
h1 { font-size: var(--fluid-h1); line-height: 1.1; }
.dash-hero h2,
h2 { font-size: var(--fluid-h2); }

/* The article lead is a paragraph, not a heading. It was being set at h2 size,
   which made the opening line of every article shout. */
.article-sub {
  font-size: clamp(15.5px, 0.95rem + 0.35vw, 18px);
  line-height: 1.62;
  max-width: var(--measure, 68ch);
}

/* ── touch: nothing important may depend on hover ─────────────────────── */
@media (hover: none) {
  .card:hover,
  .suggestion-card:hover,
  .sg:hover,
  .source-card:hover,
  .chip:hover { transform: none; }
  /* the delete/overflow controls are hover-only on a desktop; on touch they
     must always be visible or they cannot be used at all */
  }

/* ── phone ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .wrap, .wrap-narrow, main { padding-inline: 14px; }
  .dash-hero { margin-top: 8px; border-radius: 20px; }
  .dash-hero > p { font-size: 14px; }
  .article-body, .prose { font-size: 16px; line-height: 1.75; }
  /* 16px inputs stop iOS zooming the page on focus */
  input, textarea, select { font-size: 16px; }
  button, .btn, .chip, .sg { min-height: var(--tap); }
  .topnav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .topnav::-webkit-scrollbar { display: none; }
  .bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
  img, figure img { max-width: 100%; height: auto; }
  table { display: block; overflow-x: auto; }
}

/* ── tablet ───────────────────────────────────────────────────────────── */
@media (min-width: 601px) and (max-width: 1024px) {
  .wrap, .wrap-narrow, main { padding-inline: clamp(18px, 4vw, 36px); }
  .dash-hero { padding: clamp(22px, 4vw, 36px); }
  .grid-2, .suggest, .suggestion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-body, .prose { max-width: 68ch; margin-inline: auto; }
}

/* ── laptop ───────────────────────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1440px) {
  .wrap { max-width: 1180px; }
  .article-body, .prose { max-width: 70ch; }
}

/* ── desktop ──────────────────────────────────────────────────────────── */
@media (min-width: 1441px) {
  .wrap { max-width: 1320px; }
  /* a very wide monitor gets more margin, not longer lines */
  .article-body, .prose { max-width: 74ch; }
  .dash-hero { max-width: 1180px; }
}

/* ── landscape phones: the hero must not eat the screen ───────────────── */
@media (max-height: 520px) and (orientation: landscape) {
  .dash-hero { padding-block: 18px; }
  .dash-hero h1 { font-size: clamp(1.5rem, 4vh, 2.2rem); }
  }

/* ── print: the entries are worth keeping ─────────────────────────────── */
@media print {
  .topnav, .bottom-nav, .gc-launcher, .gc-shell, .site-foot, .crumbs { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* ── system.css ── */
/* Veridell — one system for the whole site.
 *
 * This is the layer that makes every page feel like the same product. It is
 * loaded last, on every page, so the reading surface, the controls and the
 * spacing are identical whether you are on the home page, an article, the
 * chat, the topics index or the research desk.
 *
 * It only sets type, space, surfaces, controls and focus — it does not move
 * anything. Layout stays with each page's own stylesheet, so this cannot
 * break an existing screen.
 */

:root {
  /* a fluid type scale: one ramp, every screen */
  --fs-xs: clamp(11px, 0.72rem + 0.1vw, 12px);
  --fs-sm: clamp(12.5px, 0.8rem + 0.1vw, 13.5px);
  --fs-base: clamp(15px, 0.94rem + 0.12vw, 16px);
  --fs-lg: clamp(17px, 1.02rem + 0.25vw, 18.5px);
  --fs-xl: clamp(20px, 1.15rem + 0.6vw, 24px);
  --fs-2xl: clamp(24px, 1.3rem + 1.1vw, 32px);
  --fs-3xl: clamp(28px, 1.4rem + 1.8vw, 40px);

  /* one spacing ramp */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* one radius ramp */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --measure: 68ch;
  --tap: 44px;         /* the smallest comfortable touch target */
}

/* ── type ──────────────────────────────────────────────────────────────── */
/* Sizes belong to each page: a hero, an article lead and a card title are
   different jobs. This layer only sets rhythm, measure and wrapping, so it
   cannot blow up a layout that already knows its own scale. */
body {
  line-height: 1.68;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* long prose never runs past a comfortable line length */
.prose > p, .prose > ul, .prose > ol { max-width: var(--measure); }

/* ── controls ──────────────────────────────────────────────────────────── */
button, .btn, select, input[type="submit"] {
  font-family: inherit;
  font-size: var(--fs-sm);
  border-radius: var(--r-md);
  min-height: var(--tap);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}
button:not(.btn-icon):not(.btn-round), .btn { padding: 9px 15px; }
button:active, .btn:active { transform: translateY(0.5px); }
button:disabled, .btn:disabled, [aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

input, textarea, select {
  font-family: inherit;
  font-size: var(--fs-base);
  border-radius: var(--r-md);
}
textarea { line-height: 1.6; }

/* icons inside buttons keep their own box */
.btn-icon, .icon, .ico { min-height: 0; }

/* ── focus: always visible, never a surprise ───────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent, #b46a45);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ── surfaces ──────────────────────────────────────────────────────────── */
.card, .panel, .answer-card, .factbox, .src-group, .topic-block,
.q-card, .cat-card, .dash-action, .saved-card {
  border-radius: var(--r-lg);
}
.card, .q-card, .cat-card, .dash-action { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
@media (hover: hover) {
  .card:hover, .q-card:hover, .cat-card:hover, .dash-action:hover { transform: translateY(-2px); }
}

/* tables scroll instead of breaking the page */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── small touches that make a site feel finished ──────────────────────── */
::selection { background: color-mix(in srgb, var(--accent, #b46a45) 30%, transparent); }

* { scrollbar-width: thin; scrollbar-color: var(--border-2, #cfc3ac) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--border-2, #cfc3ac) 80%, transparent);
  border-radius: var(--r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}

/* links inside prose read as prose, not as buttons */
.prose a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ── phones and small tablets ──────────────────────────────────────────── */
@media (max-width: 900px) {
  :root { --measure: 62ch; }
  .wrap, .wrap-narrow { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 640px) {
  body { line-height: 1.72; }
  .btn, button { min-height: 44px; }
  /* a thumb needs a real target, not a 24px glyph */
  .btn-icon, .icon, .ico { min-width: 44px; min-height: 44px; }
  .topbar-inner { padding-left: 12px; padding-right: 12px; }
  .table-scroll { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}

/* respect the system setting, everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .q-card:hover, .cat-card:hover, .dash-action:hover { transform: none; }
}

/* printing: the words, not the chrome */
@media print {
  .topbar, .side, .bottom-nav, .app-rail, .im-launcher, .read-progress, .toast { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; word-break: break-all; }
  .prose > p { max-width: none; }
}

/* ── sidebar links ─────────────────────────────────────────────────────── */
/* In the light theme these sat at a very pale grey on a pale surface and were
   hard to read. They are navigation, so they need body-text contrast, not a
   hint of colour. */
.side-link, .bottom-nav a, .toc-jump-list a {
  color: color-mix(in srgb, var(--text, #242824) 88%, transparent);
}
.side-link:hover, .bottom-nav a:hover, .toc-jump-list a:hover {
  color: var(--text, #242824);
}
.side-link[aria-current="page"], .side-link.is-active, .bottom-nav a[aria-current="page"] {
  color: var(--text, #242824);
  font-weight: 600;
}
.side-link svg { opacity: .9; }

/* ── neutral progress indicator ────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 26px; height: 26px;
  flex: none;
  border: 2px solid var(--border-2, #d4ddd6);
  border-top-color: var(--accent, #438c6b);
  border-radius: 50%;
  background: none;
  animation: amigo-shared-spin .85s linear infinite;
  vertical-align: -6px;
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

/* ==========================================================================
   THE AUDIT'S PART II CORRECTIONS — surfaces, ink and states
   ==========================================================================
   The interface audit measured four complaints and traced all of them to one
   habit: a component file declaring its own colour, and a state declaring a
   background without declaring the foreground that sits on it. These rules
   are the audit's patch list, applied in one place and loaded after the
   sheets that paint the old versions, so the corrections win without a single
   !important.

   What they do, in the audit's own order:

     F-05/F-06  the field is flat paper, not a pressed well
     F-07/F-08  the hero card is an opaque surface with one quiet wash
     F-09       no gradient sits behind text
     F-10/F-11  every active state declares its ink with its fill
     F-12       the primary button is a flat token pair
     F-14       the dark theme's muted ink clears 4.5:1
   ========================================================================== */

/* ── F-05 / F-06 · the field ─────────────────────────────────────────────
   A pressed well works for a button the reader presses. A text field is a
   surface the reader reads on, and an inset shadow plus a 145° gradient
   darkened the first two characters of every placeholder — 31 levels below
   the page at the top-left corner. Flat surface, hairline border, one soft
   shadow, and focus as the only state that changes the surface. */

.searchbar,
.composer .searchbar,
.dash-hero .searchbar,
.dash-hero-ask .searchbar,
form.panel .searchbar,
form.panel .select,
.select,
.langbar select,
.langbar-inner input#langSelect,
.feedback .fb-note textarea {
  background: var(--surface);
  background-image: none;
  border: 1px solid var(--border-2);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent);
}

.searchbar:focus-within,
.composer .searchbar:focus-within,
.dash-hero .searchbar:focus-within,
form.panel .searchbar:focus-within,
.select:focus,
.langbar select:focus,
.feedback .fb-note textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* The segmented controls were the same pressed well. They are a track with a
   raised thumb, which is a different material from a field. */
.mode,
.tabs {
  background: var(--surface-2);
  background-image: none;
  border: 1px solid var(--border-2);
  box-shadow: none;
}

/* ── F-07 · the hero card is a surface, not a glass sheet ────────────────
   Behind the hero there is a near-black page; blurring it produced a flat
   near-black, so in the dark theme the card sat 2 levels above the page —
   below the threshold at which a boundary is visible. Glass belongs to
   floating chrome, not to the largest surface on the page. */

.dash-hero,
.dash-hero-ask {
  background: var(--surface);
  background-image: none;
  border: 1px solid var(--border-2);
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ── F-08 · the corner bloom ─────────────────────────────────────────────
   One centred wash that cannot be mistaken for a rendering fault. The old
   pair of blooms was tuned against the light background and produced a pale
   top-right and a brown top-left in the dark one. */

.dash-hero::before,
.dash-hero-ask::before {
  background: radial-gradient(60% 50% at 50% -10%,
    color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%);
  opacity: 1;
}
[data-theme="dark"] .dash-hero::before,
[data-theme="dark"] .dash-hero-ask::before {
  background: radial-gradient(60% 50% at 50% -10%,
    color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
}

/* ── F-09 · no gradient behind text ──────────────────────────────────────
   `background-clip: text` with a transparent fill measured 1.07:1: in print,
   in forced-colours mode and wherever the clip is unsupported, the emphasised
   half of the headline simply vanished. The colour is solid now; the gradient
   is kept only where a browser has proved it can paint it. */

.dash-hero h1 .dash-grad,
.site-intro h1 .grad {
  background-image: none;
  -webkit-text-fill-color: currentColor;
  color: var(--copper-ink);
}
[data-theme="dark"] .dash-hero h1 .dash-grad,
[data-theme="dark"] .site-intro h1 .grad {
  color: var(--accent);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  @media not print {
    .dash-hero h1 .dash-grad {
      background-image: linear-gradient(100deg, var(--copper) 0%, var(--accent-2) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}

/* ── F-10 / F-11 / F-12 · every state is a pair ──────────────────────────
   The active depth pill was white text on a pale gradient (1.25:1) and the
   active half of the Ask/Find switch was dark text on a dark track (1.85:1).
   A state now names its ink and its fill together, from the matching tokens,
   so the two can never be chosen apart. */

.depth-btn.is-active,
.depth-btn[aria-pressed="true"],
.chip-btn.is-active,
.chip.is-active,
.mode-btn.is-active,
.mode-btn[aria-pressed="true"],
.tab[aria-selected="true"],
.tab.is-active,
.toc a.active,
.dash-hero .depth-btn.is-active,
.dash-hero .depth-btn[aria-pressed="true"],
.dash-hero .chip-btn.is-active,
.dash-hero .mode-btn.is-active,
.dash-hero .mode-btn[aria-pressed="true"] {
  background: var(--primary);
  background-image: none;
  border-color: var(--primary);
  color: var(--on-primary);
  box-shadow: none;
}

.btn-primary,
.btn-primary:hover,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-primary:hover {
  background: var(--primary);
  background-image: none;
  border-color: transparent;
  color: var(--on-primary);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 12%, transparent);
  filter: none;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { filter: brightness(.96); }

/* ── F-14 · the dark theme's muted ink ───────────────────────────────────
   #a8b0a6 measured 3.97:1 on the dark card. The audit's value clears 4.5:1
   on the lightest surface it can land on, which for a dark theme is the
   highest card, not the page. */

[data-theme="dark"] {
  --muted: #b9c2b6;
  --faint: #9aa39a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="sepia"]) {
    --muted: #b9c2b6;
    --faint: #9aa39a;
  }
}

/* ── F-20 · the skip link ────────────────────────────────────────────────
   It is off-screen until focused, and when focused it must be legible: the
   pair is declared here so a theme change cannot separate them. */

.skip-link,
a.skip-link {
  background: var(--primary);
  color: var(--on-primary);
}

/* ── the composer wrapper is not a field ─────────────────────────────────
   `.composer` is only a positioning div on the app pages — the field is the
   form inside it. But three sheets painted the wrapper as a second field, so
   the search box rendered as a box inside a box, with the pressed-well shadow
   on the outer one. The wrapper goes back to being invisible. The chat page's
   composer *is* the field (it is a <form class="composer">), so this is
   scoped to the wrapper only. */

.composer:has(> form.searchbar) {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.composer:has(> form.searchbar):focus-within {
  box-shadow: none;
  border: 0;
}

/* ── `hidden` means hidden ───────────────────────────────────────────────
   The clear button, the offline notice and a dozen other elements are hidden
   by setting the `hidden` attribute, but any rule that gives the element a
   `display` value beats the attribute — so the clear "×" sat in the composer
   even with an empty field, and on a phone it took the space the mode switch
   needed. One rule restores the attribute's meaning. */
[hidden] { display: none !important; }

/* ==========================================================================
   SILKY SURFACES — one soft material instead of outlined boxes
   ==========================================================================
   Every card, panel, field and section carried a 1px border in --border-2 and
   a hard inner edge, so the page read as a set of drawn rectangles: a thin
   line beside every piece of text, a box around every block. That is what
   looked cheap. Nothing on this site needs to be outlined to be understood.

   So there is one material now. A surface is a tone, lifted off the page by a
   soft shadow rather than fenced in by a stroke. Borders survive only where
   they are structural (a table cell, a focus ring, a divider that separates
   two different lists) and even there they are a hairline of the surface's own
   colour, not a drawn line.

   The rules are written as one layer, loaded after the sheets that paint the
   old versions, so nothing here needs !important. */

:root {
  --lift-1: 0 1px 1px color-mix(in srgb, var(--text) 4%, transparent),
            0 6px 18px -14px color-mix(in srgb, var(--text) 22%, transparent);
  --lift-2: 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent),
            0 16px 40px -26px color-mix(in srgb, var(--text) 30%, transparent);
  --hair: color-mix(in srgb, var(--border) 55%, transparent);
  --r-card: 20px;
  --r-block: 16px;
}

/* ── cards and panels: a tone and a shadow, no stroke ──────────────────── */
.card,
.q-card,
.cat-card,
.topic-card,
.dash-action,
.howstep,
.panel,
.answer-card,
.source-card,
.factbox,
.src-group,
.aotd,
.dash-hero,
.dash-hero-ask,
.rail-card,
.evidence,
.ask-note,
.method-note {
  border: 0;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--lift-1);
  transition: box-shadow .28s cubic-bezier(.22,.61,.36,1),
              transform .28s cubic-bezier(.22,.61,.36,1),
              background-color .28s cubic-bezier(.22,.61,.36,1);
}

.card:hover,
.q-card:hover,
.cat-card:hover,
.topic-card:hover,
.dash-action:hover,
.howstep:hover {
  box-shadow: var(--lift-2);
  transform: translateY(-2px);
}

/* a section is separated by space, not by a rule under its heading */
.sec-head,
.dash-band-head {
  border-bottom: 0;
  padding-bottom: 0;
}
.prose h2,
.art-body h2,
.art-section-head {
  border-bottom: 0;
  padding-bottom: 0;
}

/* the fact box: rows read as a table by alignment alone */
.factbox { overflow: hidden; }
.factbox h3 { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); border-bottom: 0; }
.factbox .row { border-bottom: 0; }
.factbox .row + .row { box-shadow: inset 0 1px 0 var(--hair); }

/* the timeline drew a vertical line down the whole list */
.timeline li { border-left: 0; }

/* ── fields: a hairline that belongs to the surface ────────────────────── */
.searchbar,
.composer .searchbar,
.select,
.langbar select,
form.panel .searchbar,
.feedback .fb-note textarea {
  border: 1px solid var(--hair);
}

/* ── the left rail: a soft column, not a bordered sheet ────────────────── */
.app-side {
  border: 0;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  border-radius: var(--r-card);
  box-shadow: none;
  padding: 14px 10px 22px;
}
.side-link {
  border-radius: 12px;
  color: var(--text);
  font-weight: 500;
}
.side-link svg { opacity: .75; }
.side-link:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.side-link:hover svg { opacity: 1; }
.side-link[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: none;
  color: var(--text);
  font-weight: 600;
}
.side-link[aria-current="page"] svg { opacity: 1; color: var(--accent); }
.side-heading {
  color: var(--muted);
  letter-spacing: .12em;
  margin: 18px 0 6px;
  padding: 0 12px;
}

/* ── the right rail: no outline, and no eternal skeleton ───────────────── */
.app-rail { border: 0; }
.app-rail .rail-card,
.app-rail > .card { box-shadow: var(--lift-1); }

/* ── the top bar keeps its blur and loses the drawn line ───────────────── */
.topbar { border-bottom: 1px solid var(--hair); }
.site-foot { border-top: 1px solid var(--hair); }

/* ── the reading panel ────────────────────────────────────────────────── */
.article-grid > .panel,
.panel.panel-wide {
  border: 0;
  box-shadow: var(--lift-1);
}
.toc-rail .toc {
  border: 0;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border-radius: var(--r-card);
  box-shadow: none;
  padding: 14px;
}

/* ── tables keep their cell rules: they carry meaning ─────────────────── */
.art-body .table-scroll {
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: var(--surface);
}

/* ── motion: everything eases, nothing jumps ──────────────────────────── */
a, button, .btn, .chip, .pill, .side-link, .tab, .depth-btn, .mode-btn {
  transition-duration: .24s;
  transition-timing-function: cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .card:hover, .q-card:hover, .cat-card:hover, .topic-card:hover,
  .dash-action:hover, .howstep:hover { transform: none; }
}

/* ── the left rail, without its outline ─────────────────────────────────
   The border came from a three-selector rule that listed the dark and light
   theme variants explicitly, so a plain `.app-side` override could not beat
   it. Same selectors here, later in the cascade, and the stroke is gone: the
   column is a tone on the page, lifted by nothing at all. */

.app-side,
[data-theme="dark"] .app-side,
[data-theme="light"] .app-side {
  border: 0;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  box-shadow: none;
  border-radius: var(--r-card);
}
[data-theme="dark"] .app-side { border-color: transparent; }

.app-side .side-link[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: none;
  color: var(--text);
}
.app-side .side-link:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }

/* the field's own hairline, a shade softer again: it is a surface, not a box */
.searchbar,
.composer .searchbar,
.dash-hero .searchbar,
.dash-hero-ask .searchbar,
form.panel .searchbar {
  border-color: color-mix(in srgb, var(--border-2) 42%, transparent);
}
.searchbar:hover,
.dash-hero .searchbar:hover {
  border-color: color-mix(in srgb, var(--border-2) 62%, transparent);
}

/* The rail is not a panel.
   With the stroke gone it still read as a box, because the surface tone is
   lighter than the page and the rounded corner drew the rest of the outline
   by implication. A list of links does not need a container at all: it sits
   directly on the page, and the reader sees a column of destinations rather
   than a card full of them. */
.app-side,
[data-theme="dark"] .app-side,
[data-theme="light"] .app-side {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.side-link[aria-current="page"],
.app-side .side-link[aria-current="page"] {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}

/* ── credits ─────────────────────────────────────────────────────────────
   One card for the person who made the site, and a grid of the services it
   runs on. The owner's avatar is the brand gradient on its own: a url() layer
   for /assets/img/owner.jpg used to sit in front of it, but the file was never
   added, so every visit to this page fetched a 404 and logged it to the
   console. Put the picture back as the first background layer when it exists. */

.credit-owner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  margin: 0 0 18px;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--lift-1);
}
.credit-avatar {
  flex: none;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background-image: linear-gradient(135deg, #173b32, #b46a45);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
}
.credit-owner h3 { margin: 0 0 3px; font-size: 17px; font-family: var(--font-body); font-weight: 650; }
.credit-owner p { margin: 0; font-size: 13px; color: var(--muted); }

.credit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}
.credit-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-block);
  background: var(--surface);
  box-shadow: var(--lift-1);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .24s cubic-bezier(.22,.61,.36,1), transform .24s cubic-bezier(.22,.61,.36,1);
}
.credit-card:hover { box-shadow: var(--lift-2); transform: translateY(-2px); text-decoration: none; }
.credit-tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--copper-ink);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
}
[data-theme="dark"] .credit-tile { color: var(--sage); }
.credit-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.credit-text strong { font-size: 14px; font-weight: 600; }
.credit-text span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.credits-note { margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.credits .src-credit { margin-top: 4px; font-size: 12px; color: var(--faint); }

@media (max-width: 560px) {
  .credit-owner { padding: 16px; gap: 13px; }
  .credit-avatar { width: 56px; height: 56px; }
  .credit-grid { grid-template-columns: 1fr; }
}

/* A real logo in the tile: contained, on the tile's own tint, so a wide
   wordmark and a square icon both sit inside the same 38px square. */
.credit-tile.has-logo {
  background: color-mix(in srgb, var(--surface-2) 70%, #ffffff);
  padding: 5px;
}
[data-theme="dark"] .credit-tile.has-logo { background: color-mix(in srgb, #ffffff 88%, var(--surface)); }
.credit-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* ── article-layout.css ── */
/* ==========================================================================
   Veridell — article layout, rebuilt for the screen it is on
   --------------------------------------------------------------------------
   Why this file exists.

   The reading view was one fixed 856 px panel inside a 1160 px shell, centred
   in whatever the viewport happened to be. At 1440 px that left 120 px of
   gutter each side and a body column of 808 px; at 1920 px the same panel sat
   in the middle of 1920 px with 532 px of empty page each side, while the
   headline above it was 1200 px wide. Three widths stacked on one page: the
   shell, the headline and the body, none of them agreeing.

   The model here is the one long-form publishers converged on:

     · the shell grows with the viewport, up to a cap, instead of stopping
     · the headline and the body share ONE left edge and ONE right edge
     · the prose keeps a readable measure (about 70 characters)
     · everything that is not prose — figures, tables, the fact box — may use
       the whole column, because a picture is not a paragraph
     · the contents panel is the second column on a wide screen and the first
       block on a narrow one, never the last thing after 100,000 px of text
   ========================================================================== */

:root {
  /* The shell: 960 on a small laptop, 1240 on a wide desktop, never more.
     It was pushed out to 1440 in the first pass and that was too far — a
     1240 frame holds a 64-character column and a 280 px contents rail with
     real gutters either side, instead of one wall of text. */
  --shell: clamp(960px, 92vw, 1240px);
  --toc-w: 280px;
  --rail-gap: 32px;
  /* The prose measure: 62-66 characters, which is the comfortable end of the
     range for 17 px body text. 70ch read as a newspaper column on a wide
     monitor. */
  --prose: 64ch;
}

/* ---------------------------------------------------------------- the shell */

.wrap,
#main.wrap,
main#main {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(16px, 3.2vw, 44px);
}

/* the app's article view and the static pages use the same shell */
[data-view="article"] .wrap,
[data-view="ask"] .wrap {
  max-width: var(--shell);
  padding-inline: clamp(16px, 3.2vw, 44px);
}

/* the headline, the lead, the actions and the body now share one left edge */
.article-head,
.crumbs,
.article-actions {
  max-width: 100%;
  margin-inline: 0;
}

/* the headline may run wider than the prose, but not the whole screen */
.article-title,
.article-head h1 {
  max-width: 24ch;
}
.article-sub,
.article-head .article-sub {
  max-width: var(--prose);
}

/* ---------------------------------------------------------------- the grid */

.article-grid,
#main .article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--toc-w);
  gap: var(--rail-gap);
  align-items: start;
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* the panel is the reading column; it may use its whole width */
.article-grid > .panel,
.panel.panel-wide {
  grid-column: 1;
  grid-row: 1;
  /* 760px of text at the body size is about 80 characters — the top of the
     comfortable range, and the widest the facts box gets too, so the two
     columns line up. */
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(20px, 2.4vw, 40px) clamp(18px, 2.6vw, 40px);
}

/* the contents panel is the second column, and it sticks */
.article-grid > .toc-rail {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: calc(var(--topbar-h, 62px) + 16px);
  max-height: calc(100dvh - var(--topbar-h, 62px) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ------------------------------------------------------------- the measure */

/* Every block used to be capped at 74ch — including figures, tables and the
   fact box, which is why a 900 px panel still rendered a 600 px picture in
   the middle of it. Prose keeps the measure; media takes the column. */
.panel.panel-wide > *,
.article-grid > .panel > * {
  max-width: 100%;
  margin-inline: 0;
}

/* The prose runs the width of the column, exactly like the facts box above
   it. A reader asked for that in as many words: "the words of the article
   should spread as wide as the facts". The measure is kept readable by
   capping the panel instead of the paragraph, so the two always agree — a
   narrower paragraph inside a wider facts box is what looked broken. */
.art-body > p,
.art-body > ul,
.art-body > ol,
.art-body > .line-list,
.prose > p,
.prose > ul,
.prose > ol {
  max-width: 100%;
}

/* A picture is centred in the column, whatever the rules above say about
   direct children: they set `margin-inline: 0`, which quietly left-aligned
   the lead figure. */
.panel.panel-wide > .art-figure,
.panel.panel-wide > .lead-figure,
.article-grid > .panel > .art-figure {
  margin-inline: auto;
}

/* long-form prose that is quoted at length gets a slightly wider measure */
.art-body > blockquote,
.art-body > .gloss-quot {
  max-width: 62ch;
}

/* figures and tables are allowed the full column */
.art-body figure,
.art-body .thumb,
.art-body .thumbinner,
.art-body .table-scroll,
.art-body table,
.art-body .chessboard,
.panel-wide .factbox {
  max-width: 100%;
  margin-inline: 0;
}

/* The lead picture keeps its own proportions.
   `width: 100%` with `object-fit: cover` did two things wrong at once: it
   stretched a small image — a 200 px agency logo became a 900 px banner —
   and it cropped the top and bottom off anything taller than the cap, with
   no way for the reader to see the rest. A picture is now drawn at its own
   size, never larger than the column, never taller than a screen, and
   centred. Nothing is stretched and nothing is cut. */
.lead-figure,
.art-figure {
  /* fit-content, not 100%: a small picture must not sit in a 720 px empty
     box. A large one still stops at 720. */
  width: fit-content;
  max-width: min(100%, 720px);
  margin-inline: auto;
  margin-block: 0 28px;
  text-align: center;
}
.lead-figure img,
.art-figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(60vh, 420px);
  object-fit: contain;
  margin-inline: auto;
  border-radius: 14px;
  background: transparent;
}
.lead-figure figcaption,
.art-figure figcaption {
  margin-top: 8px;
  text-align: center;
  color: var(--faint);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ------------------------------------------------------------ tables scroll */

/* The fact box and any wikitable must scroll inside the column instead of
   being squeezed until the cells clip. At 320 px the Chess fact box lost
   "Abstract strategy game" mid-word because nothing could scroll. */
.art-body .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.art-body table {
  border-collapse: collapse;
  min-width: min(100%, 420px);
}
.art-body table td,
.art-body table th {
  padding: 6px 10px;
  vertical-align: top;
}
/* a plain data table (not a chessboard) keeps its cells on one line and scrolls */
.art-body table:not(.chessboard) td {
  white-space: normal;
}

/* The fact box: the <dl> is the grid and every .row dissolves into it, so a
   label and its value are two cells of one table-like grid. The old nested
   grid squeezed the value column to 93 px at 390 px wide, which is what cut
   "Board game Abstract strategy game" in half. */
.factbox dl {
  display: grid;
  grid-template-columns: minmax(110px, 30%) minmax(0, 1fr);
  margin: 0;
}
.factbox .row { display: contents; }
.factbox dt,
.factbox dd {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  overflow-wrap: anywhere;
}
.factbox dd { margin: 0; }

@media (max-width: 560px) {
  .factbox dl { grid-template-columns: minmax(0, 1fr); }
  .factbox dt { border-bottom: 0; padding-bottom: 0; font-size: 12px; letter-spacing: .02em; }
  .factbox dd { padding-top: 2px; font-size: 15px; }
}

/* ------------------------------------------------------------- the contents */

/* On a narrow screen the contents panel is the FIRST block, not the last.
   In the source it is the last child of .article-grid, which put it after
   113,000 px of Chess on a phone. Order fixes it without touching the DOM. */
@media (max-width: 1100px) {
  .article-grid,
  #main .article-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .article-grid > .panel,
  .panel.panel-wide {
    grid-column: 1;
    order: 0;
  }
  #main .article-grid > .toc-rail,
  .article-grid.rail-open > .toc-rail {
    grid-column: 1;
    order: -1;
    position: static;
    max-height: none;
    overflow: visible;
  }
  .article-grid > .toc-rail .toc {
    max-height: 44vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* --------------------------------------------------------------- a wide page */

@media (min-width: 1600px) {
  :root { --shell: 1280px; --toc-w: 300px; }
  .art-body > p,
  .art-body > ul,
  .art-body > ol,
  .prose > p {
    max-width: 66ch;
  }
}

/* a 1280 laptop: the rail gives up 40 px before the prose does */
@media (max-width: 1400px) {
  :root { --toc-w: 260px; --rail-gap: 26px; }
}

/* a very wide page: the shell stops growing, and the gutters grow instead,
   which is what keeps a 2560 px monitor readable */
@media (min-width: 1800px) {
  :root { --shell: 1320px; }
  .wrap { padding-inline: 48px; }
}


/* ── the reading column on a narrow screen ───────────────────────────────
   The panel kept its 760px cap and the grid kept its two columns below the
   rail breakpoint, so at 390px the text was 760px wide inside a 390px
   viewport and the overflow guard simply cut the right-hand end off every
   line. Measured before: panel 760px in a 390px window, list items 680px.
   One column, full width, no cap. */

#main .article-grid,
.article-grid {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 1100px) {
  #main .article-grid { grid-template-columns: minmax(0, 1fr); }
  .article-grid > .panel.panel-wide,
  #main .article-grid > .panel,
  .panel.panel-wide {
    max-width: 100%;
    width: 100%;
    margin-inline: 0;
  }
  .article-grid > .toc-rail { grid-column: 1; }
}

/* Nothing inside the article may be wider than the column it sits in. */
.art-body, .art-body * { max-width: 100%; }
.art-body .table-scroll, .art-body table { max-width: 100%; }

/* ── a wide table scrolls inside the column, and only inside it ──────────
   The chessboard is ten fixed-width cells wide (1158 px of table) and was
   drawn straight through the panel edge on a phone: the board, its thumbinner
   and its scroll box all measured wider than the 358 px column. Each of them
   is now pinned to the column and the table scrolls within. */
.art-body .chessboard,
.prose .chessboard,
.art-body .chessboard .thumbinner,
.prose .chessboard .thumbinner,
.art-body .chessboard .center,
.prose .chessboard .center {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
}
.art-body .chessboard .table-scroll,
.prose .chessboard .table-scroll {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.art-body .table-scroll,
.prose .table-scroll { max-width: 100% !important; min-width: 0; }
.art-body table,
.prose table { max-width: none; }

/* ── the reading column is centred on the window, on every device ────────
   Measured before this fix: at 1280 the panel ran x=118..878, 142 px left of
   the middle; at 1600 it was 184 px out. The cause was the grid: the contents
   rail owned a real second column on the right, so the prose was pushed into
   the left-hand column and could never be centred, however wide the window.

   A grid cannot centre one item while a second item sits in the flow beside
   it, so the reading view is a single centred column again — the panel and
   the contents rail are both capped at the same reading width and centred,
   and the rail follows the article instead of flanking it. The text is then
   exactly centred at 320, 390, 768, 1280 and 1600, which is the thing the
   reader asked for, and nothing can push the page sideways. */
.article-grid,
#main .article-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  grid-template-columns: none;
  width: 100%;
}

.article-grid > .panel,
.article-grid > .panel.panel-wide,
#main .article-grid > .panel,
.panel.panel-wide {
  width: 100%;
  max-width: min(var(--im-article-panel-width, 760px), 100%);
  margin-inline: auto;
  flex: 0 1 auto;
  order: 0;
}

.article-grid > .toc-rail,
#main .article-grid > .toc-rail {
  width: 100%;
  max-width: min(var(--im-article-panel-width, 760px), 100%);
  margin-inline: auto;
  position: static;
  max-height: none;
  overflow: visible;
  order: -1;
  flex: 0 1 auto;
}
.article-grid > .toc-rail .toc {
  max-height: none;
  overflow: visible;
}

/* ── mobile.css ── */
/* ==========================================================================
   Veridell — the phone
   --------------------------------------------------------------------------
   What a site has to get right on a phone, and what this one did not.

   The measured starting point (390 x 844, Chromium, touch emulation):

     · the article page had NO navigation at all — the five header links were
       display:none below 860 px and no bottom bar existed on those pages, so
       the only way out of a 113,000 px article was the brand mark
     · the contents panel came last in the document, at y = 113,051 px
     · the fact box clipped its values mid-word at 320 px
     · 20 interactive controls were under 40 x 40 px
     · 14 pieces of text were under 14 px
     · the search field broke into three stacked rows inside a 180 px box
     · a fixed full-screen grain layer blended on every scroll frame
     · the floating "Ask AI" button sat on top of the bottom bar

   The rules below are the standard mobile checklist, applied to this tree:

     1. one thumb-reachable navigation, on every page, always visible
     2. 44 px minimum targets (WCAG 2.5.5 / platform guidelines)
     3. 16 px minimum on every field, or iOS zooms the page on focus
     4. safe-area insets, so nothing hides under a home indicator
     5. content first: no fixed decoration over text, no layout shift
     6. one column, 12-16 px gutters, and nothing that scrolls sideways
   ========================================================================== */

:root {
  --tap: 44px;
  --gutter: 14px;
}

/* ------------------------------------------------------- 1 · the bottom bar */

/* The bar exists in the app shell only. It is defined here for every page, and
   the markup is added to the static pages by the same build step. */
.bottom-nav {
  display: none;
}

@media (max-width: 1024px) {
  .bottom-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 55;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    border-top: 1px solid var(--border);
  }
  .bottom-nav a {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-height: 48px;
    padding: 7px 2px 5px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.15;
    color: var(--muted);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav a[aria-current="page"] {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent-ink);
    font-weight: 600;
  }
  .bottom-nav svg { width: 21px; height: 21px; }

  /* nothing may sit under the bar */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
  .site-foot { padding-bottom: 24px; }

  /* the floating launcher moves above the bar, and off the last button */
  .im-launcher, .chat-launcher, .fab {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
  }
}

/* the header keeps its tools but drops the five text links, which now live in
   the bar — that is what stops the header wrapping to three rows at 360 px */
@media (max-width: 860px) {
  .topnav { display: none; }
  .topbar-inner { flex-wrap: nowrap; gap: 8px; }
  .brand-word { font-size: 16px; }
}

/* A two-word wordmark is longer than the old single word: at phone widths it
   steps down once more so the brand and the header tools stay on one row. */
@media (max-width: 420px) {
  .brand-word { font-size: 14px; letter-spacing: -0.02em; }
}

/* ------------------------------------------------------- 2 · tap targets */

@media (pointer: coarse) {
  button,
  .btn,
  .btn-icon,
  .chip,
  .depth-btn,
  .mode-btn,
  .tab,
  .toc a,
  .side-link,
  .bottom-nav a {
    min-height: var(--tap);
  }
  .btn-icon { width: var(--tap); height: var(--tap); }
  /* inline links inside prose stay inline: they are read, not pressed */
  .art-body a, .prose a, .crumbs a { min-height: 0; }
}

/* a small pointer still needs a comfortable target */
.btn-icon { min-width: 36px; min-height: 36px; }

/* ------------------------------------------------------- 3 · fields */

/* 16 px on every field: below that, iOS Safari zooms the viewport on focus and
   the reader loses their place. The old rule only did this under 700 px. */
input,
select,
textarea,
.searchbar textarea,
.searchbar input {
  font-size: max(16px, 1rem);
}

@media (max-width: 700px) {
  /* the field: one row for the input, one for the tools — never three */
  .searchbar:has(> .composer-tools) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 10px 8px 14px;
    border-radius: 18px;
  }
  .searchbar:has(> .composer-tools) > textarea {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
    padding: 8px 0 4px;
  }
  .searchbar:has(> .composer-tools) > .composer-tools {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
  }
  .searchbar:has(> .composer-tools) > .composer-tools > .mode {
    order: 1;
    margin-right: auto;
  }
  .searchbar:has(> .composer-tools) > .composer-tools > button[type="submit"] {
    order: 2;
    min-height: 42px;
    padding: 0 18px;
  }
  .searchbar:has(> .composer-tools) > .composer-tools > .btn-icon { order: 0; }

  .mode { padding: 3px; }
  .mode-btn { padding: 0 10px; font-size: 12.5px; }
}

/* ------------------------------------------------------- 4 · safe areas */

/* the chat dock and any sticky footer must clear a home indicator */
.dock,
.composer-dock {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.topbar {
  padding-top: env(safe-area-inset-top, 0px);
}
/* landscape on a notched phone */
@media (orientation: landscape) and (max-height: 500px) {
  .bottom-nav { padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
  .bottom-nav a { min-height: 40px; font-size: 10px; }
  .bottom-nav svg { width: 18px; height: 18px; }
}

/* ------------------------------------------------------- 5 · decoration */

/* The grain is a fixed, full-viewport SVG turbulence layer with a blend mode.
   On a phone it is a per-frame composite over the whole screen for a texture
   nobody can see at 390 px. It goes. */
@media (max-width: 700px) {
  .grain { display: none; }
  body::after { display: none; }      /* the 56 px grid overlay, same reason */
  body::before { filter: none; }      /* a 18 px blur of four gradients */
}

/* ------------------------------------------------------- 6 · rhythm */

@media (max-width: 700px) {
  :root { --gutter: 14px; }

  .wrap,
  [data-view="article"] .wrap,
  [data-view="ask"] .wrap {
    padding-inline: var(--gutter);
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  .panel,
  .panel.panel-wide,
  .article-grid > .panel {
    padding: 18px 16px 22px;
    border-radius: 16px;
  }

  /* headings: one step down, and never clipped */
  .article-title, .article-head h1 {
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.14;
    max-width: 100%;
  }
  .article-sub { font-size: 17px; line-height: 1.62; }
  .lead-figure img, .art-figure img { max-height: 240px; }
  .art-body h2 { font-size: 22px; line-height: 1.25; }
  .art-body h3 { font-size: 18px; }

  .art-body > p,
  .art-body > ul,
  .art-body > ol,
  .prose > p { max-width: 100%; }

  /* the action row: two per line, not five rows of one */
  .article-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .article-actions .btn { width: 100%; min-height: 44px; font-size: 14px; }
  .article-actions .btn:first-child { grid-column: 1 / -1; }

  /* the hero: shorter, so the field is on the first screen */
  .dash-hero { padding: 20px 16px 18px; margin-top: 8px; border-radius: 18px; }
  .dash-hero h1 { font-size: clamp(26px, 7.4vw, 34px); }
  .dash-hero > p { font-size: 15px; margin-bottom: 16px; }
  .dash-hero-badge { font-size: 10.5px; padding: 6px 10px; }

  /* example chips: a scroll row instead of three full-width pills */
  .example-prompts {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .example-prompts li { flex: 0 0 auto; scroll-snap-align: start; }
  .example-prompts button { white-space: nowrap; }

  /* long code and tables never push the page sideways */
  pre { overflow-x: auto; }
  .art-body .table-scroll { margin-inline: 0; }

  /* the contents panel: compact, scrollable, first */
  .toc-rail .toc { max-height: 40vh; overflow-y: auto; }

  /* a footer that is not 400 px of links */
  .site-foot { padding-top: 24px; }
  .site-foot .foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
}

/* very small phones: 320 px is still a supported width */
@media (max-width: 360px) {
  :root { --gutter: 12px; }
  .article-title, .article-head h1 { font-size: 26px; }
  .panel, .panel.panel-wide, .article-grid > .panel { padding: 14px 12px 18px; }
  .article-actions { grid-template-columns: 1fr; }
  .bottom-nav a { font-size: 10px; }
}

/* tablets: two columns are available, use one column of text plus the rail */
@media (min-width: 701px) and (max-width: 1100px) {
  .wrap, [data-view="article"] .wrap { padding-inline: 24px; }
  .article-grid { grid-template-columns: minmax(0, 1fr); }
  .article-grid > .toc-rail { order: -1; position: static; max-height: none; }
  .article-grid > .toc-rail .toc { max-height: 30vh; overflow-y: auto; }
}

/* landscape phones: the bar is thin, the content is not */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  .dash-hero { padding: 14px 16px; }
  .dash-hero h1 { font-size: 24px; }
  .dash-hero-badge, .trust-strip, .hero-clock { display: none; }
}

/* ------------------------------------------------------- 7 · reduced motion */

@media (prefers-reduced-motion: reduce) {
  .bottom-nav a, .btn, .chip { transition: none !important; }
  .example-prompts { scroll-behavior: auto; }
}

/* ------------------------------------------------------- 8 · one row of tools */

/* On a phone the composer's control row was wrapping into two — the icons on
   one line, the mode switch and Send on the next — which made the field three
   rows tall in a 390 px column. The controls fit on one line at this size; they
   just have to be allowed to stay there. */
@media (max-width: 700px) {
  .searchbar:has(> .composer-tools) > .composer-tools {
    flex-wrap: nowrap;
    gap: 5px;
  }
  .searchbar:has(> .composer-tools) > .composer-tools > .mode {
    flex: 0 0 auto;
  }
  .searchbar:has(> .composer-tools) > .composer-tools > .mode .mode-btn {
    padding: 0 8px;
    font-size: 12px;
    white-space: nowrap;
  }
  .searchbar:has(> .composer-tools) > .composer-tools > button[type="submit"] {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
    white-space: nowrap;
  }
  .searchbar:has(> .composer-tools) > .composer-tools > .btn-icon {
    flex: 0 0 auto;
    width: 32px; height: 32px; min-height: 32px;
  }
}

/* A broken or still-loading picture must not reserve 360 px of empty card on
   a phone; the figure collapses to the size of its caption instead. */
@media (max-width: 700px) {
  .lead-figure img, .art-figure img { max-height: 220px; }
}

/* ── polish.css ── */
/* Veridell — quiet, precise surface polish.
   A restrained iOS-inspired layer: soft translucency, clear hierarchy,
   consistent radii, tactile controls and no heavy neumorphic shadows. */

:root {
  --polish-radius-card: 24px;
  --polish-radius-control: 20px;
  --polish-shadow: 0 8px 28px color-mix(in srgb, var(--text) 7%, transparent);
  --polish-shadow-hover: 0 14px 36px color-mix(in srgb, var(--text) 11%, transparent);
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.topbar {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(155%) blur(18px);
  backdrop-filter: saturate(155%) blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.dash-hero {
  border-radius: 30px;
  border: 1px solid color-mix(in srgb, var(--border-2) 82%, transparent);
  box-shadow: var(--polish-shadow);
  overflow: visible;
}

.searchbar:has(> .composer-tools) {
  border: 1px solid var(--border-2);
  border-radius: 26px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--text) 6%, transparent);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.searchbar:has(> .composer-tools):focus-within {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border-2));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent), var(--polish-shadow);
}

.searchbar:has(> .composer-tools) > textarea {
  min-height: 52px;
  line-height: 1.55;
  font-size: 16px;
  resize: vertical;
}

.searchbar:has(> .composer-tools) > .composer-tools > button[type="submit"] {
  border-radius: 999px;
  min-height: 44px;
}

.suggest {
  border-radius: 20px;
  border: 1px solid var(--border-2);
  box-shadow: 0 18px 44px color-mix(in srgb, #000 17%, transparent);
  padding: 5px;
}

.suggest-item {
  border-radius: 13px;
  border-bottom: 0;
  min-height: 54px;
  align-items: center;
}

.suggest-item.active,
.suggest-item:hover {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.card,
.topic-card,
.answer-card,
.aotd,
.src-group,
.credit-maker,
.credit-owner {
  border-radius: var(--polish-radius-card);
  box-shadow: var(--polish-shadow);
}

.card,
.topic-card,
.credit-card,
.src-group {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

@media (hover: hover) {
  .card:hover,
  .topic-card:hover,
  .credit-card:hover,
  .src-group:hover {
    box-shadow: var(--polish-shadow-hover);
  }
}

.card-thumb {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
}

.card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.aotd {
  border-radius: 26px;
  box-shadow: var(--polish-shadow);
}

.aotd-media img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface-2);
}

.aotd-body { padding: clamp(18px, 3vw, 30px); }

.btn,
.btn-primary,
.btn-icon,
.mode-btn,
.depth-btn,
.chip,
.tab {
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.btn,
.btn-primary { border-radius: 999px; }

button:focus-visible,
a:focus-visible,
textarea:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 3px;
}

/* Consistent image sizing; the app-level error handler swaps failed media
   for a local placeholder and keeps provider avatars on their initials. */
img.image-fallback {
  object-fit: cover;
  background: var(--surface-2);
}

/* Credits: logo-led identities rather than text-only contributor rows. */
.src-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  margin: 0 0 10px;
}

.src-brand h3 { margin: 0; }
.src-brand-mark,
.credit-person-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 13%, var(--surface-2));
  color: var(--text);
  font-size: 11px;
  font-weight: 750;
}

.src-brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}

.src-brand-mark img,
.credit-person-avatar img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
  background: var(--surface);
}

.src-brand-initials,
.credit-person-initials { position: relative; z-index: 0; }

.credit-person-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.credit-person-avatar img { object-fit: cover; padding: 0; }

.credit-tile.has-logo { position: relative; }
.credit-tile.has-logo .credit-logo-initials {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.credit-tile.has-logo img {
  position: absolute;
  inset: 5px;
  z-index: 1;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
}

.credit-people li {
  grid-template-columns: 42px minmax(120px, 1.1fr) minmax(0, 2fr) auto;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  box-shadow: none;
}

.credit-person-name { line-height: 1.35; }

.credit-avatar img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 620px) {
  .credit-people li { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .credit-person-role { grid-column: 2 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* References are evidence, not teaser copy: keep every citation intact. */
.reference-list li { overflow-wrap: anywhere; word-break: normal; }

/* ── design-system.css ── */
/* Veridell Design System 1.0 — shared tokens and restrained multimorphism.
   Rule of use: glass for navigation/chrome, clay for a few expressive feature
   surfaces, soft inset depth for controls, and calm flat surfaces for reading. */
:root {
  --im-bg: #f3f6f2;
  --im-surface: #ffffff;
  --im-surface-2: #eaf0eb;
  --im-text: #17251f;
  --im-muted: #52645a;
  --im-faint: #64756b;
  --im-border: #d5e0d8;
  --im-border-strong: #bdcdc2;
  --im-accent: #176b4c;
  --im-accent-soft: #e0f1e8;
  --im-warm: #a65f32;
  --im-shadow-sm: 0 2px 8px rgba(20, 48, 35, .06);
  --im-shadow: 0 12px 32px -20px rgba(20, 48, 35, .24), 0 2px 6px rgba(20, 48, 35, .05);
  --im-shadow-lg: 0 24px 60px -28px rgba(20, 48, 35, .32);
  --im-clay-shadow: 8px 8px 20px rgba(26, 56, 40, .09), -7px -7px 18px rgba(255, 255, 255, .88);
  --im-inset-shadow: inset 2px 2px 6px rgba(26, 56, 40, .08), inset -2px -2px 6px rgba(255, 255, 255, .84);
  --im-glass: rgba(250, 253, 250, .76);
  --im-glass-border: rgba(255, 255, 255, .7);
  --im-radius-sm: 12px;
  --im-radius-md: 18px;
  --im-radius-lg: 26px;
  --im-motion: cubic-bezier(.2, .7, .2, 1);
  --bg: var(--im-bg);
  --surface: var(--im-surface);
  --surface-2: var(--im-surface-2);
  --panel: var(--im-surface);
  --panel-2: var(--im-surface-2);
  --panel-soft: var(--im-surface-2);
  --text: var(--im-text);
  --ink: var(--im-text);
  --ink-2: var(--im-muted);
  --muted: var(--im-muted);
  --faint: var(--im-faint);
  --border: var(--im-border);
  --border-2: var(--im-border-strong);
  --line: var(--im-border);
  --line-2: var(--im-border-strong);
  --accent: var(--im-accent);
  --primary: var(--im-accent);
  --forest: #176b4c; --forest-ink: #176b4c; --copper: #a65f32; --copper-ink: #89502c; --sage: #c3dfce; --sand: #eaf0eb;
  --on-primary: #ffffff; --accent-2: #287b5c; --focus: var(--im-accent);
  --shadow-sm: var(--im-shadow-sm);
  --shadow: var(--im-shadow);
  --shadow-lg: var(--im-shadow-lg);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --im-bg: #0b1110;
  --im-surface: #111b18;
  --im-surface-2: #17231e;
  --im-text: #e9f0eb;
  --im-muted: #b0beb5;
  --im-faint: #9aa99f;
  --im-border: #293b32;
  --im-border-strong: #3b5145;
  --im-accent: #83d4a8;
  --im-accent-soft: #18382a;
  --im-warm: #e2a978;
  --im-shadow-sm: 0 2px 8px rgba(0, 0, 0, .24);
  --im-shadow: 0 14px 34px -20px rgba(0, 0, 0, .68), 0 2px 6px rgba(0, 0, 0, .3);
  --im-shadow-lg: 0 24px 64px -28px rgba(0, 0, 0, .78);
  --im-clay-shadow: 8px 8px 20px rgba(0, 0, 0, .34), -7px -7px 18px rgba(255, 255, 255, .025);
  --im-inset-shadow: inset 2px 2px 7px rgba(0, 0, 0, .3), inset -2px -2px 7px rgba(255, 255, 255, .025);
  --im-glass: rgba(13, 22, 18, .76);
  --im-glass-border: rgba(255, 255, 255, .08);
  --bg: var(--im-bg); --surface: var(--im-surface); --surface-2: var(--im-surface-2);
  --panel: var(--im-surface); --panel-2: var(--im-surface-2); --panel-soft: var(--im-surface-2);
  --text: var(--im-text); --ink: var(--im-text); --ink-2: var(--im-muted); --muted: var(--im-muted); --faint: var(--im-faint);
  --border: var(--im-border); --border-2: var(--im-border-strong); --line: var(--im-border); --line-2: var(--im-border-strong);
  --accent: var(--im-accent); --primary: var(--im-accent);
  --forest: #83d4a8; --forest-ink: #a8e6c1; --copper: #e2a978; --copper-ink: #efb98b; --sage: #a8d9b9; --sand: #17231e;
  --on-primary: #0b1110; --accent-2: #a5dfbb; --focus: var(--im-accent);
  --shadow-sm: var(--im-shadow-sm); --shadow: var(--im-shadow); --shadow-lg: var(--im-shadow-lg);
  --rail: #0d1713; --line: var(--im-border); --line-2: var(--im-border-strong);
  --ink-2: var(--im-muted); --brass: var(--im-warm); --brass-soft: #f1bd8e;
  --user: #18362a;
}
html[data-theme="light"] {
  --bg: var(--im-bg); --rail: #edf2ee; --panel: var(--im-surface); --panel-2: var(--im-surface-2);
  --line: var(--im-border); --line-2: var(--im-border-strong); --ink: var(--im-text); --ink-2: var(--im-muted);
  --muted: var(--im-muted); --accent: var(--im-accent); --brass: var(--im-warm); --brass-soft: #89502c;
  --user: #e2f0e7; --shadow: var(--im-shadow);
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="light"] #research-app,
html[data-theme="dark"] #research-app {
  --bg: var(--im-bg); --panel: var(--im-surface); --panel-soft: var(--im-surface-2);
  --line: var(--im-border); --line-strong: var(--im-border-strong);
  --text: var(--im-text); --muted: var(--im-muted); --muted-2: var(--im-faint);
  --accent: var(--im-accent); --accent-deep: var(--im-accent); --accent-soft: var(--im-accent-soft);
  --teal: var(--im-accent); --green: var(--im-accent); --shadow: var(--im-shadow);
  --lift: var(--im-clay-shadow); --lift-sm: var(--im-shadow-sm); --press: var(--im-inset-shadow);
  --grad: linear-gradient(125deg, var(--im-accent), #3e9a75);
}
html[data-theme="dark"] #research-app { --green-soft: #193529; --teal-soft: #18352e; --violet-soft: #25251f; --orange-soft: #34271c; }
html, body { background-color: var(--im-bg); color: var(--im-text); }
body { background-image: radial-gradient(70rem 35rem at 4% -12%, color-mix(in srgb, var(--im-accent) 8%, transparent), transparent 62%), radial-gradient(55rem 30rem at 96% 0%, color-mix(in srgb, var(--im-warm) 6%, transparent), transparent 66%); }

/* Glassmorphism is reserved for persistent controls, never long-form text. */
.topbar, .top, .chat-header, .topbar-actions, .suggest, .lang-menu, .im-theme-toggle {
  background: var(--im-glass);
  border-color: var(--im-glass-border);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
}
.topbar { border-bottom: 1px solid var(--im-border); box-shadow: 0 4px 24px rgba(10, 30, 20, .035); }
@supports not ((backdrop-filter: blur(1px))) {
  .topbar, .top, .chat-header, .topbar-actions, .suggest, .lang-menu, .im-theme-toggle { background: var(--im-surface); }
}
[data-comfort="opaque"] .topbar,
[data-comfort="opaque"] .top,
[data-comfort="opaque"] .chat-header,
[data-comfort="opaque"] .topbar-actions { background: var(--im-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Calm, tactile fields: subtle inset depth, with an unmistakable focus ring. */
.searchbar, .search-box, .search-box input, .composer, .chat-composer, #prompt {
  border-radius: var(--im-radius-md);
}
.searchbar, .search-box, .chat-composer {
  box-shadow: var(--im-inset-shadow);
  border: 1px solid var(--im-border-strong);
  background: var(--im-surface);
}
.searchbar:focus-within, .search-box:focus-within, .chat-composer:focus-within {
  border-color: var(--im-accent);
  box-shadow: var(--im-inset-shadow), 0 0 0 3px color-mix(in srgb, var(--im-accent) 23%, transparent);
}

/* Claymorphism: one or two expressive areas per screen, not every card. */
.dash-hero, .welcome-block, .aotd, .empty .empty-orb, .chat-empty-card {
  border: 1px solid var(--im-border);
  border-radius: var(--im-radius-lg);
  box-shadow: var(--im-clay-shadow);
}
.suggestion-card, .card, .source-card, .topic-card, .content-option, .query-summary {
  border-radius: var(--im-radius-md);
  transition: border-color .2s var(--im-motion), box-shadow .2s var(--im-motion), transform .2s var(--im-motion);
}
.card, .source-card, .topic-card { box-shadow: var(--im-shadow-sm); }
@media (hover:hover) {
  .card:hover, .source-card:hover, .topic-card:hover { box-shadow: var(--im-shadow); transform: translateY(-2px); }
}

/* Reading surfaces stay opaque and quiet for comfortable long sessions. */
.panel, .article-panel, .answer-card, .factbox, .prose, .thread, .message-content {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.prose { line-height: 1.78; }
.prose p, .prose li { max-width: 72ch; }

/* Consistent controls and accessible focus/target sizing. */
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 2px solid var(--im-accent); outline-offset: 3px; }
/* A skip-link target and a route change focus #main programmatically. That is
   not keyboard navigation, so it must not paint a ring around the whole page. */
#main:focus, #main:focus-visible, main:focus-visible, [tabindex="-1"]:focus-visible { outline: none !important; }
.im-theme-toggle {
  display: inline-grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px;
  margin-inline-start: 8px; border: 1px solid var(--im-border); border-radius: 14px;
  color: var(--im-text); box-shadow: var(--im-shadow-sm); cursor: pointer;
  transition: transform .18s var(--im-motion), box-shadow .18s var(--im-motion), border-color .18s;
  z-index: 120;
}
.im-theme-toggle svg { width: 19px; height: 19px; display: block; }
/* The shared control is appended to whatever header a page has. Keep it on the
   header row instead of letting it wrap onto a second line of its own. */
.topbar-inner > .im-theme-toggle { flex: 0 0 auto; margin-inline-start: 10px; }
@media (min-width: 861px) { .topbar-inner { flex-wrap: nowrap; } }
.im-theme-toggle:hover { transform: translateY(-1px); border-color: var(--im-accent); box-shadow: var(--im-shadow); }
.im-theme-toggle:active { transform: translateY(0); }
body > .im-theme-toggle { position: fixed; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }
.bottom-nav { background: var(--im-glass); border-top: 1px solid var(--im-border); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
::selection { background: color-mix(in srgb, var(--im-accent) 26%, transparent); }

@media (max-width: 720px) {
  .topbar-inner { gap: 8px; }
  .dash-hero, .welcome-block, .aotd { border-radius: 22px; }
  .im-theme-toggle { width: 44px; height: 44px; flex-basis: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ── amigo-ui.css ── */
/* Amigo UI refinement: shared article, card, gallery and navigation rules.
   Tokens remain owned by design-system.css; this sheet only composes them. */
:root {
  --amigo-radius-sm: 12px;
  --amigo-radius-md: 18px;
  --amigo-radius-lg: 24px;
  --amigo-motion: cubic-bezier(.2,.75,.25,1);
}

/* Article media: turn source galleries into a responsive, balanced grid. */
.art-body ul.gallery,
.art-body .gallery.mw-gallery-traditional,
.art-body .mw-gallery-traditional,
.art-body .mw-gallery-packed,
.art-body .article-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
  align-items: start;
  gap: clamp(10px, 2vw, 18px);
  width: 100%;
  max-width: 100%;
  margin: 22px 0 !important;
  padding: 0 !important;
  list-style: none !important;
  columns: initial !important;
}
.art-body .gallerybox,
.art-body .gallery > li,
.art-body .article-gallery-grid > * {
  float: none !important;
  width: auto !important;
  min-width: 0;
  max-width: 100%;
  margin: 0 !important;
  break-inside: avoid;
}
.art-body .gallerybox .thumb,
.art-body .gallery > li .thumb {
  display: grid;
  place-items: center;
  width: 100% !important;
  min-height: 150px;
  margin: 0 !important;
  padding: 8px;
  overflow: hidden;
  border: 1px solid var(--im-border);
  border-radius: var(--amigo-radius-md);
  background: var(--im-surface-2);
}
.art-body .gallerybox .thumb img,
.art-body .gallery > li img,
.art-body .article-gallery-grid img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 260px;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 10px;
}
.art-body .gallerytext,
.art-body .gallerybox .gallerytext {
  padding: 8px 3px 2px;
  color: var(--im-muted);
  font-size: .88rem;
  line-height: 1.5;
  text-align: center;
}
.art-body .gallerybox .gallerytext p { margin: 0; max-width: none; }
@media (min-width: 760px) {
  .art-body ul.gallery,
  .art-body .gallery.mw-gallery-traditional,
  .art-body .mw-gallery-traditional,
  .art-body .mw-gallery-packed,
  .art-body .article-gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  }
}

/* Shared media and cards should align to a single edge and never overflow. */
.card, .source-card, .topic-card, .src-card, .suggestion-card,
.article-panel, .factbox, .panel-wide {
  border-radius: var(--amigo-radius-md);
}
img, video, iframe { max-width: 100%; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
:where(button, a, input, textarea, select):focus-visible {
  outline: 2px solid var(--im-accent);
  outline-offset: 3px;
}

/* One canonical five-destination phone bar, with an even rhythm. */
.bottom-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 3px;
  padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right));
}
.bottom-nav a {
  min-width: 0;
  min-height: 48px;
  align-content: center;
  justify-items: center;
  gap: 4px;
  border-radius: 13px;
  font-weight: 550;
  transition: color .18s var(--amigo-motion), background-color .18s var(--amigo-motion);
}
.bottom-nav a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-nav a[aria-current="page"] { color: var(--im-accent); background: var(--im-accent-soft); }
@media (max-width: 360px) {
  .bottom-nav a { font-size: 9px; }
  .bottom-nav svg { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav a, .card, .source-card, .topic-card { transition: none !important; }
}

/* ── preferences.css ── */
/* Veridell cross-route reading and surface preferences. Keep prose surfaces
   flat and opaque; reserve morphic effects for controls and focal surfaces. */
:root {
  --im-article-panel-width: 760px;
  --im-chat-column-width: 900px;
  --im-reading-text-scale: 1;
}
html[data-reading-width="compact"] {
  --im-article-panel-width: 660px;
  --im-chat-column-width: 760px;
}
html[data-reading-width="comfortable"] {
  --im-article-panel-width: 760px;
  --im-chat-column-width: 900px;
}
html[data-reading-width="wide"] {
  --im-article-panel-width: 980px;
  --im-chat-column-width: 1080px;
}
html[data-reading-scale="large"] { --im-reading-text-scale: 1.1; }
html[data-reading-scale="larger"] { --im-reading-text-scale: 1.22; }

/* Accessible accent families. Each foreground token clears WCAG AA contrast
   against the default light and dark page surfaces; soft fills remain subtle. */
html[data-accent="ocean"] {
  --im-accent: #175ba6; --im-accent-soft: #e3eefb;
  --forest: #175ba6; --forest-ink: #175ba6; --accent: var(--im-accent);
  --primary: var(--im-accent); --focus: var(--im-accent); --accent-2: #286db8;
}
html[data-theme="dark"][data-accent="ocean"] {
  --im-accent: #83baff; --im-accent-soft: #193753;
  --forest: #83baff; --forest-ink: #acd1ff; --accent-2: #acd1ff;
}
html[data-accent="violet"] {
  --im-accent: #65409b; --im-accent-soft: #eee7f8;
  --forest: #65409b; --forest-ink: #65409b; --accent: var(--im-accent);
  --primary: var(--im-accent); --focus: var(--im-accent); --accent-2: #7652aa;
}
html[data-theme="dark"][data-accent="violet"] {
  --im-accent: #c3a4ff; --im-accent-soft: #30234b;
  --forest: #c3a4ff; --forest-ink: #ddcaff; --accent-2: #ddcaff;
}
html[data-accent="amber"] {
  --im-accent: #94500e; --im-accent-soft: #f7eadb;
  --forest: #94500e; --forest-ink: #94500e; --accent: var(--im-accent);
  --primary: var(--im-accent); --focus: var(--im-accent); --accent-2: #a66018;
}
html[data-theme="dark"][data-accent="amber"] {
  --im-accent: #ffb979; --im-accent-soft: #3d2a1a;
  --forest: #ffb979; --forest-ink: #ffd2a8; --accent-2: #ffd2a8;
}

/* Article and chat content respond to a preference, not a fixed desktop width. */
.article-grid > .panel,
.panel.panel-wide,
.article-grid > .panel.panel-wide {
  max-width: min(var(--im-article-panel-width), 100%);
}
/* The article width preference must control both the facts and the prose.
   Older view rules capped .prose independently, creating a narrow text column
   inside a wider facts card. Keep direct article content aligned to the panel. */
[data-view="article"] .panel.panel-wide > .art-body,
[data-view="article"] .panel.panel-wide > .prose,
.panel.panel-wide > .art-body {
  width: 100%;
  max-width: 100%;
}
.art-body,
.prose,
body.amigo-chat .a-body .md {
  font-size: calc(1em * var(--im-reading-text-scale));
}
body.amigo-chat .stage,
body.amigo-chat .thread {
  max-width: var(--im-chat-column-width);
}
body.amigo-chat .stage { width: min(calc(100% - 64px), var(--im-chat-column-width)); }
body.amigo-chat .thread { width: 100%; }

/* Glassmorphism is deliberately restricted to persistent navigation and
   floating controls, where transparency communicates layering. */
html[data-surface-style="glass"] .topbar,
html[data-surface-style="glass"] .top,
html[data-surface-style="glass"] .rail,
html[data-surface-style="glass"] .dock,
html[data-surface-style="glass"] .bottom-nav,
html[data-surface-style="glass"] .im-preferences-panel {
  background: color-mix(in srgb, var(--im-surface) 84%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
}

/* Neumorphism: soft raised controls and inset input wells, never body copy. */
html[data-surface-style="soft"] .composer,
html[data-surface-style="soft"] .chat-composer,
html[data-surface-style="soft"] .searchbar,
html[data-surface-style="soft"] .rail-new,
html[data-surface-style="soft"] .im-preferences-panel {
  border-color: transparent;
  box-shadow: var(--im-clay-shadow), inset 1px 1px 2px color-mix(in srgb, var(--im-text) 5%, transparent);
}
html[data-surface-style="soft"] .composer:focus-within,
html[data-surface-style="soft"] .chat-composer:focus-within,
html[data-surface-style="soft"] .searchbar:focus-within {
  box-shadow: var(--im-inset-shadow), 0 0 0 3px color-mix(in srgb, var(--im-accent) 24%, transparent);
}

/* Claymorphism is a focal treatment, not a blanket card style. */
html[data-surface-style="clay"] .empty-mark,
html[data-surface-style="clay"] .dash-hero,
html[data-surface-style="clay"] .welcome-block,
html[data-surface-style="clay"] .aotd,
html[data-surface-style="clay"] .composer,
html[data-surface-style="clay"] .im-preferences-panel {
  border-color: color-mix(in srgb, var(--im-accent) 22%, var(--im-border));
  box-shadow: var(--im-clay-shadow), 0 16px 38px -28px color-mix(in srgb, var(--im-accent) 35%, transparent);
}
html[data-surface-style="clay"] .starters button,
html[data-surface-style="clay"] .suggestion-card {
  box-shadow: var(--im-shadow);
}

/* A user who requests reduced transparency always receives opaque controls. */
@media (prefers-reduced-transparency: reduce) {
  .topbar, .top, .rail, .dock, .bottom-nav, .im-preferences-panel {
    background: var(--im-surface) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Preferences control and panel. */
.im-preferences-toggle { margin-inline-start: 6px; }
.im-preferences-panel {
  position: fixed;
  z-index: 12000;
  top: max(72px, calc(env(safe-area-inset-top) + 64px));
  right: max(14px, env(safe-area-inset-right));
  width: min(360px, calc(100vw - 24px));
  padding: 18px;
  border: 1px solid var(--im-border-strong);
  border-radius: 20px;
  background: var(--im-surface);
  color: var(--im-text);
  box-shadow: var(--im-shadow-lg);
}
.im-preferences-panel[hidden] { display: none !important; }
.im-preferences-panel h2 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 720;
  letter-spacing: -.02em;
}
.im-pref-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(132px, 46%);
  gap: 12px;
  align-items: center;
  min-height: 48px;
  padding: 7px 0;
  border-top: 1px solid var(--im-border);
  color: var(--im-text);
  font-size: 13px;
}
.im-pref-row select {
  width: 100%;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--im-border-strong);
  border-radius: 10px;
  background: var(--im-surface-2);
  color: var(--im-text);
  font: inherit;
}
.im-pref-note {
  margin: 11px 0 12px;
  color: var(--im-muted);
  font-size: 11px;
  line-height: 1.55;
}
.im-pref-close {
  min-height: 40px;
  width: 100%;
  border: 1px solid var(--im-border);
  border-radius: 11px;
  background: var(--im-accent-soft);
  color: var(--im-text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.im-pref-close:hover { border-color: var(--im-accent); }
.im-preferences-panel :focus-visible { outline: 2px solid var(--im-accent); outline-offset: 3px; }

@media (max-width: 600px) {
  .im-preferences-panel {
    top: auto;
    right: 10px;
    bottom: max(80px, calc(env(safe-area-inset-bottom) + 72px));
    width: min(360px, calc(100vw - 20px));
    max-height: min(72dvh, 520px);
    overflow-y: auto;
    border-radius: 20px;
  }
  body.amigo-chat .stage { width: calc(100% - 28px); }
}

/* Honour operating-system contrast settings and Windows High Contrast mode. */
@media (prefers-contrast: more) {
  :root {
    --im-muted: #3e4d44;
    --im-faint: #425047;
    --im-border: #87978d;
    --im-border-strong: #52645a;
  }
  html[data-theme="dark"] {
    --im-muted: #d0dbd3;
    --im-faint: #c5d1c9;
    --im-border: #71877a;
    --im-border-strong: #9aada1;
  }
  button, input, textarea, select, a { text-decoration-thickness: max(1px, .08em); }
}
@media (forced-colors: active) {
  .im-preferences-panel, .im-pref-row select, .composer, .rail-search,
  .rail-new, .a, .src-card, .a-actions button {
    border: 1px solid ButtonText;
    box-shadow: none;
    forced-color-adjust: auto;
  }
  .im-preferences-panel, .composer, .rail-search, .a, .src-card {
    background: Canvas;
    color: CanvasText;
  }
}

/* ── the chess board cannot widen the page ────────────────────────────────
   A Wikimedia chessboard is a ten-cell table whose cells are fixed sizes, so
   its min-content width is ~361 px. On a 390 px phone it overflowed the
   326 px reading column and was drawn straight over the panel edge. The board
   and every wrapper between it and the column are pinned to the column here,
   and the board itself scrolls sideways inside its own box. This lives in the
   last sheet of the cascade so nothing earlier can put the width back. */
.art-body .chessboard,
.prose .chessboard,
.art-body .chessboard .center,
.prose .chessboard .center,
.art-body .chessboard .thumbinner,
.prose .chessboard .thumbinner,
.art-body .chessboard .table-scroll,
.prose .chessboard .table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  float: none;
}
.art-body .chessboard .table-scroll,
.prose .chessboard .table-scroll {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ══════════════════════════════════════════════════════════════════════════
   ONE CONTENT WIDTH, ON EVERY ROUTE
   ══════════════════════════════════════════════════════════════════════════
   Measured before this block, at a 1280 window: the home card was 824 px, the
   article panel 760 px, the chat column 900 px, and the topics page 1090 px —
   four answers to the same question, so every route looked like a different
   site and the article in particular read as a narrow strip beside everything
   else. This is now the only width rule the layout obeys: one token, applied
   to every main content container, so the article spreads exactly as far as
   the home page, the chat and the static pages do.

   --content-w is the reading width. It is capped so a 17 px line never runs
   past a comfortable measure, and it is subtracted from the viewport with the
   same gutters everywhere rather than each route inventing its own padding. */
:root { --content-w: min(952px, 100%); }

/* the single-page app, its article view and every static page */
.wrap,
.wrap-narrow,
#main.wrap,
main#main,
[data-view="article"] .wrap,
[data-view="ask"] .wrap {
  width: 100%;
  max-width: var(--content-w);
  margin-inline: auto;
  padding-inline: clamp(16px, 3.2vw, 44px);
}

/* the home page's content column, and the hero inside it */
.dash,
.dash-hero,
.site-intro .wrap-narrow,
.aotd,
.welcome-block {
  width: 100%;
  max-width: var(--content-w);
  margin-inline: auto;
}
/* The home column is already inside the shell's gutters: adding a second set
   made the home card 788 px while the article panel beside it was 870 px in
   the same 952 px column. The padding belongs to the shell, once. */
.dash { padding-inline: 0; }
.dash-hero { max-width: 100%; }

/* the article: the panel is the column, and it is the site's column */
.article-grid,
#main .article-grid {
  width: 100%;
  max-width: var(--content-w);
  margin-inline: auto;
}
.article-grid > .panel,
.article-grid > .panel.panel-wide,
#main .article-grid > .panel,
.panel.panel-wide {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}

/* the chat: the stage and the thread sit on the same column as everything else */
body.amigo-chat .stage,
body.amigo-chat .thread,
body.amigo-chat .dock {
  width: 100%;
  max-width: var(--content-w);
  margin-inline: auto;
}
/* the chat sits inside the same gutters as every other column */
body.amigo-chat .stage,
body.amigo-chat .thread,
body.amigo-chat .dock {
  padding-inline: clamp(16px, 3.2vw, 44px);
}
body.amigo-chat .stage { width: 100%; }

/* a topic or index grid is a card list, not prose: it keeps the column but
   loses the narrow text measure */
.topics-grid, .index-grid, .grid-2, .suggestion-grid { max-width: 100%; }

/* ── the header's controls are one control, repeated ──────────────────────
   The row used to mix a 40 px circle for the two language buttons, a 42 px
   rounded square for the theme and another for preferences, and an 8 x 17 px
   squashed icon where the theme glyph should have been — three shapes and one
   broken icon in a single row. Every control is now the same 40 px shape with
   the same border, the same gap and a glyph that cannot be squashed. */
.topnav,
.topbar-actions,
.top-right {
  gap: 8px;
}
.topnav .btn-icon,
.topnav .im-theme-toggle,
.topnav .im-preferences-toggle,
.topbar-actions .btn-icon,
.topbar-actions .im-theme-toggle,
.topbar-actions .im-preferences-toggle,
/* on a phone the topnav is hidden and these two are appended straight to the
   header row, where they were still 44 px rounded squares beside 40 px pills */
.topbar-inner > .im-theme-toggle,
.topbar-inner > .im-preferences-toggle {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--im-border, var(--border-2));
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  margin-inline-start: 0;
  /* flex must not size these: one of them measured 42 px beside 40 px pills */
  flex: 0 0 40px;
  box-sizing: border-box;
}
.topnav .btn-icon:hover,
.topnav .im-theme-toggle:hover,
.topnav .im-preferences-toggle:hover,
.topbar-actions .im-theme-toggle:hover,
.topbar-actions .im-preferences-toggle:hover {
  border-color: var(--im-accent, var(--accent));
  transform: none;
  box-shadow: none;
}
/* the glyph is never allowed to shrink inside a flex row */
.topnav svg,
.topbar-actions svg,
.topbar-inner svg,
.im-theme-toggle svg,
.im-preferences-toggle svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: block;
}
@media (max-width: 700px) {
  .topnav .btn-icon,
  .topnav .im-theme-toggle,
  .topnav .im-preferences-toggle,
  .topbar-actions .btn-icon,
  .topbar-actions .im-theme-toggle,
  .topbar-actions .im-preferences-toggle,
  .topbar-inner > .im-theme-toggle,
  .topbar-inner > .im-preferences-toggle {
    width: 36px; height: 36px; min-width: 36px; min-height: 36px;
    flex: 0 0 36px;
  }
  .topnav svg, .topbar-actions svg, .topbar-inner svg { width: 17px; height: 17px; }
  .topnav, .topbar-actions, .top-right { gap: 6px; }
}

/* ── the preferences panel never covers the header it opened from ─────────
   It was pinned to a fixed 72 px from the top, which on a phone lands on top
   of the header row and reads as a broken overlay. It now hangs below the
   header, inside the viewport, and scrolls if the list is taller than the
   space it has. */
.im-preferences-panel {
  top: calc(var(--topbar-h, 62px) + 10px);
  right: max(14px, env(safe-area-inset-right));
  width: min(360px, calc(100vw - 28px));
  max-height: calc(100dvh - var(--topbar-h, 62px) - 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 600px) {
  .im-preferences-panel {
    top: calc(var(--topbar-h, 62px) + 8px);
    right: 12px;
    bottom: auto;
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100dvh - var(--topbar-h, 62px) - 84px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   AMIGO STANDS ON HIS OWN
   ══════════════════════════════════════════════════════════════════════════
   Three earlier sheets each wrapped the assistant's mark in their own clay
   or squircle card — a border, a gradient fill, a drop shadow, a 28 px radius
   and a halo ring behind it — so the character rendered inside a box and read
   as an app icon rather than a character. This is the last sheet in the
   cascade, so the box is removed once, here, and the drawing carries itself:
   the soft glow in the artwork is the only thing behind him. */
body.amigo-chat .brand .mark,
body.amigo-chat .empty-mark {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
body.amigo-chat .brand .mark {
  width: 44px; height: 44px;
  flex: none;
}
body.amigo-chat .empty-mark {
  width: 96px; height: 96px;
  margin-bottom: 18px;
}
/* the halo ring that used to sit behind the icon */
body.amigo-chat .empty-mark::after,
body.amigo-chat .brand .mark::after { content: none; }
body.amigo-chat .brand .mark img,
body.amigo-chat .empty-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--im-text) 16%, transparent));
}
@media (max-width: 600px) {
  body.amigo-chat .brand .mark { width: 38px; height: 38px; }
  body.amigo-chat .empty-mark { width: 84px; height: 84px; }
}

/* ── one focus ring, everywhere ───────────────────────────────────────────
   Several chat controls replaced the outline with a subtle background change,
   which is close to invisible on the dark rail. The token already exists; this
   makes it the single ring for every interactive element. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus, var(--im-accent));
  outline-offset: 2px;
  border-radius: 6px;
}

/* ══════════════════════════════════════════════════════════════════════════
   AMIGO, ALIVE
   ══════════════════════════════════════════════════════════════════════════
   The artwork is the delivered sheet, cleaned: the painted checkerboard is
   gone, including the gap between the legs, which the first pass left behind
   as a white patch. Because the character is a picture, it is moved as a
   whole — a float, a lean, a hop — and given a soft ground shadow that
   tightens as it rises, which is what makes the motion read as weight rather
   than a sliding image. */
.amigo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 96%;
  animation: amigo-breathe 3.6s ease-in-out infinite;
  -webkit-user-drag: none;
  user-select: none;
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--im-text, #16241d) 16%, transparent));
}

.amigo--rail { animation-duration: 4.4s; animation-delay: -1.1s; }
.amigo--launcher { animation-duration: 3s; animation-delay: -0.6s; }

@keyframes amigo-breathe {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  35%      { transform: translateY(-4.5%) scale(.985, 1.015); }
  70%      { transform: translateY(-1.5%) scale(1.01, .99); }
}

/* ── while it is working ─────────────────────────────────────────────────── */
.amigo[data-state="researching"],
.amigo[data-state="composing"] { animation: amigo-work 2.1s ease-in-out infinite; }
@keyframes amigo-work {
  0%, 100% { transform: translateY(0) rotate(-2.5deg) scale(1); }
  25%      { transform: translateY(-5%) rotate(1.5deg) scale(1.015); }
  50%      { transform: translateY(0) rotate(2.5deg) scale(1); }
  75%      { transform: translateY(-3%) rotate(-1deg) scale(1.01); }
}

.amigo-avatar.is-active::before { animation: amigo-ring 1.6s ease-out infinite; }
@keyframes amigo-ring {
  0%   { opacity: .85; transform: scale(.84); }
  70%  { opacity: 0; transform: scale(1.55); }
  100% { opacity: 0; transform: scale(1.55); }
}

.working > span:last-child::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  animation: amigo-dots 1.25s steps(1, end) infinite;
}
@keyframes amigo-dots {
  0%   { content: ""; }
  25%  { content: "·"; }
  50%  { content: "··"; }
  75%  { content: "···"; }
}

/* ── the answer landed ──────────────────────────────────────────────────── */
.amigo[data-state="success"] { animation: amigo-hop .85s cubic-bezier(.34,1.56,.64,1) 1; }
@keyframes amigo-hop {
  0%   { transform: translateY(0) scale(1, 1); }
  22%  { transform: translateY(-17%) scale(1.06, .94); }
  48%  { transform: translateY(0) scale(.93, 1.07); }
  68%  { transform: translateY(-8%) scale(1.03, .97); }
  86%  { transform: translateY(0) scale(.99, 1.01); }
  100% { transform: translateY(0) scale(1, 1); }
}

.amigo[data-state="listening"] { animation: amigo-listen 1.35s ease-in-out infinite; }
@keyframes amigo-listen {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50%      { transform: scale(1.05) rotate(2deg); }
}

.amigo[data-state="uncertain"],
.amigo[data-state="error"] {
  animation: amigo-doubt 5.2s ease-in-out infinite;
  filter: saturate(.85) brightness(.97) drop-shadow(0 6px 10px rgba(0,0,0,.12));
}
@keyframes amigo-doubt {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(1%) rotate(1deg); }
}

.amigo--welcome {
  animation: amigo-arrive .72s cubic-bezier(.2,.75,.25,1) both,
             amigo-breathe 4.2s ease-in-out .72s infinite;
}
@keyframes amigo-arrive {
  from { opacity: 0; transform: translateY(16px) scale(.84); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.a-body.revealing .md { animation: answer-reveal .42s cubic-bezier(.22,.61,.36,1) both; }
@keyframes answer-reveal {
  from { clip-path: inset(0 0 100% 0); opacity: .45; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

.src-cards > * { animation: card-rise .34s cubic-bezier(.2,.8,.2,1) both; }
.src-cards > *:nth-child(2) { animation-delay: .05s; }
.src-cards > *:nth-child(3) { animation-delay: .1s; }
.src-cards > *:nth-child(4) { animation-delay: .15s; }
@keyframes card-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.im-launcher .im-face { display: grid; place-items: center; width: 30px; height: 30px; flex: none; }
.im-launcher .amigo { width: 30px; height: 30px; }

@media (prefers-reduced-motion: reduce) {
  .amigo, .amigo--welcome, .a-body.revealing .md, .src-cards > * { animation: none !important; }
  .working > span:last-child::after { content: "…"; animation: none; }
}
/* ══════════════════════════════════════════════════════════════════════════
   THE CHAT'S CONTROLS, ON ONE GRID
   ══════════════════════════════════════════════════════════════════════════
   Measured in a browser at 1280 before this: the header row held 42 px, 42 px,
   42 px and 44 px controls with a 2 px gap between two of them and 8 px after
   the third, so the right end read as a pile rather than a row. The composer
   mixed a 44 px plus, a 38 px attach and a 44 px send, aligned to the bottom
   of a growing textarea, so the pencil sat low and looked pushed aside.

   One size, one gap, one vertical centre, equal insets at both ends. */
body.amigo-chat .top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 14px;
}
body.amigo-chat .top > * { flex: none; }
body.amigo-chat .top .top-right { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
/* the injected settings button carried its own 44 px width from an earlier
   sheet, so it sat wider than the 36 px controls beside it */
body.amigo-chat .top .top-right > *,
body.amigo-chat .top .im-theme-toggle.im-preferences-toggle {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
}
body.amigo-chat .top button,
body.amigo-chat .top .rail-toggle,
body.amigo-chat .top .im-theme-toggle,
body.amigo-chat .top .im-preferences-toggle {
  width: 40px; height: 40px; min-width: 40px; min-height: 40px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  box-sizing: border-box;
}
body.amigo-chat .top svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* the spacer keeps the title left and the tools right without a ragged edge */
body.amigo-chat .top .top-title,
body.amigo-chat .top .chat-title { margin-inline-end: auto; }
body.amigo-chat .top > :last-child { margin-inline-end: 0; }

/* the composer: every control the same size, on the same centre line */
body.amigo-chat .composer {
  align-items: center;
  gap: 8px;
  padding: 8px;
}
body.amigo-chat .composer > .plus,
body.amigo-chat .composer > .mic,
body.amigo-chat .composer > #attachBtn,
body.amigo-chat .composer > .attach,
body.amigo-chat .composer > .send,
body.amigo-chat .composer > .stop {
  width: 40px; height: 40px; min-width: 40px; min-height: 40px;
  flex: none;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  box-sizing: border-box;
  align-self: center;
}
body.amigo-chat .composer > .stop { width: auto; padding: 0 14px; border-radius: 999px; }
body.amigo-chat .composer svg { width: 18px; height: 18px; }
body.amigo-chat .composer textarea { align-self: center; padding-block: 8px; }

@media (max-width: 700px) {
  body.amigo-chat .top { gap: 6px; padding-inline: 10px; }
  body.amigo-chat .top .top-right { gap: 6px; }
  body.amigo-chat .top .top-right > *,
  body.amigo-chat .top .im-theme-toggle.im-preferences-toggle {
    width: 36px; min-width: 36px;
    height: 36px; min-height: 36px;
  }
  body.amigo-chat .top button,
  body.amigo-chat .top .rail-toggle,
  body.amigo-chat .top .im-theme-toggle,
  body.amigo-chat .top .im-preferences-toggle {
    width: 36px; height: 36px; min-width: 36px; min-height: 36px;
  }
  body.amigo-chat .top svg { width: 17px; height: 17px; }
  body.amigo-chat .composer { gap: 6px; padding: 7px; }
  body.amigo-chat .composer > .plus,
  body.amigo-chat .composer > .mic,
  body.amigo-chat .composer > #attachBtn,
  body.amigo-chat .composer > .attach,
  body.amigo-chat .composer > .send {
    width: 36px; height: 36px; min-width: 36px; min-height: 36px;
  }
  body.amigo-chat .composer svg { width: 17px; height: 17px; }
}

/* The injected settings button is sized by design-system.css at 42 px, and at
   44 px under 720 px. Those rules are classes; this is the id, so it settles
   the row at one size without touching the shared sheet. */
#im-preferences.im-theme-toggle,
#im-preferences.im-preferences-toggle {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  flex: 0 0 40px;
  margin-inline-start: 0;
  border-radius: 999px;
}
@media (max-width: 700px) {
  #im-preferences.im-theme-toggle,
  #im-preferences.im-preferences-toggle {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    flex: 0 0 36px;
  }
}

/* the "read the full article" step under a library answer */
body.amigo-chat .read-full {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 2px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--im-accent) 40%, var(--im-border));
  border-radius: 999px;
  color: var(--im-accent);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}
body.amigo-chat .read-full:hover { background: var(--im-accent-soft); }

/* ── the page-context chip ───────────────────────────────────────────────
   What the embedded panel hands to the chat: the page the reader was on. It
   is visible, it can be removed before anything is sent, and it is the only
   thing that travels from the page into the conversation. */
body.amigo-chat .page-context {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 14px;
  padding: 8px 12px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--im-accent) 28%, var(--im-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--im-accent) 8%, var(--im-surface));
  font-size: 12.5px;
  color: var(--im-muted);
}
body.amigo-chat .page-context b { color: var(--im-text); font-weight: 650; }
body.amigo-chat .page-context button {
  border: 0;
  background: none;
  color: var(--im-accent);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}
body.amigo-chat .page-context[hidden] { display: none; }

/* ── every icon sits in the middle of its circle ─────────────────────────
   Measured in the browser: the injected settings button on the main shell put
   its glyph 5 px right of the button's centre, because the shared control
   carries a margin and an inline-grid that the header row then shifts. One
   rule, applied to every icon-only control on every surface, keeps the glyph
   optically centred: no padding, no margin, no baseline offset. */
:where(.btn-icon, .im-theme-toggle, .im-preferences-toggle, .rail-toggle,
       .composer > button, .top button, .topnav .btn-icon) {
  padding: 0;
  display: inline-grid;
  place-items: center;
  place-content: center;
  line-height: 0;
  text-align: center;
}
:where(.btn-icon, .im-theme-toggle, .im-preferences-toggle, .rail-toggle,
       .composer > button, .top button, .topnav .btn-icon) > svg {
  display: block;
  margin: 0;
  flex: none;
}
#im-preferences.im-theme-toggle { margin-inline-start: 0; }


/* ── one assistant mark per answer ───────────────────────────────────────
   Every answer carried two: the real .amigo-avatar image, and a legacy
   .a::before that painted the Veridell facet behind it. Restoring a thread
   (Saved → Back, or reopening from the rail) rebuilt both, which is the
   crossed-marks the reader saw. The avatar is the one character; the legacy
   marker is removed here, in the last sheet of every bundle. */
body.amigo-chat article.a::before,
body.amigo-chat .a::before,
body.amigo-chat .a-body::before {
  content: none;
  display: none;
  background: none;
  width: 0;
  height: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   A PICTURE IN AN ANSWER
   ══════════════════════════════════════════════════════════════════════════
   The image the chat draws is content, not decoration, so it follows the
   reading-surface rule from the design notes: a solid surface, a 1 px border,
   no blur and no second shadow. The caption is the prompt that made it, in the
   same quiet type as source metadata. */
body.amigo-chat .a-image {
  margin: 6px 0 2px;
  max-width: min(100%, 520px);
}
body.amigo-chat .a-image img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--im-border);
  border-radius: 16px;
  background: var(--im-surface-2);
  box-shadow: var(--im-shadow);
}
body.amigo-chat .a-image figcaption {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--im-muted);
}
@media (max-width: 600px) {
  body.amigo-chat .a-image img { border-radius: 13px; }
}
/* multimorphism, as one rule: blur belongs to things that float (the rail, the
   dock, the panel, a toast), and everything that sits — cards, answers, the
   picture above — keeps a border and a solid surface instead. */
:where(.a-image img, .panel, .art-body, .prose, .src-card, .factbox) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   THE CHAT, REDRAWN
   ══════════════════════════════════════════════════════════════════════════
   What the reference file does well is not a look to copy — it is a discipline:
   flat surfaces, generous radii, one strong accent, and typography doing the
   work instead of effects. This takes that discipline and keeps Veridell's own
   identity: forest for action, copper for provenance, cream for paper.

   Three rules, applied once here rather than patched per component:
     1. surfaces that sit are solid and bordered; only the rail, the dock and
        transient overlays keep any translucency;
     2. one radius scale — 999 for pills, 20 for panels, 14 for inner cards;
     3. one spacing rhythm on a 8 px base, so vertical gaps stop being
        arbitrary numbers picked on different days.
   */
body.amigo-chat {
  --chat-radius-pill: 999px;
  --chat-radius-panel: 20px;
  --chat-radius-card: 14px;
  --chat-space: 8px;
}

/* ── the reading column ─────────────────────────────────────────────────── */
body.amigo-chat .stage { padding-top: 28px; }
body.amigo-chat .md { font-size: 16px; line-height: 1.72; }
body.amigo-chat .md p { margin-block: calc(var(--chat-space) * 1.5); }
body.amigo-chat .md h2, body.amigo-chat .md h3 { letter-spacing: -.02em; margin-block: calc(var(--chat-space) * 2) var(--chat-space); }

/* ── the question ───────────────────────────────────────────────────────── */
body.amigo-chat .q {
  border: 1px solid var(--im-border);
  border-radius: var(--chat-radius-panel);
  background: var(--im-surface);
  padding: calc(var(--chat-space) * 1.5) calc(var(--chat-space) * 2);
  font-size: 15px;
  line-height: 1.6;
  box-shadow: none;
}

/* ── the answer ─────────────────────────────────────────────────────────── */
body.amigo-chat .a { gap: calc(var(--chat-space) * 1.5); }
body.amigo-chat .a-meta { gap: var(--chat-space); }
body.amigo-chat .a-meta .who { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
body.amigo-chat .a-meta .badge {
  border: 1px solid color-mix(in srgb, var(--im-warm, #a15c21) 34%, transparent);
  background: color-mix(in srgb, var(--im-warm, #a15c21) 10%, transparent);
  color: var(--im-warm, #a15c21);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--chat-radius-pill);
}
body.amigo-chat .read-full {
  border-radius: var(--chat-radius-pill);
  font-weight: 650;
}

/* ── sources ────────────────────────────────────────────────────────────── */
body.amigo-chat .src-cards { gap: calc(var(--chat-space) * 1.5); }
body.amigo-chat .src-card {
  border-radius: var(--chat-radius-card);
  background: var(--im-surface);
  padding: calc(var(--chat-space) * 1.5);
  transition: transform .16s ease, border-color .16s ease;
}
body.amigo-chat .src-card:hover { transform: translateY(-2px); border-color: var(--im-accent); }

/* ── the composer ───────────────────────────────────────────────────────── */
body.amigo-chat .composer {
  border-radius: var(--chat-radius-panel);
  background: var(--im-surface);
  border: 1px solid var(--im-border);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--im-text) 6%, transparent),
              0 18px 40px -32px color-mix(in srgb, var(--im-text) 60%, transparent);
}
body.amigo-chat .composer:focus-within {
  border-color: color-mix(in srgb, var(--im-accent) 60%, var(--im-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--im-accent) 18%, transparent);
}
body.amigo-chat .composer textarea { font-size: 15.5px; }

/* ── the welcome ────────────────────────────────────────────────────────── */
body.amigo-chat .empty-heading {
  letter-spacing: -.035em;
  line-height: 1.1;
  max-width: 17ch;
  margin-inline: auto;
}
body.amigo-chat .welcome-eyebrow {
  border-radius: var(--chat-radius-pill);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .16em;
}
body.amigo-chat .starters { gap: calc(var(--chat-space) * 1.5); }
body.amigo-chat .starters button {
  border-radius: var(--chat-radius-card);
  background: var(--im-surface);
  border: 1px solid var(--im-border);
  padding: calc(var(--chat-space) * 1.5);
  text-align: start;
}
body.amigo-chat .starters button:hover {
  border-color: var(--im-accent);
  transform: translateY(-1px);
}

/* ── the rail ───────────────────────────────────────────────────────────── */
body.amigo-chat .rail { border-right: 1px solid var(--im-border); }
body.amigo-chat .rail-new { border-radius: var(--chat-radius-card); }
body.amigo-chat .rail-search { border-radius: var(--chat-radius-pill); }

/* ── a small screen keeps the same rhythm, one step tighter ─────────────── */
@media (max-width: 700px) {
  body.amigo-chat .md { font-size: 15.5px; line-height: 1.68; }
  body.amigo-chat .q { padding: calc(var(--chat-space) * 1.25) calc(var(--chat-space) * 1.5); }
  body.amigo-chat .stage { padding-top: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   QUIET UNTIL NEEDED
   ══════════════════════════════════════════════════════════════════════════
   Copy, save and the other answer actions were always visible, so a long
   answer carried a row of buttons competing with its last sentence. They now
   rest at low contrast and come forward when the answer is hovered, focused or
   the reader is on a touch screen where there is no hover to rely on. Nothing
   is hidden from a keyboard: focus reveals the row exactly as hover does.
   */
body.amigo-chat .a-actions {
  gap: 6px;
  flex-wrap: wrap;
  opacity: .55;
  transition: opacity .18s ease;
}
body.amigo-chat .a:hover .a-actions,
body.amigo-chat .a:focus-within .a-actions { opacity: 1; }
body.amigo-chat .a-actions button {
  border-radius: 999px;
  border: 1px solid var(--im-border);
  background: var(--im-surface);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--im-muted);
  transition: color .16s ease, border-color .16s ease, transform .16s ease;
}
body.amigo-chat .a-actions button:hover {
  color: var(--im-accent);
  border-color: var(--im-accent);
  transform: translateY(-1px);
}
body.amigo-chat .a-actions button:focus-visible {
  opacity: 1;
  outline: 2px solid var(--im-accent);
  outline-offset: 2px;
}
/* a touch screen has no hover, so the row stays visible there */
@media (hover: none) {
  body.amigo-chat .a-actions { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.amigo-chat .a-actions button { transition: none; }
}

/* ── refine.css ── */
/* Veridell — the finishing layer.
 *
 * Loaded last on every page, after every other sheet, so it can settle the
 * details that make a site feel made rather than assembled: one easing curve,
 * one focus ring, one transition speed, and a quiet set of hover states.
 *
 * It changes no layout. Every rule here touches colour, shadow, radius, motion
 * or spacing *inside* a box that already exists — so it cannot break a screen
 * that the earlier layers laid out, and removing it returns the site exactly
 * to where it was.
 */

:root {
  /* One curve for everything that moves, and one duration ramp. A site feels
     smooth when the same motion happens at the same speed everywhere, not when
     any single animation is clever. */
  --vd-ease: cubic-bezier(.22, .61, .36, 1);
  --vd-ease-out: cubic-bezier(.16, 1, .3, 1);
  --vd-fast: 120ms;
  --vd-base: 180ms;
  --vd-slow: 320ms;

  /* One ring, used by every focusable thing. */
  --vd-ring: 0 0 0 3px color-mix(in srgb, var(--accent, #b46a45) 30%, transparent);

  /* Shadows that sit on paper rather than float above it. */
  --vd-lift-1: 0 1px 2px color-mix(in srgb, var(--charcoal, #242824) 6%, transparent);
  --vd-lift-2: 0 2px 4px color-mix(in srgb, var(--charcoal, #242824) 5%, transparent),
               0 12px 24px -14px color-mix(in srgb, var(--forest, #173b32) 26%, transparent);
}

/* ── motion: one speed, one curve ──────────────────────────────────────── */
a, button, .btn, .card, .q-card, .cat-card, .side-link, .mode-btn, .depth-btn,
.chip, .src-chip, .followup, input, textarea, select, .searchbar {
  transition:
    background-color var(--vd-base) var(--vd-ease),
    border-color var(--vd-base) var(--vd-ease),
    color var(--vd-fast) var(--vd-ease),
    box-shadow var(--vd-base) var(--vd-ease),
    transform var(--vd-fast) var(--vd-ease);
}

/* A press should feel like a press, and never move the thing under the finger
   far enough to change what is being clicked. */
button:active:not(:disabled), .btn:active:not(:disabled) { transform: translateY(1px) scale(.994); }

/* ── focus: visible, consistent, never a surprise ──────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent, #b46a45);
  outline-offset: 2px;
  box-shadow: var(--vd-ring);
}

/* ── links inside prose: quiet until touched ───────────────────────────── */
.prose a, .page a, .answer a {
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--vd-fast) var(--vd-ease), color var(--vd-fast) var(--vd-ease);
}
.prose a:hover, .page a:hover, .answer a:hover {
  text-decoration-color: currentColor;
}

/* ── surfaces: one lift, on hover only, and only where a pointer exists ── */
@media (hover: hover) and (pointer: fine) {
  .card:hover, .q-card:hover, .cat-card:hover, .dash-action:hover {
    box-shadow: var(--vd-lift-2);
    transform: translateY(-2px);
  }
  .side-link:hover, .bottom-nav a:hover { background: color-mix(in srgb, var(--accent, #b46a45) 8%, transparent); }
}

/* ── the chat: rhythm, not decoration ──────────────────────────────────── */
/* A thread reads as a stack of answers, so the gap between turns is the most
   important measurement on the page. It is set once here rather than in five
   layered sheets. */
.chat-thread, .thread, .messages { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .chat-thread, .thread, .messages { scroll-behavior: auto; }
}

/* The streaming caret: a quiet pulse at the end of the sentence being written,
   never a blinking block that fights the text. */
.vd-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -.15em;
  border-radius: 1px;
  background: currentColor;
  opacity: .55;
  animation: vd-caret 1s steps(2, start) infinite;
}
@keyframes vd-caret { 50% { opacity: 0; } }

/* Answers arrive rather than appear. Short, and out of the way. */
.vd-enter { animation: vd-enter var(--vd-slow) var(--vd-ease-out) both; }
@keyframes vd-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ── the composer ──────────────────────────────────────────────────────── */
/* The composer is the one control a reader touches every turn, so it gets the
   only shadow on the page that responds to focus. */
.composer, .searchbar {
  transition: border-color var(--vd-base) var(--vd-ease),
              box-shadow var(--vd-base) var(--vd-ease),
              background-color var(--vd-base) var(--vd-ease);
}
.composer:focus-within, .searchbar:focus-within {
  border-color: color-mix(in srgb, var(--accent, #b46a45) 70%, var(--border-2, #cfc3ac));
  box-shadow: var(--vd-ring), var(--vd-lift-1);
}

/* ── small type details ────────────────────────────────────────────────── */
/* Numbers that change — counts, timings, versions — must not reflow the line
   they sit in as they change. */
.foot-version, .foot-build, .credit-build, .meta, .meta-row, .src-count, .kbd {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── the scrollbar: thin, quiet, and only where there is one ───────────── */
* { scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
  background-color: color-mix(in srgb, var(--border-2, #cfc3ac) 85%, transparent);
}
*::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--accent, #b46a45) 55%, transparent);
}

/* ── selection ─────────────────────────────────────────────────────────── */
::selection { background: color-mix(in srgb, var(--accent, #b46a45) 26%, transparent); }

/* ── respect the reader's settings, completely ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .q-card:hover, .cat-card:hover, .dash-action:hover { transform: none; }
}

/* Windows high-contrast and forced-colours: keep every control legible. */
@media (forced-colors: active) {
  .btn, button, .card, .composer { border: 1px solid ButtonBorder; }
  :focus-visible { outline: 2px solid Highlight; box-shadow: none; }
}