/* AllTools.Solutions — shared site styles ("Friendly" cobalt look). See DESIGN_SYSTEM.md.
 * ONE file for the whole site: static tool pages link it from <head>, the Next.js layout links it too.
 * Change a colour/radius/font here and every page follows — no per-page rebuild.
 * Plain CSS on purpose (no Tailwind build). All custom properties are --ds-* so they can never
 * collide with the Tailwind theme variables that the older per-page stylesheets still define.
 * Component classes: .sh-* = site header, .sf-* = site footer. More components are added as
 * tool pages are migrated (buttons, panels, segmented controls, FAQ, ...).
 */
/* Onest (SIL OFL, see fonts/Onest-OFL-LICENSE.txt) — self-hosted variable font, latin subset. */
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/onest-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ds-paper: oklch(99.5% 0.002 265);
  --ds-surface: oklch(97% 0.012 265);
  --ds-ink: oklch(22% 0.02 270);
  --ds-ink-2: oklch(45% 0.02 270);
  --ds-ink-3: oklch(51% 0.015 270);
  --ds-rule: oklch(91% 0.015 265);
  --ds-accent: oklch(50% 0.18 265);
  --ds-accent-hover: oklch(43% 0.17 265);
  --ds-accent-tint: oklch(93% 0.035 265);
  --ds-accent-tint-2: oklch(88% 0.055 265);
  --ds-accent-ink: oklch(33% 0.13 265);
  --ds-accent-deep: oklch(28% 0.1 265);
  --ds-on-accent: oklch(99% 0 0);
  --ds-success: oklch(45% 0.11 155);
  --ds-success-tint: oklch(95% 0.04 155);
  --ds-warning: oklch(45% 0.1 65);
  --ds-warning-tint: oklch(95.5% 0.045 85);
  --ds-danger: oklch(48% 0.16 25);
  --ds-danger-tint: oklch(95.5% 0.03 25);

  --ds-font: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ds-sp-xs: 8px; --ds-sp-sm: 12px; --ds-sp-md: 16px; --ds-sp-lg: 24px; --ds-sp-xl: 44px; --ds-sp-2xl: 72px;
  --ds-fs-xs: .8rem; --ds-fs-sm: .92rem; --ds-fs-base: 1.03rem; --ds-fs-lg: 1.18rem;
  --ds-r-sm: 10px; --ds-r: 14px; --ds-r-lg: 24px; --ds-r-pill: 999px;
  --ds-ease: cubic-bezier(.2, .7, .2, 1); --ds-dur-fast: 140ms; --ds-dur: 220ms;
}

/* ───────────────────────── Site header ───────────────────────── */
.sh, .sh *, .sf, .sf * { box-sizing: border-box; }
.sh { position: sticky; top: 0; z-index: 50; padding: var(--ds-sp-md) var(--ds-sp-lg) 0; font-family: var(--ds-font); color: var(--ds-ink); line-height: 1.4; }
.sh a { color: inherit; text-decoration: none; }
.sh button { font-family: inherit; }
.sh-wrap { max-width: 1120px; margin: 0 auto; position: relative; }
.sh-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-sp-md); padding: 8px 8px 8px 20px; border-radius: var(--ds-r-pill); background: oklch(99.5% 0.002 265 / .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--ds-rule); }
.sh-logo { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; white-space: nowrap; }
.sh-logo span { color: var(--ds-accent); }

.sh-desk { display: none; flex: 1; align-items: center; justify-content: space-between; gap: var(--ds-sp-md); min-width: 0; }
.sh-nav, .sh-aside { display: flex; align-items: center; gap: 2px; }
.sh-aside { gap: 2px; }
.sh-item { position: relative; }
.sh-link { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; border: 0; background: transparent; cursor: pointer; padding: 7px 10px; border-radius: var(--ds-r-pill); font-size: .88rem; font-weight: 500; color: var(--ds-ink-2); transition: background var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease); }
.sh-link:hover, .sh-link[aria-expanded="true"], .sh-link[aria-current="page"] { background: var(--ds-surface); color: var(--ds-ink); }
.sh-caret { width: 14px; height: 14px; transition: transform var(--ds-dur) var(--ds-ease); }
.sh-caret.rotate-180 { transform: rotate(180deg); }

.sh-panel { position: absolute; top: 100%; left: 0; z-index: 60; margin-top: 10px; width: 16rem; max-height: calc(100vh - 110px); overflow-y: auto; padding: var(--ds-sp-sm); border-radius: 20px; background: var(--ds-paper); border: 1px solid var(--ds-rule); box-shadow: 0 18px 40px -12px oklch(28% 0.1 265 / .22); }
.sh-panel.hidden { display: none; }
.sh-panel-wide { width: 34rem; }
.sh-panel-right { left: auto; right: 0; width: 18rem; }
.sh-panel ul { list-style: none; margin: 0; padding: 0; }
.sh-panel-wide ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4px; }
.sh-pitem { display: block; padding: 7px 12px; border-radius: var(--ds-r-sm); font-size: var(--ds-fs-sm); color: var(--ds-ink-2); transition: background var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease); }
.sh-pitem:hover { background: var(--ds-accent-tint); color: var(--ds-accent-ink); }
.sh-pitem b { display: block; font-weight: 600; color: var(--ds-ink); }
.sh-pitem small { display: block; font-size: var(--ds-fs-xs); color: var(--ds-ink-3); }
.sh-all { display: block; margin-top: 6px; padding: 10px 12px 4px; border-top: 1px solid var(--ds-rule); font-size: var(--ds-fs-xs); font-weight: 600; color: var(--ds-accent); }
.sh-all:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Header nav: Topics mega-menu + Blog / About / Other projects on the left, search on the right */
.sh-nav { gap: 8px; margin-left: 20px; }
.sh-nav .sh-link { padding: 10px 22px; font-size: .98rem; font-weight: 600; color: var(--ds-ink); }
.sh-nav .sh-link:hover, .sh-nav .sh-link[aria-expanded="true"] { background: var(--ds-surface); }
.sh-nav .sh-link.sh-topics { background: var(--ds-accent); color: var(--ds-on-accent); }
.sh-nav .sh-link.sh-topics:hover, .sh-nav .sh-link.sh-topics[aria-expanded="true"] { background: var(--ds-accent-hover); color: var(--ds-on-accent); }
.sh-item-static { position: static; }
.sh-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; margin-top: 10px; max-height: calc(100vh - 110px); overflow-y: auto; padding: var(--ds-sp-lg); border-radius: var(--ds-r-lg); background: var(--ds-paper); border: 1px solid var(--ds-rule); box-shadow: 0 18px 40px -12px oklch(28% 0.1 265 / .22); column-width: 230px; column-gap: 28px; }
.sh-mega.hidden { display: none; }
.sh-mega section { break-inside: avoid; margin: 0 0 var(--ds-sp-md); }
.sh-mega h3 { margin: 0 0 4px; padding: 0 12px; font-size: var(--ds-fs-sm); font-weight: 800; letter-spacing: -0.01em; color: var(--ds-accent-ink); }
.sh-mega h3 a { color: inherit; }
.sh-mega h3 a:hover { color: var(--ds-accent); text-decoration: underline; text-underline-offset: 3px; }
.sh-mega ul { list-style: none; margin: 0; padding: 0; }
.sh-mega .sh-pitem { padding: 4px 12px; font-size: .86rem; }
.sh-desk .sh-search { flex: none; width: 20rem; margin: 0 0 0 auto; }
.sh-desk .sh-search input { width: 100%; }
.sh-m-sub { margin: 0 0 6px 8px; padding-left: var(--ds-sp-sm); border-left: 2px solid var(--ds-accent-tint); }
.sh-m-sub .sh-m-sum { font-size: .88rem; }

.sh-search { position: relative; margin-left: 6px; }
.sh-search button { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--ds-ink-3); cursor: pointer; border-radius: 50%; }
.sh-search button:hover { color: var(--ds-accent); }
.sh-search svg { width: 16px; height: 16px; }
.sh-search input { width: 9rem; padding: 8px 14px 8px 36px; border: 0; border-radius: var(--ds-r-pill); background: var(--ds-surface); font: inherit; font-size: var(--ds-fs-sm); color: var(--ds-ink); transition: box-shadow var(--ds-dur-fast) var(--ds-ease), background var(--ds-dur-fast) var(--ds-ease); }
.sh-search input::placeholder { color: var(--ds-ink-3); }
.sh-search input:focus { outline: 0; background: var(--ds-paper); box-shadow: 0 0 0 3px var(--ds-accent-tint-2); }
.sh-search .sh-suggest { position: absolute; top: 100%; right: 0; z-index: 60; margin-top: 10px; width: 100%; min-width: 280px; padding: 8px; border-radius: 20px; background: var(--ds-paper); border: 1px solid var(--ds-rule); box-shadow: 0 18px 40px -12px oklch(28% 0.1 265 / .22); }
.sh-suggest ul { list-style: none; margin: 0; padding: 0; }
.sh-suggest button { position: static; transform: none; display: block; width: 100%; height: auto; padding: 8px 12px; border-radius: var(--ds-r-sm); text-align: left; font-size: var(--ds-fs-sm); color: var(--ds-ink-2); }
.sh-suggest button:hover { background: var(--ds-accent-tint); color: var(--ds-accent-ink); }
.sh-suggest .sh-suggest-all { margin-top: 4px; border-top: 1px solid var(--ds-rule); border-radius: 0 0 var(--ds-r-sm) var(--ds-r-sm); font-weight: 600; color: var(--ds-accent); }

.sh-burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--ds-surface); color: var(--ds-ink-2); cursor: pointer; }
.sh-burger:hover { background: var(--ds-accent-tint); color: var(--ds-accent-ink); }
.sh-burger svg { width: 20px; height: 20px; }
.sh-burger .hidden { display: none; }

.sh-mobile { margin-top: 8px; max-height: calc(100vh - 100px); overflow-y: auto; padding: var(--ds-sp-sm) var(--ds-sp-md) var(--ds-sp-md); border-radius: var(--ds-r-lg); background: var(--ds-paper); border: 1px solid var(--ds-rule); box-shadow: 0 18px 40px -12px oklch(28% 0.1 265 / .22); }
.sh-mobile.hidden { display: none; }
.sh-mobile .sh-search { margin: 0 0 var(--ds-sp-sm); }
.sh-mobile .sh-search input { width: 100%; }
.sh-m-row, .sh-m-sum { display: flex; align-items: center; justify-content: space-between; padding: 12px 8px; font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-ink); cursor: pointer; list-style: none; border-radius: var(--ds-r-sm); }
.sh-m-sum::-webkit-details-marker { display: none; }
.sh-m-row:hover, .sh-m-sum:hover { color: var(--ds-accent); }
.sh-mobile details { border-bottom: 1px solid var(--ds-rule); }
.sh-mobile details[open] > summary .sh-caret { transform: rotate(180deg); }
.sh-m-list { padding: 0 0 var(--ds-sp-xs) var(--ds-sp-xs); }
.sh-m-row { border-bottom: 1px solid var(--ds-rule); border-radius: 0; }

@media (min-width: 1320px) {
  .sh-desk { display: flex; }
  .sh-burger, .sh-mobile { display: none !important; }
}
@media (max-width: 560px) { .sh { padding: var(--ds-sp-sm) var(--ds-sp-md) 0; } }
.sh a:focus-visible, .sh button:focus-visible, .sh input:focus-visible, .sf a:focus-visible, .sf button:focus-visible { outline: 3px solid var(--ds-accent-tint-2); outline-offset: 2px; }

/* ───────────────────────── Site footer ───────────────────────── */
.sf { margin-top: 0; background: var(--ds-accent-deep); color: var(--ds-accent-tint); font-family: var(--ds-font); font-size: var(--ds-fs-sm); line-height: 1.5; }
.sf a { color: inherit; text-decoration: none; }
.sf a:hover { color: var(--ds-on-accent); text-decoration: underline; text-underline-offset: 3px; }
.sf-wrap { max-width: 1240px; margin: 0 auto; padding: var(--ds-sp-xl) var(--ds-sp-lg); }
.sf-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-sp-md); }
.sf-bar p { margin: 0; }
.sf-links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.sf-logo { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--ds-on-accent); }
.sf-logo span { color: var(--ds-accent-tint-2); }
.sf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-sp-xl) var(--ds-sp-lg); }
.sf-brand { grid-column: 1 / -1; }
.sf-brand p { margin: var(--ds-sp-sm) 0 0; max-width: 34ch; }
.sf-col h3 { margin: 0 0 var(--ds-sp-sm); font-family: var(--ds-font); font-size: var(--ds-fs-sm); font-weight: 700; color: var(--ds-on-accent); }
.sf-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sf-col .sf-more { color: var(--ds-on-accent); font-weight: 600; }
.sf-ad { margin-top: var(--ds-sp-xl); padding: var(--ds-sp-sm); border-radius: var(--ds-r-lg); background: var(--ds-paper); }
.sf-legal { margin-top: var(--ds-sp-xl); padding-top: var(--ds-sp-md); border-top: 1px solid oklch(93% 0.035 265 / .2); font-size: var(--ds-fs-xs); }
@media (min-width: 640px) { .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sf-brand { grid-column: auto; } }
@media (min-width: 1024px) { .sf-grid { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sf-wrap { padding: var(--ds-sp-lg) var(--ds-sp-md); } }

@media print { .no-print { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .sh *, .sf * { transition-duration: 1ms !important; } }

/* ───────────────────────── Page base ─────────────────────────
 * Pages that have moved to the new look use <body class="ds"> and no per-page Tailwind sheet.
 * :where() keeps the reset at zero specificity so component classes always win.
 */
.ds { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--ds-paper); color: var(--ds-ink); font-family: var(--ds-font); font-size: var(--ds-fs-base); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
:where(.ds) *, :where(.ds) *::before, :where(.ds) *::after { box-sizing: border-box; }
:where(.ds) a { color: inherit; }
:where(.ds) img { display: block; max-width: 100%; }
:where(.ds) button, :where(.ds) input { font: inherit; }
:where(.ds) h1, :where(.ds) h2, :where(.ds) h3, :where(.ds) p { margin: 0; }
.ds main { flex: 1; }
.ds [hidden] { display: none !important; }
.ds :focus-visible { outline: 3px solid var(--ds-accent-tint-2); outline-offset: 2px; }
.ds .sf { margin-top: var(--ds-sp-2xl); }
.ds-narrow { width: 100%; max-width: 820px; margin: 0 auto; padding-inline: var(--ds-sp-lg); }
.ds-sec { padding-top: var(--ds-sp-2xl); }
.ds-sec > h2, .ds-h2 { margin: 0 0 var(--ds-sp-lg); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.035em; line-height: 1.1; }
@media (max-width: 560px) { .ds-narrow { padding-inline: var(--ds-sp-md); } }

/* Page head */
.ds-head { padding-top: var(--ds-sp-2xl); padding-bottom: var(--ds-sp-xl); }
.ds-crumb { font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-accent); text-decoration: none; }
.ds-crumb:hover { text-decoration: underline; text-underline-offset: 3px; }
.ds-head h1 { margin: var(--ds-sp-xs) 0 0; font-weight: 800; font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.05; letter-spacing: -0.04em; overflow-wrap: anywhere; min-width: 0; }
.ds-lede { margin: var(--ds-sp-md) 0 0; max-width: 52ch; color: var(--ds-ink-2); font-size: var(--ds-fs-lg); }
@media (max-width: 560px) { .ds-head { padding-top: var(--ds-sp-xl); } }

/* Tool shell */
.ds-tool { padding: var(--ds-sp-md); border-radius: var(--ds-r-lg); background: var(--ds-surface); }
.ds-panel { padding: var(--ds-sp-lg); border-radius: calc(var(--ds-r-lg) - 8px); background: var(--ds-paper); }
@media (max-width: 560px) { .ds-tool { padding: var(--ds-sp-xs); } .ds-panel { padding: var(--ds-sp-md); } }
.ds-privacy { margin-top: var(--ds-sp-md); text-align: center; font-size: var(--ds-fs-sm); color: var(--ds-ink-3); }

/* Buttons */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border: 0; border-radius: var(--ds-r-pill); background: var(--ds-accent); color: var(--ds-on-accent); font-size: var(--ds-fs-sm); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease); }
.ds-btn:hover { background: var(--ds-accent-hover); }
.ds-btn:active { transform: scale(.97); }
.ds-btn:disabled { background: var(--ds-accent-tint-2); color: var(--ds-accent-ink); cursor: not-allowed; transform: none; }
.ds-btn-soft { background: var(--ds-accent-tint); color: var(--ds-accent-ink); }
.ds-btn-soft:hover { background: var(--ds-accent-tint-2); }
.ds-btn-big { width: 100%; padding: 15px 24px; font-size: var(--ds-fs-base); }
.ds-btn-text { padding: 4px 0; border: 0; background: none; color: var(--ds-ink-3); font-size: var(--ds-fs-sm); font-weight: 600; white-space: nowrap; cursor: pointer; }
.ds-btn-text:hover { color: var(--ds-danger); }

/* Segmented control: aria-pressed="true" marks the selected option */
.ds-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: var(--ds-r-pill); background: var(--ds-surface); }
.ds-seg button { padding: 10px 0; border: 0; border-radius: var(--ds-r-pill); background: transparent; color: var(--ds-ink-2); font-size: var(--ds-fs-sm); font-weight: 700; cursor: pointer; transition: background var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease); }
.ds-seg button:hover { background: var(--ds-accent-tint); color: var(--ds-ink); }
.ds-seg button[aria-pressed="true"], .ds-seg button[aria-checked="true"] { background: var(--ds-accent); color: var(--ds-on-accent); }
.ds-seg button:disabled { opacity: .4; cursor: not-allowed; background: transparent; }

/* Labels, hints, range */
.ds-label { display: block; margin: var(--ds-sp-lg) 0 var(--ds-sp-xs); font-weight: 700; }
.ds-hint { margin-top: var(--ds-sp-xs); font-size: var(--ds-fs-xs); color: var(--ds-ink-3); }
.ds-meta { margin-top: var(--ds-sp-md); font-size: var(--ds-fs-sm); color: var(--ds-ink-2); }
.ds-meta b { color: var(--ds-ink); }
.ds-range-head { display: flex; justify-content: space-between; align-items: baseline; }
.ds-range-head .ds-label { margin-bottom: 0; }
.ds-range-head span { font-weight: 800; color: var(--ds-accent); font-variant-numeric: tabular-nums; }
.ds input[type="range"] { width: 100%; margin: var(--ds-sp-xs) 0 0; accent-color: var(--ds-accent); }
.ds-range-ends { display: flex; justify-content: space-between; font-size: var(--ds-fs-xs); color: var(--ds-ink-3); }

/* Dropzone */
.ds-drop { padding: var(--ds-sp-2xl) var(--ds-sp-lg); border: 2px dashed var(--ds-accent-tint-2); border-radius: var(--ds-r); text-align: center; cursor: pointer; transition: border-color var(--ds-dur-fast) var(--ds-ease), background var(--ds-dur-fast) var(--ds-ease); }
.ds-drop:hover, .ds-drop.is-over { border-color: var(--ds-accent); background: var(--ds-surface); }
.ds-drop b { display: block; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.ds-drop small { display: block; margin-top: var(--ds-sp-sm); font-size: var(--ds-fs-xs); color: var(--ds-ink-3); }
@media (max-width: 560px) { .ds-drop { padding: var(--ds-sp-xl) var(--ds-sp-md); } }

/* Notes (callouts) */
.ds-note { margin-top: var(--ds-sp-sm); padding: 10px 14px; border-radius: var(--ds-r-sm); font-size: var(--ds-fs-sm); background: var(--ds-accent-tint); color: var(--ds-accent-ink); }
.ds-note-err { background: var(--ds-danger-tint); color: var(--ds-danger); }
.ds-note-warn { background: var(--ds-warning-tint); color: var(--ds-warning); }
.ds-note-ok { background: var(--ds-success-tint); color: var(--ds-success); }

/* Result cards + delta pill */
.ds-filebar { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-sp-md); }
.ds-filebar p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.ds-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-sp-sm); margin-top: var(--ds-sp-md); }
.ds-result { min-width: 0; padding: var(--ds-sp-md); border-radius: var(--ds-r); background: var(--ds-surface); text-align: center; }
.ds-result .lbl { font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-ink-2); }
.ds-result img { margin: var(--ds-sp-sm) auto 0; max-height: 220px; border-radius: var(--ds-r-sm); object-fit: contain; }
.ds-result .val { margin-top: var(--ds-sp-sm); font-size: var(--ds-fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.ds-delta { display: inline-block; margin-top: 6px; padding: 3px 12px; border-radius: var(--ds-r-pill); font-size: var(--ds-fs-xs); font-weight: 700; }
.ds-delta:empty { display: none; }
.ds-delta.good { background: var(--ds-success-tint); color: var(--ds-success); }
.ds-delta.bad { background: var(--ds-warning-tint); color: var(--ds-warning); }
.ds-delta.same { background: var(--ds-surface); color: var(--ds-ink-2); }
@media (max-width: 520px) { .ds-results { grid-template-columns: minmax(0, 1fr); } }

/* Ad slot: one per page, right after the tool. Hidden if AdSense reports no fill. */
.ds-ad { margin-top: var(--ds-sp-2xl); min-height: 100px; padding: var(--ds-sp-sm); overflow: hidden; border-radius: var(--ds-r-lg); background: var(--ds-surface); }
.ds-ad:has(ins[data-ad-status="unfilled"]) { display: none; }

/* Guide / "answer" block */
.ds-guide { padding: var(--ds-sp-xl); border-radius: var(--ds-r-lg); background: var(--ds-accent-tint); color: var(--ds-accent-ink); }
.ds-guide h3 { margin-bottom: var(--ds-sp-md); font-weight: 800; font-size: clamp(1.35rem, 2.4vw, 1.75rem); letter-spacing: -0.035em; line-height: 1.1; color: var(--ds-accent-deep); }
.ds-guide p + p { margin-top: var(--ds-sp-sm); }
.ds-guide strong { color: var(--ds-accent-deep); }
@media (max-width: 820px) { .ds-guide { padding: var(--ds-sp-lg); } }

/* FAQ: every answer stays visible (no accordion) */
.ds-faq { display: grid; gap: var(--ds-sp-xs); }
.ds-faq > div { padding: var(--ds-sp-md) var(--ds-sp-lg) var(--ds-sp-lg); border-radius: var(--ds-r); background: var(--ds-surface); }
.ds-faq .q { font-weight: 700; }
.ds-faq .a { margin-top: 6px; color: var(--ds-ink-2); }

/* Related tools + share */
.ds-rel-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ds-sp-md); }
.ds-rel-head a { color: var(--ds-accent); text-decoration: none; font-weight: 600; font-size: var(--ds-fs-sm); white-space: nowrap; }
.ds-rel-head a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ds-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--ds-sp-md); }
/* CLICKABLE: white, visible border, cobalt name, "Open →" line; border turns cobalt and lifts on hover */
.ds-card { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; align-content: start; padding: var(--ds-sp-lg); border: 1.5px solid var(--ds-rule); border-radius: var(--ds-r-lg); background: var(--ds-paper); text-decoration: none; transition: border-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease); }
.ds-card:hover { border-color: var(--ds-accent); box-shadow: 0 8px 22px -14px var(--ds-accent); transform: translateY(-2px); }
.ds-card::after { content: "Open →"; margin-top: var(--ds-sp-xs); font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-accent); }
.ds-card .t { font-weight: 700; font-size: var(--ds-fs-lg); letter-spacing: -0.015em; line-height: 1.25; color: var(--ds-accent); }
.ds-card .d { color: var(--ds-ink-2); font-size: var(--ds-fs-sm); }
.ds-share { margin-top: var(--ds-sp-2xl); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--ds-sp-md); padding: var(--ds-sp-md) var(--ds-sp-md) var(--ds-sp-md) var(--ds-sp-lg); border: 1px solid var(--ds-rule); border-radius: var(--ds-r-pill); }
.ds-share p { font-weight: 600; }
.ds-share .g { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-share .ds-btn { padding: 8px 16px; }
@media (max-width: 620px) { .ds-share { border-radius: var(--ds-r-lg); } }
@media (prefers-reduced-motion: reduce) { .ds *, .ds *::before, .ds *::after { transition-duration: 1ms !important; } }

/* ───────────────────────── Prose cards (content under the tool) ─────────────────────────
 * Content elements carry NO classes; these rules style them by context.
 */
.ds-stack { display: grid; gap: var(--ds-sp-md); }
.ds-prose { padding: var(--ds-sp-xl); border-radius: var(--ds-r-lg); background: var(--ds-surface); }
@media (max-width: 820px) { .ds-prose { padding: var(--ds-sp-lg); } }
.ds-prose h2, .ds-guide h2 { margin: 0 0 var(--ds-sp-sm); font-weight: 800; font-size: clamp(1.35rem, 2.4vw, 1.75rem); letter-spacing: -0.03em; line-height: 1.15; }
.ds-prose h3 { margin: var(--ds-sp-lg) 0 var(--ds-sp-xs); font-weight: 700; font-size: var(--ds-fs-lg); letter-spacing: -0.01em; }
.ds-prose > :first-child { margin-top: 0; }
.ds-prose p, .ds-guide p { margin: 0 0 var(--ds-sp-sm); }
.ds-prose p:last-child, .ds-guide p:last-child { margin-bottom: 0; }
.ds-prose ul, .ds-prose ol, .ds-guide ul, .ds-guide ol { margin: var(--ds-sp-xs) 0 var(--ds-sp-sm); padding-left: 22px; }
.ds-prose li, .ds-guide li { margin: 4px 0; }
.ds-prose a, .ds-guide a, .ds-faq a { color: var(--ds-accent); font-weight: 600; text-decoration: none; }
.ds-prose a:hover, .ds-guide a:hover, .ds-faq a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ds-prose code, .ds-guide code, .ds-faq code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; padding: 1px 6px; border-radius: 6px; background: var(--ds-paper); }
.ds-table-wrap { overflow-x: auto; margin: var(--ds-sp-sm) 0; border-radius: var(--ds-r); background: var(--ds-paper); }
.ds-table-wrap table, .ds-prose table { width: 100%; border-collapse: collapse; font-size: var(--ds-fs-sm); }
.ds-prose th { padding: 10px 14px; text-align: left; font-weight: 700; background: var(--ds-accent-tint); color: var(--ds-accent-ink); white-space: nowrap; }
.ds-prose td { padding: 10px 14px; border-top: 1px solid var(--ds-rule); }
.ds-prose td:first-child { font-weight: 600; }
.ds-prose details, .ds-faq details { margin: var(--ds-sp-sm) 0; border-radius: var(--ds-r); background: var(--ds-paper); }
.ds-prose summary, .ds-faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-sp-md); padding: var(--ds-sp-md) var(--ds-sp-lg); font-weight: 600; cursor: pointer; list-style: none; }
.ds-prose summary::-webkit-details-marker, .ds-faq summary::-webkit-details-marker { display: none; }
.ds-prose summary::after, .ds-faq summary::after { content: "+"; flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ds-surface); color: var(--ds-accent); font-weight: 700; transition: transform var(--ds-dur) var(--ds-ease); }
.ds-prose details[open] > summary::after, .ds-faq details[open] > summary::after { transform: rotate(45deg); }
.ds-prose details > :not(summary) { margin-left: var(--ds-sp-lg); margin-right: var(--ds-sp-lg); }
.ds-prose details > :last-child { margin-bottom: var(--ds-sp-lg); }

/* ───────────────────────── Forms, stats, breadcrumb ───────────────────────── */
.ds-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-ink-3); }
.ds-crumbs a { color: var(--ds-accent); text-decoration: none; }
.ds-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ds-crumbs span[aria-hidden], .ds-crumbs .sep { color: var(--ds-ink-3); }
.ds-head .ds-crumbs + h1 { margin-top: var(--ds-sp-sm); }

.ds-mt-sm { margin-top: var(--ds-sp-sm); } .ds-mt-md { margin-top: var(--ds-sp-md); } .ds-mt-lg { margin-top: var(--ds-sp-lg); }
.ds-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-sp-md); }
@media (max-width: 640px) { .ds-grid2 { grid-template-columns: minmax(0, 1fr); } }

/* Tabs variant of the segmented control: stacks on phones so long labels stay readable */
.ds-seg button[aria-selected="true"] { background: var(--ds-accent); color: var(--ds-on-accent); }
.ds-seg-tabs button { padding: 10px 14px; line-height: 1.25; }
@media (max-width: 640px) { .ds-seg-tabs { grid-auto-flow: row; border-radius: var(--ds-r); } .ds-seg-tabs button { padding: 12px 14px; } }

/* Text fields */
.ds-field > label, .ds-field-label { display: block; margin: 0 0 var(--ds-sp-xs); font-weight: 700; font-size: var(--ds-fs-sm); }
.ds-input-wrap { position: relative; }
/* INPUTS: white with a visible border, site font; numbers large and bold (code/data fields add .ds-mono) */
.ds-input, .ds-select { display: block; width: 100%; padding: 12px 14px; border: 2px solid var(--ds-rule); border-radius: var(--ds-r); background: var(--ds-paper); color: var(--ds-ink); font-family: var(--ds-font); font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; transition: box-shadow var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease); }
.ds-input:hover, .ds-select:hover { border-color: var(--ds-accent-tint-2); }
.ds-input::placeholder { color: var(--ds-ink-3); font-weight: 500; }
.ds-input:focus, .ds-select:focus { outline: 0; border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-accent-tint-2); }
.ds-input[readonly] { color: var(--ds-ink-2); }
.ds-input-wrap.pre .ds-input { padding-left: 30px; }
.ds-input-wrap.suf .ds-input { padding-right: 38px; }
.ds-affix { position: absolute; top: 50%; transform: translateY(-50%); color: var(--ds-ink-3); font-size: var(--ds-fs-sm); pointer-events: none; }
.ds-affix.l { left: 14px; } .ds-affix.r { right: 14px; }
.ds textarea.ds-input { font-size: .95rem; min-height: 7rem; resize: vertical; line-height: 1.5; }

/* Stats */
/* ANSWER: the one solid-cobalt block per tool — big white number, optional pair of supporting numbers */
.ds-answer { display: grid; gap: var(--ds-sp-md); align-content: start; padding: var(--ds-sp-lg); border-radius: calc(var(--ds-r-lg) - 8px); background: var(--ds-accent); color: var(--ds-on-accent); }
.ds-answer .k { margin: 0; font-size: var(--ds-fs-sm); font-weight: 500; color: var(--ds-accent-tint); }
.ds-answer .v { margin: 0; font-size: clamp(3rem, 9vw, 4.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ds-answer .pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--ds-sp-xs); }
.ds-answer .pair > div { padding: 10px 14px; border-radius: var(--ds-r); background: var(--ds-accent-hover); font-size: var(--ds-fs-sm); color: var(--ds-accent-tint); }
.ds-answer .pair b { display: block; margin-top: 2px; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ds-on-accent); }
/* CLICKABLE box link to another tool (same look as .ds-card) */
.ds-linkbox { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-sp-sm); margin-top: var(--ds-sp-md); padding: var(--ds-sp-md) var(--ds-sp-lg); border: 1.5px solid var(--ds-rule); border-radius: var(--ds-r); background: var(--ds-paper); color: var(--ds-ink-2); font-size: var(--ds-fs-sm); text-decoration: none; transition: border-color var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur) var(--ds-ease); }
.ds-linkbox:hover { border-color: var(--ds-accent); transform: translateY(-1px); }
.ds-linkbox b { color: var(--ds-accent); }
.ds-linkbox::after { content: "Open →"; font-weight: 600; color: var(--ds-accent); }
.ds-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--ds-sp-md); }
.ds-stats .lbl { font-size: var(--ds-fs-sm); font-weight: 500; color: var(--ds-ink-2); }
.ds-stats .val { margin-top: 2px; font-weight: 700; font-size: var(--ds-fs-lg); font-variant-numeric: tabular-nums; }
.ds-note-soft { background: var(--ds-surface); color: var(--ds-ink-2); }
.ds-note a { font-weight: 600; color: var(--ds-accent); text-decoration: none; }
.ds-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ds-empty { margin-top: var(--ds-sp-md); font-size: var(--ds-fs-sm); color: var(--ds-ink-3); font-style: italic; }

/* ───────────────────────── Generator output: chips, placeholder, checks, history ───────────────────────── */
.ds-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-sp-sm); }
.ds-chip { padding: var(--ds-sp-md) var(--ds-sp-lg); border-radius: var(--ds-r); background: var(--ds-accent); color: var(--ds-on-accent); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; text-align: center; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ds-chip-big { padding: var(--ds-sp-lg) var(--ds-sp-xl); font-size: clamp(2.4rem, 8vw, 3.4rem); }
.ds-center { display: flex; justify-content: center; margin-top: var(--ds-sp-md); }
.ds-placeholder { padding: var(--ds-sp-xl) var(--ds-sp-md); border-radius: var(--ds-r); background: var(--ds-surface); text-align: center; font-size: var(--ds-fs-sm); color: var(--ds-ink-3); }
.ds-check { display: flex; align-items: center; gap: 10px; margin-top: var(--ds-sp-md); font-size: var(--ds-fs-sm); font-weight: 500; color: var(--ds-ink-2); cursor: pointer; }
.ds input[type="checkbox"], .ds input[type="radio"] { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--ds-accent); }
.ds-field-note { font-weight: 400; color: var(--ds-ink-3); }
.ds-error { margin-top: var(--ds-sp-sm); font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-danger); }
.ds-history { margin-top: var(--ds-sp-lg); padding-top: var(--ds-sp-md); border-top: 1px solid var(--ds-rule); }
.ds-history-head { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-sp-md); }
.ds-history-head .t { font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-ink-2); }
.ds-history-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--ds-sp-xs); max-height: 8rem; overflow-y: auto; }
.ds-history-list span { padding: 3px 10px; border-radius: var(--ds-r-pill); background: var(--ds-surface); font-size: var(--ds-fs-xs); font-weight: 600; color: var(--ds-ink-2); }
.ds-lede-note { margin-top: var(--ds-sp-lg); max-width: none; text-align: left; }
.ds-lede-note code { padding: 1px 6px; border-radius: 6px; background: var(--ds-paper); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }
.ds-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-sp-md); }
.ds-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-sp-md); }
@media (max-width: 640px) { .ds-grid3 { grid-template-columns: minmax(0, 1fr); } .ds-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ───────────────────────── Badges, outcome result, grouped lists ───────────────────────── */
.ds-badges { display: flex; flex-wrap: wrap; gap: var(--ds-sp-xs); }
.ds-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: var(--ds-r-pill); font-size: var(--ds-fs-xs); font-weight: 700; line-height: 1.4; } /* background/colour set inline when the badge colour is data (e.g. a type) */
.ds-badges-sm { gap: 6px; margin-top: var(--ds-sp-xs); }
.ds-tone-good { color: var(--ds-success); } .ds-tone-bad { color: var(--ds-danger); } .ds-tone-none { color: var(--ds-ink); } .ds-tone-flat { color: var(--ds-ink-2); }
.ds-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-sp-sm); }
@media (max-width: 640px) { .ds-groups { grid-template-columns: minmax(0, 1fr); } }
.ds-group { padding: var(--ds-sp-md); border-radius: var(--ds-r); background: var(--ds-surface); }
.ds-group > .t { font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-ink-2); }
.ds-group.weak { background: var(--ds-danger-tint); } .ds-group.weak > .t { color: var(--ds-danger); }
.ds-group.resist { background: var(--ds-success-tint); } .ds-group.resist > .t { color: var(--ds-success); }
.ds-group.neutral { background: var(--ds-paper); box-shadow: inset 0 0 0 1px var(--ds-rule); } .ds-group.neutral > .t { color: var(--ds-ink-3); }
.ds-group .none { font-size: var(--ds-fs-xs); color: var(--ds-ink-3); }
.ds-select { appearance: auto; font-size: var(--ds-fs-base); cursor: pointer; }
.ds-field-sub > label { font-weight: 500; color: var(--ds-ink-2); font-size: var(--ds-fs-xs); }

.ds-when-open { display: none; }
.ds-prose details[open] .ds-when-open, .ds-faq details[open] .ds-when-open { display: inline; }
.ds-prose details[open] .ds-when-closed, .ds-faq details[open] .ds-when-closed { display: none; }

/* ───────────────────────── Presets, inline boxes, stat variants ───────────────────────── */
.ds-eyebrow { font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-ink-2); }
.ds-btn-sm { padding: 7px 14px; font-size: var(--ds-fs-sm); }
.ds-btn:disabled.ds-btn-soft { background: var(--ds-surface); color: var(--ds-ink-3); opacity: .8; }
.ds-chip-row { display: flex; flex-wrap: wrap; gap: var(--ds-sp-xs); margin-top: var(--ds-sp-sm); }
.ds-inline-box { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ds-sp-sm); margin-top: var(--ds-sp-md); padding: var(--ds-sp-sm) var(--ds-sp-md) var(--ds-sp-md); border-radius: var(--ds-r); background: var(--ds-surface); }
.ds-inline-box .ds-field > label { font-size: var(--ds-fs-xs); }
.ds-inline-box .ds-input { background: var(--ds-paper); }
.ds-aside-stat { text-align: center; }
.ds-aside-stat .lbl { font-size: var(--ds-fs-sm); font-weight: 500; color: var(--ds-ink-2); }
.ds-aside-stat .val { margin-top: 2px; font-weight: 700; }

/* ───────────────────────── Output cards, code blocks, batch rows, reference grid ───────────────────────── */
.ds-divider { margin-top: var(--ds-sp-lg); padding-top: var(--ds-sp-lg); border-top: 1px solid var(--ds-rule); }
.ds-radios { display: flex; flex-wrap: wrap; gap: var(--ds-sp-xs) var(--ds-sp-lg); margin-top: var(--ds-sp-xs); }
.ds-radios .ds-check { margin-top: 0; }
.ds-input-w { width: 10rem; }
.ds-outs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-sp-md); }
@media (max-width: 640px) { .ds-outs { grid-template-columns: minmax(0, 1fr); } }
.ds-out { padding: var(--ds-sp-md); border-radius: var(--ds-r); background: var(--ds-surface); min-width: 0; }
.ds-out-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-sp-sm); }
.ds-out-head .t { font-weight: 700; }
.ds-out .sub { margin-top: 2px; font-size: var(--ds-fs-xs); color: var(--ds-ink-3); }
.ds-pre { margin: var(--ds-sp-sm) 0 0; padding: 12px 14px; overflow-x: auto; border-radius: var(--ds-r-sm); background: var(--ds-paper); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; font-weight: 600; color: var(--ds-ink); white-space: pre; }
.ds-batch-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-sp-sm); }
.ds-batch-head .sum { font-weight: 700; color: var(--ds-accent-ink); }
.ds-rows { display: grid; gap: var(--ds-sp-xs); margin-top: var(--ds-sp-sm); }
.ds-row { padding: var(--ds-sp-sm) var(--ds-sp-md); border-radius: var(--ds-r); background: var(--ds-surface); }
.ds-row.err { background: var(--ds-danger-tint); }
.ds-row .src { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--ds-fs-xs); color: var(--ds-ink-3); overflow-wrap: anywhere; }
.ds-row.err .src { font-size: var(--ds-fs-sm); color: var(--ds-danger); }
.ds-row .msg { margin-top: 2px; font-size: var(--ds-fs-xs); font-weight: 600; color: var(--ds-danger); }
.ds-row-out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-sp-xs); margin-top: var(--ds-sp-xs); }
@media (max-width: 640px) { .ds-row-out { grid-template-columns: minmax(0, 1fr); } }
.ds-cell { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-sp-xs); padding: 8px 10px; border-radius: var(--ds-r-sm); background: var(--ds-paper); min-width: 0; }
.ds-cell > div { min-width: 0; }
.ds-cell .t { font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-ink-2); }
.ds-cell .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--ds-fs-xs); font-weight: 600; }
.ds-ref-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-sp-md) var(--ds-sp-lg); margin-top: var(--ds-sp-md); }
.ds-ref-wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .ds-ref-grid { grid-template-columns: minmax(0, 1fr); } }
.ds-prose ul.ds-ref-list { margin: 6px 0 0; padding: 0; list-style: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--ds-fs-xs); }
.ds-prose .ds-ref-list li { margin: 3px 0; }
.ds-prose .ds-ref-list code { padding: 0; background: none; font-weight: 600; color: var(--ds-ink); }
.ds-prose details > .ds-ref-grid, .ds-prose details > p { margin-left: var(--ds-sp-lg); margin-right: var(--ds-sp-lg); }
.ds-hint code, .ds-note code { padding: 1px 6px; border-radius: 6px; background: var(--ds-surface); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }

/* ───────────────────────── Stage (centred single-object tools) ───────────────────────── */
.ds-stage { display: flex; flex-direction: column; align-items: center; padding-block: var(--ds-sp-xl); }
.ds-stage-hint { margin-top: var(--ds-sp-lg); text-align: center; }
.ds-stage-hint strong { color: var(--ds-ink); }

/* ───────────────────────── Result tiles, section heads, option rows ───────────────────────── */
.ds-sec-head { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-sp-md); margin-bottom: var(--ds-sp-sm); }
.ds-sec-head h2 { margin: 0; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; }
.ds-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--ds-sp-xs); }
.ds-tile { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-sp-xs); padding: 10px 10px 10px 16px; border-radius: var(--ds-r); background: var(--ds-surface); transition: background var(--ds-dur-fast) var(--ds-ease); }
.ds-tile .name { min-width: 0; flex: 1; overflow-wrap: anywhere; font-weight: 700; }
.ds-tile.is-copied { background: var(--ds-success-tint); }
.ds-tile.is-copied .name { color: var(--ds-success); }
.ds-span-all { grid-column: 1 / -1; }
.ds-opts { display: flex; flex-wrap: wrap; gap: var(--ds-sp-xs) var(--ds-sp-lg); margin-top: var(--ds-sp-xs); }
.ds-opts .ds-check { margin-top: 0; }
.ds-seg-label { margin: 0 0 var(--ds-sp-xs); font-weight: 700; font-size: var(--ds-fs-sm); }

/* ───────────────────────── Radio cards, lines, tone badges ───────────────────────── */
.ds-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ds-radio-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-sp-xs); margin-top: var(--ds-sp-xs); }
@media (max-width: 560px) { .ds-radio-cards { grid-template-columns: minmax(0, 1fr); } }
.ds-radio-card { position: relative; display: flex; flex-direction: column; padding: 12px 16px; border: 1.5px solid var(--ds-rule); border-radius: var(--ds-r); background: var(--ds-paper); cursor: pointer; transition: border-color var(--ds-dur-fast) var(--ds-ease), background var(--ds-dur-fast) var(--ds-ease); }
.ds-radio-card:hover { border-color: var(--ds-accent); }
.ds-radio-card:has(input:checked) { background: var(--ds-accent-tint); border-color: var(--ds-accent); }
.ds-radio-card:has(input:focus-visible) { outline: 3px solid var(--ds-accent-tint-2); outline-offset: 2px; }
.ds-radio-card .t { font-weight: 700; }
.ds-radio-card .d { font-size: var(--ds-fs-sm); color: var(--ds-ink-2); }
.ds-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ds-fieldset > legend { padding: 0; font-weight: 700; font-size: var(--ds-fs-sm); }
.ds-lines { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-sp-xs); }
.ds-lines > * { min-width: 0; }
.ds-line { min-width: 0; display: flex; align-items: center; gap: var(--ds-sp-xs); padding: 10px 10px 10px 14px; border-radius: var(--ds-r); background: var(--ds-surface); }
.ds-line code, .ds-line .mono { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; font-weight: 600; background: none; padding: 0; }
.ds-line .time { flex: 0 0 auto; font-size: var(--ds-fs-xs); color: var(--ds-ink-3); }
@media (max-width: 560px) { .ds-line code, .ds-line .mono { white-space: normal; overflow-wrap: anywhere; font-size: .82rem; } }
.ds-badge.tone-warn { background: var(--ds-warning-tint); color: var(--ds-warning); }
.ds-badge.tone-accent { background: var(--ds-accent-tint); color: var(--ds-accent-ink); }
.ds-badge.tone-good { background: var(--ds-success-tint); color: var(--ds-success); }
.ds-badge.up { text-transform: uppercase; }
.ds-inline-end { display: flex; align-items: flex-end; }

/* ───────────────────────── Choice grid, numbered rows, history cards, disclosure ───────────────────────── */
.ds-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-sp-xs); margin-top: var(--ds-sp-xs); }
@media (max-width: 560px) { .ds-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ds-choices button { padding: 10px 12px; border: 1.5px solid var(--ds-rule); border-radius: var(--ds-r-pill); background: var(--ds-paper); color: var(--ds-ink-2); font-size: var(--ds-fs-sm); font-weight: 700; cursor: pointer; transition: background var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease); }
.ds-choices button:hover { border-color: var(--ds-accent); color: var(--ds-ink); }
.ds-choices button[aria-pressed="true"] { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-on-accent); }
.ds-choices button:disabled { opacity: .4; cursor: not-allowed; background: var(--ds-paper); color: var(--ds-ink-2); }
.ds-choices .wide { grid-column: span 2; }
.ds-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-sp-xs); }
.ds-line .idx { flex: 0 0 auto; width: 1.6rem; text-align: right; font-size: var(--ds-fs-xs); font-weight: 600; color: var(--ds-ink-3); font-variant-numeric: tabular-nums; }
.ds-line .nm { min-width: 0; flex: 1; font-weight: 600; overflow-wrap: anywhere; }
.ds-actions { display: flex; align-items: center; gap: var(--ds-sp-xs); }
.ds-hist { padding: var(--ds-sp-sm) var(--ds-sp-md); border-radius: var(--ds-r); background: var(--ds-surface); }
.ds-hist-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-sp-sm); }
.ds-hist .meta { font-size: var(--ds-fs-xs); font-weight: 700; color: var(--ds-ink-3); }
.ds-hist .names { margin-top: 6px; font-size: var(--ds-fs-sm); color: var(--ds-ink-2); overflow-wrap: anywhere; }
.ds-disclose { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; font-size: var(--ds-fs-sm); font-weight: 700; color: var(--ds-ink-2); cursor: pointer; }
.ds-disclose:hover { color: var(--ds-accent); }
.ds-disclose svg { width: 16px; height: 16px; transition: transform var(--ds-dur) var(--ds-ease); }

/* ───────────────────────── Previews (imitations of third-party link cards), counters, status ───────────────────────── */
.ds-inline-form { display: flex; gap: var(--ds-sp-xs); align-items: stretch; }
.ds-inline-form .ds-input { flex: 1; min-width: 0; }
.ds-inline-form .ds-btn { flex: 0 0 auto; }
@media (max-width: 560px) { .ds-inline-form { flex-direction: column; } }
.ds-span2 { grid-column: 1 / -1; }
.ds-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-sp-sm); margin-bottom: var(--ds-sp-xs); }
.ds-field-head > label { margin: 0; font-weight: 700; font-size: var(--ds-fs-sm); }
.ds-count { font-size: var(--ds-fs-xs); font-weight: 600; color: var(--ds-ink-3); font-variant-numeric: tabular-nums; }
.ds-count.warn { color: var(--ds-warning); }
.ds-count.over { color: var(--ds-danger); }
.ds-status { display: flex; align-items: center; gap: 6px; margin-top: var(--ds-sp-xs); font-size: var(--ds-fs-xs); font-weight: 600; color: var(--ds-ink-3); }
.ds-status[hidden] { display: none; }
.ds-status.good { color: var(--ds-success); } .ds-status.warn { color: var(--ds-warning); } .ds-status.bad { color: var(--ds-danger); }
.ds-status .spinner { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ds-rule); border-top-color: var(--ds-ink-3); animation: ds-spin .7s linear infinite; display: inline-block; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
.ds-hint.is-over { color: var(--ds-warning); font-weight: 600; }
.ds-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-sp-lg); }
@media (max-width: 720px) { .ds-previews { grid-template-columns: minmax(0, 1fr); } }
.ds-previews > div { min-width: 0; }
.ds-pv-label { margin: 0 0 var(--ds-sp-xs); font-size: var(--ds-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ds-ink-3); }
.ds-pv-card { overflow: hidden; border-radius: var(--ds-r); background: var(--ds-paper); box-shadow: inset 0 0 0 1px var(--ds-rule); position: relative; }
.ds-pv-card.round { border-radius: var(--ds-r-lg); }
.ds-pv-img { position: relative; aspect-ratio: 1.91 / 1; width: 100%; overflow: hidden; background: var(--ds-surface); }
.ds-pv-img img { width: 100%; height: 100%; object-fit: cover; }
.ds-pv-img .ph, .ds-pv-thumb .ph { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: var(--ds-fs-xs); color: var(--ds-ink-3); text-align: center; }
.ds-pv-body { padding: var(--ds-sp-sm); }
.ds-pv-body.tint { background: var(--ds-surface); box-shadow: inset 0 1px 0 var(--ds-rule); }
.ds-pv-body .dom { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ds-fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--ds-ink-3); }
.ds-pv-body .dom.plain { text-transform: none; letter-spacing: 0; }
.ds-pv-body .ttl { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.ds-pv-body .ttl.wrap { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ds-pv-body .dsc { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ds-fs-sm); color: var(--ds-ink-2); }
.ds-pv-body .dsc.wrap { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ds-pv-slack { display: flex; }
.ds-pv-slack .bar { flex: 0 0 4px; background: var(--ds-accent-tint-2); }
.ds-pv-slack .inner { display: flex; flex: 1; gap: var(--ds-sp-sm); padding: var(--ds-sp-sm); min-width: 0; }
.ds-pv-slack .txt { flex: 1; min-width: 0; }
.ds-pv-slack .site { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ds-fs-xs); font-weight: 700; color: var(--ds-ink-3); }
.ds-pv-slack .ttl { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--ds-accent); }
.ds-pv-slack .dsc { margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--ds-fs-sm); color: var(--ds-ink-2); }
.ds-pv-thumb { width: 64px; height: 64px; flex: 0 0 64px; overflow: hidden; border-radius: var(--ds-r-sm); background: var(--ds-surface); }
.ds-pv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ds-code-head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-sp-md); margin-bottom: var(--ds-sp-sm); }
.ds-code-head h2 { margin: 0; font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; }
.ds-pre.block { white-space: pre; font-size: .82rem; font-weight: 500; padding: var(--ds-sp-md); background: var(--ds-surface); margin: 0; color: var(--ds-ink-2); }
.ds-pre.block .tag { color: var(--ds-ink-3); } .ds-pre.block .prop { color: var(--ds-accent); } .ds-pre.block .val { color: var(--ds-success); }

/* ───────────────────────── Compact forms, sub-cards, toggle chips, totals, print ───────────────────────── */
.ds-wrapline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-sp-xs); }
.ds-wrapline.tight { gap: 6px; }
.ds-inline { display: inline-flex; align-items: center; gap: 6px; }
.ds-grow { flex: 1 1 160px; min-width: 0; }
.ds-ml-auto { margin-left: auto; }
.ds-input-sm { padding: 8px 12px; font-size: .95rem; border-radius: var(--ds-r-sm); width: auto; display: inline-block; }
.ds-input-sm.ds-grow { display: block; }
.ds-w16 { width: 4.6rem; } .ds-w20 { width: 5.6rem; } .ds-w24 { width: 6.6rem; } .ds-w32 { width: 8.6rem; }
.ds-subcard { padding: var(--ds-sp-sm) var(--ds-sp-md); border-radius: var(--ds-r); background: var(--ds-surface); }
.ds-subcard .ds-input, .ds-subcard .ds-select { background: var(--ds-paper); }
.ds-subfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-sp-sm); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--ds-rule); font-size: var(--ds-fs-xs); }
.ds-chip-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: var(--ds-r-pill); background: var(--ds-paper); color: var(--ds-ink-2); font-size: var(--ds-fs-xs); font-weight: 600; cursor: pointer; transition: background var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease); }
.ds-chip-toggle:hover { background: var(--ds-accent-tint); }
.ds-chip-toggle.is-on { background: var(--ds-accent); color: var(--ds-on-accent); }
.ds-chip-toggle:has(input:focus-visible) { outline: 3px solid var(--ds-accent-tint-2); outline-offset: 2px; }
.ds-pill { padding: 4px 12px; border: 1.5px solid var(--ds-rule); border-radius: var(--ds-r-pill); background: var(--ds-paper); color: var(--ds-ink-2); font-size: var(--ds-fs-xs); font-weight: 600; cursor: pointer; transition: background var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease); }
.ds-pill:hover { border-color: var(--ds-accent); }
.ds-pill.is-on { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-on-accent); }
.ds-brow { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-sp-sm); padding: 10px var(--ds-sp-md); border-radius: var(--ds-r); background: var(--ds-surface); }
.ds-t-strong { font-weight: 700; } .ds-t-strong2 { font-weight: 600; color: var(--ds-ink); } .ds-t-mute { color: var(--ds-ink-3); } .ds-t-hint { font-size: var(--ds-fs-xs); color: var(--ds-ink-3); }
.ds-label-sm { display: block; margin-bottom: 4px; font-size: var(--ds-fs-xs); font-weight: 600; color: var(--ds-ink-2); }
.ds-stackgap { display: grid; gap: var(--ds-sp-xs); } .ds-stackgap.tight { gap: 6px; }
.ds-total { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-sp-md); margin-top: var(--ds-sp-sm); padding: 20px 24px; border-radius: calc(var(--ds-r-lg) - 8px); background: var(--ds-accent); color: var(--ds-on-accent); }
.ds-total .lbl { font-weight: 600; color: var(--ds-accent-tint); } .ds-total .amt { font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; text-align: right; }
.ds-btn-block { width: 100%; }
.ds-check-strong { font-weight: 700; color: var(--ds-ink); }
.ds-check-strong span { font-weight: inherit; }
.ds-print-only { display: none; }
@media print {
  .ds-print-only { display: block; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #bbb; }
  .ds-tool { padding: 0; background: none; }
  .ds-panel { padding: 0; }
  .ds-total { background: none; color: #000; border: 1px solid #000; }
  .ds-brow, .ds-subcard { background: none; border: 1px solid #ddd; }
}
.ds-prose ul.ds-plain-list, .ds-prose ol.ds-plain-list, .ds-guide .ds-plain-list { list-style: none; padding-left: 0; }
.ds-prose .ds-plain-list li span { color: var(--ds-ink); }

/* ───────────────────────── Wide builder layout + form-builder rows ───────────────────────── */
.ds-wide { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: var(--ds-sp-lg); }
@media (max-width: 560px) { .ds-wide { padding-inline: var(--ds-sp-md); } }
.ds-m1 { margin-top: 4px; } .ds-m2 { margin-top: 8px; } .ds-m3 { margin-top: 12px; } .ds-m25 { margin-top: 10px; }
.ds-split { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-sp-xs); }
.ds-rowline { display: flex; align-items: center; gap: var(--ds-sp-xs); }
.ds-form-h { margin: 0 0 var(--ds-sp-sm); font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; }
.ds-form-stack { display: grid; gap: var(--ds-sp-xl); align-content: start; }
.ds-input:disabled { opacity: .55; cursor: not-allowed; }
.ds-chip-skill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: var(--ds-r-pill); background: var(--ds-accent-tint); color: var(--ds-accent-ink); font-size: var(--ds-fs-xs); font-weight: 600; }
.ds-chip-x { border: 0; background: none; padding: 0 6px; font-size: 1rem; line-height: 1; color: var(--ds-accent-ink); cursor: pointer; border-radius: 50%; }
.ds-chip-x:hover { color: var(--ds-danger); }
.ds-rb-tabs { display: none; margin-top: var(--ds-sp-md); }
.ds-rb-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-sp-lg); margin-top: var(--ds-sp-lg); }
@media (min-width: 1024px) { .ds-rb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-sp-xl); } .ds-rb-preview { position: sticky; top: 96px; align-self: start; } }
@media (max-width: 1023px) {
  .ds-rb-tabs { display: grid; }
  .ds-rb-grid[data-view="edit"] .ds-rb-preview { display: none; }
  .ds-rb-grid[data-view="preview"] .ds-rb-edit { display: none; }
}
.ds-rb-actions { display: flex; flex-direction: column-reverse; align-items: stretch; gap: var(--ds-sp-sm); margin-top: var(--ds-sp-lg); padding-top: var(--ds-sp-md); border-top: 1px solid var(--ds-rule); }
@media (min-width: 640px) { .ds-rb-actions { flex-direction: row; align-items: center; justify-content: space-between; } }
.ds-rb-actions .ds-btn { padding-inline: 32px; }

/* Résumé preview — an on-page facsimile of the exported DOCX. These colours deliberately mirror the
   exported document (not the site palette), so the preview matches the file the person downloads. */
.ds-rv-box { max-height: 80vh; overflow-y: auto; padding: var(--ds-sp-md); border-radius: var(--ds-r); background: var(--ds-surface); }
.rv-page { margin-inline: auto; max-width: 640px; min-height: 840px; background: #fff; color: #111827; box-shadow: 0 1px 3px rgb(0 0 0 / .12); font-size: .875rem; line-height: 1.5; }
.rv-serif { font-family: Georgia, "Times New Roman", serif; }
.rv-p8 { padding: 32px; } .rv-p6 { padding: 24px; }
.rv-center { text-align: center; }
.rv-name-lg { font-size: 1.5rem; font-weight: 700; color: #111827; line-height: 1.25; }
.rv-name-xl { font-size: 1.875rem; font-weight: 800; line-height: 1.2; }
.rv-name-md { font-size: 1.25rem; font-weight: 800; color: #111827; line-height: 1.3; }
.rv-jobline { margin-top: 2px; font-size: .875rem; font-style: italic; color: #4b5563; }
.rv-jobtag { font-size: .875rem; font-weight: 500; color: #6b7280; }
.rv-job-accent { font-size: .875rem; font-weight: 500; color: #a5b4fc; }
.rv-contact { margin-top: 6px; font-size: 11px; color: #6b7280; }
.rv-contact-xs { font-size: 10px; color: #6b7280; }
.rv-contact-light { font-size: 11px; color: #cbd5e1; }
.rv-hr { margin: 16px 0 0; border: 0; border-top: 1px solid #d1d5db; }
.rv-banner { padding: 24px 32px; background: #0f172a; color: #fff; }
.rv-rule-b { padding-bottom: 10px; border-bottom: 1px solid #d1d5db; }
.rv-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; }
.rv-h { font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #1f2937; }
.rv-h.rv-h-sm { font-size: 10px; }
.rv-h.rv-h-accent { color: #334155; border-left: 4px solid #6366f1; padding-left: 8px; }
.rv-p { font-size: .875rem; color: #374151; }
.rv-p.xs { font-size: 11px; } .rv-p.t12 { font-size: .75rem; }
.rv-b { font-weight: 600; color: #111827; }
.rv-gray6 { color: #4b5563; }
.rv-date { font-size: 10px; color: #6b7280; } .rv-date.light { color: #9ca3af; } .rv-date.shrink { flex: 0 0 auto; }
.rv-ul { margin: 4px 0 0; padding-left: 16px; list-style: disc; color: #374151; }
.rv-ul li { margin: 2px 0; }
.rv-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rv-stack > * + * { margin-top: 2px; }
.rv-sm { font-size: .875rem; } .rv-xs { font-size: 11px; }
.rv-m1 { margin-top: 4px; } .rv-m15 { margin-top: 6px; } .rv-m2 { margin-top: 8px; } .rv-m3 { margin-top: 12px; } .rv-m4 { margin-top: 16px; } .rv-m5 { margin-top: 20px; }
.rv-page p, .rv-page ul { margin-bottom: 0; }

/* ───────────── Batch 3 helpers ───────────── */
.ds-minw { min-width: 6.5rem; }
.ds-maxw200 { flex: 1 1 140px; max-width: 200px; }
.ds-amt { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ds-t-accent { color: var(--ds-accent-ink); }
.ds-brow.is-active { background: var(--ds-accent-tint); }
.ds-badge.tone-solid { background: var(--ds-accent); color: var(--ds-on-accent); }
.ds-pill { cursor: pointer; }

/* ───────────────────────── Batch 3: result headlines, messages, promo banner, tabs ───────────────────────── */
.ds-big { margin: 0; font-size: clamp(2rem, 6vw, 2.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--ds-ink); }
.ds-big.xs { font-size: 1.5rem; } .ds-big.sm { font-size: clamp(1.7rem, 5vw, 2rem); } .ds-big.xl { font-size: clamp(2.6rem, 8vw, 3.6rem); }
.ds-big.good, .ds-eyebrow.good, .ds-msg.good { color: var(--ds-success); }
.ds-big.bad, .ds-eyebrow.bad, .ds-msg.bad { color: var(--ds-danger); }
.ds-big.warn, .ds-eyebrow.warn, .ds-msg.warn { color: var(--ds-warning); }
.ds-big.accent, .ds-eyebrow.accent, .ds-msg.accent { color: var(--ds-accent); }
.ds-big.dim { color: var(--ds-accent-tint-2); } .ds-big.mute { color: var(--ds-ink-3); }
.ds-msg { font-size: var(--ds-fs-sm); font-weight: 600; }
.ds-t-body { font-size: var(--ds-fs-sm); color: var(--ds-ink-2); }
.ds-between { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-sp-sm); }
.ds-input-wrap:has(.ds-affix.l) .ds-input { padding-left: 30px; }
.ds-input-wrap:has(.ds-affix.r) .ds-input { padding-right: 38px; }
.ds-promo { margin-top: var(--ds-sp-lg); padding: var(--ds-sp-xl) var(--ds-sp-lg); border-radius: var(--ds-r-lg); background: var(--ds-accent-deep); color: var(--ds-accent-tint); text-align: center; overflow: hidden; }
.ds-promo > * { max-width: 36rem; margin-inline: auto; }
.ds-promo-pill { display: inline-block; padding: 4px 12px; border-radius: var(--ds-r-pill); background: oklch(100% 0 0 / .12); color: var(--ds-on-accent); font-size: var(--ds-fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ds-promo-title { margin: var(--ds-sp-sm) auto 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ds-on-accent); }
.ds-promo-text { margin: var(--ds-sp-sm) auto 0; font-size: var(--ds-fs-sm); color: var(--ds-accent-tint); }
.ds-promo a { color: var(--ds-on-accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ds-seg-tabs button.cursor-not-allowed, .ds-seg button[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.ds-prose .ds-eyebrow, .ds-subcard .ds-eyebrow { margin: 0; }

/* ───────────────────────── Batch 3b: result boxes, lead text, plain lists ───────────────────────── */
.ds-plain-list { list-style: none; margin: 0; padding: 0; }
.ds-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ds-subcard.is-winner { background: var(--ds-success-tint); }
.ds-subcard.accent { background: var(--ds-accent-tint); }
.ds-rbox { margin-top: var(--ds-sp-lg); padding: var(--ds-sp-lg); border-radius: var(--ds-r); background: var(--ds-surface); }
.ds-rbox.center { text-align: center; } .ds-rbox.good { background: var(--ds-success-tint); }
.ds-stack-lg { display: grid; gap: var(--ds-sp-lg); }
.ds-lead { font-size: 1.1rem; font-weight: 500; color: var(--ds-ink-2); text-align: center; }
.ds-grid3 > .ds-subcard { text-align: center; }

/* ───────────────────────── Batch 3c: dice, scroll lists, truncation ───────────────────────── */
.ds-gridauto { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: var(--ds-sp-xs); }
.ds-scroll { max-height: 24rem; overflow-y: auto; }
.ds-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-dchip { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: var(--ds-r-sm); background: var(--ds-paper); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; font-size: var(--ds-fs-sm); color: var(--ds-ink-2); }
.ds-dchip.good { background: var(--ds-success-tint); color: var(--ds-success); }
.ds-dchip.bad { background: var(--ds-danger-tint); color: var(--ds-danger); }
.ds-line.between { justify-content: space-between; }
.ds-line .grow { min-width: 0; flex: 1; }
.ds-warn-text { color: var(--ds-warning); }
.ds-outbox { padding: 12px 14px; border-radius: var(--ds-r); background: var(--ds-surface); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9rem; overflow-wrap: anywhere; }
.ds-input.is-invalid, .ds-input.is-invalid:focus { border-color: var(--ds-danger); box-shadow: none; }

/* ───────────────────────── Batch 3d: media tiles, loaders, toast, link buttons ───────────────────────── */
.ds-link-btn { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ds-accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ds-link-btn:hover { color: var(--ds-accent-hover); }
.ds-spinner { width: 24px; height: 24px; margin-inline: auto; border-radius: 50%; border: 3px solid var(--ds-accent-tint-2); border-top-color: var(--ds-accent); animation: ds-spin .8s linear infinite; }
.ds-center-col { text-align: center; padding-block: var(--ds-sp-xl); }
.ds-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--ds-r-sm); background: var(--ds-surface); }
.ds-fill { display: block; width: 100%; height: 100%; object-fit: cover; }
.ds-skel { position: absolute; inset: 0; background: var(--ds-accent-tint); animation: ds-pulse 1.4s ease-in-out infinite; }
@keyframes ds-pulse { 50% { opacity: .5; } }
.ds-media-flag { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 var(--ds-sp-md); background: oklch(99.5% 0.002 265 / .92); text-align: center; font-size: var(--ds-fs-xs); line-height: 1.4; color: var(--ds-ink-3); }
.ds-card-tile { overflow: hidden; border-radius: var(--ds-r); background: var(--ds-paper); border: 1.5px solid var(--ds-rule); transition: border-color var(--ds-dur-fast) var(--ds-ease); }
.ds-card-tile.is-click { cursor: pointer; } .ds-card-tile.is-click:hover { border-color: var(--ds-accent); } .ds-card-tile.is-off { opacity: .55; }
.ds-card-cap { padding: 8px 10px; }
.ds-toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; padding: 10px 20px; border-radius: var(--ds-r-pill); background: var(--ds-accent-deep); color: var(--ds-on-accent); font-size: var(--ds-fs-sm); font-weight: 600; pointer-events: none; opacity: 0; transform: translate(-50%, 12px); transition: opacity 200ms var(--ds-ease), transform 200ms var(--ds-ease); }
.ds-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.ds-btn.is-done { background: var(--ds-success-tint); color: var(--ds-success); }

/* Batch 3e: file signature (hex) viewer */
.ds-wrapany { overflow-wrap: anywhere; }
.ds-hexblock { margin-top: var(--ds-sp-sm); padding: var(--ds-sp-sm) var(--ds-sp-md); border-radius: var(--ds-r-sm); background: var(--ds-surface); overflow-x: auto; }
.ds-hexrow { display: flex; gap: var(--ds-sp-md); white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--ds-fs-xs); line-height: 1.7; }
.ds-hexrow > :first-child { width: 40px; flex-shrink: 0; }
.hex-bytes { letter-spacing: .04em; color: var(--ds-ink-2); }
.hex-bytes .match { color: var(--ds-accent); font-weight: 700; }

/* Batch 3f: regex tester */
.ds-patrow { display: flex; flex-direction: column; gap: var(--ds-sp-xs); margin-top: var(--ds-sp-xs); }
@media (min-width: 640px) { .ds-patrow { flex-direction: row; align-items: flex-start; } .ds-patrow > .ds-wrapline { flex: 0 0 auto; flex-wrap: nowrap; } }
.ds-tree { margin: 6px 0 0 4px; padding-left: 20px; list-style: disc; }
.ds-tree > li + li { margin-top: 6px; }
.ds-tree.root { margin: 0; padding-left: 22px; gap: 8px; font-size: var(--ds-fs-sm); color: var(--ds-ink-2); }
.ds-code { padding: 1px 6px; border-radius: 6px; background: var(--ds-paper); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--ds-fs-xs); color: var(--ds-ink-2); }
.ds-tight { padding: var(--ds-sp-sm) var(--ds-sp-md); }
.ds-testline { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--ds-fs-sm); }
.ds-testline.is-none { color: var(--ds-ink-3); }
.ds-mk { border-radius: 4px; }
.ds-mk-run { background: var(--ds-accent-tint-2); }
.ds-mk-grp { background: oklch(80% 0.09 265); }
.ds-matchlist { display: grid; gap: 6px; margin-top: var(--ds-sp-xs); padding-top: var(--ds-sp-xs); border-top: 1px solid var(--ds-rule); }
.ds-matchrow { font-size: var(--ds-fs-xs); }
.ds-matchrow p { margin: 0; font-weight: 600; }
.ds-indent { margin: 0; padding-left: var(--ds-sp-md); }
.ds-matchrow .ds-hint { font-weight: 400; }
.ds-stackgap > * { min-width: 0; }

/* Batch 3g: text-area tools */
.ds-tall { min-height: 220px; resize: vertical; }
.ds-foot { text-align: center; margin-top: var(--ds-sp-md); }
.ds-block { display: block; }

/* Batch 3h: table picker / preview */
.ds-link { color: var(--ds-accent); font-weight: 600; text-decoration: none; }
.ds-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ds-end { justify-content: flex-end; }
.ds-pickcard { display: block; width: 100%; min-width: 0; padding: var(--ds-sp-md); border: 0; font: inherit; color: inherit; text-align: left; }
.ds-pickcard.selected { border-color: var(--ds-accent); background: var(--ds-accent-tint); }
.ds-ptable th, .ds-ptable td { padding: 6px 12px; border-top: 1px solid var(--ds-rule); text-align: left; white-space: nowrap; font-size: var(--ds-fs-xs); }
.ds-ptable thead th { border-top: 0; background: var(--ds-accent-tint); color: var(--ds-accent-ink); font-weight: 700; }

/* Batch 3i: DPI / quality badges and legends */
.ds-badge.tone-bad { background: var(--ds-danger-tint); color: var(--ds-danger); }
.ds-seg-inline { display: inline-grid; flex: 0 0 auto; }
.ds-seg-inline button { padding: 6px 16px; font-size: var(--ds-fs-xs); }
.ds-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--ds-ink-3); }
.ds-dot.good { background: var(--ds-success); } .ds-dot.accent { background: var(--ds-accent); } .ds-dot.warn { background: var(--ds-warning); } .ds-dot.bad { background: var(--ds-danger); }
.ds-legend { display: flex; flex-wrap: wrap; gap: 6px var(--ds-sp-lg); margin-top: var(--ds-sp-md); }
@media (min-width: 641px) { .ds-dpi-custom { grid-template-columns: 1fr 1fr 1.6fr; } }
.ds-result-col { display: flex; flex-direction: column; justify-content: flex-end; }
.ds-result-line { display: flex; align-items: center; min-height: 46px; margin-top: var(--ds-sp-xs); }
.ds-t-big { font-size: var(--ds-fs-lg); font-weight: 800; letter-spacing: -0.02em; }
@media (min-width: 641px) { .ds-sm-hide { visibility: hidden; } }
.ds-linkbox > span { flex: 1 1 240px; }

/* ANSWER block: legacy inner elements (big number, eyebrow, hint, copy buttons) inherit white-on-cobalt, so a page only swaps the wrapper class */
.ds-answer .ds-big { font-size: clamp(2.6rem, 8vw, 4rem); letter-spacing: -0.045em; line-height: 1; color: var(--ds-on-accent); }
.ds-answer .ds-big.sm { font-size: clamp(2.2rem, 7vw, 3rem); } .ds-answer .ds-big.xs { font-size: 1.5rem; }
.ds-answer .ds-big.xl { font-size: clamp(2.2rem, 7vw, 3.4rem); }
.ds-answer .ds-big.dim { color: oklch(72% 0.09 265); }
.ds-answer .ds-big.mute { color: var(--ds-accent-tint); }
.ds-answer .ds-big.bad { color: oklch(88% 0.09 25); }
.ds-answer .ds-big.warn { color: oklch(90% 0.1 85); }
.ds-answer .ds-big.good { color: oklch(90% 0.1 155); }
.ds-answer .ds-eyebrow, .ds-answer .ds-msg, .ds-answer .ds-eyebrow.dim, .ds-answer .ds-eyebrow.accent, .ds-answer .ds-eyebrow.mute { color: var(--ds-accent-tint); }
.ds-answer .ds-msg.bad { color: oklch(88% 0.09 25); } .ds-answer .ds-msg.good { color: oklch(90% 0.1 155); }
.ds-answer .ds-hint, .ds-answer .ds-t-mute, .ds-answer .ds-t-body, .ds-answer .ds-lead { color: var(--ds-accent-tint); }
.ds-answer a { color: var(--ds-on-accent); }
.ds-answer .ds-btn-soft { background: var(--ds-paper); color: var(--ds-accent-ink); }
.ds-answer .ds-btn-soft:hover { background: var(--ds-accent-tint); }
.ds-answer .ds-btn-soft:disabled { background: var(--ds-accent-hover); color: var(--ds-accent-tint-2); opacity: 1; }
.ds-answer .ds-btn-text { color: var(--ds-accent-tint); }
.ds-answer .ds-btn-text:hover { color: var(--ds-on-accent); }
.ds-answer .ds-subcard { background: var(--ds-accent-hover); color: var(--ds-accent-tint); }
.ds-answer .ds-subcard .ds-big, .ds-answer .ds-subcard .ds-big.accent { color: var(--ds-on-accent); }
.ds-answer .ds-lead.ds-lead-left { margin: 0; text-align: left; font-size: 1.25rem; font-weight: 600; color: var(--ds-on-accent); }
.ds-answer .sub { margin: 0; font-size: var(--ds-fs-lg); font-weight: 500; color: var(--ds-accent-tint); }
.ds-answer .v.sm { font-size: clamp(2rem, 7vw, 3rem); }

.ds-answer .ds-form-h { color: var(--ds-on-accent); margin: 0; }
.ds-answer .ds-brow { background: var(--ds-accent-hover); color: var(--ds-accent-tint); }
.ds-answer .ds-brow .ds-amt { font-size: 1.5rem; color: var(--ds-on-accent); }
.ds-answer .ds-brow.is-active { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ds-accent-tint-2); }
.ds-answer .ds-t-accent, .ds-answer .ds-t-mute, .ds-answer .ds-t-strong { color: var(--ds-accent-tint); }
.ds-answer .ds-badge.tone-solid { background: var(--ds-paper); color: var(--ds-accent-ink); }

.ds-answer-center { text-align: center; justify-items: center; }
.ds-answer .eq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ds-sp-xs); }
.ds-answer .eq .arrow { color: var(--ds-accent-tint); }
.ds-answer .ds-tone-good { color: oklch(90% 0.1 155); } .ds-answer .ds-tone-bad { color: oklch(88% 0.09 25); }
.ds-answer .ds-tone-none, .ds-answer .ds-tone-flat { color: var(--ds-accent-tint); }
.ds-answer .v.ds-tone-none, .ds-answer .v.ds-tone-flat { color: var(--ds-on-accent); }
.ds-answer .ds-big.accent { color: var(--ds-on-accent); }

/* Batch 4a: appliance rows, instance cards, impact bars (Power Usage & Savings) */
.ds-tab-sub { display: block; margin-top: 2px; font-size: var(--ds-fs-xs); font-weight: 500; opacity: .85; }
.ds-ap-panel { margin-top: var(--ds-sp-lg); }
.ds-aprow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px var(--ds-sp-md); border: 1.5px solid var(--ds-rule); border-radius: var(--ds-r); background: var(--ds-paper); }
.ds-aprow.big { border-color: var(--ds-warning-tint); background: var(--ds-warning-tint); }
.ds-apname { flex: 1 1 90px; min-width: 0; font-weight: 700; }
.ds-apcost { margin-left: auto; flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.ds-apcard { overflow: hidden; border: 1.5px solid var(--ds-rule); border-radius: var(--ds-r); background: var(--ds-paper); }
.ds-aphead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-sp-xs); padding: 10px var(--ds-sp-md); background: var(--ds-surface); font-weight: 700; }
.ds-aphead.big { background: var(--ds-warning-tint); }
.ds-aprow-inst { padding: 8px var(--ds-sp-md); }
.ds-idx { flex: 0 0 auto; min-width: 1.4rem; font-weight: 700; color: var(--ds-ink-3); }
.ds-empty-row { padding: 10px var(--ds-sp-md); font-size: var(--ds-fs-sm); font-style: italic; color: var(--ds-ink-3); }
.ds-bar { height: 8px; margin-top: 4px; overflow: hidden; border-radius: var(--ds-r-pill); background: var(--ds-surface); }
.ds-bar .fill { height: 100%; border-radius: var(--ds-r-pill); background: var(--ds-accent); }
.ds-bar .fill.chg { background: var(--ds-success); }
.ds-bar-head { font-size: var(--ds-fs-sm); }
.ds-t-good { color: var(--ds-success); font-weight: 700; }
.ds-big-unit { margin-left: 2px; font-size: 1.2rem; font-weight: 700; }
.ds-answer#therm-result { font-size: var(--ds-fs-base); line-height: 1.5; }
.ds-answer#therm-result strong { color: var(--ds-on-accent); }
.ds-wrapline.tight { gap: 4px; }

/* Batch 4b: subscription entries */
.ds-entry { padding: var(--ds-sp-sm) var(--ds-sp-md); border-radius: var(--ds-r); background: var(--ds-surface); }
.ds-entry.is-wasted { background: var(--ds-danger-tint); } .ds-entry.is-review { background: var(--ds-warning-tint); } .ds-entry.is-active { background: var(--ds-success-tint); }
.ds-badge.tone-mute { background: var(--ds-paper); color: var(--ds-ink-2); }
.ds-check-inline { display: inline-flex; margin-top: 0; font-size: var(--ds-fs-xs); }
.ds-answer .sub + .sub { margin-top: 0; }

/* Batch 4c: savings goals + SVG charts */
.ds-svg { display: block; width: 100%; margin-top: 4px; }
.ds-aphead.ds-click { cursor: pointer; background: var(--ds-surface); transition: background var(--ds-dur-fast) var(--ds-ease); }
.ds-aphead.ds-click:hover { background: var(--ds-accent-tint); }
.ds-apbody { padding: var(--ds-sp-md); border-top: 1.5px solid var(--ds-rule); }
.ds-apcard + .ds-apcard { margin-top: 0; }
.ds-choices.ds-m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Batch 5a: chart swatches, small stats, bar tones */
.ds-swatch { display: inline-block; width: 14px; height: 3px; margin-right: 6px; border-radius: 2px; vertical-align: middle; }
.ds-ml-auto { margin-left: auto; }
.ds-stat-sm { font-size: var(--ds-fs-xs); }
.ds-stat-sm .lbl { margin: 0; font-size: var(--ds-fs-sm); font-weight: 500; color: var(--ds-ink-2); }
.ds-stat-sm .val { margin: 2px 0 0; font-weight: 700; font-size: var(--ds-fs-base); font-variant-numeric: tabular-nums; }
.ds-bar .fill.bad { background: var(--ds-danger); } .ds-bar .fill.mute { background: var(--ds-ink-3); }
.ds-bar { height: 10px; }

/* Batch 5b: FIRE mode buttons, badges, expense builder, tables */
.ds-choices.ds-choices-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .ds-choices.ds-choices-3 { grid-template-columns: minmax(0, 1fr); } }
.classify-badge { display: inline-block; margin-left: 4px; padding: 2px 10px; border-radius: var(--ds-r-pill); font-size: var(--ds-fs-xs); font-weight: 700; }
.classify-badge.lean { background: var(--ds-success-tint); color: var(--ds-success); }
.classify-badge.regular { background: var(--ds-accent-tint); color: var(--ds-accent-ink); }
.classify-badge.fat { background: var(--ds-warning-tint); color: var(--ds-warning); }
.builder-row { display: grid; grid-template-columns: 1fr 100px 130px auto; gap: var(--ds-sp-xs); align-items: center; }
@media (max-width: 640px) { .builder-row { grid-template-columns: 1fr; } }
.ds-builder-foot { margin-top: var(--ds-sp-sm); padding-top: var(--ds-sp-sm); border-top: 1px solid var(--ds-rule); }
.ds-ptable tr.current-row td { font-weight: 700; color: var(--ds-accent-ink); background: var(--ds-accent-tint); }
.ds-ptable th { font-size: var(--ds-fs-sm); }
.ds-answer.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-sp-lg); }
@media (max-width: 640px) { .ds-answer.two { grid-template-columns: minmax(0, 1fr); } }
.ds-atile { min-width: 0; }

/* Batch 5c: rent vs buy */
.info-icon { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 4px; border-radius: 50%; background: var(--ds-accent-tint); color: var(--ds-accent-ink); font-size: 10px; font-weight: 700; font-style: normal; cursor: help; vertical-align: middle; }
.ds-list { margin: 0; padding-left: 22px; list-style: disc; font-size: var(--ds-fs-sm); color: var(--ds-ink-2); line-height: 1.5; }
.ds-list > li + li { margin-top: 6px; }
.ds-swatch.dashed { height: 0; background: none !important; border-top: 2px dashed #7c3aed; }
.ds-choices.ds-choices-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .ds-choices.ds-choices-2 { grid-template-columns: minmax(0, 1fr); } }
.ds-whatif-row { align-items: flex-end; gap: var(--ds-sp-lg); }

/* Batch 5d: sleep calculator results (inside the answer block) */
.ds-range { width: 100%; margin-top: var(--ds-sp-xs); accent-color: var(--ds-accent); }
.ds-optrow { display: flex; flex-direction: column; gap: 4px; margin-top: var(--ds-sp-xs); padding: var(--ds-sp-sm) var(--ds-sp-md); border-radius: var(--ds-r); background: var(--ds-accent-hover); }
.ds-optrow.good { box-shadow: inset 0 0 0 2px var(--ds-accent-tint-2); }
@media (min-width: 640px) { .ds-optrow { flex-direction: row; align-items: center; gap: var(--ds-sp-md); } .ds-optrow > .ds-big { flex: 0 0 9rem; } }
.ds-cbar { display: flex; height: 10px; margin-top: var(--ds-sp-xs); overflow: hidden; border-radius: var(--ds-r-pill); background: var(--ds-accent-deep); }
.ds-cbar > span { display: block; height: 100%; }
.ds-cbar .seg-lat { background: oklch(72% 0.01 270); } .ds-cbar .seg-a { background: oklch(88% 0.07 265); } .ds-cbar .seg-b { background: oklch(78% 0.12 265); }
.ds-answer strong, .ds-answer .ds-t-strong { color: var(--ds-on-accent); }
.ds-answer .ds-badge.tone-good { background: var(--ds-paper); color: var(--ds-success); }
.ds-answer .ds-note-warn { background: var(--ds-warning-tint); color: var(--ds-warning); }
.ds-answer .ds-note { background: var(--ds-accent-hover); color: var(--ds-accent-tint); }

/* Batch 5e: YouTube revenue estimator */
.ds-answer.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-sp-lg); }
@media (max-width: 760px) { .ds-answer.three { grid-template-columns: minmax(0, 1fr); } }
.ds-dot.sq { width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; }
.ds-canvaswrap { position: relative; margin-top: var(--ds-sp-xs); }
.ds-canvas { display: block; width: 100%; }
.ds-maxw-xs { max-width: 20rem; }
.ds-sep { margin-top: var(--ds-sp-lg); padding-top: var(--ds-sp-lg); border-top: 1px solid var(--ds-rule); }
.ds-w-lbl { flex: 0 0 7.5rem; } .ds-w-lbl2 { flex: 0 0 5.5rem; text-align: right; }
#audienceTotal.valid { color: var(--ds-success); } #audienceTotal.invalid { color: var(--ds-danger); }
.pct-input { width: 80px; }

.ds-pre-out { margin-bottom: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--ds-fs-sm); min-height: 3rem; }

.ds-answer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-sp-md); }
.ds-brow > div { min-width: 0; }

/* Batch 6a: password generator */
.ds-answer .ds-btn:not(.ds-btn-soft) { background: var(--ds-paper); color: var(--ds-accent-ink); }
.ds-answer .ds-btn:not(.ds-btn-soft):hover { background: var(--ds-accent-tint); }
.ds-pwout { min-height: 3.2rem; padding: var(--ds-sp-sm) 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: clamp(1.2rem, 4.5vw, 1.7rem); font-weight: 700; letter-spacing: .02em; overflow-wrap: anywhere; word-break: break-all; }
.ds-pw-w { color: var(--ds-on-accent); } .ds-pw-p { color: oklch(88% 0.12 155); }
.ds-dot.ds-dw { background: var(--ds-on-accent); } .ds-dot.ds-dp { background: oklch(88% 0.12 155); }
.ds-sbar { height: 8px; overflow: hidden; border-radius: var(--ds-r-pill); background: var(--ds-accent-hover); }
.ds-sfill { height: 100%; border-radius: var(--ds-r-pill); transition: width var(--ds-dur) var(--ds-ease); }
.ds-sfill.s-red { background: oklch(80% 0.13 25); } .ds-sfill.s-amber { background: oklch(86% 0.13 85); } .ds-sfill.s-blue { background: oklch(88% 0.07 265); } .ds-sfill.s-green { background: oklch(86% 0.14 155); }
.ds-sl { font-size: var(--ds-fs-sm); font-weight: 700; }
.ds-sl.s-red { color: oklch(88% 0.09 25); } .ds-sl.s-amber { color: oklch(90% 0.1 85); } .ds-sl.s-blue { color: var(--ds-accent-tint); } .ds-sl.s-green { color: oklch(90% 0.1 155); }

/* Batch 6b: icebreaker */
.ds-q { margin: 0; font-size: clamp(1.4rem, 4.5vw, 2rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.ds-center-row { justify-content: center; }

/* Batch 6c: JSON formatter editor panes + syntax colours */
.ds-panehead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-sp-xs); margin: calc(-1 * var(--ds-sp-sm)) calc(-1 * var(--ds-sp-md)) var(--ds-sp-xs); padding: 10px var(--ds-sp-md); border-bottom: 1px solid var(--ds-rule); }
.ds-editor { display: flex; height: 420px; border-radius: var(--ds-r-sm); overflow: hidden; background: var(--ds-paper); }
.ds-linenos { margin: 0; padding: 12px 8px; overflow: hidden; text-align: right; user-select: none; background: var(--ds-surface); color: var(--ds-ink-3); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ds-editor-ta { flex: 1; min-width: 0; padding: 12px; border: 0; resize: none; background: var(--ds-paper); color: var(--ds-ink); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; outline: 0; }
.ds-codeout { height: 420px; overflow: auto; border-radius: var(--ds-r-sm); background: var(--ds-paper); font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.json-tree summary { cursor: pointer; } .json-tree summary::marker { color: var(--ds-ink-3); }
.jk { color: var(--ds-accent); font-weight: 600; } .js { color: var(--ds-success); } .jn { color: var(--ds-warning); } .jb { color: oklch(45% 0.15 305); font-weight: 600; }
.jnull { color: var(--ds-ink-3); font-style: italic; } .jp { color: var(--ds-ink-2); } .jln { color: var(--ds-ink-3); user-select: none; } .jidx { margin-right: 4px; font-size: 10px; color: var(--ds-ink-3); }
.jin { padding-left: 16px; } .jtree-ind { margin-left: 6px; border-left: 1px solid var(--ds-rule); } .jcount { font-size: 11px; font-weight: 400; color: var(--ds-ink-3); }
.jpre { margin: 0; padding: 12px; white-space: pre; }

/* Batch 6d: JWT */
.ds-box { padding: var(--ds-sp-md); border-radius: var(--ds-r-lg); background: var(--ds-surface); }
.ds-box .ds-input, .ds-box .ds-select { background: var(--ds-paper); }
.ds-dot.jh { background: #7c3aed; } .ds-dot.jp2 { background: #0284c7; } .ds-dot.js2 { background: #059669; }
.jwt-input-wrap { position: relative; }
.jwt-textarea, .jwt-highlight { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; padding: 12px; white-space: pre-wrap; word-break: break-all; }
.jwt-textarea { position: relative; z-index: 2; width: 100%; min-height: 170px; resize: vertical; border: 2px solid var(--ds-rule); border-radius: var(--ds-r); color: transparent; caret-color: var(--ds-ink); background: transparent; }
.jwt-textarea:focus { outline: 0; border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-accent-tint-2); }
.jwt-textarea.err { border-color: var(--ds-danger); }
.jwt-highlight { position: absolute; inset: 0; margin: 2px; border-radius: var(--ds-r); pointer-events: none; color: var(--ds-ink-3); z-index: 1; overflow: hidden; }
.jwt-highlight .h { color: #7c3aed; background: #f5f3ff; border-radius: 2px; } .jwt-highlight .p { color: #0284c7; background: #f0f9ff; border-radius: 2px; }
.jwt-highlight .s { color: #036639; background: #ecfdf5; border-radius: 2px; } .jwt-highlight .dot { color: var(--ds-ink-3); }
.claim-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ds-rule); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.claim-row:last-child { border-bottom: 0; }
.claim-key { flex-shrink: 0; color: var(--ds-ink-2); } .claim-val { color: var(--ds-ink); text-align: right; word-break: break-word; }
.claim-val-time { margin-top: 1px; font: 11px var(--ds-font); color: var(--ds-ink-3); }
#encode-output { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; word-break: break-all; }
#encode-output .h { color: #7c3aed; } #encode-output .p { color: #0284c7; } #encode-output .s { color: #036639; } #encode-output .dot { color: var(--ds-ink-3); }

/* Batch 6e: time zone converter */
.ds-dot.good { background: var(--ds-success); } .ds-dot.bad { background: var(--ds-danger); }
.ds-sm-only { display: none; } @media (min-width: 641px) { .ds-sm-only { display: inline; } }
.ds-sugg { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-sp-xs); padding: 10px var(--ds-sp-md); font-size: var(--ds-fs-sm); cursor: pointer; border-radius: var(--ds-r-sm); }
.ds-sugg:hover, .ds-sugg.active { background: var(--ds-accent-tint); }
.ds-crow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-sp-sm); padding: var(--ds-sp-sm) var(--ds-sp-md); border-radius: var(--ds-r); background: var(--ds-accent-hover); }
.ds-crow > :nth-child(3) { margin-left: auto; text-align: right; }
.ds-cstripe { align-self: stretch; flex: 0 0 6px; min-height: 40px; border-radius: var(--ds-r-pill); }
.ds-cstripe.good { background: oklch(80% 0.15 155); } .ds-cstripe.bad { background: oklch(75% 0.14 25); } .ds-cstripe.off { background: var(--ds-accent-tint-2); }
.ds-movecol { display: flex; flex-direction: column; gap: 2px; }
.ds-mvbtn { width: 26px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ds-accent-tint); font-size: 10px; cursor: pointer; }
.ds-mvbtn:hover { background: var(--ds-accent); color: var(--ds-on-accent); } .ds-mvbtn:disabled { opacity: .3; cursor: default; background: transparent; }
.ds-answer .ds-badge.tone-warn { background: var(--ds-warning-tint); color: var(--ds-warning); }
.ds-answer .ds-placeholder { background: var(--ds-accent-hover); color: var(--ds-accent-tint); }
.timeline { display: grid; grid-template-columns: 128px repeat(48, 11px); grid-auto-rows: 22px; column-gap: 1px; min-width: 780px; }
.tl-label { align-self: center; padding-right: 10px; font-size: 12.5px; color: var(--ds-ink-2); white-space: nowrap; }
.tl-label.everyone { font-weight: 700; color: var(--ds-ink); }
.tl-cell { height: 20px; align-self: center; border-radius: 2px; background: var(--ds-rule); } .tl-cell.good { background: var(--ds-success); }
.tl-bracket-row { height: 16px; }
.tl-bracket { align-self: end; height: 8px; margin-bottom: 2px; box-sizing: border-box; border: 2px solid var(--ds-accent); border-radius: 5px; background: var(--ds-accent-tint); }
.tl-axis-row { height: 18px; } .tl-axis-cell { position: relative; height: 18px; }
.tl-axis-cell span { position: absolute; left: 0; top: 2px; font-size: 11px; color: var(--ds-ink-3); white-space: nowrap; }

/* Batch 6f: seasonal produce */
.ds-ptile { padding: var(--ds-sp-sm) var(--ds-sp-md); border-radius: var(--ds-r); background: var(--ds-accent-hover); }
.ds-ptile.signature { box-shadow: inset 0 0 0 2px var(--ds-accent-tint-2); }
.ds-answer .ds-ptile .ds-t-strong { color: var(--ds-on-accent); }
.ds-link-btn.is-off { color: var(--ds-ink-3); cursor: default; text-decoration: none; }
.ds-center-text { text-align: center; }
.ds-monthbar { align-items: center; }

/* Batch 6g: PlaySparks (toggle chips, result card, paywall dialog) */
.ds-tchip { padding: 8px 16px; border: 1.5px solid var(--ds-rule); border-radius: var(--ds-r-pill); background: var(--ds-paper); color: var(--ds-ink-2); font: inherit; font-size: var(--ds-fs-sm); font-weight: 600; cursor: pointer; transition: border-color var(--ds-dur-fast) var(--ds-ease), background var(--ds-dur-fast) var(--ds-ease); }
.ds-tchip:hover { border-color: var(--ds-accent); }
.ds-tchip[aria-pressed="true"] { background: var(--ds-accent); border-color: var(--ds-accent); color: var(--ds-on-accent); }
.ds-skelbar { height: 12px; border-radius: 6px; background: var(--ds-rule); animation: ds-pulse 1.4s ease-in-out infinite; }
.ds-skelbar.tall { height: 20px; }
.ds-act-sec { margin-top: var(--ds-sp-md); }
.ds-list.dec { list-style: decimal; }
.ds-answer .ds-list { color: var(--ds-accent-tint); }
.ds-quote { margin: 0; padding: var(--ds-sp-sm) var(--ds-sp-md); border-left: 4px solid var(--ds-accent-tint-2); border-radius: 0 var(--ds-r-sm) var(--ds-r-sm) 0; background: var(--ds-accent-hover); font-style: italic; color: var(--ds-on-accent); }
.ds-act-badge { display: inline-block; margin: 6px 0 0; padding: 6px 16px; border-radius: var(--ds-r-pill); background: var(--ds-paper); color: var(--ds-accent-ink); font-weight: 700; }
.ds-dialog { width: calc(100% - 2.5rem); max-width: 24rem; padding: 0; border: 0; border-radius: var(--ds-r-lg); background: var(--ds-paper); color: var(--ds-ink); font-family: var(--ds-font); box-shadow: 0 24px 60px -20px oklch(30% 0.1 265 / .5); }
.ds-dialog::backdrop { background: oklch(25% 0.05 265 / .55); }
.ds-dialog-body { padding: var(--ds-sp-lg); }

/* Batch 7a: merge PDF file rows */
.ds-frow { display: flex; align-items: center; gap: var(--ds-sp-sm); padding: 10px var(--ds-sp-md); border: 1.5px solid var(--ds-rule); border-radius: var(--ds-r); background: var(--ds-paper); cursor: grab; }
.ds-frow.dragging { opacity: .4; } .ds-frow.drag-over-target { border-color: var(--ds-accent); } .ds-frow.error-row { border-color: var(--ds-danger); background: var(--ds-danger-tint); }
.ds-fname { flex: 1; min-width: 0; }
.drag-handle { flex: 0 0 auto; color: var(--ds-ink-3); user-select: none; font-size: 1.1rem; }
.ds-mvbtn.ds-mvbtn-dark { color: var(--ds-ink-2); } .ds-mvbtn.ds-mvbtn-dark:hover { background: var(--ds-accent-tint); color: var(--ds-accent-ink); }
.ds-answer-link { align-self: center; color: var(--ds-accent-tint); }

/* Batch 7b: PDF to images thumbnails */
.ds-thumbgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--ds-sp-sm); max-height: 420px; overflow-y: auto; padding: var(--ds-sp-xs); border-radius: var(--ds-r); background: var(--ds-surface); }
.thumb-cell { position: relative; border: 2px solid var(--ds-rule); border-radius: var(--ds-r-sm); cursor: pointer; overflow: hidden; background: var(--ds-paper); transition: border-color var(--ds-dur-fast) var(--ds-ease); }
.thumb-cell:hover { border-color: var(--ds-accent-tint-2); }
.thumb-cell.selected { border-color: var(--ds-accent); background: var(--ds-accent-tint); }
.thumb-cell canvas { display: block; width: 100%; height: auto; pointer-events: none; }
.thumb-cell .thumb-num { position: absolute; right: 4px; bottom: 4px; padding: 1px 6px; border-radius: 4px; background: var(--ds-accent-deep); color: var(--ds-on-accent); font-size: 11px; font-weight: 700; }
.thumb-cell .thumb-check { position: absolute; top: 4px; left: 4px; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 2px solid var(--ds-ink-3); border-radius: 4px; background: var(--ds-paper); color: var(--ds-on-accent); font-size: 12px; pointer-events: none; }
.thumb-cell.selected .thumb-check { background: var(--ds-accent); border-color: var(--ds-accent); }
.thumb-cell .thumb-placeholder { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; color: var(--ds-ink-3); font-size: 11px; }

.ds-ficon { display: flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; overflow: hidden; border-radius: var(--ds-r-sm); background: var(--ds-surface); }
.ds-fthumb { width: 100%; height: 100%; object-fit: cover; }
.ds-kindchip { font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--ds-accent-ink); }
.ds-frow.has-error { border-color: var(--ds-danger); background: var(--ds-danger-tint); }

/* Batch 7c: QR code */
.ds-qrlayout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--ds-sp-xl); }
@media (max-width: 860px) { .ds-qrlayout { grid-template-columns: minmax(0, 1fr); gap: var(--ds-sp-lg); } }
.ds-color { display: block; width: 100%; height: 44px; padding: 3px; border: 2px solid var(--ds-rule); border-radius: var(--ds-r); background: var(--ds-paper); cursor: pointer; }
.ds-qrempty { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 280px; aspect-ratio: 1; margin: 0 auto; padding: var(--ds-sp-md); border: 2px dashed var(--ds-rule); border-radius: var(--ds-r); background: var(--ds-paper); text-align: center; font-size: var(--ds-fs-sm); color: var(--ds-ink-2); }
.ds-qrlabel { margin: 8px 0 0; text-align: center; font-weight: 700; }

/* Batch 8: Resume & CV Refresh */
.ds-pgstack > * + * { margin-top: var(--ds-sp-xl); }
.ds-pgstack > #input-section, .ds-pgstack > #code-success-panel { margin-top: var(--ds-sp-lg); }
.ds-stepcard { padding: var(--ds-sp-md) var(--ds-sp-lg); }
.ds-stepcard.featured { box-shadow: inset 0 0 0 2px var(--ds-accent); }
.ds-stepno { display: inline-block; min-width: 28px; padding: 3px 10px; border-radius: var(--ds-r-pill); background: var(--ds-accent-tint); color: var(--ds-accent-ink); font-weight: 800; text-align: center; }
.ds-stylecard { align-items: stretch; padding: 8px; }
.ds-stylesample { padding: 10px 8px; border-radius: 8px; background: var(--ds-paper); }
.ds-sm-name { margin: 0; text-align: center; font-size: 11px; font-weight: 700; }
.ds-sm-head { margin: 4px 0 0; padding-bottom: 2px; border-bottom: 1px solid; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.ds-sample-lines { margin: 4px 0 0; font-size: 8px; line-height: 1.2; color: var(--ds-ink-3); }
.ds-shot { overflow: hidden; border-radius: var(--ds-r-lg); background: var(--ds-surface); }
.ds-shot img { display: block; width: 100%; }
.ds-block-gap { margin-top: var(--ds-sp-xl); }
.ds-doccard { overflow: hidden; border: 1.5px solid var(--ds-rule); border-radius: var(--ds-r-lg); background: var(--ds-paper); }
.ds-doc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-sp-xs); padding: 12px var(--ds-sp-md); border-bottom: 1px solid var(--ds-rule); background: var(--ds-surface); }
.ds-doc-body { max-height: 20rem; overflow-y: auto; padding: var(--ds-sp-md); white-space: pre-wrap; font-size: var(--ds-fs-sm); line-height: 1.6; color: var(--ds-ink-2); }

/* ───────────────────────── Site pages (Next.js): home, lists, blog, legal ───────────────────────── */
.hm-hero { padding: var(--ds-sp-2xl) 0 var(--ds-sp-lg); text-align: center; }
.hm-hero h1 { max-width: 15ch; margin: 0 auto; font-weight: 800; font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1.02; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.hm-hero .hm-lede { max-width: 40ch; margin: var(--ds-sp-lg) auto 0; color: var(--ds-ink-2); font-size: 1.3rem; }
.hm-search { display: flex; gap: var(--ds-sp-xs); max-width: 620px; margin: var(--ds-sp-xl) auto 0; }
.hm-search .ds-input { flex: 1; min-width: 0; }
.hm-search .ds-btn { padding: 0 28px; font-size: var(--ds-fs-base); }
.hm-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-sp-xs); max-width: 860px; margin: var(--ds-sp-lg) auto 0; }
.hm-pill { display: inline-block; padding: 9px 18px; border-radius: var(--ds-r-pill); background: var(--ds-surface); font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-ink); text-decoration: none; transition: background var(--ds-dur-fast) var(--ds-ease), color var(--ds-dur-fast) var(--ds-ease); }
.hm-pill:hover { background: var(--ds-accent-tint); color: var(--ds-accent-ink); }
/* Homepage topic tiles: a bordered white box = clickable (see DESIGN_SYSTEM.md box kinds) */
.hm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--ds-sp-md); }
.hm-tile { padding: var(--ds-sp-lg); border: 1.5px solid var(--ds-rule); border-radius: var(--ds-r-lg); background: var(--ds-paper); scroll-margin-top: 90px; transition: border-color var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease); }
.hm-tile:hover, .hm-tile:target { border-color: var(--ds-accent); box-shadow: 0 8px 22px -14px var(--ds-accent); }
.hm-tile h3 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ds-accent); }
.hm-tile .d { margin: 4px 0 14px; color: var(--ds-ink-2); font-size: var(--ds-fs-sm); }
.hm-tile ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hm-tile li a { display: block; padding: 5px 0; color: var(--ds-ink); font-weight: 500; text-decoration: none; }
.hm-tile li a:hover { color: var(--ds-accent); text-decoration: underline; text-underline-offset: 3px; }
.hm-tile details { margin-top: 4px; }
.hm-tile summary { cursor: pointer; list-style: none; padding: 8px 0 0; color: var(--ds-accent); font-size: var(--ds-fs-sm); font-weight: 600; }
.hm-tile summary::-webkit-details-marker { display: none; }
.hm-tile details[open] summary .more, .hm-tile details:not([open]) summary .less { display: none; }
.hm-tile details ul { margin-top: 4px; }
.hm-sec { padding-top: var(--ds-sp-2xl); scroll-margin-top: 90px; }
.hm-sh { margin-bottom: var(--ds-sp-lg); }
.hm-sh h2 { font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.035em; line-height: 1.1; }
.hm-sh p { margin-top: 6px; color: var(--ds-ink-2); }
.hm-more { display: inline-block; margin-top: var(--ds-sp-md); color: var(--ds-accent); font-size: var(--ds-fs-sm); font-weight: 600; text-decoration: none; }
.hm-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.hm-why { padding: var(--ds-sp-xl) var(--ds-sp-xl); border-radius: var(--ds-r-lg); background: var(--ds-accent-tint); color: var(--ds-accent-ink); }
.hm-why h2 { margin-top: var(--ds-sp-sm); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -0.035em; line-height: 1.1; color: var(--ds-accent-deep); }
.hm-why .hm-body { display: grid; gap: var(--ds-sp-md); margin-top: var(--ds-sp-lg); max-width: 70ch; }
.hm-why strong { color: var(--ds-accent-deep); }
@media (max-width: 560px) { .hm-why { padding: var(--ds-sp-lg) var(--ds-sp-md); } }
.hm-adband { margin-top: var(--ds-sp-2xl); padding: var(--ds-sp-sm); border-radius: var(--ds-r-lg); background: var(--ds-surface); }
.ds-card.nogo::after { content: none; }
.ds-card .go { margin-top: var(--ds-sp-xs); font-size: var(--ds-fs-sm); font-weight: 600; color: var(--ds-accent); }
.ds-card .meta { font-size: var(--ds-fs-xs); font-weight: 600; color: var(--ds-ink-3); }
.ds-linktiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--ds-sp-xs); margin: var(--ds-sp-sm) 0 0; padding: 0; list-style: none; }
.ds-linktile { display: block; padding: 12px var(--ds-sp-md); border: 1.5px solid var(--ds-rule); border-radius: var(--ds-r); background: var(--ds-paper); color: var(--ds-accent); font-size: var(--ds-fs-sm); font-weight: 600; text-decoration: none; transition: border-color var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur) var(--ds-ease); }
.ds-linktile:hover { border-color: var(--ds-accent); transform: translateY(-1px); }
.ds-listgroup + .ds-listgroup { margin-top: var(--ds-sp-xl); }
.ds-listgroup h2 { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; }
.ds-legal { padding-top: var(--ds-sp-2xl); padding-bottom: var(--ds-sp-lg); }
.ds-legal h1 { font-weight: 800; font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.05; letter-spacing: -0.04em; }
.ds-legal h2 { margin-top: var(--ds-sp-xl); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; }
.ds-legal p, .ds-legal ul, .ds-legal ol { margin-top: var(--ds-sp-sm); color: var(--ds-ink-2); }
.ds-legal ul, .ds-legal ol { padding-left: 22px; } .ds-legal li + li { margin-top: 6px; }
.ds-legal a { color: var(--ds-accent); font-weight: 600; text-decoration: none; } .ds-legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ds-legal strong { color: var(--ds-ink); }
.ds-legal .ds-legal-meta { color: var(--ds-ink-3); font-size: var(--ds-fs-sm); }
.ds-blog > * + * { margin-top: var(--ds-sp-lg); }
.ds-blog h2 { padding-top: var(--ds-sp-xs); font-weight: 800; font-size: clamp(1.4rem, 3vw, 1.8rem); letter-spacing: -0.03em; line-height: 1.15; }
.ds-blog p, .ds-blog li { color: var(--ds-ink-2); font-size: 1.1rem; line-height: 1.7; }
.ds-blog ul, .ds-blog ol { padding-left: 24px; } .ds-blog li + li { margin-top: 8px; }
.ds-blog strong { color: var(--ds-ink); }
.ds-blog blockquote { margin-left: 0; padding: var(--ds-sp-xs) var(--ds-sp-md); border-left: 4px solid var(--ds-accent-tint-2); color: var(--ds-ink-2); font-size: 1.1rem; }
.ds-blog .ds-pair { display: grid; gap: var(--ds-sp-md); padding: var(--ds-sp-md) var(--ds-sp-lg); border-radius: var(--ds-r); background: var(--ds-surface); }
.ds-blog .ds-pair .lbl { font-size: var(--ds-fs-sm); font-weight: 700; color: var(--ds-ink-2); }
.ds-blog .ds-pair .lbl.good { color: var(--ds-accent); }
.ds-blog .ds-pros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-sp-lg); }
@media (max-width: 560px) { .ds-blog .ds-pros { grid-template-columns: minmax(0, 1fr); } }
.ds-blog .ds-pros ul { list-style: none; padding: 0; } .ds-blog .ds-pros li { font-size: var(--ds-fs-sm); }
.ds-blog .ds-pros .lbl.pro { color: var(--ds-success); } .ds-blog .ds-pros .lbl.con { color: var(--ds-danger); }
.ds-postmeta { display: flex; flex-wrap: wrap; gap: var(--ds-sp-md); margin-top: var(--ds-sp-sm); color: var(--ds-ink-3); font-size: var(--ds-fs-sm); }
.ds-blogpost { display: flex; flex-direction: column; gap: var(--ds-sp-xs); }

.ds-adslot { width: 100%; overflow: hidden; }
.hm-sec .ds-faq { max-width: 820px; }


/* Generated-text output (Lorem Ipsum Generator): a readable, selectable box with copy actions above it */
.ds-textout { display: block; width: 100%; min-height: 12rem; max-height: min(60vh, 34rem); margin: var(--ds-sp-sm) 0 0; padding: 14px 16px; border: 0; border-radius: var(--ds-r-sm); background: var(--ds-paper); color: var(--ds-ink); font: inherit; font-size: var(--ds-fs-base); line-height: 1.65; resize: vertical; overflow: auto; }
.ds-textout.is-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--ds-fs-sm); line-height: 1.55; }
.ds-out-head .ds-btn-row { display: flex; flex-wrap: wrap; gap: var(--ds-sp-xs); }
/* Four-option segmented control that wraps to two rows on phones so labels are never clipped */
.ds-seg-2x2 button { padding-inline: 10px; }
@media (max-width: 560px) { .ds-seg-2x2 { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--ds-r); } }
.ds-out-head.is-wrap { flex-wrap: wrap; }
@media (max-width: 560px) { .ds-out-head.is-wrap .t { flex: 1 1 100%; } }
.ds-stats.is-compact { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: var(--ds-sp-sm) var(--ds-sp-md); }

/* ───────────────────────── Printable-sheet tools (Affirmation Cards): controls + sheet preview ───────────────────────── */
.ds-pl { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--ds-sp-lg); align-items: start; }
.ds-pl-aside { display: flex; flex-direction: column; gap: var(--ds-sp-md); min-width: 0; }
.ds-pl-main { min-width: 0; }
.ds-pl-box { padding: var(--ds-sp-md); border-radius: var(--ds-r); background: var(--ds-surface); }
.ds-pl-title { margin: 0 0 var(--ds-sp-sm); font-size: var(--ds-fs-sm); font-weight: 700; color: var(--ds-ink-2); }
.ds-pl-box .ds-field + .ds-field { margin-top: var(--ds-sp-md); }
@media (max-width: 900px) {
  .ds-pl { grid-template-columns: minmax(0, 1fr); }
  .ds-pl-aside { display: contents; }
  .ds-pl-a { order: 1; } .ds-pl-main { order: 2; } .ds-pl-b { order: 3; }
}
.ds-pl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-sp-xs) var(--ds-sp-md); margin-bottom: var(--ds-sp-xs); }
.ds-pl-count { font-weight: 700; }
.ds-pl-count small { font-weight: 500; color: var(--ds-ink-2); }
.ds-pl-actions { display: flex; flex-wrap: wrap; gap: var(--ds-sp-xs); }
.ds-pl-stage { padding: var(--ds-sp-sm); border-radius: var(--ds-r); background: var(--ds-accent-tint); }
.ds-cardbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-sp-xs); min-height: 3.4rem; margin: var(--ds-sp-sm) 0; padding: var(--ds-sp-sm) var(--ds-sp-md); border-radius: var(--ds-r); background: var(--ds-surface); font-size: var(--ds-fs-sm); color: var(--ds-ink-2); }
.ds-cardbar .who { font-weight: 700; color: var(--ds-ink); }
.ds-cardbar .ds-input { flex: 1 1 14rem; min-width: 0; padding: 8px 12px; font-size: var(--ds-fs-base); }
.ds-cardbar .cc { font-size: var(--ds-fs-xs); color: var(--ds-ink-3); font-variant-numeric: tabular-nums; }
.ds-stepper { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-sp-xs); }
.ds-stepper .ds-input { width: 5rem; padding: 8px 6px; text-align: center; }
.ds-stepper .ds-btn { min-width: 2.6rem; padding: 8px 14px; }
.ds-seg button small { display: block; font-weight: 500; font-size: var(--ds-fs-xs); opacity: .85; }
.ds-seg-sizes button { padding-block: 8px; }
.ds-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-sp-xs); }
.ds-sw { padding: 0; overflow: hidden; border: 2px solid var(--ds-rule); border-radius: var(--ds-r-sm); background: var(--ds-paper); color: var(--ds-ink-2); font: inherit; font-size: var(--ds-fs-xs); font-weight: 600; text-align: center; cursor: pointer; }
.ds-sw:hover { border-color: var(--ds-accent-tint-2); }
.ds-sw[aria-pressed="true"] { border-color: var(--ds-accent); color: var(--ds-ink); }
.ds-sw .demo { display: grid; place-items: center; height: 34px; border-bottom: 3px solid; font-size: var(--ds-fs-sm); font-weight: 700; }
.ds-sw .nm { display: block; padding: 4px 0 5px; }

/* ───────────────────────── Math Worksheet Generator: problem cells, header, answer key (printed black on white) ───────────────────────── */
.ps-card.ws-cell { padding: 1.5mm 2.5mm; border: 0; background: #fff; color: #000; cursor: default; text-align: left; font-family: var(--ds-font); font-size: var(--ws-pt, 14pt); font-variant-numeric: tabular-nums; line-height: 1.2; }
.ws-cell.is-h { flex-direction: row; align-items: center; justify-content: flex-start; gap: 2.5mm; }
.ws-cell.is-v { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .4mm; }
.ws-cell .ws-n { flex: none; min-width: 6mm; font-size: .62em; font-weight: 700; color: #444; }
.ws-cell .ws-h { white-space: nowrap; }
.ws-cell .ws-blank { display: inline-block; width: 1.8em; height: 1em; margin-left: .2em; vertical-align: baseline; border-bottom: 0.3mm solid #000; }
.ws-cell .ws-rtxt { margin: 0 .25em; font-size: .8em; }
.ws-cell .ws-stack { display: inline-grid; justify-items: end; align-self: center; margin-top: 1mm; font-weight: 600; }
.ws-cell .ws-row { display: flex; justify-content: space-between; gap: .6em; width: 100%; }
.ws-cell .ws-row .op { font-weight: 700; }
.ws-cell .ws-ans { width: 100%; height: 1.7em; margin-top: .15em; border-top: 0.4mm solid #000; }
.ws-cell.is-key { flex-direction: row; align-items: center; justify-content: flex-start; gap: 1.5mm; padding: 0 2mm; font-size: 10.5pt; }
.ws-cell.is-key .ws-n { min-width: 7mm; font-size: 1em; }
.ws-head { display: flex; flex-direction: column; gap: 2.5mm; color: #000; font-family: var(--ds-font); }
.ws-title { margin: 0; font-size: 18pt; font-weight: 800; line-height: 1.1; }
.ws-line { display: flex; align-items: flex-end; gap: 6mm; font-size: 11pt; font-weight: 600; }
.ws-line .fill { flex: 1; height: 1.1em; border-bottom: 0.3mm solid #000; }
.ws-line .short { display: inline-block; width: 16mm; height: 1.1em; border-bottom: 0.3mm solid #000; }
.ws-line.score { justify-content: flex-end; }
.ws-keyhead { margin: 0; font-size: 16pt; font-weight: 800; color: #000; font-family: var(--ds-font); }

/* ───────────────────────── Keyword Difficulty Checker (summary table + stacked, collapsible reports; built on ds-prose) ───────────────────────── */
.ds-kw-narrow { max-width: 820px; }
.ds-kw-glance h2 { margin: 0 0 var(--ds-sp-sm); }
.ds-kw-glance .ds-table-wrap { margin: 0; }
.ds-kw-glance td:first-child { font-weight: 700; }
.ds-kw-glance .num, .ds-kw-card .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-kw-jump { font-weight: 700; color: var(--ds-accent); text-decoration: none; white-space: nowrap; }
.ds-kw-jump:hover { text-decoration: underline; text-underline-offset: 3px; }
.ds-kw-card { margin-top: var(--ds-sp-md); padding: 0; overflow: hidden; }
.ds-kw-card > summary.ds-kw-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: var(--ds-sp-md) var(--ds-sp-lg); cursor: pointer; list-style: none; }
.ds-kw-card > summary.ds-kw-sum::-webkit-details-marker { display: none; }
.ds-kw-card > summary.ds-kw-sum::after { content: "+"; flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ds-paper); color: var(--ds-accent); font-weight: 700; margin-left: auto; transition: transform var(--ds-dur-fast) var(--ds-ease); }
.ds-kw-card[open] > summary.ds-kw-sum::after { transform: rotate(45deg); }
.ds-kw-sumleft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.ds-kw-name { font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 1.7rem); letter-spacing: -0.03em; overflow-wrap: anywhere; }
.ds-kw-tag { margin-left: 8px; font-size: var(--ds-fs-xs); font-weight: 600; color: var(--ds-ink-3); }
.ds-kw-body { padding: 0 var(--ds-sp-lg) var(--ds-sp-lg); }
.ds-kw-body > p, .ds-kw-body > ul, .ds-kw-body > .ds-kw-small, .ds-kw-body > .ds-kw-lead { max-width: 80ch; }
.ds-kw-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-sp-md); }
@media (max-width: 760px) { .ds-kw-tiles { grid-template-columns: minmax(0, 1fr); } }
.ds-kw-tile { padding: var(--ds-sp-md) var(--ds-sp-lg); border-radius: var(--ds-r); background: var(--ds-paper); }
.ds-kw-tile .lbl { font-size: var(--ds-fs-sm); font-weight: 700; color: var(--ds-ink-2); }
.ds-kw-tile .val { margin-top: 4px; font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ds-kw-tile .val small { font-size: .5em; font-weight: 700; letter-spacing: 0; color: var(--ds-ink-3); }
.ds-kw-tile .sub { margin-top: 6px; font-size: var(--ds-fs-xs); color: var(--ds-ink-3); overflow-wrap: anywhere; }
.ds-kw-meter { position: relative; height: 10px; margin-top: 14px; border-radius: 99px; background: linear-gradient(90deg, var(--ds-success-tint) 0 40%, var(--ds-warning-tint) 40% 65%, var(--ds-danger-tint) 65% 100%); }
.ds-kw-meter i { position: absolute; top: -4px; width: 6px; height: 18px; border-radius: 3px; background: var(--ds-accent-deep); transform: translateX(-3px); }
.ds-kw-scale { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--ds-ink-3); }
.ds-kw-dots { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.ds-kw-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--ds-rule); }
.ds-kw-dot.is-vh, .ds-kw-chip.is-vh { background: var(--ds-danger); color: var(--ds-on-accent); }
.ds-kw-dot.is-h, .ds-kw-chip.is-h { background: var(--ds-warning); color: var(--ds-on-accent); }
.ds-kw-dot.is-m, .ds-kw-chip.is-m { background: var(--ds-accent-tint-2); color: var(--ds-accent-ink); }
.ds-kw-dot.is-l, .ds-kw-chip.is-l { background: var(--ds-success-tint); color: var(--ds-success); }
.ds-kw-dot.is-f, .ds-kw-chip.is-f { background: var(--ds-rule); color: var(--ds-ink-2); }
.ds-kw-chip { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: var(--ds-fs-xs); font-weight: 700; white-space: nowrap; }
.ds-kw-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: var(--ds-fs-xs); color: var(--ds-ink-2); }
.ds-kw-legend .ds-kw-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.ds-prose .ds-kw-lead { margin: var(--ds-sp-lg) 0 0; font-size: var(--ds-fs-lg); line-height: 1.45; }
/* Section heading: a solid tinted band, so it never reads as part of the answer under it. */
.ds-kw-sec { margin: var(--ds-sp-xl) 0 var(--ds-sp-sm); padding: 9px 16px; border-radius: var(--ds-r-sm); background: var(--ds-accent-tint-2); color: var(--ds-accent-deep); font-size: var(--ds-fs-base); font-weight: 800; letter-spacing: -0.01em; }
/* Sub-heading inside a section: marked with an accent bar. */
.ds-kw-block { margin: var(--ds-sp-lg) 0 var(--ds-sp-xs); padding-left: 10px; border-left: 4px solid var(--ds-accent); font-size: var(--ds-fs-base); font-weight: 800; }
.ds-kw-sub { margin-top: var(--ds-sp-sm); font-weight: 700; }
.ds-kw-small { margin-top: 2px; font-size: var(--ds-fs-sm); color: var(--ds-ink-2); overflow-wrap: anywhere; }
.ds-kw-flag { font-style: italic; }
.ds-kw-card .ds-note { margin-top: var(--ds-sp-sm); }
.ds-kw-card td, .ds-kw-card th { vertical-align: top; }
/* Result tables fill the card, wrap their text and never scroll sideways on a desktop screen. */
.ds-kw-card .ds-table-wrap { overflow-x: visible; }
.ds-kw-card table { width: 100%; table-layout: fixed; }
.ds-kw-t-pages th:nth-child(1) { width: 4%; }
.ds-kw-t-pages th:nth-child(2) { width: 32%; }
.ds-kw-t-pages th:nth-child(3) { width: 16%; }
.ds-kw-t-phrases th:nth-child(1) { width: 18%; }
.ds-kw-t-phrases th:nth-child(2) { width: 10%; }
.ds-kw-t-phrases th:nth-child(3) { width: 13%; }
.ds-kw-t-phrases th:nth-child(4) { width: 21%; }
.ds-kw-t-phrases th:nth-child(5) { width: 22%; }
.ds-kw-t-phrases th:nth-child(6) { width: 16%; }
.ds-kw-card th { white-space: normal; }
.ds-kw-card td.ds-kw-act { white-space: normal; }
.ds-kw-card td.ds-kw-act .ds-btn { width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
.ds-kw-card td, .ds-kw-card th { overflow-wrap: break-word; }
.ds-kw-card .ds-kw-domain { overflow-wrap: normal; word-break: normal; }
@media (max-width: 860px) { .ds-kw-card .ds-table-wrap { overflow-x: auto; } .ds-kw-card table { table-layout: auto; min-width: 720px; } }
.ds-kw-card td a { color: var(--ds-accent); font-weight: 600; overflow-wrap: anywhere; }
.ds-kw-faq h4 { margin: var(--ds-sp-md) 0 2px; font-size: var(--ds-fs-base); font-weight: 700; }
.ds-kw-faq details > h4:first-of-type { margin-top: 0; }
.ds-kw-printhead { display: none; }
@media print {
  .ds-kw-printhead { display: block; margin-bottom: 8px; }
  .ds-wide { max-width: none; padding-inline: 0; }
  .ds-kw-card, .ds-kw-glance { background: none; border: 1px solid #bbb; margin-top: 10pt; font-size: 10pt; }
  .ds-kw-card > summary.ds-kw-sum::after { display: none; }
  .ds-kw-card > summary.ds-kw-sum { break-after: avoid; }
  .ds-kw-card { break-before: page; }
  .ds-kw-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6pt; }
  .ds-kw-tile { background: none; border: 1px solid #bbb; padding: 6pt 8pt; }
  .ds-kw-tile .lbl { font-size: 8pt; }
  .ds-kw-tile .sub { font-size: 7pt; }
  .ds-kw-tile .val { font-size: 18pt; }
  .ds-kw-sec { background: none; border-left: 4px solid #000; border-radius: 0; color: #000; padding: 2pt 8pt; margin-top: 12pt; break-after: avoid; }
  .ds-kw-block { break-after: avoid; }
  .ds-kw-meter, .ds-kw-dot, .ds-kw-chip, .ds-badge { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ds-kw-card .ds-table-wrap, .ds-kw-glance .ds-table-wrap { overflow: visible; background: none; }
  .ds-kw-card .ds-table-wrap table { min-width: 0; width: 100%; table-layout: auto; font-size: 8.5pt; }
  .ds-kw-glance table { font-size: 9pt; }
  .ds-kw-card th, .ds-kw-card td, .ds-kw-glance th, .ds-kw-glance td { white-space: normal; padding: 3pt 5pt; overflow-wrap: anywhere; word-break: break-word; }
  .ds-kw-card td.ds-kw-act { white-space: normal; }
  .ds-kw-card th, .ds-kw-glance th { background: none; border-bottom: 1px solid #000; color: #000; overflow-wrap: normal; word-break: normal; }
  .ds-kw-card tr, .ds-kw-glance tr { break-inside: avoid; }
  .ds-kw-card a { color: inherit; text-decoration: none; }
  .ds-kw-jump, .ds-kw-card button { display: none !important; }
}

/* ───────────────────────── Science Experiment Generator (built on ds-answer, ds-subcard, ds-note) ───────────────────────── */
.ds-sci-banner { margin-top: var(--ds-sp-md); background: var(--ds-warning-tint); color: var(--ds-warning); }
.ds-sci-banner strong { font-weight: 800; }
.ds-sci-bannerline { margin: var(--ds-sp-xs) 0 0; color: var(--ds-accent-tint); }
.ds-sci-agenote { margin: var(--ds-sp-xs) 0 0; font-size: var(--ds-fs-sm); color: var(--ds-accent-tint); }
.ds-sci-adult { display: inline-block; margin-right: 4px; padding: 1px 10px; border-radius: var(--ds-r-pill); background: var(--ds-warning-tint); color: var(--ds-warning); font-size: var(--ds-fs-xs); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
@media print {
  .ds-sci-result { background: none; color: #000; padding: 0; }
  .ds-sci-result * { color: #000 !important; }
  .ds-sci-result .ds-subcard { background: none; border: 1px solid #000; }
  .ds-sci-bannerline, .ds-sci-agenote { font-weight: 700; }
  .ds-sci-adult { background: none; border: 1px solid #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ds-sci-safety { break-inside: avoid; }
}

/* ───────────────────────── Social media studio (/studio, private) ─────────────────────────
 * Ken's planning calendar. Not a public page: no header/footer, no ads. Uses tokens only. */
.st { width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--ds-sp-md) var(--ds-sp-lg) var(--ds-sp-2xl); box-sizing: border-box; }
.st *, .st-auth *, .st-overlay * { box-sizing: border-box; }
.st-auth { width: 100%; max-width: 460px; margin: 0 auto; padding: var(--ds-sp-2xl) var(--ds-sp-lg); }
.st-auth h1 { margin: var(--ds-sp-lg) 0 0; font-size: clamp(2.1rem, 5vw, 2.6rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; }
.st-brand { margin: 0; font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; white-space: nowrap; }
.st-brand span { color: var(--ds-accent); }
.st-gap { margin-top: var(--ds-sp-lg); }
.st-muted { color: var(--ds-ink-2); font-size: var(--ds-fs-sm); }
.st-kicker { margin: 0 0 var(--ds-sp-xs); font-size: var(--ds-fs-sm); font-weight: 700; color: var(--ds-accent-ink); }
.st-linkish { padding: 0; border: 0; background: none; color: var(--ds-accent); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.st-linkish:hover { text-decoration: underline; text-underline-offset: 3px; }
.st-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-sp-sm); margin-top: var(--ds-sp-sm); }

.st-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-sp-sm) var(--ds-sp-md); padding: 8px 8px 8px 20px; border: 1px solid var(--ds-rule); border-radius: var(--ds-r-lg); }
.st-tabs { flex: 0 1 460px; }
.st-tabs button { padding: 8px 12px; }
.st-top-actions { display: flex; align-items: center; gap: var(--ds-sp-md); }
.st-top-actions form { margin: 0; }

.st-today { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ds-sp-md); margin-top: var(--ds-sp-md); padding: var(--ds-sp-lg); border-radius: var(--ds-r-lg); background: var(--ds-surface); }
.st-today p { margin: 0; }
.st-todaylist { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.st-today-counts { display: flex; flex-wrap: wrap; gap: var(--ds-sp-sm); align-items: flex-start; }
.st-count { padding: 10px 16px; border: 1.5px solid var(--ds-rule); border-radius: var(--ds-r-pill); background: var(--ds-paper); color: var(--ds-ink-2); font: inherit; font-size: var(--ds-fs-sm); cursor: pointer; transition: border-color var(--ds-dur-fast) var(--ds-ease); }
.st-count:hover { border-color: var(--ds-accent); }
.st-count b { color: var(--ds-ink); font-size: 1.05rem; }

/* Status pills: the tone follows what Ken needs to do */
.st-status { display: inline-block; padding: 2px 10px; border-radius: var(--ds-r-pill); font-size: var(--ds-fs-xs); font-weight: 700; white-space: nowrap; background: var(--ds-surface); color: var(--ds-ink-2); }
.st-s-review { background: var(--ds-warning-tint); color: var(--ds-warning); }
.st-s-changes { background: var(--ds-danger-tint); color: var(--ds-danger); }
.st-s-approved { background: var(--ds-success-tint); color: var(--ds-success); }
.st-s-scheduled { background: var(--ds-accent-tint); color: var(--ds-accent-ink); }
.st-s-posted, .st-s-skipped { color: var(--ds-ink-3); }

/* Calendar */
.st-monthbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-sp-sm); margin-bottom: var(--ds-sp-sm); }
.st-monthbar h2 { margin: 0; min-width: 10ch; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.03em; text-align: center; }
.st-hint-drag { margin-left: auto; }
.st-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.st-wd { padding: 0 6px; font-size: var(--ds-fs-xs); font-weight: 700; color: var(--ds-ink-3); }
.st-day { min-height: 128px; padding: 6px; border-radius: var(--ds-r-sm); background: var(--ds-surface); display: flex; flex-direction: column; gap: 4px; transition: background var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur-fast) var(--ds-ease); }
.st-day.is-out { opacity: .55; }
.st-day.is-today { box-shadow: inset 0 0 0 2px var(--ds-accent); }
.st-day.is-over { background: var(--ds-accent-tint-2); }
.st-daynum { display: flex; align-items: center; justify-content: space-between; font-size: var(--ds-fs-sm); font-weight: 700; color: var(--ds-ink-2); }
.st-daynum-long { display: none; }
.st-add { width: 24px; height: 24px; border: 0; border-radius: var(--ds-r-pill); background: transparent; color: var(--ds-ink-3); font: inherit; font-weight: 700; cursor: pointer; opacity: 0; transition: opacity var(--ds-dur-fast) var(--ds-ease), background var(--ds-dur-fast) var(--ds-ease); }
.st-day:hover .st-add, .st-add:focus-visible { opacity: 1; }
.st-add:hover { background: var(--ds-accent-tint); color: var(--ds-accent-ink); }
.st-chip { display: grid; gap: 1px; width: 100%; padding: 5px 7px; border: 1px solid var(--ds-rule); border-left: 4px solid var(--ds-accent); border-radius: 8px; background: var(--ds-paper); color: var(--ds-ink); font: inherit; font-size: var(--ds-fs-xs); line-height: 1.3; text-align: left; cursor: pointer; transition: border-color var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease); }
.st-chip[draggable="true"] { cursor: grab; }
.st-chip:hover { border-color: var(--ds-accent); transform: translateY(-1px); }
.st-chip-top { color: var(--ds-ink-2); }
.st-chip-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.st-chip-status { color: var(--ds-ink-3); }
.st-s-review-chip .st-chip-status { color: var(--ds-warning); font-weight: 700; }
.st-s-changes-chip .st-chip-status { color: var(--ds-danger); font-weight: 700; }
.st-s-approved-chip .st-chip-status { color: var(--ds-success); font-weight: 700; }
.st-s-posted-chip, .st-s-skipped-chip { opacity: .7; }
.st-s-skipped-chip .st-chip-title { text-decoration: line-through; }
.st-mobile-only { display: none; }

/* List */
.st-filters { display: flex; flex-wrap: wrap; gap: var(--ds-sp-sm); align-items: center; margin-bottom: var(--ds-sp-md); }
.st-filters .ds-seg { flex: 0 1 640px; }
.st-filters .ds-seg button { padding: 8px 12px; }
.st-select-sm { width: auto; padding: 8px 12px; font-size: var(--ds-fs-sm); border-radius: var(--ds-r-sm); }
.st-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.st-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; gap: var(--ds-sp-md); padding: 8px 14px 8px 10px; border-left: 4px solid var(--ds-accent); border-radius: var(--ds-r-sm); background: var(--ds-surface); }
.st-date { padding: 6px 10px; font-size: var(--ds-fs-sm); border-radius: var(--ds-r-sm); }
.st-row-main { display: grid; padding: 0; border: 0; background: none; color: var(--ds-ink); font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.st-row-main:hover .st-row-title { color: var(--ds-accent); }
.st-row-title { font-weight: 700; }
.st-warn-dot { color: var(--ds-warning); font-weight: 600; font-size: var(--ds-fs-sm); }

/* Activity */
.st-log { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: var(--ds-fs-sm); }

/* Channels */
.st-chan-table { display: grid; gap: 6px; margin-top: var(--ds-sp-md); }
.st-chan-head, .st-chan-row { display: grid; grid-template-columns: 2fr 1.2fr 1.4fr .8fr 1fr auto; gap: var(--ds-sp-sm); align-items: center; }
.st-chan-head { padding-left: 14px; font-size: var(--ds-fs-xs); font-weight: 700; color: var(--ds-ink-3); }
.st-chan-row { padding: 6px 10px; border-left: 4px solid var(--ds-accent); border-radius: var(--ds-r-sm); background: var(--ds-surface); }
.st-chan-row .ds-input-sm, .st-chan-row .ds-select { width: 100%; }

/* Post panel */
.st-overlay { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; background: oklch(28% 0.1 265 / .28); }
.st-panel { width: min(640px, 100%); height: 100%; overflow-y: auto; padding: var(--ds-sp-lg); background: var(--ds-paper); box-shadow: -18px 0 40px -12px oklch(28% 0.1 265 / .25); }
.st-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ds-sp-md); }
.st-panel-head h2 { margin: 8px 0 4px; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.st-panel-head p { margin: 0; }
.st-preview { margin-top: var(--ds-sp-lg); padding: var(--ds-sp-md); border-radius: var(--ds-r); background: var(--ds-surface); }
.st-media { display: block; width: 100%; max-height: 420px; object-fit: contain; border-radius: var(--ds-r-sm); background: var(--ds-paper); }
.st-preview-text { margin: var(--ds-sp-sm) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.st-preview-link { display: block; margin-top: var(--ds-sp-xs); font-size: var(--ds-fs-sm); color: var(--ds-accent); overflow-wrap: anywhere; }
.st-decide { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-sp-sm); margin-top: var(--ds-sp-md); }
.st-thread { margin-top: var(--ds-sp-lg); }
.st-thread ul { margin: 0 0 var(--ds-sp-sm); padding: 0; list-style: none; display: grid; gap: 8px; }
.st-comment { padding: 10px 14px; border-radius: var(--ds-r-sm); background: var(--ds-surface); }
.st-by-ken { background: var(--ds-accent-tint); }
.st-comment p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.st-textarea { font-size: var(--ds-fs-base); font-weight: 500; line-height: 1.5; resize: vertical; }
.st-fields { margin: var(--ds-sp-lg) 0 0; padding: var(--ds-sp-md) 0 0; border: 0; border-top: 1px solid var(--ds-rule); min-width: 0; }
.st-fields .ds-label { margin-top: var(--ds-sp-md); }
.st-fields .ds-label > .ds-input, .st-fields .ds-label > .ds-select, .st-fields .ds-label > .st-datebox { margin-top: 6px; font-weight: 600; }
.st-fields .ds-input:not(.st-textarea) { font-size: var(--ds-fs-base); }
.st-grid3 { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: var(--ds-sp-sm); }
.st-datebox { display: flex; gap: 4px; align-items: center; }
.st-datebox .ds-input { min-width: 0; padding-left: 8px; padding-right: 8px; }
.st-datebox .ds-btn { padding: 7px 10px; }
.st-over { color: var(--ds-danger); font-weight: 700; }
.st-foot { margin-top: var(--ds-sp-lg); }

/* Focus: moments on the calendar, and the Focus tab */
.st-band { display: block; width: 100%; min-height: 20px; padding: 1px 8px; border: 0; border-radius: 6px; background: var(--ds-accent-tint); color: var(--ds-accent-ink); font: inherit; font-size: var(--ds-fs-xs); font-weight: 700; line-height: 18px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.st-band.is-day { background: var(--ds-accent); color: var(--ds-on-accent); }
.st-band.is-suggested { background: var(--ds-paper); box-shadow: inset 0 0 0 1.5px var(--ds-accent-tint-2); color: var(--ds-ink-2); font-weight: 600; }
.st-band.is-suggested.is-day { color: var(--ds-accent-ink); font-weight: 700; }
.st-band:hover { box-shadow: inset 0 0 0 1.5px var(--ds-accent); }
.st-grow { flex: 1 1 320px; margin: 0; }
.st-h2 { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; }
.st-fgroup { margin-top: var(--ds-sp-lg); }
.st-fgroup > p { margin: 2px 0 var(--ds-sp-sm); }
.st-fgroup summary { cursor: pointer; }
.st-fcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--ds-sp-md); padding: 10px 14px; border-left: 4px solid var(--ds-accent); border-radius: var(--ds-r-sm); background: var(--ds-surface); }
.st-f-moment { border-left-color: var(--ds-success); }
.st-f-task { border-left-color: var(--ds-ink-3); }
.st-fcard.is-suggested { background: var(--ds-paper); box-shadow: inset 0 0 0 1.5px var(--ds-rule); }
.st-fnotes { display: -webkit-box; margin-top: 2px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--ds-fs-sm); color: var(--ds-ink-2); }
.st-fside { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--ds-sp-sm); }
.st-meter-wrap { display: grid; gap: 4px; min-width: 130px; font-size: var(--ds-fs-sm); }
.st-meter { display: block; height: 8px; overflow: hidden; border-radius: var(--ds-r-pill); background: var(--ds-accent-tint); }
.st-meter i { display: block; height: 100%; border-radius: inherit; background: var(--ds-accent); }
.st-panel-head .st-meter-wrap { max-width: 260px; }
.st-pagechips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.st-pagechip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 12px; border-radius: var(--ds-r-pill); background: var(--ds-accent-tint); color: var(--ds-accent-ink); font-size: var(--ds-fs-sm); font-weight: 600; }
.st-pagechip button { padding: 2px 8px; border: 0; border-radius: var(--ds-r-pill); background: none; color: inherit; font: inherit; font-size: var(--ds-fs-xs); cursor: pointer; }
.st-pagechip button:hover { background: var(--ds-paper); }
.st-fields .ds-label > .st-pagepick { margin-top: 6px; }
.st-span2 { grid-column: span 2; }

/* Results: one card per network, then a table of posts */
.st-res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ds-sp-sm); }
.st-res-card { padding: var(--ds-sp-md); border-top: 4px solid var(--ds-accent); border-radius: var(--ds-r); background: var(--ds-surface); }
.st-res-card p { margin: 0; }
.st-res-name { font-weight: 800; }
.st-res-nums { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-sp-sm); margin-top: var(--ds-sp-sm); }
.st-res-num { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.st-res-label { font-size: var(--ds-fs-sm); color: var(--ds-ink-2); }
.st-res-foot { margin-top: var(--ds-sp-sm) !important; font-size: var(--ds-fs-sm); }
.st-res-note { max-width: 78ch; margin: var(--ds-sp-sm) 0 var(--ds-sp-lg); font-size: var(--ds-fs-sm); }
.st-chart { position: relative; margin-top: var(--ds-sp-sm); padding: var(--ds-sp-md) var(--ds-sp-md) var(--ds-sp-sm); border-radius: var(--ds-r); background: var(--ds-surface); overflow: hidden; }
.st-chart svg { display: block; overflow: visible; }
.st-chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--ds-sp-md); margin-bottom: 6px; }
.st-chart-head p { margin: 0; }
.st-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: var(--ds-fs-sm); color: var(--ds-ink-2); }
.st-legend li { display: inline-flex; align-items: center; gap: 6px; }
.st-legend i, .st-tip-row i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; }
.st-grid { stroke: var(--ds-rule); stroke-width: 1; }
.st-baseline { stroke: var(--ds-ink-3); stroke-width: 1; }
.st-axis { fill: var(--ds-ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.st-postdot { stroke: var(--ds-surface); stroke-width: 2; }
.st-hit { fill: transparent; cursor: default; outline: none; }
.st-hit:focus-visible { fill: var(--ds-accent-tint); fill-opacity: .5; }
.st-plot { position: relative; }
.st-tip { position: absolute; top: 0; z-index: 2; min-width: 150px; max-width: 220px; padding: 8px 12px; border-radius: var(--ds-r-sm); background: var(--ds-paper); box-shadow: 0 8px 24px -10px oklch(28% 0.1 265 / .35); font-size: var(--ds-fs-sm); transform: translateX(-50%); pointer-events: none; }
.st-tip p { margin: 0; }
.st-tip-head { color: var(--ds-ink-3); font-size: var(--ds-fs-xs); font-weight: 700; }
.st-tip-row { display: flex; align-items: center; gap: 6px; color: var(--ds-ink-2); }
.st-tip-row b { color: var(--ds-ink); font-variant-numeric: tabular-nums; }
.st-tip-post { margin-top: 4px !important; color: var(--ds-ink-2); }
.st-chart-key { margin: 2px 0 0; font-size: var(--ds-fs-xs); }
.st-chart-table { margin-top: 6px; font-size: var(--ds-fs-sm); }
.st-chart-table summary { cursor: pointer; color: var(--ds-accent); font-weight: 600; }
.st-chart-empty { margin: var(--ds-sp-sm) 0 0; }
.st-res-tablewrap { margin-top: var(--ds-sp-sm); overflow-x: auto; border-radius: var(--ds-r-sm); background: var(--ds-surface); }
.st-res-table { width: 100%; border-collapse: collapse; font-size: var(--ds-fs-sm); }
.st-res-table th, .st-res-table td { padding: 8px 12px; border-bottom: 1px solid var(--ds-rule); text-align: left; vertical-align: top; }
.st-res-table th { font-size: var(--ds-fs-xs); font-weight: 700; color: var(--ds-ink-3); white-space: nowrap; }
.st-res-table tr:last-child td { border-bottom: 0; }
.st-res-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .st { padding: var(--ds-sp-sm) var(--ds-sp-md) var(--ds-sp-xl); }
  .st-fcard { grid-template-columns: 1fr; }
  .st-fside { justify-content: flex-start; }
  .st-span2 { grid-column: auto; }
  .st-top { padding: 10px 12px; border-radius: var(--ds-r); }
  .st-tabs { order: 3; flex-basis: 100%; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: var(--ds-r); }
  .st-tabs button { padding: 8px 2px; font-size: var(--ds-fs-sm); }
  .st-hint-drag { display: none; }
  /* The month grid becomes a list of the days that have something on them. */
  .st-cal { grid-template-columns: 1fr; }
  .st-wd { display: none; }
  .st-day { min-height: 0; }
  .st-day.is-empty:not(.is-today), .st-day.is-past { display: none; }
  .st-day.is-out { opacity: 1; }
  .st-daynum-long { display: inline; }
  .st-daynum-short { display: none; }
  .st-add { opacity: 1; }
  .st-chip { font-size: var(--ds-fs-sm); }
  .st-mobile-only { display: block; }
  .st-row { grid-template-columns: minmax(0, 1fr) auto; }
  .st-row .st-date { grid-column: 1 / -1; width: 100%; }
  .st-chan-head { display: none; }
  .st-chan-row { grid-template-columns: 1fr 1fr; }
  .st-grid3 { grid-template-columns: 1fr; gap: 0; }
  .st-panel { padding: var(--ds-sp-md); }
}
@media (prefers-reduced-motion: reduce) {
  .st-chip, .st-day, .st-add, .st-count { transition: none; }
  .st-chip:hover { transform: none; }
}