/* rootle — quiet, typographic, calm. One reading column on warm paper, a
   truffle-ochre accent used sparingly. Order: tokens, base, frame (top bar,
   main, footer), controls, shared pieces, then pages. No inline styles
   anywhere (CSP style-src 'self'); scripts only set positions via CSSOM. */

:root {
  --bg: #fbfaf7;
  --bg-elev: #ffffff;
  --bg-sunk: #f3f0e9;
  --bg-hover: #efebe2;
  --ink: #1f1c18;
  --ink-2: #4b453d;
  --muted: #776e62;
  --faint: #a1978a;
  --line: #e9e4da;
  --line-2: #d9d1c3;
  --brand: #b07a3c;
  --accent: #a26a2f;
  --accent-hover: #8c5a25;
  --accent-ink: #ffffff;
  --link: #8a5822;
  --accent-soft: #f6ecdd;
  --accent-line: #e6cba5;
  --ok: #2e7a4d;
  --ok-dot: #3aa66a;
  --ok-soft: #e6f2e9;
  --warn: #93600a;
  --warn-soft: #fbf1dd;
  --danger: #b3261e;
  --danger-soft: #fbeceb;
  --focus: #b07a3c;
  --scrim: rgba(28, 20, 12, 0.42);
  --shadow-sm: 0 1px 2px rgba(60, 40, 20, 0.07);
  --shadow: 0 1px 2px rgba(60, 40, 20, 0.05), 0 10px 28px -14px rgba(60, 40, 20, 0.22);
  --shadow-lg: 0 2px 6px rgba(40, 25, 10, 0.08), 0 22px 50px -18px rgba(40, 25, 10, 0.32);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23776e62' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 68ch;
  --col: 48rem;
  --wide: 72rem;
  --r-xs: 5px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --bar-h: 3.5rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  color-scheme: light dark;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151311;
    --bg-elev: #1c1916;
    --bg-sunk: #24201c;
    --bg-hover: #2a2621;
    --ink: #ede7dd;
    --ink-2: #cdc4b6;
    --muted: #a0968a;
    --faint: #72695f;
    --line: #2c2823;
    --line-2: #3e3831;
    --brand: #d9a566;
    --accent: #d6a160;
    --accent-hover: #e4b67c;
    --accent-ink: #1a130b;
    --link: #e2b47a;
    --accent-soft: #33271a;
    --accent-line: #5c4328;
    --ok: #82c79a;
    --ok-dot: #5cbc80;
    --ok-soft: #1b2b20;
    --warn: #e2b45c;
    --warn-soft: #33291a;
    --danger: #f1958c;
    --danger-soft: #3a2220;
    --focus: #d9a566;
    --scrim: rgba(0, 0, 0, 0.6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -14px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 24px 54px -18px rgba(0, 0, 0, 0.7);
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23a0968a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  --bg: #151311;
  --bg-elev: #1c1916;
  --bg-sunk: #24201c;
  --bg-hover: #2a2621;
  --ink: #ede7dd;
  --ink-2: #cdc4b6;
  --muted: #a0968a;
  --faint: #72695f;
  --line: #2c2823;
  --line-2: #3e3831;
  --brand: #d9a566;
  --accent: #d6a160;
  --accent-hover: #e4b67c;
  --accent-ink: #1a130b;
  --link: #e2b47a;
  --accent-soft: #33271a;
  --accent-line: #5c4328;
  --ok: #82c79a;
  --ok-dot: #5cbc80;
  --ok-soft: #1b2b20;
  --warn: #e2b45c;
  --warn-soft: #33291a;
  --danger: #f1958c;
  --danger-soft: #3a2220;
  --focus: #d9a566;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -14px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 24px 54px -18px rgba(0, 0, 0, 0.7);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23a0968a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

/* letter avatars and favicon fallbacks: eight quiet hues */
.hue-0 { --h-bg: #f3e3cf; --h-fg: #85551f; }
.hue-1 { --h-bg: #e4ebd7; --h-fg: #4a6629; }
.hue-2 { --h-bg: #d9e8e9; --h-fg: #2c6064; }
.hue-3 { --h-bg: #e2e2f1; --h-fg: #494c89; }
.hue-4 { --h-bg: #f1dee3; --h-fg: #873c53; }
.hue-5 { --h-bg: #f0dfd4; --h-fg: #86462b; }
.hue-6 { --h-bg: #e7e2d7; --h-fg: #5a5143; }
.hue-7 { --h-bg: #dbe5f0; --h-fg: #375b83; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hue-0 { --h-bg: #3b2c1b; --h-fg: #e8bf8a; }
  :root:not([data-theme="light"]) .hue-1 { --h-bg: #2a3220; --h-fg: #b9d39a; }
  :root:not([data-theme="light"]) .hue-2 { --h-bg: #1e3234; --h-fg: #9fd0d3; }
  :root:not([data-theme="light"]) .hue-3 { --h-bg: #282a42; --h-fg: #b8bbef; }
  :root:not([data-theme="light"]) .hue-4 { --h-bg: #3a2229; --h-fg: #eeb1c3; }
  :root:not([data-theme="light"]) .hue-5 { --h-bg: #3a261d; --h-fg: #edb398; }
  :root:not([data-theme="light"]) .hue-6 { --h-bg: #2f2b25; --h-fg: #d3c9b8; }
  :root:not([data-theme="light"]) .hue-7 { --h-bg: #1f2b3a; --h-fg: #a9c6e8; }
}
:root[data-theme="dark"] .hue-0 { --h-bg: #3b2c1b; --h-fg: #e8bf8a; }
:root[data-theme="dark"] .hue-1 { --h-bg: #2a3220; --h-fg: #b9d39a; }
:root[data-theme="dark"] .hue-2 { --h-bg: #1e3234; --h-fg: #9fd0d3; }
:root[data-theme="dark"] .hue-3 { --h-bg: #282a42; --h-fg: #b8bbef; }
:root[data-theme="dark"] .hue-4 { --h-bg: #3a2229; --h-fg: #eeb1c3; }
:root[data-theme="dark"] .hue-5 { --h-bg: #3a261d; --h-fg: #edb398; }
:root[data-theme="dark"] .hue-6 { --h-bg: #2f2b25; --h-fg: #d3c9b8; }
:root[data-theme="dark"] .hue-7 { --h-bg: #1f2b3a; --h-fg: #a9c6e8; }

/* base ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar-h) + 1rem);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--accent-hover); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0; }
h1 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}
p { margin: 0 0 1rem; }
code, pre { font-family: var(--mono); }
code { font-size: 0.9em; }
img { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--line); }
::selection { background: var(--accent-soft); }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open] > summary > .i-chevron-down { transform: rotate(180deg); }
summary > .i-chevron-down { transition: transform 0.2s var(--ease); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.i {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
}
.i-logo { fill: currentColor; stroke: none; }

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
html:not(.js) .js-only { display: none !important; }
[hidden] { display: none !important; }

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.5rem 1rem;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
}
.skip:focus { top: 0.5rem; color: var(--bg); }

.muted { color: var(--muted); }
.block { display: block; }
.center { text-align: center; justify-content: center; }
.num { font-variant-numeric: tabular-nums; }
.ok-text { color: var(--ok); display: inline-flex; align-items: center; gap: 0.3rem; }
.warn-text { color: var(--warn); }
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* frame: top bar, main, footer ------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: var(--bar-h);
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-right: 0.75rem;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.brand:hover { color: var(--ink); }
.brand .i-logo { width: 1.55rem; height: 1.55rem; color: var(--brand); vertical-align: middle; }
.topbar-note { color: var(--muted); font-size: 0.875rem; }

.mainnav { display: flex; gap: 0.125rem; }
.mainnav a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 2.25rem;
  padding: 0 0.8rem;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.925rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.mainnav a:hover { background: var(--bg-hover); color: var(--ink); }
.mainnav a[aria-current="page"] { background: var(--bg-sunk); color: var(--ink); }
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: 0.25rem; }

.main {
  flex: 1 0 auto;
  width: 100%;
  max-width: calc(var(--col) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.5rem) var(--gutter) 4rem;
}
.main-wide { max-width: calc(var(--wide) + 2 * var(--gutter)); }
.main-home { max-width: calc(46rem + 2 * var(--gutter)); padding-top: clamp(2rem, 11vh, 7.5rem); }
.main-auth {
  max-width: calc(27rem + 2 * var(--gutter));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(1.5rem, 7vh, 4.5rem);
}
.main-auth:has(.auth-card-wide) { max-width: calc(31rem + 2 * var(--gutter)); }
.main-thread { padding-bottom: 1rem; }

.footer { border-top: 1px solid var(--line); }
.footer-in {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 1.25rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.6rem;
  color: var(--faint);
  font-size: 0.8rem;
}
.footer a { color: var(--muted); }
.footer-made { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); }
.footer-made .i { color: var(--brand); }

/* controls ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.45rem 1.05rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  color: var(--ink);
  font: inherit;
  font-size: 0.925rem;
  font-weight: 550;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn:hover { background: var(--bg-hover); color: var(--ink); }
.btn:disabled, .btn.is-busy { opacity: 0.55; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--bg-hover); }
.btn-quiet { background: var(--bg-sunk); border-color: transparent; color: var(--ink-2); }
.btn-quiet:hover { background: var(--bg-hover); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--bg); }
.btn-danger:hover { background: var(--danger); filter: brightness(0.92); color: var(--bg); }
.btn-danger-quiet { background: transparent; border-color: transparent; color: var(--danger); }
.btn-danger-quiet:hover { background: var(--danger-soft); color: var(--danger); }
.btn-sm { min-height: 2rem; padding: 0.3rem 0.8rem; font-size: 0.85rem; gap: 0.4rem; }
.btn-xs { min-height: 1.6rem; padding: 0.1rem 0.55rem; font-size: 0.78rem; }
.btn-block { width: 100%; }
.btn .i { width: 1.05em; height: 1.05em; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--ink); }
.icon-btn-danger:hover { background: var(--danger-soft); color: var(--danger); }
.icon-btn .i { width: 1.2rem; height: 1.2rem; }

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .input) {
  width: 100%;
  min-height: 2.6rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input[readonly] { background: var(--bg-sunk); }
textarea { resize: vertical; line-height: 1.5; }
select {
  appearance: none;
  padding-right: 2.2rem;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 16px;
}
.select-sm { min-height: 2rem; padding: 0.2rem 2rem 0.2rem 0.6rem; font-size: 0.875rem; width: auto; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; margin: 0; }
textarea.code { font-family: var(--mono); font-size: 0.825rem; line-height: 1.55; background: var(--bg-sunk); tab-size: 2; }
.input-code { font-family: var(--mono); letter-spacing: 0.16em; font-size: 1.05rem; }
.input-code-lg { font-size: 1.45rem; text-align: center; letter-spacing: 0.3em; }
.input-mono { font-family: var(--mono); font-size: 0.9rem; }
.input-readonly { color: var(--muted); }

.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field > legend, .field-label, .label-row label {
  padding: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-2);
}
fieldset.field > legend { margin-bottom: 0.4rem; }
.field-inline { flex-direction: column; }
.field-grow { flex: 1 1 16rem; }
.field > .btn { align-self: flex-start; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.link-quiet { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--muted); font-size: 0.875rem; text-decoration: none; }
.link-quiet:hover { color: var(--ink); }
.hint { margin: 0; color: var(--muted); font-size: 0.85rem; }
.hint .i { margin-right: 0.3rem; }
.optional { font-weight: 400; color: var(--muted); }
.field-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.field-row-3 { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
.stack { display: flex; flex-direction: column; gap: 1.1rem; }
.stack-sm { gap: 0.6rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.form-actions.center { justify-content: center; }
.form-actions-sticky {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding: 1rem 0;
  background: linear-gradient(to bottom, transparent, var(--bg) 35%);
}
.push-end { margin-left: auto; }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin: 0 0 1rem; }
.inline-form .btn { min-height: 2.6rem; }
.stack > .panel { margin: 0; }
.check { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.25rem 0; font-size: 0.95rem; cursor: pointer; }
.check input { margin-top: 0.22rem; flex: none; }

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2rem;
  padding: 0 0.8rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  background: var(--bg-elev);
  color: var(--ink-2);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip:hover { border-color: var(--faint); color: var(--ink); }
.chip:has(input:checked) { background: var(--accent-soft); border-color: var(--accent-line); color: var(--link); }
.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip.is-disabled { opacity: 0.45; cursor: not-allowed; }
.chip .i { width: 0.95rem; height: 0.95rem; }
.chips-wrap { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.switch { position: relative; display: inline-flex; align-items: center; flex: none; cursor: pointer; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch-track {
  position: relative;
  width: 2.3rem;
  height: 1.35rem;
  border-radius: var(--r-pill);
  background: var(--line-2);
  transition: background 0.15s;
}
.switch-track::after {
  content: "";
  position: absolute;
  top: 0.175rem;
  left: 0.175rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s var(--ease);
}
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(0.95rem); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch input:disabled + .switch-track { opacity: 0.45; }

.segmented { display: inline-flex; flex-wrap: wrap; gap: 0.15rem; padding: 0.2rem; border-radius: var(--r-pill); background: var(--bg-sunk); align-self: flex-start; }
.segmented label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--r-pill);
  color: var(--ink-2);
  font-size: 0.875rem;
  cursor: pointer;
}
.segmented input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.segmented label:has(input:checked) { background: var(--bg-elev); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }

.radio-cards { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
.radio-card {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.radio-card input { margin-top: 0.25rem; flex: none; }
.radio-card > span { display: flex; flex-direction: column; gap: 0.1rem; }
.radio-card .muted { font-size: 0.85rem; }
.radio-card:has(input:checked) { border-color: var(--accent-line); background: var(--accent-soft); }
fieldset:disabled .radio-card { opacity: 0.55; cursor: not-allowed; }

.spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.15em;
  animation: spin 0.8s linear infinite;
}
.spinner-xs { width: 0.75rem; height: 0.75rem; border-width: 1.5px; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes blink { 50% { opacity: 0; } }

/* shared pieces ------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 1.4rem;
  padding: 0 0.55rem;
  border-radius: var(--r-pill);
  background: var(--bg-sunk);
  color: var(--ink-2);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}
.badge .i { width: 0.85rem; height: 0.85rem; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-accent, .badge-live { background: var(--accent-soft); color: var(--link); }
.live-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--r-xs);
  background: var(--bg-sunk);
  color: var(--ink-2);
  font-size: 0.8rem;
  font-family: inherit;
}
.tag .i { width: 0.85rem; height: 0.85rem; }
.tag-sm { padding: 0.05rem 0.4rem; font-size: 0.72rem; }
.tag-warn { background: var(--warn-soft); color: var(--warn); }
.tag-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 1.75rem;
  padding: 0 0.7rem;
  border-radius: var(--r-pill);
  background: var(--bg-sunk);
  color: var(--ink-2);
  font-size: 0.8rem;
  text-decoration: none;
}
a.pill:hover { background: var(--bg-hover); color: var(--ink); }
.pill-accent { background: var(--accent-soft); color: var(--link); }
.count {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: var(--r-pill);
  background: var(--bg-sunk);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 650;
  font-family: var(--font);
  vertical-align: middle;
}
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--muted);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.section-label .i { width: 1rem; height: 1rem; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0 0.5rem; }

.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--h-bg);
  color: var(--h-fg);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.avatar-sm { width: 1.9rem; height: 1.9rem; font-size: 0.72rem; }
.avatar-btn { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.avatar-btn:hover .avatar { box-shadow: 0 0 0 3px var(--bg-hover); }

/* the favicon sits over its letter: a failed load (or no script) still shows a letter */
.fav {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: 4px;
  overflow: hidden;
  background: var(--h-bg);
  color: var(--h-fg);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
}
.fav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; color: transparent; font-size: 0; }
/* a broken image renders its pseudo-elements: paint the letter over the icon */
.fav img::before {
  content: attr(data-letter);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--h-bg);
  color: var(--h-fg);
  font-size: 0.6rem;
  font-weight: 700;
}
.fav.is-missing img { display: none; }

.dropdown { position: relative; }
.dropdown > summary { display: grid; place-items: center; }
.dropdown-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 40;
  min-width: 14rem;
  max-width: calc(100vw - 2rem);
  padding: 0.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-elev);
  box-shadow: var(--shadow-lg);
}
.dropdown-panel-sm { min-width: 10.5rem; }
.menu-head { display: flex; flex-direction: column; min-width: 0; padding: 0.5rem 0.65rem 0.6rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--line); font-size: 0.875rem; }
.menu-head span { color: var(--muted); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-item:hover { background: var(--bg-hover); color: var(--ink); }
.menu-item .i { color: var(--muted); }
.menu-item[aria-pressed="true"] { background: var(--accent-soft); color: var(--link); font-weight: 600; }
.menu-item[aria-pressed="true"] .i { color: var(--link); }
.menu-form { margin: 0; }
.theme-menu summary .i { display: none; }
:root:not([data-theme]) .theme-menu summary .i-monitor,
:root[data-theme="light"] .theme-menu summary .i-sun,
:root[data-theme="dark"] .theme-menu summary .i-moon { display: block; }

.notice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--r-sm);
  background: var(--bg-sunk);
  color: var(--ink-2);
  font-size: 0.9rem;
}
.notice > .i { margin-top: 0.18rem; }
.notice p { margin: 0.15rem 0 0; }
.notice strong { color: var(--ink); }
.notice-warn { background: var(--warn-soft); }
.notice-warn > .i, .notice-warn summary > .i:first-child { color: var(--warn); }
.notice-error { background: var(--danger-soft); }
.notice-error > .i { color: var(--danger); }
.notice-quiet { background: transparent; border: 1px dashed var(--line-2); color: var(--muted); }
details.notice { display: block; }
details.notice > summary { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; color: var(--ink); }
details.notice > summary > .i-chevron-down { margin-left: auto; color: var(--muted); }
details.notice[open] > summary { margin-bottom: 0.5rem; }
details.notice ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
details.notice li { margin: 0.35rem 0; }

.flashes { display: grid; gap: 0.5rem; margin: 0 0 1.25rem; }
.flash { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 1rem; border-radius: var(--r-sm); background: var(--bg-sunk); font-size: 0.925rem; }
.flash p { margin: 0; }
.flash > .i { margin-top: 0.2rem; color: var(--muted); }
.flash-success { background: var(--ok-soft); }
.flash-success > .i { color: var(--ok); }
.flash-warning { background: var(--warn-soft); }
.flash-warning > .i { color: var(--warn); }
.flash-error { background: var(--danger-soft); }
.flash-error > .i { color: var(--danger); }

.empty { display: flex; flex-direction: column; align-items: center; padding: 3rem 1rem; text-align: center; color: var(--muted); }
.empty-ico { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 0.75rem; border-radius: 50%; background: var(--bg-sunk); color: var(--faint); }
.empty-ico .i { width: 1.35rem; height: 1.35rem; }
.empty-text { margin: 0; color: var(--ink-2); font-weight: 550; }
.empty-hint { margin: 0.25rem 0 0; font-size: 0.9rem; }

.toasts {
  position: fixed;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  max-width: calc(100vw - 2rem);
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.05rem;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bg);
  font-size: 0.9rem;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  pointer-events: auto;
}
.toast.is-in { opacity: 1; transform: none; }
.toast-error { background: var(--danger); }

.dlg {
  width: min(28rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.dlg[open] { animation: dlg-in 0.18s var(--ease); }
.dlg::backdrop { background: var(--scrim); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(6px) scale(0.985); } }
.dlg-form { display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem 1.4rem 1.15rem; }
.dlg-title { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.dlg-body { margin: 0; color: var(--ink-2); }
.dlg-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; margin-top: 0.25rem; }
.dlg .notice { margin: 0; }

.panel {
  margin: 0 0 1.25rem;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-elev);
}
.panel-flush { padding: 0; overflow: hidden; }
.panel-flush > .panel-head { margin: 0; padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 2.5vw, 1.5rem) 0.85rem; }
.panel-head { margin: 0 0 1.1rem; }
.panel.stack > .panel-head { margin: 0; }
.panel-flush .table th:first-child, .panel-flush .table td:first-child { padding-left: clamp(1rem, 2.5vw, 1.5rem); }
.panel-flush .table th:last-child, .panel-flush .table td:last-child { padding-right: clamp(1rem, 2.5vw, 1.5rem); }
.panel-head h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; font-weight: 650; }
.panel-head p { margin: 0.25rem 0 0; max-width: var(--measure); color: var(--muted); font-size: 0.9rem; }
.panel-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.sub-h { margin: 1.4rem 0 0.4rem; color: var(--muted); font-size: 0.85rem; font-weight: 650; }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0 0 1rem; }
.card { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-elev); }
.form-card { padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-elev); }
.disclosure > summary { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--link); font-size: 0.875rem; font-weight: 550; }
.disclosure > summary:hover { color: var(--accent-hover); }
.disclosure[open] > summary { margin-bottom: 0.75rem; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 0 0 1.5rem; }
.lead { max-width: var(--measure); margin: 0.35rem 0 0; color: var(--muted); }
.back { display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 0.4rem; color: var(--muted); font-size: 0.875rem; text-decoration: none; }
.back:hover { color: var(--ink); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.25rem; }
.toolbar .lead { margin: 0; }
.tabs ~ .lead { margin: 0 0 1.25rem; }

.searchbar { display: flex; gap: 0.5rem; margin: 0 0 1rem; }
.searchbar-sm { width: 100%; max-width: 18rem; margin: 0; }
.input-icon { position: relative; display: flex; flex: 1; }
.input-icon > .i { position: absolute; top: 50%; left: 0.8rem; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.input-icon input { padding-left: 2.4rem; }
.result-count { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.9rem; }

.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1rem 0; }
.pager > :first-child { justify-self: start; }
.pager > :last-child { justify-self: end; }
.panel-flush .pager { padding: 0.85rem 1.25rem; border-top: 1px solid var(--line); }
.pager-info { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }

.item-list { margin: 0 0 1rem; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.85rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); transition: opacity 0.18s, transform 0.18s; }
.item-ico { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); background: var(--bg-sunk); color: var(--ink-2); }
.item-main { display: flex; flex: 1 1 14rem; flex-direction: column; gap: 0.15rem; min-width: 0; }
.item-main strong { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-weight: 600; overflow-wrap: anywhere; }
.item-main strong a { color: var(--ink); text-decoration: none; }
.item-main strong a:hover { color: var(--link); }
.item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; color: var(--muted); font-size: 0.825rem; overflow-wrap: anywhere; }
.item-actions { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
.item-list-cards { border-top: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.item-list-cards .item { padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--r); }
.is-leaving { opacity: 0; transform: translateX(8px); }
.token-prefix { padding: 0.05rem 0.4rem; border-radius: var(--r-xs); background: var(--bg-sunk); font-size: 0.78rem; font-weight: 500; color: var(--muted); }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.table td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-dense td { padding: 0.5rem 1rem; }
.table code { font-size: 0.82rem; }
.cell-actions { text-align: right; white-space: nowrap; }
.cell-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.cell-wrap { min-width: 10rem; overflow-wrap: anywhere; }
tr.is-muted td > * { opacity: 0.6; }
.user-cell { display: flex; align-items: center; gap: 0.65rem; }
.user-cell > div { display: flex; flex-direction: column; min-width: 0; }
.user-cell .muted { font-size: 0.8rem; overflow-wrap: anywhere; }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem 1rem; margin: 0; }
.kv > div { min-width: 0; }
.kv dt { color: var(--faint); font-size: 0.7rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
.kv dd { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.1rem 0 0; font-size: 0.9rem; }
.kv dd code { min-width: 0; overflow-wrap: anywhere; }
.kv-wide { grid-column: 1 / -1; }
.kv-lines { grid-template-columns: minmax(0, 1fr); gap: 0; }
.kv-lines > div { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.kv-lines > div:last-child { border-bottom: 0; }
.kv-lines dt { width: 9rem; padding-top: 0.15rem; }
.kv-lines dd { min-width: 0; margin: 0; }

progress.usage { width: 8rem; height: 0.45rem; border: 0; border-radius: var(--r-pill); background: var(--bg-sunk); overflow: hidden; appearance: none; vertical-align: middle; }
progress.usage::-webkit-progress-bar { background: var(--bg-sunk); border-radius: var(--r-pill); }
progress.usage::-webkit-progress-value { background: var(--brand); border-radius: var(--r-pill); }
progress.usage::-moz-progress-bar { background: var(--brand); border-radius: var(--r-pill); }
progress.usage.is-high::-webkit-progress-value { background: var(--danger); }
progress.usage.is-high::-moz-progress-bar { background: var(--danger); }

.code-block {
  max-height: 28rem;
  margin: 0 0 1rem;
  padding: 1rem;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-sunk);
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
code.wrap { white-space: pre-wrap; word-break: break-all; }
.secret-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.45rem 0.45rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-sunk);
}
.secret-box code, .secret-box input { flex: 1 1 12rem; min-width: 0; font-family: var(--mono); font-size: 0.875rem; word-break: break-all; }
.secret-box input { min-height: 2rem; padding: 0; border: 0; background: transparent; box-shadow: none; }
.secret-box input:focus { box-shadow: none; }

/* home --------------------------------------------------------------------------- */

.hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-mark .i { width: 2.6rem; height: 2.6rem; color: var(--brand); }
.hero-title { margin: 0.6rem 0 0.5rem; font-size: clamp(2.1rem, 1.5rem + 3vw, 3.1rem); letter-spacing: -0.025em; }
.hero-sub { max-width: 34rem; margin: 0 auto 2rem; color: var(--muted); }
.hero .composer { width: 100%; text-align: left; }
.recent { margin-top: clamp(2.5rem, 7vh, 4.5rem); }

.composer { margin: 0; }
.composer-box {
  padding: 0.3rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.composer-box:focus-within { border-color: var(--accent-line); box-shadow: var(--shadow), 0 0 0 4px var(--accent-soft); }
.composer textarea[name="question"] {
  display: block;
  min-height: 3.6rem;
  max-height: 40vh;
  padding: 0.75rem 0.9rem 0.3rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 1.075rem;
  line-height: 1.5;
  resize: none;
  field-sizing: content;
}
.composer textarea[name="question"]:focus { box-shadow: none; }
.composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0.3rem 0.3rem 0.5rem; }
.composer-tools { display: flex; flex-wrap: wrap; gap: 0.35rem; min-width: 0; }
.pill-select, .pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 2rem;
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--bg-sunk);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pill-select { padding-right: 0.3rem; }
.pill-select:hover, .pill-btn:hover { background: var(--bg-hover); color: var(--ink); }
.pill-select .i, .pill-btn .i { width: 1rem; height: 1rem; }
.pill-select select {
  width: auto;
  max-width: 11rem;
  min-height: 0;
  height: 2rem;
  padding: 0 1.5rem 0 0;
  border: 0;
  background-color: transparent;
  background-position: right 0.25rem center;
  background-size: 14px;
  color: inherit;
  font-size: 0.85rem;
  box-shadow: none;
  cursor: pointer;
}
.pill-select select:focus { box-shadow: none; }
.pill-select:has(select:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.pill-btn.is-active { background: var(--accent-soft); color: var(--link); }
.send {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.send:hover { background: var(--accent-hover); }
.send:active { transform: scale(0.96); }
.send .i { width: 1.2rem; height: 1.2rem; stroke-width: 2.2; }
.composer.is-sending .send { opacity: 0.55; pointer-events: none; }
.composer-instr { margin: 0 0.45rem; padding: 0.35rem 0.1rem 0.5rem; border-top: 1px dashed var(--line); }
.composer-instr label { display: block; margin: 0.35rem 0.25rem 0.35rem; color: var(--muted); font-size: 0.8rem; font-weight: 600; }
.composer-instr textarea { min-height: 3rem; border-color: transparent; background: var(--bg-sunk); font-size: 0.925rem; field-sizing: content; max-height: 30vh; }
.js .composer-instr:not(.is-open), .js .scope[data-collapsible]:not(.is-open) { display: none; }
.scope { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 1rem 0 0; padding: 0; border: 0; min-width: 0; }
.composer-note { margin: 1.1rem 0 0; color: var(--muted); font-size: 0.85rem; text-align: center; text-wrap: balance; }
.composer-note .i { margin-right: 0.4rem; color: var(--faint); }

.thread-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.thread-item { display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--line); transition: opacity 0.18s, transform 0.18s; }
.thread-link { display: flex; flex: 1; flex-direction: column; gap: 0.15rem; min-width: 0; padding: 0.9rem 0.25rem; color: inherit; text-decoration: none; }
.thread-link:hover { color: inherit; }
.thread-link:hover .thread-title { color: var(--link); }
.thread-title { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; transition: color 0.15s; }
.thread-snippet {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.9rem;
}
.thread-list-full .thread-snippet { -webkit-line-clamp: 2; line-clamp: 2; }
.thread-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.9rem; margin-top: 0.25rem; color: var(--faint); font-size: 0.8rem; }
.meta-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.meta-item .i { width: 0.9rem; height: 0.9rem; }
@media (hover: hover) {
  .thread-item > .icon-btn { opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s; }
  .thread-item:hover > .icon-btn, .thread-item > .icon-btn:focus-visible { opacity: 1; }
}

/* thread ---------------------------------------------------------------------- */

.thread-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.5rem; color: var(--muted); font-size: 0.85rem; }
.thread-info { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; min-width: 0; }
.thread-info .pill { max-width: 100%; }
.thread-info .pill > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-actions { display: flex; align-items: center; gap: 0.15rem; margin-left: auto; }

.msg { padding: 1.5rem 0 2.75rem; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--bar-h) + 0.5rem); }
.msg:last-child { border-bottom: 0; }
.msg-q {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 1.15rem + 1.2vw, 1.95rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.research { position: relative; margin: 0 0 1.5rem; }
.tl { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-elev); }
.tl-sum {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem 0.6rem;
  min-height: 2.9rem;
  padding: 0.65rem 2.75rem 0.65rem 1rem;
  color: var(--ink-2);
  font-size: 0.9rem;
}
.tl-sum:hover .tl-label { color: var(--link); }
.tl-sum > .i-chevron-down { position: absolute; top: 0.9rem; right: 1rem; color: var(--faint); }
.is-running .tl-sum { padding-right: 8.5rem; }
.tl-state { display: grid; place-items: center; flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--ok-soft); color: var(--ok); }
.tl-state .i { width: 0.85rem; height: 0.85rem; stroke-width: 2.4; }
.tl-state .spinner { width: 0.8rem; height: 0.8rem; border-width: 1.5px; }
.is-running .tl-state { background: var(--accent-soft); color: var(--brand); }
[data-status="failed"] .tl-state, .research[data-state="failed"] .tl-state,
[data-status="interrupted"] .tl-state, .research[data-state="interrupted"] .tl-state { background: var(--danger-soft); color: var(--danger); }
[data-status="cancelled"] .tl-state, .research[data-state="cancelled"] .tl-state { background: var(--bg-sunk); color: var(--muted); }
.msg.is-reconnecting .tl-state { animation: pulse 1.2s ease-in-out infinite; }
.tl-label { flex: 0 1 auto; min-width: 0; color: var(--ink); font-weight: 600; transition: color 0.15s; }
.tl-stats { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.tl-stats:empty, .tl-time:empty { display: none; }
.tl-time { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-time::before { content: "·"; margin-right: 0.6rem; }
.tl-cancel { position: absolute; top: 0.45rem; right: 2.75rem; }
.tl-body {
  max-height: min(60vh, 34rem);
  padding: 0.25rem 1rem 0.85rem;
  overflow: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
}
.tl-body:empty { display: none; }
.tl-body > noscript p, .tl-body > .tl-note:only-child { margin: 0.75rem 0 0; }
.tl-step { position: relative; padding: 0.8rem 0 0.15rem 1.4rem; }
.tl-step::before { content: ""; position: absolute; top: 1.55rem; bottom: -0.65rem; left: 0.3rem; width: 1px; background: var(--line); }
.tl-step:last-child::before { display: none; }
.tl-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.4rem; color: var(--ink); font-size: 0.875rem; font-weight: 650; }
.tl-dot { position: absolute; top: 1.1rem; left: 0; width: 0.65rem; height: 0.65rem; border: 2px solid var(--brand); border-radius: 50%; background: var(--bg-elev); }
.tl-writing .tl-dot { background: var(--brand); }
.tl-sub { color: var(--muted); font-weight: 400; }
.tl-intent { margin: 0 0 0.45rem; color: var(--ink-2); }
.tl-subqs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem; margin: 0 0 0.35rem; padding: 0; list-style: none; }
.tl-subqs li { display: flex; gap: 0.55rem; color: var(--ink-2); }
.tl-id { flex: none; height: 1.25rem; margin-top: 0.12rem; padding: 0 0.35rem; border-radius: 4px; background: var(--bg-sunk); color: var(--muted); font: 600 0.68rem/1.25rem var(--mono); }
.tl-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.1rem; margin: 0 0 0.35rem; padding: 0; list-style: none; }
.tl-queries:not(.is-expanded) > li:nth-child(n + 7), .tl-reads:not(.is-expanded) > li:nth-child(n + 9) { display: none; }
.tl-q { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.55rem; padding: 0.12rem 0; color: var(--ink-2); }
.badge-src {
  max-width: 7.5rem;
  padding: 0.05rem 0.4rem;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-sunk);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tl-q-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-q-n { color: var(--faint); font-size: 0.78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-q.is-started .tl-q-n { color: var(--brand); }
.tl-q.is-failed .tl-q-n, .tl-q.is-skipped .tl-q-n { color: var(--warn); }
.tl-reads { margin-top: 0.5rem; }
.tl-r { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; padding: 0.12rem 0; }
.tl-r-domain { max-width: 9.5rem; overflow: hidden; color: var(--muted); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.tl-r-title { overflow: hidden; color: var(--ink-2); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.tl-r-title:hover { color: var(--link); text-decoration: underline; }
.tl-r-state { display: grid; place-items: center; width: 1rem; color: var(--ok); }
.tl-r-state .i { width: 0.9rem; height: 0.9rem; stroke-width: 2.2; }
.tl-r.is-started .tl-r-state { color: var(--brand); }
.tl-r.is-failed .tl-r-state { color: var(--danger); }
.tl-r.is-failed .tl-r-title { color: var(--faint); }
.tl-note { display: flex; align-items: center; gap: 0.45rem; margin: 0.35rem 0; color: var(--muted); }
.tl-note .i { width: 0.95rem; height: 0.95rem; }
.tl-start { margin-top: 0.75rem; }
.tl-learn { color: var(--ok); }
.tl-assume { display: block; font-size: 0.8rem; }
.tl-warn { color: var(--warn); }
.tl-fail { color: var(--danger); }
.tl-more { margin: 0 0 0.35rem; padding: 0.1rem 0; border: 0; background: none; color: var(--link); font: inherit; font-size: 0.8rem; cursor: pointer; }
.tl-reflect-more > summary { display: block; }
.tl-reflect-more > summary .tl-note { margin: 0.35rem 0; }
.tl-reflect-more > summary:hover .tl-note { color: var(--ink-2); }
.tl-reflect-more strong { display: block; margin-top: 0.4rem; color: var(--ink-2); font-size: 0.78rem; }
.tl-reflect-more ul { margin: 0.2rem 0 0.4rem; padding-left: 1.2rem; color: var(--ink-2); }

.msg-sources:empty, .msg-notices:empty, [data-related]:empty, [data-sources-list]:empty { display: none; }
.src-cards {
  display: flex;
  gap: 0.6rem;
  margin: 0 0 1.4rem;
  padding: 0.1rem 0.1rem 0.6rem;
  overflow-x: auto;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
  list-style: none;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.src-cards li { flex: 0 0 11.75rem; scroll-snap-align: start; }
.src-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.55rem;
  height: 100%;
  min-height: 5.3rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-elev);
  color: var(--ink);
  font-size: 0.825rem;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.src-card:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--ink); }
.src-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 550;
  line-height: 1.35;
}
.src-card-meta { display: flex; align-items: center; gap: 0.4rem; min-width: 0; color: var(--muted); font-size: 0.75rem; }
.src-card-meta > .i { width: 0.8rem; height: 0.8rem; }
.src-card-domain { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-n {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  border-radius: 4px;
  background: var(--bg-sunk);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.answer { max-width: var(--measure); color: var(--ink); font-size: 1.0625rem; line-height: 1.72; overflow-wrap: break-word; }
.answer.is-pending:empty, .answer.is-empty:empty { display: none; }
.answer.is-writing.is-pending:empty {
  display: block;
  height: 4.6rem;
  background:
    linear-gradient(var(--bg-sunk), var(--bg-sunk)) 0 0.35rem / 100% 0.75rem no-repeat,
    linear-gradient(var(--bg-sunk), var(--bg-sunk)) 0 1.95rem / 93% 0.75rem no-repeat,
    linear-gradient(var(--bg-sunk), var(--bg-sunk)) 0 3.55rem / 61% 0.75rem no-repeat;
  animation: pulse 1.6s ease-in-out infinite;
}
.answer.is-streaming .stream-tail > :is(p, h1, h2, h3, h4, h5, h6, blockquote):last-child::after,
.answer.is-streaming .stream-tail > :is(ul, ol):last-child > li:last-child::after,
.answer.is-streaming .stream-tail:empty::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 0.15em;
  border-radius: 2px;
  background: var(--brand);
  vertical-align: -0.12em;
  animation: blink 1s steps(2) infinite;
}
.prose > :first-child, .stream-stable > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose table, .prose dl { margin: 0 0 1em; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { margin: 1.6em 0 0.5em; font-family: var(--font); font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; }
.prose h1 { font-size: 1.35rem; }
.prose h2 { font-size: 1.2rem; }
.prose h3 { font-size: 1.06rem; }
.prose h4, .prose h5, .prose h6 { font-size: 1rem; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: 0.3em 0; }
.prose li > p { margin: 0 0 0.5em; }
.prose li::marker { color: var(--faint); }
.prose a { color: var(--link); }
.prose strong { font-weight: 650; }
.prose code { padding: 0.1em 0.35em; border-radius: 5px; background: var(--bg-sunk); font-size: 0.86em; }
.prose pre { padding: 0.85rem 1rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-sunk); font-size: 0.85rem; line-height: 1.55; }
.prose pre code { padding: 0; background: none; font-size: inherit; }
.prose blockquote { padding: 0.1em 0 0.1em 1em; border-left: 3px solid var(--accent-line); color: var(--ink-2); }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.925rem; line-height: 1.5; }
.prose th, .prose td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { border-bottom-color: var(--line-2); background: var(--bg-sunk); font-weight: 650; }
.prose hr { margin: 2em 0; }

a.cite, .prose a.cite {
  display: inline-grid;
  place-items: center;
  position: relative;
  top: -0.12em;
  min-width: 1.2rem;
  height: 1.2rem;
  margin: 0 0.04rem 0 0.22rem;
  padding: 0 0.3rem;
  border-radius: 5px;
  background: var(--bg-sunk);
  color: var(--muted);
  font: 650 0.68rem/1 var(--font);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  vertical-align: middle;
  transition: background 0.15s, color 0.15s;
}
a.cite:hover, a.cite:focus-visible, a.cite[aria-describedby] { background: var(--accent); color: var(--accent-ink); }
a.cite + a.cite { margin-left: 0.1rem; }
.cite-run { white-space: nowrap; }

.src-list { margin: 1.75rem 0 0; padding-top: 0.25rem; border-top: 1px solid var(--line); }
.src-list > summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0; }
.src-list > summary > .i-chevron-down { margin-left: auto; color: var(--faint); }
.src-list > summary:hover .section-label { color: var(--ink); }
.src-list ol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.1rem; margin: 0.25rem 0 0; padding: 0; list-style: none; }
.src-list li { display: flex; gap: 0.75rem; padding: 0.55rem 0.5rem; border-radius: var(--r-sm); }
.src-list li:target { background: var(--accent-soft); }
.src-list .src-n { margin-top: 0.15rem; }
.src-body { flex: 1; min-width: 0; }
.src-title { color: var(--ink); font-weight: 550; text-decoration: none; overflow-wrap: anywhere; }
.src-title:hover { color: var(--link); text-decoration: underline; }
.src-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.15rem; color: var(--muted); font-size: 0.8rem; }
.dot-sep::before { content: "·"; margin-right: 0.4rem; }
.src-url { overflow: hidden; color: var(--faint); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }

.related { margin-top: 2rem; }
.related > h3 { margin-bottom: 0.4rem; }
.related form { margin: 0; }
.related ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.related-q {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 0.25rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.975rem;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s;
}
.related-q > span { flex: 1; }
.related-q > .i:first-child { color: var(--faint); }
.related-q > .i:last-child { color: var(--brand); opacity: 0.55; transition: opacity 0.15s; }
.related-q:hover { color: var(--link); }
.related-q:hover > .i:last-child { opacity: 1; }

.msg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; margin-top: 1.25rem; }
.msg-stats { margin-left: auto; color: var(--faint); font-size: 0.8rem; }

.followup {
  position: sticky;
  bottom: 0;
  z-index: 20;
  width: 100%;
  max-width: calc(var(--col) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 1.25rem var(--gutter) calc(0.9rem + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--bg) 1.25rem);
}
.composer-compact .composer-box { box-shadow: var(--shadow-lg); }
.composer-compact textarea[name="question"] { min-height: 2.8rem; padding: 0.65rem 0.9rem 0.15rem; font-size: 1rem; }
.composer-compact .composer-bar { padding-top: 0.15rem; }
.composer-compact .scope { justify-content: flex-start; margin: 0.6rem 0 0; }

.hovercard {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: min(22rem, calc(100vw - 16px));
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-elev);
  box-shadow: var(--shadow-lg);
  font-size: 0.85rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.12s, transform 0.12s, visibility 0s 0.12s;
  pointer-events: none;
}
.hovercard.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.12s, transform 0.12s; pointer-events: auto; }
.hc-head { display: flex; align-items: center; gap: 0.45rem; color: var(--muted); font-size: 0.78rem; }
.hc-domain { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-title { margin: 0.4rem 0 0.55rem; color: var(--ink); font-weight: 650; line-height: 1.35; }
.hc-quotes { display: grid; gap: 0.45rem; }
.hc-label { color: var(--faint); font-size: 0.68rem; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; }
.hc-quotes blockquote {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  padding: 0.05rem 0 0.05rem 0.7rem;
  border-left: 2px solid var(--accent-line);
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: 0.9rem;
  line-height: 1.45;
}
.hc-snippet { margin: 0; color: var(--ink-2); }
.hc-foot { display: flex; align-items: center; gap: 0.35rem; margin: 0.65rem 0 0; color: var(--faint); font-size: 0.75rem; }

/* library, spaces ------------------------------------------------------------------ */

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.space-card { display: flex; flex-direction: column; gap: 0.75rem; }
.space-card-head { display: flex; align-items: center; gap: 0.65rem; }
.space-ico { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); background: var(--h-bg); color: var(--h-fg); font-family: var(--serif); font-size: 1.05rem; font-weight: 700; }
.space-card h2 { font-size: 1.05rem; font-weight: 650; }
.space-card h2 a { color: var(--ink); text-decoration: none; }
.space-card h2 a:hover { color: var(--link); }
.space-desc { margin: 0; color: var(--ink-2); font-size: 0.925rem; }
.space-facts { display: grid; gap: 0.6rem; margin: 0; font-size: 0.85rem; }
.space-facts dt { color: var(--faint); font-size: 0.7rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
.space-facts dd { margin: 0.2rem 0 0; color: var(--ink-2); }
.card-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.25rem; }

/* settings, admin ------------------------------------------------------------------- */

.split { display: grid; gap: 1.25rem; }
.side-nav {
  position: sticky;
  top: var(--bar-h);
  z-index: 5;
  display: flex;
  gap: 0.25rem;
  margin: -0.5rem calc(-1 * var(--gutter)) 0;
  padding: 0.5rem var(--gutter);
  overflow-x: auto;
  background: var(--bg);
  scrollbar-width: none;
}
.side-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}
.side-nav a:hover { background: var(--bg-hover); color: var(--ink); }
.side-nav a[aria-current] { background: var(--bg-sunk); color: var(--ink); font-weight: 600; }
.side-nav .i { color: var(--muted); }
.sections > .panel { scroll-margin-top: calc(var(--bar-h) + 4rem); }
@media (min-width: 56rem) {
  .split { grid-template-columns: 13rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .side-nav { top: calc(var(--bar-h) + 1.5rem); flex-direction: column; margin: 0; padding: 0; overflow: visible; background: none; }
  .sections > .panel { scroll-margin-top: calc(var(--bar-h) + 1.5rem); }
}

.tabs { display: flex; gap: 0.15rem; margin: 0 0 1.5rem; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: -1px;
  padding: 0.65rem 0.8rem;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { border-bottom-color: var(--brand); color: var(--ink); }

.qr { display: inline-block; margin: 0.5rem 0; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.qr svg { display: block; width: 11rem; height: 11rem; }
.qr:empty { display: none; }
.steps-list { display: grid; gap: 1.1rem; margin: 0; padding-left: 1.25rem; }
.steps-list li::marker { color: var(--muted); font-weight: 650; }
.codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.45rem; margin: 0 0 1rem; padding: 1rem; list-style: none; border-radius: var(--r-sm); background: var(--bg-sunk); }
.codes code { font-size: 0.95rem; letter-spacing: 0.04em; }
.subpanel { margin-top: 0.75rem; }
.subpanel > summary { display: inline-flex; }
.subpanel[open] > summary { margin-bottom: 1rem; }
.secret-once { margin-top: 1rem; }
.accordion { display: grid; gap: 0.5rem; }
.acc-item { border: 1px solid var(--line); border-radius: var(--r-sm); }
.acc-item > summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; }
.acc-item > summary > .i-chevron-down { color: var(--faint); }
.acc-title { display: flex; flex: 1; align-items: center; gap: 0.4rem; min-width: 0; }
.acc-body { padding: 0 1rem 1rem; }

.pw-strength { display: flex; align-items: center; gap: 0.6rem; }
.pw-strength meter { flex: 1; height: 0.4rem; appearance: none; border: 0; border-radius: var(--r-pill); background: var(--bg-sunk); }
.pw-strength meter::-webkit-meter-bar { height: 0.4rem; border: 0; border-radius: var(--r-pill); background: var(--bg-sunk); }
.pw-strength meter::-webkit-meter-optimum-value { border-radius: var(--r-pill); background: var(--ok-dot); }
.pw-strength meter::-webkit-meter-suboptimum-value { border-radius: var(--r-pill); background: var(--brand); }
.pw-strength meter::-webkit-meter-even-less-good-value { border-radius: var(--r-pill); background: var(--danger); }
.pw-strength meter::-moz-meter-bar { border-radius: var(--r-pill); background: var(--brand); }
.pw-strength meter:-moz-meter-optimum::-moz-meter-bar { background: var(--ok-dot); }
.pw-strength meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--danger); }
.pw-strength-label { min-width: 6rem; color: var(--muted); font-size: 0.8rem; text-align: right; }

.src-admin-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 62rem) { .src-admin-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.src-admin { display: flex; flex-direction: column; gap: 0.75rem; transition: background 0.15s; }
.src-admin.is-off { background: transparent; }
.src-admin.is-off .src-admin-title strong { color: var(--muted); }
.src-admin-head { display: flex; align-items: center; gap: 0.75rem; }
.src-admin-title { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; min-width: 0; }
.src-admin-title code { font-size: 0.78rem; }
.health { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--faint); }
.health.is-ok { background: var(--ok-dot); box-shadow: 0 0 0 3px var(--ok-soft); }
.health.is-bad { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.src-error { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0; padding: 0.5rem 0.7rem; border-radius: var(--r-sm); background: var(--danger-soft); color: var(--ink-2); font-size: 0.825rem; overflow-wrap: anywhere; }
.src-error .i { margin-top: 0.15rem; color: var(--danger); }
.test-result { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.5rem; font-size: 0.85rem; vertical-align: middle; }
.test-result.is-ok { color: var(--ok); }
.test-result.is-bad { color: var(--danger); }
.test-result.is-busy { color: var(--muted); }

/* connector wizard ------------------------------------------------------------- */

.stepper { display: flex; gap: 0.5rem; margin: 0 0 1.5rem; padding: 0; overflow-x: auto; list-style: none; }
.stepper li {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.5rem;
  min-width: max-content;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-sm);
  background: var(--bg-sunk);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 550;
}
.step-n { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border: 1px solid var(--line-2); border-radius: 50%; background: var(--bg-elev); font-size: 0.75rem; font-weight: 700; }
.stepper li[aria-current] { background: var(--accent-soft); color: var(--ink); }
.stepper li[aria-current] .step-n { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.stepper li.is-done { color: var(--ink-2); }
.stepper li.is-done .step-n { border-color: transparent; background: var(--ok-soft); color: var(--ok); }
.wizard-step h2:focus { outline: none; }
.cred-rows { display: grid; gap: 0.5rem; }
.cred-rows:empty { display: none; }
.cred-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; gap: 0.5rem; }
.build-log { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.build-step { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-elev); }
.build-ico { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--bg-sunk); color: var(--ink-2); }
.build-ico .i { width: 0.95rem; height: 0.95rem; }
.build-step.is-running { border-style: dashed; color: var(--muted); }
.build-step.is-running .build-msg { margin: 0.2rem 0 0; }
.build-step.is-done .build-ico { background: var(--ok-soft); color: var(--ok); }
.build-step.is-error .build-ico { background: var(--danger-soft); color: var(--danger); }
.build-step.is-repair .build-ico, .build-step.has-errors .build-ico { background: var(--warn-soft); color: var(--warn); }
.build-main { flex: 1; min-width: 0; }
.build-head { display: flex; align-items: center; gap: 0.5rem; margin: 0.15rem 0 0; }
.build-msg { margin: 0.2rem 0 0; color: var(--ink-2); font-size: 0.9rem; }
.build-errors { margin: 0.4rem 0 0; padding-left: 1.1rem; color: var(--danger); font-family: var(--mono); font-size: 0.8rem; }
.report { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin-top: 0.75rem; }
.report-warnings { display: grid; gap: 0.3rem; margin: 0; padding: 0; color: var(--warn); font-size: 0.85rem; list-style: none; }
.report-warnings li { display: flex; align-items: flex-start; gap: 0.4rem; }
.hosts:empty { display: none; }
.hosts .tag-row { margin: 0.4rem 0 0.75rem; }

/* sign-in pages, errors ----------------------------------------------------------- */

.auth-card { padding: clamp(1.25rem, 5vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-elev); box-shadow: var(--shadow); }
.auth-head { margin-bottom: 1.5rem; text-align: center; }
.auth-head h1 { font-size: 1.6rem; }
.auth-head .lead { margin: 0.4rem auto 0; }
.auth-mark { display: inline-grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 0.75rem; border-radius: 50%; background: var(--accent-soft); color: var(--brand); }
.auth-mark .i { width: 1.8rem; height: 1.8rem; }
.auth-mark-icon .i { width: 1.4rem; height: 1.4rem; }
.auth-mark.is-bad { background: var(--danger-soft); color: var(--danger); }
.auth-foot { margin: 1.25rem 0 0; color: var(--muted); font-size: 0.9rem; text-align: center; }
.auth-foot a { display: inline-flex; align-items: center; gap: 0.3rem; }
.divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--faint); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.error-page { padding: 2rem 0; text-align: center; }
.error-code { margin: 0 0 0.5rem; color: var(--accent-line); font-family: var(--serif); font-size: clamp(4rem, 12vw, 6.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.error-page h1 { margin-bottom: 0.5rem; }
.error-page .lead { margin: 0 auto 1.75rem; }

/* setup wizard (before rootle has a database) ----------------------------- */

.main-install { max-width: calc(46rem + 2 * var(--gutter)); padding-top: clamp(1.5rem, 5vh, 3rem); }
.install-head { margin-bottom: 1.5rem; text-align: center; }
.install-head h1 { font-size: 1.6rem; }
.install-head .lead { margin: 0.4rem auto 0; }
.install-logo { display: inline-grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 0.75rem; border-radius: 50%; background: var(--accent-soft); color: var(--brand); }
.install-logo .i { width: 1.8rem; height: 1.8rem; }
.install-step .panel-head h2 .i { color: var(--muted); }
.setup-stepper { margin-bottom: 1.25rem; }
.setup-stepper .step-t { white-space: nowrap; }
.install-items { display: grid; gap: 0; margin: 0 0 1rem; padding: 0; list-style: none; }
.install-item { display: flex; gap: 0.85rem; padding: 0.9rem 0; border-top: 1px solid var(--line); }
.install-item:first-child { border-top: 0; padding-top: 0.25rem; }
.install-item-icon { display: grid; flex: none; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--bg-sunk); color: var(--ink-2); }
.install-item-main { display: grid; flex: 1; gap: 0.35rem; min-width: 0; }
.install-item-main .hint { margin: 0; }
.install-item-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.35rem 0.75rem; }
.install-item-head label { margin: 0; }
.install-path { overflow-wrap: anywhere; font-size: 0.85rem; }
.install-note { margin: 0; color: var(--ink-2); font-size: 0.85rem; }
.install-note:empty { display: none; }
.install-note.is-bad { color: var(--danger); }
.badge-bad { background: var(--danger-soft); color: var(--danger); }
.install-cmd { margin: 0.5rem 0; font-size: 0.78rem; }
.install-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem; }
.install-actions-start { justify-content: flex-start; margin-top: 0.25rem; }
.install-actions .btn-primary { margin-left: auto; }
.install-alert { margin-top: 1rem; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; padding: 0.25rem; border: 0; border-radius: var(--r-pill); background: var(--bg-sunk); }
.seg label { display: inline-flex; margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { padding: 0.4rem 0.9rem; border-radius: var(--r-pill); color: var(--muted); font-size: 0.875rem; font-weight: 550; }
.seg input:checked + span { background: var(--bg-elev); color: var(--ink); box-shadow: var(--shadow-sm); }
.seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.input-with-btn { display: flex; gap: 0.4rem; }
.input-with-btn input { flex: 1; min-width: 0; }
.input-with-btn .btn { flex: none; min-width: 2.6rem; padding-inline: 0.7rem; }
.input-with-btn .btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--link); }
.install-report { display: grid; gap: 0.85rem; margin-top: 1rem; transition: opacity 0.15s; }
.install-report:empty { display: none; }
.install-report.is-stale { opacity: 0.5; }
.install-busy { display: flex; align-items: center; gap: 0.6rem; margin: 0; color: var(--muted); }
.install-checks { display: grid; gap: 0.55rem; margin: 0; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-sunk); list-style: none; }
.install-check { display: flex; gap: 0.6rem; font-size: 0.9rem; }
.install-check > .i { flex: none; margin-top: 0.15rem; }
.install-check > div { display: grid; gap: 0.25rem; min-width: 0; overflow-wrap: anywhere; }
.install-check .hint { margin: 0; }
.install-check.is-ok > .i { color: var(--ok); }
.install-check.is-warn > .i { color: var(--warn); }
.install-check.is-fail > .i { color: var(--danger); }
.install-check.is-fail > div > span { color: var(--ink); font-weight: 550; }
.install-check.is-skip > .i { color: var(--muted); }
.install-verdict { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 550; }
.install-verdict.is-ok { color: var(--ok); }
.install-verdict.is-bad { color: var(--muted); font-weight: 450; }
.install-create, .install-sqlbox { display: grid; gap: 0.5rem; justify-items: start; }
.install-create .hint, .install-sqlbox .hint { margin: 0; }
.install-sql { width: 100%; margin: 0; font-size: 0.8rem; }
.install-detail { font-size: 0.8rem; }
.install-detail summary { color: var(--muted); }
.install-detail code { display: block; margin-top: 0.35rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.install-summary { margin-bottom: 1.25rem; }
.install-summary dd code { overflow-wrap: anywhere; font-size: 0.85rem; }
.install-progress { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.install-progress li { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--faint); }
.install-progress li > div { display: grid; gap: 0.1rem; min-width: 0; overflow-wrap: anywhere; }
.install-progress li .hint { margin: 0; }
.install-progress li.is-running, .install-progress li.is-done, .install-progress li.is-failed, .install-progress li.is-skipped { color: var(--ink); }
.install-progress-mark { display: grid; flex: none; place-items: center; width: 1.5rem; height: 1.5rem; border: 2px solid var(--line-2); border-radius: 50%; font-size: 0.8rem; font-weight: 700; line-height: 1; }
.is-running > .install-progress-mark { border-color: var(--line-2); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
.is-done > .install-progress-mark { border-color: var(--ok); background: var(--ok); color: var(--bg-elev); }
.is-done > .install-progress-mark::before { content: "✓"; }
.is-failed > .install-progress-mark { border-color: var(--danger); background: var(--danger); color: var(--bg-elev); }
.is-failed > .install-progress-mark::before { content: "✕"; }
.is-skipped > .install-progress-mark { border-color: var(--line-2); color: var(--muted); }
.is-skipped > .install-progress-mark::before { content: "–"; }
.install-progress li.is-failed .hint { color: var(--danger); }
@media (max-width: 40rem) {
  .install-item-icon { display: none; }
  .install-actions .btn { flex: 1 1 auto; justify-content: center; }
  .install-actions .btn-primary { margin-left: 0; }
  .install-summary > div { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .is-running > .install-progress-mark { animation: none; border-color: var(--accent); }
}

/* narrow screens ------------------------------------------------------------------ */

@media (max-width: 40rem) {
  .brand { margin-right: auto; }
  .mainnav a { justify-content: center; width: 2.5rem; padding: 0; }
  .mainnav a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .topbar-end { margin-left: 0; }
  .tl-stats { display: none; }
  .tl-r { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tl-r-domain { display: none; }
  .tl-cancel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .is-running .tl-sum { padding-right: 6rem; }
  .msg-stats { width: 100%; margin: 0.5rem 0 0; }
  .thread-actions .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .page-head .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .stepper .step-t { display: none; }
  .stepper li[aria-current] .step-t { display: inline; }
  .cred-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cred-row input[name="cred_value"] { grid-row: 2; }
  .src-cards li { flex-basis: 10.5rem; }
  .pill-select select { max-width: 7.5rem; }
  .composer-tools { flex-wrap: nowrap; }
  .pill-btn { padding: 0 0.65rem; }
  .thread-info time { display: none; }
  .footer-in { flex-direction: column; align-items: center; }
  .footer-sep { display: none; }
}

/* touch screens: targets about 44px high, and no text field under 16px,
   which iOS Safari zooms into on focus */
@media (pointer: coarse) {
  .disclosure > summary, .setup-links a { min-height: 2.75rem; }
  .footer a, .switch { padding: 0.65rem 0.4rem; margin: -0.65rem -0.4rem; }
  .select-sm { min-height: 2.5rem; }
  .input-mono, .select-sm, textarea.code, .secret-box input, .composer-instr textarea { font-size: 1rem; }
}

@media (max-width: 44rem) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { padding: 0.65rem 1rem; border-bottom: 1px solid var(--line); }
  .table-stack tbody tr:last-child { border-bottom: 0; }
  .table-stack td, .table-dense.table-stack td { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.3rem 0; border: 0; text-align: right; }
  .table-stack td[data-label]::before { content: attr(data-label); flex: none; color: var(--faint); font-size: 0.7rem; font-weight: 650; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; }
  .table-stack td:first-child { display: block; text-align: left; }
  .table-stack td:first-child::before { display: none; }
  .table-stack .cell-actions { justify-content: flex-end; }
  .table-stack td:empty { display: none; }
}

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

@media print {
  .topbar, .footer, .followup, .msg-actions, .thread-actions, .research, .related, .toasts, .skip, .hovercard { display: none !important; }
  body { background: #fff; color: #000; }
  .answer { max-width: none; }
  a.cite { background: none; color: #000; }
}

/* --- setup checklist ------------------------------------------------------ */
.field-narrow { flex: 0 1 8rem; min-width: 6.5rem; }
.panel-foot { justify-content: space-between; padding: 0.85rem clamp(1rem, 2.5vw, 1.5rem); border-top: 1px solid var(--line); margin: 0; }
.panel-foot .hint { margin: 0; }
.tabs .nav-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--warn); }

.setup-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--accent-line);
  border-radius: var(--r);
  background: var(--accent-soft);
  color: var(--ink-2);
  font-size: 0.9rem;
}
.setup-banner > .i { flex: none; color: var(--link); }
.setup-banner p { flex: 1 1 16rem; margin: 0; }
.setup-banner.is-blocking { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-soft); }
.setup-banner.is-blocking > .i { color: var(--warn); }

.setup-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 2rem; margin: 0 0 1.75rem; }
.setup-hero .lead { margin: 0; }
.setup-progress { display: flex; align-items: center; gap: 0.6rem; color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.setup-progress progress { width: 9rem; height: 0.4rem; border: 0; border-radius: var(--r-pill); background: var(--bg-sunk); overflow: hidden; appearance: none; }
.setup-progress progress::-webkit-progress-bar { background: var(--bg-sunk); }
.setup-progress progress::-webkit-progress-value { background: var(--ok-dot); border-radius: var(--r-pill); }
.setup-progress progress::-moz-progress-bar { background: var(--ok-dot); border-radius: var(--r-pill); }

.setup-group { margin: 0 0 2rem; }
.setup-group-head { display: flex; align-items: flex-start; gap: 0.75rem; margin: 0 0 0.75rem; }
.setup-group-n {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.8rem;
  font-weight: 700;
}
.setup-group-head h2 { margin: 0; font-size: 1.15rem; font-weight: 650; }
.setup-group-head p { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.875rem; }

.setup-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.setup-step { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-elev); box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--bar-h) + 1rem); transition: border-color 0.15s; }
.setup-step.is-required { border-color: color-mix(in srgb, var(--warn) 40%, var(--line)); }
.setup-step[open] { box-shadow: var(--shadow); }
.setup-step-head { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem clamp(1rem, 2.5vw, 1.25rem); cursor: pointer; list-style: none; border-radius: var(--r); }
.setup-step-head::-webkit-details-marker { display: none; }
.setup-step-head:hover .setup-step-name { color: var(--link); }
.setup-step-head:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.setup-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--bg-sunk);
  color: var(--ink-2);
}
.setup-mark .i { width: 1rem; height: 1rem; }
.setup-step.is-todo .setup-mark { background: var(--accent-soft); color: var(--link); }
.setup-step.is-required .setup-mark { background: var(--warn-soft); color: var(--warn); }
.setup-step.is-done .setup-mark { background: var(--ok-soft); color: var(--ok); }
.setup-step.setup-step-info .setup-mark, .setup-step.setup-step-optional:not(.is-todo) .setup-mark { background: var(--bg-sunk); color: var(--muted); }
.setup-step-title { display: flex; flex: 1; flex-direction: column; gap: 0.1rem; min-width: 0; }
.setup-step-name { font-size: 1rem; font-weight: 650; transition: color 0.15s; }
.setup-step-sum { overflow: hidden; color: var(--muted); font-size: 0.85rem; text-overflow: ellipsis; }
.setup-step:not([open]) .setup-step-sum { white-space: nowrap; }
.setup-step-sum code { font-size: 0.8rem; }
.setup-step-head > .badge { flex: none; }
.setup-chevron { display: grid; flex: none; place-items: center; color: var(--faint); transition: transform 0.18s var(--ease); }
.setup-step[open] > .setup-step-head .setup-chevron { transform: rotate(180deg); }
.setup-step-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 0.25rem clamp(1rem, 2.5vw, 1.25rem) 1.15rem calc(clamp(1rem, 2.5vw, 1.25rem) + 2.85rem); }
.setup-step-body > :last-child, .setup-step-body form { margin-bottom: 0; }
.setup-step-body .inline-form { margin: 0; }
.setup-step-body > .hint { margin: 0; overflow-wrap: anywhere; }
.setup-sub { display: grid; gap: 0.5rem; padding-top: 0.9rem; border-top: 1px dashed var(--line-2); }
.setup-sub h3 { margin: 0; font-size: 0.9rem; font-weight: 650; }
.setup-sub .hint { margin: 0; }
.setup-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 0; }
.setup-links a { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; font-weight: 550; }
.setup-keyed { margin: 0; }
.setup-keyed .item { align-items: flex-start; }
.setup-key { flex-basis: 100%; }
.setup-key[open] > summary { margin-bottom: 0.6rem; }
.setup-finish { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 1.1rem 0 0; border-top: 1px solid var(--line); }
.setup-finish p { flex: 1 1 18rem; max-width: var(--measure); margin: 0; }
.mail-try { display: grid; gap: 0.35rem; padding: 0.85rem 0 0; border-top: 1px dashed var(--line-2); }
.mail-try-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.mail-try-row .btn { min-height: 2.6rem; }
.mail-try .hint { margin: 0; }
[data-mail-result]:empty, [data-llm-result]:empty { display: none; }
.llm-connect { max-width: 44rem; }
@media (max-width: 40rem) {
  .setup-step-head { align-items: flex-start; }
  .setup-mark { margin-top: -0.2rem; }
  .setup-chevron { margin-top: 0.15rem; }
  .setup-step-body { padding-left: clamp(1rem, 2.5vw, 1.25rem); }
  .setup-step-head > .badge { display: none; }
}
.model-settings { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.35rem; color: var(--muted); font-family: var(--mono); font-size: 0.72rem; overflow-wrap: anywhere; }
.model-settings .i { flex: none; width: 0.8rem; height: 0.8rem; }
.kv dd .model-settings { flex-basis: 100%; margin-top: 0.1rem; }