/* LLMs Text Generator - neutral Swiss baseline, bronze as the one accent
   (REDESIGN-PLAN.md section D; DESIGN-THEME.md). Tokens are the single source
   of colour truth, for light and dark. Contrast for every pair is checked by
   test/theme-contrast.test.mjs and scripts/verify-branded.mjs. */

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/inter-latin.c940764593.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fonts/inter-latin-ext.a28eb6d3cc.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --surface-alt: #F3F2EF;
  --surface-ink: #1E1C19;
  --ink-text: #ECE9E3;
  --border: #E4E1DB;
  --border-strong: #C2BDB4;
  --heading: #1B1A17;
  --body: #3B3833;
  --muted: #66615A;
  --primary: #8A5E08;
  --primary-hover: #6B4805;
  --on-primary: #FFFFFF;
  /* "Good" and "free" states only; bronze is the one decorative accent. */
  --accent: #2E6B34;
  --focus: #8A5E08;
  --success: #2E6B34;
  --error: #A8281D;
  --warning: #8A5A00;
  --placeholder: #6B665E;
  /* Outline of form fields: at least 3:1 against the field and the page (WCAG 1.4.11). */
  --field-border: #8A857C;
  --header-bg: rgba(250, 250, 248, .92);

  --ok-bg: #EEF6EE; --ok-border: #B3D3B7; --ok-text: #245A2B;
  --err-bg: #FBEEEC; --err-border: #E6B5AE; --err-text: #7E1D14;
  --warn-bg: #FBF3E4; --warn-border: #E2CC98; --warn-text: #6E4700;
  --info-bg: #EEF3F7; --info-border: #B6C9D7; --info-text: #1F4659;

  --footer-bg: #1E1C19;
  --footer-text: #C9C5BD;
  --footer-strong: #F3F1EC;
  --footer-muted: #A9A49B;
  --footer-rule: #34312C;

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 12px;
  /* Flat panels: cards, tabs and tool panels carry a border, not a shadow.
     --shadow and --shadow-lg are only for things above the page (menus, toasts). */
  --shadow-sm: none;
  --shadow: 0 6px 20px rgba(27, 26, 23, .10);
  --shadow-lg: 0 12px 34px rgba(27, 26, 23, .14);
  --wrap: 1200px;
  --gutter: 24px;
  --prose: 68ch;
  --tap: 48px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Dark: neutral near-black with a faint warm cast, bronze lifted to gold.
   Applied when the system asks for it unless the visitor picked light, and
   whenever the visitor picked dark. The two blocks must stay identical
   (test/theme-contrast.test.mjs). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #141311; --surface: #1C1B18; --surface-alt: #25231F; --surface-ink: #0E0D0B; --ink-text: #ECE9E3;
    --border: #34312C; --border-strong: #57524A; --heading: #F3F1EC; --body: #D7D3CB; --muted: #A9A49B;
    --primary: #E2B04A; --primary-hover: #F0C46A; --on-primary: #1C1508; --accent: #8FD19A; --focus: #F0C46A;
    --success: #8FD19A; --error: #F2A096; --warning: #E8C170; --placeholder: #8F8A81; --field-border: #7A746C; --header-bg: rgba(20, 19, 17, .92);
    --ok-bg: #17261A; --ok-border: #2F5A37; --ok-text: #C2E8C9;
    --err-bg: #2E1714; --err-border: #74352B; --err-text: #F8C9C2;
    --warn-bg: #2A2112; --warn-border: #6E5A26; --warn-text: #F2DDA8;
    --info-bg: #16222A; --info-border: #33495A; --info-text: #C6DCEA;
    --footer-bg: #0E0D0B; --footer-text: #C2BDB4; --footer-strong: #ECE9E3; --footer-muted: #A9A49B; --footer-rule: #2A2824;
    --shadow-sm: none; --shadow: 0 6px 20px rgba(0,0,0,.45); --shadow-lg: 0 12px 34px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141311; --surface: #1C1B18; --surface-alt: #25231F; --surface-ink: #0E0D0B; --ink-text: #ECE9E3;
  --border: #34312C; --border-strong: #57524A; --heading: #F3F1EC; --body: #D7D3CB; --muted: #A9A49B;
  --primary: #E2B04A; --primary-hover: #F0C46A; --on-primary: #1C1508; --accent: #8FD19A; --focus: #F0C46A;
  --success: #8FD19A; --error: #F2A096; --warning: #E8C170; --placeholder: #8F8A81; --field-border: #7A746C; --header-bg: rgba(20, 19, 17, .92);
  --ok-bg: #17261A; --ok-border: #2F5A37; --ok-text: #C2E8C9;
  --err-bg: #2E1714; --err-border: #74352B; --err-text: #F8C9C2;
  --warn-bg: #2A2112; --warn-border: #6E5A26; --warn-text: #F2DDA8;
  --info-bg: #16222A; --info-border: #33495A; --info-text: #C6DCEA;
  --footer-bg: #0E0D0B; --footer-text: #C2BDB4; --footer-strong: #ECE9E3; --footer-muted: #A9A49B; --footer-rule: #2A2824;
  --shadow-sm: none; --shadow: 0 6px 20px rgba(0,0,0,.45); --shadow-lg: 0 12px 34px rgba(0,0,0,.5);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { color: var(--heading); line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.018em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3rem); }
h2 { font-size: clamp(1.45rem, 1.15rem + 1.2vw, 1.95rem); margin-top: 2.2em; }
h3 { font-size: clamp(1.14rem, 1.02rem + .5vw, 1.32rem); margin-top: 1.9em; }
h4 { font-size: 1.05rem; margin-top: 1.6em; }
p { margin: 0 0 1.15em; text-wrap: pretty; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primary-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
img, svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }
::selection { background: var(--primary); color: var(--on-primary); }

/* Layout */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
@media (max-width: 600px) { :root { --gutter: 16px; } }
.prose { max-width: var(--prose); }
main { display: block; padding-block: 8px 64px; }
.section { margin-top: 56px; }

/* Skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--primary);
  padding: 12px 18px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; }
/* Back to top: shown after about a screen of scrolling (src/client/site.js). */
.to-top {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 30;
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow); text-decoration: none;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease), background .18s var(--ease);
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--primary-hover); color: var(--on-primary); }
.to-top svg { width: 22px; height: 22px; }
.to-top:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media print { .to-top { display: none; } }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-row { display: flex; align-items: center; gap: 12px; min-height: 68px; position: relative; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 1.06rem; letter-spacing: -.02em; color: var(--heading); min-height: var(--tap); }
.brand:hover { color: var(--heading); text-decoration: none; }
.brand-mark { width: 30px; height: 30px; flex: none; border-radius: 8px; }
.brand-text .t { color: var(--primary); }

.header-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.nav-toggle, .theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px;
  background: var(--surface); border: 1px solid var(--border); color: var(--heading);
  font: inherit; font-weight: 600; font-size: .93rem; padding: 8px 12px;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.nav-toggle:hover, .theme-toggle:hover { background: var(--surface-alt); border-color: var(--border-strong); }
.theme-toggle { padding: 0; width: 44px; }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle[aria-pressed="true"] .icon-sun { display: block; }
.theme-toggle[aria-pressed="true"] .icon-moon { display: none; }
.nav-toggle { display: none; }
/* The narrowest phones (320px): the name, the theme button and Menu fit without a sideways scroll. */
@media (max-width: 359px) {
  .header-row { gap: 8px; }
  .brand { gap: 7px; font-size: .9rem; }
  .brand-mark { width: 26px; height: 26px; }
  .header-tools { gap: 4px; }
  .nav-toggle { padding: 8px 10px; }
}

.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--body); text-decoration: none; font-size: .93rem; font-weight: 550;
  padding: 8px 11px; border-radius: var(--radius-sm); white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.site-nav a:hover { background: var(--surface-alt); color: var(--heading); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--primary); background: var(--surface-alt); }
.site-nav .nav-cta { background: var(--primary); color: var(--on-primary); padding: 9px 15px; margin-left: 6px; }
.site-nav .nav-cta:hover { background: var(--primary-hover); color: var(--on-primary); }
/* On desktop the first menu item, "llms.txt Generator", is the same destination, so the button only shows in the mobile menu. */
@media (min-width: 1121px) { .site-nav .nav-cta { display: none; } }

/* Two-level menu (data/nav.mjs). No list markers anywhere. */
.nav-list, .nav-group ul { list-style: none; margin: 0; padding: 0; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-sub-toggle {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px;
  justify-content: center; padding: 8px 11px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--body); font: inherit; font-size: .93rem; font-weight: 550; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.nav-item-split .nav-parent { padding-right: 2px; }
.nav-item-split .nav-sub-toggle { padding-inline: 4px; }
.nav-sub-toggle:hover, .nav-sub-toggle[aria-expanded="true"] { background: var(--surface-alt); color: var(--heading); }
.nav-sub-toggle .chevron { width: 16px; height: 16px; flex: none; transition: transform .18s var(--ease); }
.nav-sub-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.nav-item.is-current > .nav-sub-toggle, .nav-item.is-current > .nav-parent { color: var(--primary); }
.nav-panel {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 10px;
}
.nav-panel.open { display: grid; grid-template-columns: repeat(2, minmax(190px, 1fr)); gap: 12px 16px; }
/* An invisible bridge over the 6px gap, so a hover-opened menu stays open while the pointer crosses to it. */
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-panel.nav-cols-1.open { grid-template-columns: minmax(230px, 1fr); }
.nav-panel.nav-cols-3.open { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
.nav-panel.nav-cols-4.open { grid-template-columns: repeat(4, minmax(170px, 1fr)); }
.nav-group-title {
  margin: 0 0 4px; padding: 0 11px; color: var(--muted);
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.site-nav .nav-panel a { display: flex; white-space: normal; min-height: 40px; padding: 8px 11px; line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .nav-sub-toggle .chevron { transition: none; } }

@media (max-width: 1120px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-bottom: 1px solid var(--border);
    padding: 12px 20px 18px; box-shadow: var(--shadow);
  }
  .site-nav.open { display: flex; }
  .site-nav { max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain; }
  .site-nav a { min-height: var(--tap); padding: 11px 12px; font-size: 1rem; }
  .site-nav .nav-cta { margin: 8px 0 0; justify-content: center; }
  /* The same tree as an accordion: each dropdown opens in place. */
  .nav-list { flex-direction: column; align-items: stretch; }
  .nav-item { flex-wrap: wrap; }
  .nav-item > a, .nav-item > .nav-parent { flex: 1; }
  .nav-sub-toggle { min-height: var(--tap); padding: 11px 12px; font-size: 1rem; }
  .nav-item:not(.nav-item-split) > .nav-sub-toggle { flex: 1; justify-content: space-between; }
  .nav-item-split .nav-parent { padding-right: 12px; }
  .nav-item-split .nav-sub-toggle { min-width: var(--tap); }
  .nav-panel {
    position: static; flex-basis: 100%; margin: 2px 0 6px 12px; padding: 4px 0 4px 10px;
    border: 0; border-left: 2px solid var(--border); border-radius: 0; box-shadow: none;
  }
  .nav-panel.open, .nav-panel.nav-cols-1.open, .nav-panel.nav-cols-3.open, .nav-panel.nav-cols-4.open { display: block; }
  .nav-group + .nav-group { margin-top: 10px; }
  .nav-group-title { padding: 6px 12px 2px; }
  .site-nav .nav-panel a { min-height: var(--tap); }
}

/* Hero */
.hero { padding-block: 56px 8px; }
.hero .prose { max-width: 760px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .85rem; font-weight: 650;
  color: var(--primary); background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 13px; margin-bottom: 18px;
}
.hero h1 { margin-bottom: .35em; }
.lede { font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem); color: var(--body); max-width: 62ch; }
.hero-ctas { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
/* Facts about a free run under the generator: one static line, wrapped on small screens.
   Items are divided by a hairline rule, not bullets. */
.facts {
  display: flex; flex-wrap: wrap; gap: 6px 0; list-style: none; margin: clamp(18px, 3vw, 28px) 0 0; padding: 0;
  font-size: .95rem; font-weight: 600; color: var(--heading);
}
.facts li { padding-inline: 14px; border-left: 1px solid var(--border-strong); }
.facts li:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 600px) {
  .facts { flex-direction: column; gap: 4px; }
  .facts li { padding: 0; border: 0; }
}

/* Generator-first home: the heading and the tool in the first screen; the example
   output beside the heading on wide screens, under the tool on narrow ones. */
.hero-tool { padding-block: clamp(22px, 4vw, 48px) 8px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2.5vw, 26px); }
.hero-tool .hero-head { max-width: 760px; }
.hero-tool h1 { margin-bottom: .25em; }
.hero-tool .lede { margin-bottom: 0; }
/* In the hero the grid gap already separates the form from the heading; the
   tool card's usual top margin (for tool pages) would add 34px more. */
.hero-grid .tool-card { margin-top: 0; }
.hero-example { margin: 0; min-width: 0; }
.hero-example figcaption { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: .9rem; color: var(--muted); }
.example-tag {
  font-size: .8rem; font-weight: 650; color: var(--heading);
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px 10px;
}
.hero-example pre.code { margin: 0; max-height: 340px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; }
.example-note { margin: 8px 0 0; font-size: .9rem; color: var(--muted); }
@media (min-width: 1000px) {
  /* The example has a column of its own, spanning the heading's and the form's
     rows, so its height never moves the form: the form starts right under the
     heading whatever the example holds. */
  .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "head example" "tool example";
    grid-template-rows: auto 1fr;
    align-items: start;
  }
  .hero-grid .hero-head { grid-area: head; }
  .hero-grid .tool-card { grid-area: tool; }
  .hero-grid .hero-example { grid-area: example; padding-top: 6px; }
  .hero-grid .hero-example pre.code { padding: 14px 16px; }
  .hero-grid .example-note { font-size: .85rem; margin-top: 6px; }
  /* Once there is a result, the result screen gets the full width and the example steps aside. */
  .hero-grid:has(#gen-result.show) { grid-template-areas: "head head" "tool tool"; }
  .hero-grid:has(#gen-result.show) .hero-example { display: none; }
}
/* Short laptop screens (768px tall): a little less space above and around the
   heading, so Generate stays in the first screen even with the AI box shown. */
@media (min-width: 1000px) and (max-height: 820px) {
  .hero-tool { padding-top: 18px; }
  .hero-grid { row-gap: 14px; }
  .hero-tool h1 { font-size: 2.4rem; }
}
.gen-run { margin-top: 2px; }
.gen-limits { margin: 8px 0 4px; }
.gen-limits strong { color: var(--heading); font-variant-numeric: tabular-nums; }
details.gen-options { margin: 14px 0 6px; }
details.gen-options > summary { gap: 10px; list-style: none; }
details.gen-options > summary::-webkit-details-marker { display: none; }
details.gen-options > summary::after { content: "+"; margin-left: auto; color: var(--primary); font-size: 1.3rem; font-weight: 600; }
details.gen-options[open] > summary::after { content: "\2212"; }
details.gen-options > summary .hint { font-weight: 400; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
details.gen-options[open] { padding-bottom: 10px; }
details.gen-options .options-grid { padding-top: 6px; }
.tool-card > .ai-box, #gen-form > .ai-box { margin-top: 12px; }
.updated { font-size: .9rem; color: var(--muted); margin-top: -4px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: var(--tap);
  font: inherit; font-weight: 650; font-size: 1rem; line-height: 1.2;
  padding: 12px 22px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); color: var(--on-primary); }
.btn-secondary { background: var(--surface); color: var(--heading); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-alt); color: var(--heading); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-block { width: 100%; }
.btn-sm { min-height: 44px; padding: 9px 15px; font-size: .93rem; }

.link-btn {
  display: inline-flex; align-items: center; min-height: 44px;
  background: none; border: 0; padding: 4px 6px; margin: 0;
  font: inherit; font-size: .95rem; font-weight: 600; color: var(--primary);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.link-btn:hover { color: var(--primary-hover); }

.chip {
  display: inline-flex; align-items: center; min-height: 44px;
  font: inherit; font-size: .93rem; font-weight: 600; color: var(--heading);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 8px 16px; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.chip:hover { background: var(--surface-alt); }
.chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* Cards and tool panels */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(20px, 4vw, 34px);
}
.tool-card { margin-top: 34px; scroll-margin-top: 84px; }
.tool-card > h2:first-child { margin-top: 0; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.mini {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 20px 18px; box-shadow: var(--shadow-sm);
}
.mini h3 { margin: 0 0 .4em; font-size: 1.04rem; }
.mini p { margin: 0; font-size: .95rem; color: var(--muted); }
.mini a { font-weight: 600; }
.mini .mini-more { margin-top: 10px; }

.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px; flex: none;
  background: var(--surface-alt); border: 1px solid var(--border);
  color: var(--primary); font-weight: 700; font-size: .93rem; margin-bottom: 12px;
}

/* Forms */
.field { margin-bottom: 20px; }
fieldset.field, fieldset.bot-group, .cat-box { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.field > label, .field-label, legend.field-label {
  display: block; font-weight: 650; font-size: .95rem; color: var(--heading); margin-bottom: 7px; padding: 0;
}
.hint { display: block; font-size: .875rem; color: var(--muted); margin: -2px 0 8px; font-weight: 400; }
input[type="url"], input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], select, textarea {
  width: 100%; min-height: var(--tap); font: inherit; font-size: 1rem; color: var(--heading);
  background: var(--surface); border: 1px solid var(--field-border);
  border-radius: var(--radius-sm); padding: 11px 13px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input[type="file"] {
  width: 100%; font: inherit; font-size: .95rem; color: var(--body);
  padding: 10px; border: 1px dashed var(--field-border); border-radius: var(--radius-sm); background: var(--surface-alt);
}
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 650; margin-right: 12px; min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--heading); cursor: pointer;
}
textarea { min-height: 140px; resize: vertical; font-family: var(--font-mono); font-size: .9rem; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--focus); }

/* Password fields: a Show/Hide button inside the field (src/client/account.js). */
.input-reveal { position: relative; }
.input-reveal input { padding-right: 76px; }
.reveal-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  min-height: 40px; min-width: 64px; padding: 6px 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--primary); font: inherit; font-size: .88rem; font-weight: 650; cursor: pointer;
}
.reveal-btn:hover { background: var(--surface-alt); }
.reveal-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }

/* Account forms: a comfortable reading width rather than the full card. */
.acct-card { max-width: 560px; }
.acct-card form { display: grid; gap: 4px; }
.acct-card .form-actions .btn { min-width: 180px; }
.acct-note { margin: 4px 0 14px; color: var(--muted); font-size: .93rem; }
/* Why the visitor is here, when they came from "Choose <plan>" on Pricing. */
.acct-intent { margin: 0 0 18px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-alt); border: 1px solid var(--border-strong); color: var(--heading); font-size: .95rem; }
.acct-intent[hidden] { display: none; }
/* The Download button is 44px tall; centre the row's text on it. */
#acct-history td { vertical-align: middle; }
input:disabled, select:disabled, textarea:disabled { opacity: .6; }
.row-input { display: flex; gap: 8px; align-items: center; margin-bottom: 9px; }
.row-input input { flex: 1; }
.icon-btn {
  flex: none; width: var(--tap); height: var(--tap); font-size: 1.15rem; line-height: 1;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--primary);
  border-radius: var(--radius-sm); cursor: pointer;
}
.icon-btn:hover { background: var(--surface-alt); }
/* The box hangs in the left margin, so wrapped text (and inline <code>)
   lines up under the first word, never under the box. */
.checkline, .field > label.checkline { display: block; position: relative; padding-left: 28px; margin-bottom: 10px; font-size: .96rem; font-weight: 450; color: var(--body); min-height: 32px; cursor: pointer; }
.checkline input { position: absolute; left: 0; top: 3px; margin: 0; width: 18px; height: 18px; accent-color: var(--primary); }
.options-grid { display: grid; gap: 4px 28px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 6px 0 4px; }
.form-actions .btn-primary { min-width: 220px; }
@media (max-width: 520px) { .form-actions .btn { flex: 1 1 100%; } }

/* Tabs */
.tabs { margin-bottom: 18px; }
.tablist {
  display: flex; flex-wrap: wrap; gap: 4px; padding: 4px;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: calc(var(--radius-sm) + 4px);
  margin-bottom: 16px; width: fit-content; max-width: 100%;
}
[role="tab"] {
  min-height: 44px; padding: 8px 16px; font: inherit; font-size: .95rem; font-weight: 600;
  color: var(--body); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
[role="tab"]:hover { color: var(--heading); }
[role="tab"][aria-selected="true"] { background: var(--surface); color: var(--heading); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
@media (max-width: 560px) {
  .tablist { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
  [role="tab"] { padding: 8px 6px; font-size: .9rem; }
}

/* Two-step flow */
.step-title { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 1.12rem; }
.step-title .step-num { margin: 0; }
.found { font-weight: 600; color: var(--heading); }
.cat-tools { display: flex; gap: 8px; margin: -4px 0 8px; }
.cat-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cat {
  display: flex; align-items: center; gap: 10px; min-height: var(--tap);
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer;
}
.cat:has(input:checked) { border-color: var(--primary); background: var(--surface-alt); }
.cat input { width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.cat .count { margin-left: auto; font-size: .85rem; font-weight: 650; color: var(--muted); }
.excluded { font-size: .92rem; color: var(--muted); margin: 0 0 18px; }
.estimate { font-weight: 600; color: var(--heading); padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-alt); border: 1px solid var(--border); }
.estimate.over { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }

/* History */
.history { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); }
.history-head { display: flex; align-items: center; justify-content: space-between; font-size: .88rem; font-weight: 650; color: var(--muted); }
.history ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.history .chip { font-size: .88rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Feedback states: never colour alone, each carries a glyph or text */
.alert {
  display: none; gap: 10px; align-items: flex-start;
  border-radius: var(--radius-sm); padding: 12px 15px; margin: 16px 0;
  font-size: .95rem; border: 1px solid;
}
.alert.show { display: flex; }
.alert::before { font-weight: 700; flex: none; }
.alert-error { background: var(--err-bg); border-color: var(--err-border); color: var(--err-text); }
.alert-error::before { content: "!"; }
.alert-warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.alert-warn::before { content: "!"; }
.alert-ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); }
.alert-ok::before { content: "\2713"; }
.alert-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }
.alert-info::before { content: "i"; font-style: italic; font-family: Georgia, serif; }
.alert code { background: transparent; border-color: currentColor; color: inherit; }

.progress { display: none; margin-top: 18px; }
.progress.show { display: block; }
.progress-track { height: 9px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; position: relative; }
.progress-fill { height: 100%; width: 0; background: var(--primary); transition: width .3s var(--ease); }
.progress-fill.error { background: var(--error); }
.progress-fill.indeterminate { width: 35% !important; animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .progress-fill.indeterminate { animation: none; width: 100% !important; opacity: .5; } }
.progress-detail { font-size: .9rem; color: var(--muted); margin-top: 9px; word-break: break-word; }

/* Result and code */
.result { display: none; margin-top: 26px; }
.result.show { display: block; }
.result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.result-head h3 { margin: 0; }
.result-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.done-banner {
  background: var(--ok-bg); border: 1px solid var(--ok-border); color: var(--ok-text);
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px;
}
.done-banner p { margin: 0 0 .6em; }
.done-banner .done-title { font-weight: 700; font-size: 1.05rem; }
.done-banner .done-title::before { content: "\2713  "; }
.done-banner code { color: inherit; }

/* llms.txt result (REDESIGN-PLAN.md E3): a summary, then numbered next steps.
   Each state is said in words; colour only supports it. */
.result-summary {
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 8px;
}
.result-status { display: flex; align-items: baseline; gap: .45em; margin: 0 0 .3em; font-weight: 700; font-size: 1.1rem; color: var(--heading); }
.result-status:focus-visible { outline-offset: 4px; }
.status-mark { color: var(--success); font-weight: 800; }
.result-sub { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--body); }
.result-notes {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn-text); font-size: .95rem; line-height: 1.55;
}
.result-notes p { margin: 0 0 .5em; }
.result-notes p:last-child { margin-bottom: 0; }
.next-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.next-steps > .step { counter-increment: step; position: relative; padding: 18px 0 18px 52px; border-top: 1px solid var(--border); }
.next-steps > .step:first-child { border-top: 0; }
.next-steps > .step::before {
  content: counter(step); position: absolute; left: 0; top: 16px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--primary); color: var(--primary); font-weight: 700; font-size: .95rem;
}
.step-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.step-head h3 { margin: 0; font-size: 1.12rem; }
.step-state {
  font-size: .875rem; font-weight: 600; color: var(--muted); white-space: nowrap;
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px 10px;
}
.step-state.is-done { color: var(--ok-text); background: var(--ok-bg); border-color: var(--ok-border); }
.step-state.is-done::before { content: "\2713\00a0"; }
.step > p { margin: .55em 0; }
.step-actions { margin: 12px 0 14px; }
.step-note { font-size: .95rem; line-height: 1.55; color: var(--muted); margin: .6em 0; }
.step-note .link-btn { margin-right: .4em; }
.step .edit-bar .hint { font-size: .95rem; line-height: 1.55; }
.wrap-anywhere { overflow-wrap: anywhere; }
.followup { border-top: 1px solid var(--border); padding-top: 16px; }
.followup h3 { margin: 0 0 .3em; font-size: 1.02rem; }
.followup p { margin: 0; color: var(--body); }
.problem-actions { display: block; margin-top: .45em; }
@media (max-width: 600px) {
  .next-steps > .step { padding-left: 44px; }
  .next-steps > .step::before { width: 30px; height: 30px; top: 17px; }
  .step-actions .btn { flex: 1 1 auto; }
}
.stats-line { font-weight: 600; }
pre.code, .code-block {
  background: var(--surface-ink); color: var(--ink-text);
  border-radius: var(--radius); padding: 18px 20px; overflow-x: auto;
  font-family: var(--font-mono); font-size: .855rem; line-height: 1.7;
  margin: 0 0 1.2em; white-space: pre; tab-size: 2;
}
:root[data-theme="dark"] pre.code { border: 1px solid var(--border); }
textarea.code-edit {
  display: block; width: 100%; min-height: 380px; max-height: 70vh; resize: vertical;
  background: var(--surface-ink); color: var(--ink-text); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 18px 20px; margin: 0;
  font-family: var(--font-mono); font-size: .855rem; line-height: 1.7; tab-size: 2; white-space: pre-wrap; overflow-wrap: anywhere;
}
textarea.code-edit:hover { border-color: var(--border-strong); }
textarea.code-edit:focus-visible { border-color: var(--focus); outline-offset: 2px; }
textarea.code-edit[readonly] { opacity: .95; }
.edit-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 14px; margin: 8px 0 1.2em; }
.edit-bar .hint { margin: 0; }
pre.code.tall { max-height: 480px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
:not(pre) > code {
  font-family: var(--font-mono); font-size: .875em;
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: 5px; padding: .1em .38em; color: var(--heading);
  overflow-wrap: anywhere; /* a long address breaks instead of widening the page on narrow phones */
}
.code-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; font-weight: 650; color: var(--muted); margin-bottom: 7px;
}
details.skipped, details.breakdown, details.import, details.settings {
  margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 14px; background: var(--surface);
}
details.skipped > summary, details.breakdown > summary, details.import > summary, details.settings > summary {
  cursor: pointer; font-weight: 650; color: var(--heading); min-height: var(--tap); display: flex; align-items: center;
}
details.skipped ul, details.breakdown ul { margin: 0 0 12px; padding-left: 1.2em; font-size: .9rem; }
details.skipped li { margin-bottom: 4px; word-break: break-word; }
details.import { margin: 8px 0 20px; }
details.import[open], details.settings[open] { padding-bottom: 14px; }
.notes { list-style: none; margin: 0 0 14px; padding: 0; }
.notes li { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 8px; font-size: .93rem; border: 1px solid; }
.notes .note-error { background: var(--err-bg); border-color: var(--err-border); color: var(--err-text); }
.notes .note-warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.notes .note-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }

/* Validator score */
.score { display: flex; align-items: center; gap: 18px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid; margin-bottom: 4px; }
.score-value { display: flex; align-items: baseline; gap: 2px; flex: none; }
.score-value strong { font-size: 2.6rem; line-height: 1; letter-spacing: -.03em; }
.score-value span { font-weight: 650; opacity: .8; }
.score-text p { margin: 0; }
.score-band { font-weight: 700; font-size: 1.05rem; }
.score-good { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); }
.score-fair { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.score-poor { background: var(--err-bg); border-color: var(--err-border); color: var(--err-text); }
.score a, .score code { color: inherit; }
tr.sev-error td:first-child { color: var(--error); }
tr.sev-warning td:first-child { color: var(--warning); }
strong.ok { color: var(--success); }
strong.bad { color: var(--error); }

/* robots.txt generator */
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.bot-group { margin: 0 0 16px; }
.bot-group > legend { font-weight: 700; color: var(--heading); font-size: 1rem; padding: 0; margin-bottom: 2px; }
.bot-rows { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.bot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 6px 6px 6px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.bot-row:last-child { border-bottom: 0; }
.bot-row:nth-child(even) { background: var(--surface-alt); }
.bot-name { font-size: .95rem; }
.bot-op { color: var(--muted); font-size: .85rem; margin-left: 4px; }
.tri { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.tri label { position: relative; cursor: pointer; }
.tri input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tri span { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 12px; font-size: .85rem; font-weight: 600; color: var(--body); }
.tri label + label span { border-left: 1px solid var(--border); }
.tri input:checked + span { background: var(--surface-alt); color: var(--heading); box-shadow: inset 0 -3px 0 var(--border-strong); }
.tri input[value="allow"]:checked + span { background: var(--ok-bg); color: var(--ok-text); box-shadow: inset 0 -3px 0 var(--success); }
.tri input[value="block"]:checked + span { background: var(--err-bg); color: var(--err-text); box-shadow: inset 0 -3px 0 var(--error); }
.tri input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }
.custom-agent { margin-top: 10px; }

/* Tables */
.table-scroll { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--border); border-radius: var(--radius-sm); }
table { border-collapse: collapse; width: 100%; font-size: .95rem; min-width: 460px; }
table.compact { min-width: 0; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--surface-alt); color: var(--heading); font-weight: 650; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
td code, th code { white-space: nowrap; }

/* Lists */
/* No list markers anywhere (owner's standing rule): items are spaced lines, and
   most open with a bold lead-in that keeps them distinct. */
.prose ul, .prose ol { list-style: none; padding-left: 0; margin: 0 0 1.2em; }
.prose li { margin-bottom: .7em; }
/* Numbered steps are a real sequence, so they keep their order as part of the
   design: a small numbered disc in the theme colours, not a default marker. */
.prose ol { counter-reset: step; }
.prose ol > li { counter-increment: step; position: relative; padding-left: 2.3em; min-height: 1.7em; }
.prose ol > li::before {
  content: counter(step); position: absolute; left: 0; top: .12em;
  display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--surface-alt); border: 1px solid var(--border-strong); color: var(--primary);
  font-size: .82em; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.checklist { list-style: none; padding-left: 0; }
.checklist li { position: relative; padding-left: 1.7em; }
.checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }

/* Callout */
.callout {
  border-left: 4px solid var(--accent); background: var(--surface-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 15px 18px; margin: 0 0 1.4em;
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--heading); }

/* Call to action band */
.cta-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary);
  border-radius: var(--radius); padding: 20px 22px; margin-top: 48px; box-shadow: var(--shadow-sm);
}
.cta-band p { margin: 0; max-width: 60ch; }
.cta-band strong { color: var(--heading); display: block; font-size: 1.08rem; margin-bottom: 2px; }

/* FAQ */
.faq details {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2px 18px; margin-bottom: 10px;
}
.faq summary {
  cursor: pointer; font-weight: 650; color: var(--heading); padding: 12px 0; min-height: var(--tap); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--primary); font-size: 1.3rem; font-weight: 600; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > p { margin: 0 0 14px; }

/* Related links and guide lists */
.related { margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--border); }
.related h2 { margin-top: 0; font-size: 1.2rem; }
.related ul, .link-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.related a, .link-grid a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 600; }
.related .group-label { grid-column: 1 / -1; font-size: .85rem; font-weight: 700; color: var(--muted); margin-top: 10px; }
.guide-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 0 0 1.4em; padding: 0; list-style: none; }
.guide-cards li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.guide-cards a { font-weight: 700; font-size: 1.04rem; }
.guide-cards p { margin: 6px 0 0; font-size: .93rem; color: var(--muted); }

/* llms.txt news timeline (data/content/news.mjs) */
.news-year { margin-top: 1.6em; }
.news-item { position: relative; margin: 0 0 26px; padding: 2px 0 2px 22px; border-left: 2px solid var(--border); }
.news-item::before {
  content: ""; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--primary);
}
.news-item h3 { margin: 4px 0 .35em; font-size: 1.12rem; line-height: 1.35; }
.news-item p { margin: 0 0 .55em; }
.news-meta { font-size: .875rem; color: var(--muted); }
.news-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--surface-alt); color: var(--heading); font-size: .78rem; font-weight: 600; }
.news-why { color: var(--body); }
.news-sources { font-size: .9rem; color: var(--muted); overflow-wrap: anywhere; }

/* Homepage "Guides for the next step": plain link rows in groups, no cards. */
/* How it works: four steps. Without JS, numbered blocks; with src/client/flow.js, a
   step indicator over one open step. Flat panels and tokens only; no decorative motion. */
.flow { display: grid; gap: 12px; margin: 4px 0 1.4em; }
.flow-step { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: clamp(18px, 3vw, 28px); scroll-margin-top: 84px; }
.flow-step > :last-child { margin-bottom: 0; }
.prose .flow-title { display: flex; align-items: center; gap: 12px; margin: 0 0 .6em; font-size: 1.2rem; }
.flow-num {
  flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); color: var(--heading); font-weight: 700; font-size: .95rem; background: var(--surface);
}
.flow-step h4 { margin: 1.2em 0 .5em; font-size: 1rem; }
.flow-actions { margin: 1em 0 0; }
.flow-check { display: grid; gap: 6px; margin-top: 1em; }
.flow-check label { font-weight: 600; color: var(--heading); }
.flow-check-row { display: flex; flex-wrap: wrap; gap: 8px; }
.flow-check-row input { flex: 1 1 220px; min-width: 0; min-height: 44px; }
/* Real screenshots in the steps: the version for the visitor's theme only. */
.flow-shot { margin: 18px 0 0; }
.flow-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.flow-shot figcaption { margin-top: 6px; font-size: .875rem; color: var(--muted); }
.flow-shot .shot-dark { display: none; }
:root[data-theme="dark"] .flow-shot .shot-light { display: none; }
:root[data-theme="dark"] .flow-shot .shot-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .flow-shot .shot-light { display: none; }
  :root:not([data-theme="light"]) .flow-shot .shot-dark { display: block; }
}
/* The quiet "coming soon" line and the result-screen hint: text and a link, no banner. */
.soon-band { margin: 1.2em 0 0; padding: 12px 16px; border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--radius-sm); background: var(--surface-alt); }
.gen-upsell { margin: 10px 0 0; }
.flow-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.flow-pager .flow-next { margin-left: auto; }

.flow-nav { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.flow-tab {
  display: flex; align-items: flex-start; gap: 10px; min-height: var(--tap); padding: 12px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--heading);
  font: inherit; cursor: pointer;
}
.flow-tab:hover { border-color: var(--border-strong); }
.flow-tab[aria-selected="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.flow-tab[aria-selected="true"] .flow-num, .flow-tab.is-past .flow-num { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.flow-tab-text { display: grid; gap: 2px; min-width: 0; }
.flow-tab-name { font-weight: 650; line-height: 1.25; }
.flow-tab-hint { font-size: .875rem; color: var(--muted); line-height: 1.3; }
/* The progress line under the indicator: how far through the four steps the open one is. */
.flow-nav::after {
  content: ''; grid-column: 1 / -1; height: 3px; border-radius: 3px;
  background: linear-gradient(to right, var(--primary) calc(var(--flow-progress, 0) * 100%), var(--border) 0);
}
.is-stepper .flow-step .flow-title .flow-num { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .is-stepper .flow-step:not([hidden]) { animation: flow-in .18s var(--ease); }
}
@keyframes flow-in { from { opacity: .4; } to { opacity: 1; } }
@media (max-width: 640px) {
  /* Phones: four compact numbered tabs; the open step's title says the rest. */
  .flow-tab { flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; text-align: center; }
  .flow-tab-hint { display: none; }
  .flow-tab-name { font-size: .875rem; }
}
.link-columns { display: grid; gap: 8px 32px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.link-group h3 { margin: 0 0 8px; font-size: 1rem; }
.link-group ul { list-style: none; margin: 0; padding: 0; }
.link-group li { padding: 6px 0; border-top: 1px solid var(--border); }
.link-group li:first-child { border-top: 0; }


/* News archive: post cards, topic filter, post pager */
.post-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin: 0 0 1.4em; padding: 0; list-style: none; }
.post-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.post-card[hidden] { display: none; }
.prose .post-cards { padding-left: 0; }
.news-item p code, .post-pager a, .prose p > code { overflow-wrap: anywhere; }
.prose .post-card { margin-bottom: 0; }
.post-card h3 { margin: 6px 0 6px; font-size: 1.06rem; line-height: 1.35; }
.post-card h3 a { color: var(--heading); text-decoration: none; }
.post-card h3 a:hover { color: var(--primary); text-decoration: underline; }
.post-card p { margin: 0; font-size: .93rem; color: var(--muted); }
.post-card .news-meta { margin: 0; }
.news-year-group[hidden] { display: none; }
.news-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.news-filter[hidden] { display: none; }
.chip {
  min-height: 44px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--body); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.chip:hover { border-color: var(--border-strong); color: var(--heading); }
.chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.news-count { min-height: 1.4em; }
.post-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.6em 0 1em; }
.post-pager a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; color: var(--heading); font-weight: 600; line-height: 1.35; }
.post-pager a:hover { border-color: var(--primary); }
.post-pager span { font-size: .8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.post-pager-older { text-align: right; }
@media (max-width: 560px) { .post-pager { grid-template-columns: 1fr; } .post-pager-older { text-align: left; } }

/* Breadcrumb */
.crumb { font-size: .9rem; color: var(--muted); margin-top: 22px; margin-bottom: 0; }
.crumb + .hero { padding-top: 28px; }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; }
.crumb li + li::before { content: "\203A"; margin-right: 8px; color: var(--muted); }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--primary); }

/* Toasts */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.toast {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 10px 12px 14px;
  border-radius: var(--radius-sm); border: 1px solid; box-shadow: var(--shadow-lg); font-size: .93rem;
  background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text);
  animation: toast-in .2s var(--ease);
}
.toast-error { background: var(--err-bg); border-color: var(--err-border); color: var(--err-text); }
.toast span { flex: 1; }
.toast-close { flex: none; width: 28px; height: 28px; border: 0; background: transparent; color: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; border-radius: 6px; }
.toast-close:hover { background: rgba(127,127,127,.15); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Footer */
.site-footer { background: var(--footer-bg); color: var(--footer-text); margin-top: 72px; padding-block: 46px 30px; }
.site-footer h2 { color: var(--footer-strong); font-size: .9rem; letter-spacing: .02em; margin: 0 0 12px; }
.footer-grid { display: grid; gap: 30px; grid-template-columns: 1.4fr repeat(4, 1fr); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0; }
.site-footer a { display: inline-flex; align-items: center; min-height: 36px; color: var(--footer-text); text-decoration: none; font-size: .93rem; }
.site-footer a:hover { color: var(--footer-strong); text-decoration: underline; }
.footer-about p { color: var(--footer-muted); margin: 12px 0 0; max-width: 34ch; font-size: .93rem; }
.site-footer .footer-brand { gap: 10px; color: var(--footer-strong); font-weight: 700; font-size: 1rem; }
.footer-bottom {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--footer-rule);
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; font-size: .87rem; color: var(--footer-muted);
}
.footer-bottom nav { display: flex; gap: 4px 16px; flex-wrap: wrap; }
.site-footer :focus-visible { outline-color: #E0B858; }

/* AI features, dashboard and plans */
.options-grid .ai-box { grid-column: 1 / -1; }
.dash .form-actions { margin-bottom: 22px; }
/* AI features in the generator: two option tiles above the Generate button.
   The legend floats so it sits inside the box as its header row. */
.ai-box { border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 14px 16px; background: var(--surface-alt); margin: 4px 0 18px; min-width: 0; }
.ai-head { float: left; width: 100%; padding: 0; margin: 0 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.ai-head + * { clear: both; }
.ai-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; color: var(--heading); }
.ai-spark { width: 20px; height: 20px; flex: none; color: var(--primary); }
.ai-balance { padding: 3px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-strong); font-size: .85rem; font-weight: 650; color: var(--heading); font-variant-numeric: tabular-nums; }
.ai-balance[hidden] { display: none; }
.ai-opts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.ai-opt {
  display: grid; grid-template-columns: 18px 1fr; grid-template-areas: "box text" ". cost"; gap: 6px 12px;
  padding: 12px 14px; min-height: var(--tap); cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.ai-opt input { grid-area: box; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--primary); }
.ai-opt-text { grid-area: text; display: grid; gap: 2px; }
.ai-opt-name { font-weight: 650; color: var(--heading); }
.ai-opt-desc { font-size: .875rem; color: var(--muted); line-height: 1.45; }
.ai-cost { grid-area: cost; justify-self: start; padding: 2px 9px; border-radius: 999px; background: var(--surface-alt); color: var(--heading); font-size: .8rem; font-weight: 650; }
.ai-opt:hover { border-color: var(--border-strong); }
.ai-opt:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.ai-opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.ai-opt input:focus-visible { outline: none; }
.ai-locked .ai-opt { cursor: not-allowed; opacity: .6; }
.ai-guest .ai-opts { display: none; }
.ai-guest .ai-head { margin-bottom: 6px; }
.ai-box .ai-note { margin: 10px 0 0; }
.ai-guest .ai-note { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .ai-opt { transition: none; } }

/* Account in the header (accounts builds only). Desktop: a button with a
   small panel. Below 1121px the header has no room, so the mobile menu
   carries the same link instead. */
.acct-menu { position: relative; }
.acct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 6px 12px 6px 9px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--heading); font: inherit; font-weight: 600; font-size: .93rem; white-space: nowrap;
  text-decoration: none; cursor: pointer; transition: background .18s var(--ease), border-color .18s var(--ease);
}
.acct-btn:hover, .acct-btn[aria-expanded="true"] { background: var(--surface-alt); border-color: var(--border-strong); color: var(--heading); text-decoration: none; }
.acct-btn[hidden] { display: none; }
.acct-icon { width: 20px; height: 20px; flex: none; }
.acct-avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-size: .8rem; font-weight: 700; }
.acct-label { font-variant-numeric: tabular-nums; }
.acct-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 290px; max-width: calc(100vw - 32px);
  display: grid; gap: 2px; padding: 12px 8px 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.acct-panel[hidden] { display: none; }
.acct-panel p { margin: 0; }
.acct-panel-who { display: grid; gap: 2px; padding: 0 10px 6px; }
.acct-panel-email { min-width: 0; font-weight: 650; color: var(--heading); font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-panel-plan, .acct-panel-credits { color: var(--muted); font-size: .86rem; }
.acct-panel-credits { padding: 0 10px 8px; font-variant-numeric: tabular-nums; }
.acct-panel-credits[hidden] { display: none; }
.acct-panel a, .acct-signout {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 8px 10px;
  border: 0; border-radius: var(--radius-sm); background: none; color: var(--body);
  font: inherit; font-size: .95rem; font-weight: 550; text-align: left; text-decoration: none; cursor: pointer;
}
.acct-panel a[hidden] { display: none; }
.acct-panel a:hover, .acct-signout:hover { background: var(--surface-alt); color: var(--heading); text-decoration: none; }
.acct-signout { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.site-nav .nav-account { display: none; }
@media (max-width: 1120px) {
  .acct-menu { display: none; }
  .site-nav .nav-account { display: flex; gap: 10px; margin-top: 8px; border: 1px solid var(--border); justify-content: center; font-weight: 600; color: var(--heading); }
  .nav-account .acct-icon { width: 20px; height: 20px; }
}
/* The header row is full, so on desktop the button is its icon or initial
   only; the label stays as its accessible name and the panel has the detail.
   Accounts builds also tighten the menu labels to make room for it. */
.acct-btn { padding: 0; width: 44px; }
.acct-btn .acct-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 1121px) {
  /* 34px chevrons stay above the 24px minimum target (WCAG 2.2 AA); phones keep 44px. */
  .has-acct .nav-item-split > .nav-sub-toggle { min-width: 34px; }
  .has-acct .header-tools { gap: 4px; }
}
.upgrade-card { border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface-alt); padding: 14px 18px; margin: 0 0 20px; }
.upgrade-card p { margin: 0 0 .6em; }
.upgrade-card p:last-child { margin-bottom: 0; }
.dash { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 18px; }
.dash h3 { margin: 0 0 10px; font-size: 1.05rem; }
.dash-big { margin: 0; font-size: 2rem; font-weight: 700; color: var(--heading); line-height: 1.2; }
.dash-unit { font-size: 1rem; font-weight: 600; color: var(--muted); }
.meter { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; margin: 10px 0 6px; max-width: 420px; }
.meter span { display: block; height: 100%; width: 0; background: var(--accent); }
.dash .table-scroll table { min-width: 0; }
.plans { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0 0 24px; }
.plan-card { display: flex; flex-direction: column; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); padding: 20px; }
.plan-card h2, .plan-card h3 { margin: 0 0 4px; font-size: 1.2rem; }
.plan-card .for { color: var(--muted); margin: 0 0 12px; font-size: .95rem; }
.plan-card .price { margin: 0; font-size: 1.9rem; font-weight: 700; color: var(--heading); line-height: 1.2; }
.plan-card .price small { font-size: .95rem; font-weight: 600; color: var(--muted); }
.plan-card .annual { margin: 2px 0 14px; color: var(--muted); font-size: .9rem; }
.plan-card ul { list-style: none; margin: 0 0 16px; padding: 0; }
.plan-card li { margin: 0; padding: 7px 0; border-top: 1px solid var(--border); font-size: .95rem; }
/* Each feature is a name and, in small type, what it means. */
.plan-card .feat { display: block; color: var(--heading); font-weight: 600; }
.plan-card .feat-note { display: block; margin-top: 2px; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.plan-card .btn { margin-top: auto; }
/* A paid plan's rules in groups (allowance, generation, refreshes, history, billing). */
.plan-card h3.plan-group { margin: 12px 0 0; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.plan-card .plan-group + ul { margin-bottom: 4px; }
.plan-card .plan-group + ul:last-of-type { margin-bottom: 16px; }
.interval-switch { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.plans-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.plans-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 440px)); justify-content: center; }
.plan-card { position: relative; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.plan-card.is-suggested { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.plan-card.is-suggested::after {
  content: "Suggested for you"; position: absolute; top: -11px; right: 14px;
  background: var(--primary); color: var(--on-primary); font-size: .75rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}
.plan-flag { margin: 0 0 6px; font-size: .8rem; font-weight: 700; color: var(--accent); }
.plan-flag-soon { color: var(--muted); }
.plan-free { background: var(--surface-alt); }
.plan-finder { margin: 0 0 22px; }
.plan-finder h2 { margin: 0 0 4px; font-size: 1.2rem; }
.finder-grid { display: grid; gap: 4px 18px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 10px; }
.finder-grid input { font-variant-numeric: tabular-nums; }
.finder-result { margin: 4px 0 0; font-weight: 600; color: var(--heading); min-height: 3em; }
.pay-once { margin: 0 0 28px; border-style: dashed; }
.pay-once h2 { margin: 0 0 6px; font-size: 1.2rem; }
.pay-once p { margin: 0 0 6px; }

/* Utilities */
.offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

@media print {
  .site-header, .site-footer, .tool-card, .toasts, .skip { display: none !important; }
  body { background: #fff; color: #000; }
}