/*
 * Geist, self-hosted. These faces used to arrive via a stylesheet on
 * fonts.googleapis.com, which cost the page a render-blocking request to a
 * third-party origin that then referenced a *second* origin (fonts.gstatic.com)
 * for the files themselves -- DNS + TCP + TLS twice over, on the critical path,
 * before any text could paint. Serving them from /assets puts them on the
 * connection the page already has and behind the same CDN behavior as every
 * other asset.
 *
 * Only the latin and latin-ext subsets are carried; the upstream stylesheet
 * also offered cyrillic, cyrillic-ext and vietnamese, which this UI has no
 * copy for. `unicode-range` is what makes that safe rather than lossy: a
 * browser asked to render a character outside these ranges simply falls
 * through to the next family in the --font-sans / --font-mono stack instead of
 * downloading anything.
 *
 * Both files are variable fonts spanning weight 100-900, so the single face per
 * subset covers every weight the UI asks for. `font-display: swap` matches what
 * Google served: text paints immediately in the fallback and re-renders when
 * the face lands, which is the right trade for a reading app.
 *
 * These are versioned by filename, not by query string. If a face is ever
 * replaced, rename the file -- backend/app/main.py caches /assets/fonts/*.woff2
 * as immutable for a year and will not notice edits in place.
 */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-latin.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: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-latin-ext.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;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin.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: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin-ext.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;
}

/*
 * Dark is the default theme; `html.light` flips the same tokens to the light
 * scale. The `--gray-*` / `--green-*` ramps are ordered light-to-dark by NAME
 * (gray-50 = the page's lowest-contrast surface, gray-900 = highest-contrast
 * text) rather than by literal lightness, so every existing `var(--gray-N)`
 * usage keeps its intent when the ramps are swapped.
 */
:root {
  /* ── Accent ramp (indigo) ── */
  --green-50:  #0d0d1f;
  --green-100: #1a1a3d;
  --green-200: #26265c;
  --green-300: #4f46e5;
  --green-400: #6366f1;
  --green-500: #6366f1;
  --green-600: #7b7ef4;
  --green-700: #8b93f8;
  --green-800: #a5b0ff;
  --green-900: #c7cbff;

  /* ── Neutral ramp ── */
  --gray-50:  #000000;
  --gray-100: #0a0a0a;
  --gray-200: #171717;
  --gray-300: #262626;
  --gray-400: #3d3d3d;
  --gray-500: #7d7d7d;
  --gray-600: #a1a1a1;
  --gray-700: #c4c4c4;
  --gray-800: #dcdcdc;
  --gray-900: #ededed;

  /* ── Semantic tokens ── */
  --bg:            var(--gray-50);
  --bg-strong:     var(--gray-100);
  --panel:         var(--gray-100);
  --panel-strong:  var(--gray-200);
  --ink:           var(--gray-900);
  --muted:         var(--gray-600);
  --faint:         var(--gray-500);
  --accent:        #6366f1;
  --accent-strong: var(--green-800);
  --accent-hover:  #4f46e5;
  --accent-soft:   rgba(99, 102, 241, 0.14);
  --accent-wash:   rgba(99, 102, 241, 0.05);
  --warn:          #f0803c;
  --line:          var(--gray-300);
  --line-faint:    var(--gray-200);
  --line-strong:   var(--gray-400);
  --header-bg:     rgba(0, 0, 0, 0.8);
  --shadow:        0 18px 40px rgba(0, 0, 0, 0.55);

  /*
   * Aliases for names that inline styles reference as `var(--name, #fallback)`.
   * They were never defined, so every one of those call sites silently used its
   * light-mode literal. Defining them here routes all of them through the
   * ramps above, which means they follow the theme.
   */
  --fg:             var(--ink);
  --text:           var(--ink);
  --text-primary:   var(--ink);
  --text-secondary: var(--muted);
  --text-muted:     var(--muted);
  --text-on-dark:   #ffffff;
  --bg-card:        var(--panel);
  --bg-secondary:   var(--panel-strong);
  --bg-tertiary:    var(--line);
  --bg-hover:       var(--panel-strong);
  --surface:        var(--panel-strong);
  --wash:           var(--panel-strong);
  --border:         var(--line);
  --gray-150:       var(--gray-300);
  --link:           var(--accent-strong);
  --primary:        var(--accent);
  --accent-subtle:  var(--accent-wash);

  --success:        #4ade80;
  --success-bg:     rgba(74, 222, 128, 0.12);
  --error:          #f87171;
  --danger:         #f87171;
  --color-danger:   #f87171;
  --error-bg:       rgba(248, 113, 113, 0.12);
  --error-soft:     rgba(248, 113, 113, 0.12);
  --warning:        #e8a33d;
  --warn-amber:     #e8a33d;
  --warning-strong: #f5c06a;
  --warning-bg:     rgba(232, 163, 61, 0.12);
  --warning-soft:   rgba(232, 163, 61, 0.14);
  --yellow-50:      rgba(232, 163, 61, 0.10);
  --yellow-200:     rgba(232, 163, 61, 0.30);
  --yellow:         #e5c04a;

  --blue-300:   #7ab8f5;
  --blue-400:   #60a5fa;
  --blue-900:   #1e3a5f;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-900: #7c2d12;
  --red-400:    #f87171;
  --red-600:    #ef4444;

  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Menlo", monospace;

  color-scheme: dark;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
}

html.light {
  --green-50:  #f5f5ff;
  --green-100: #e6e6fb;
  --green-200: #c9caf6;
  --green-300: #8b8df3;
  --green-400: #6366f1;
  --green-500: #6366f1;
  --green-600: #5a5de8;
  --green-700: #4f46e5;
  --green-800: #4338ca;
  --green-900: #312e81;

  --gray-50:  #fafafa;
  --gray-100: #ffffff;
  --gray-200: #f0f0f0;
  --gray-300: #e4e4e4;
  --gray-400: #cfcfcf;
  --gray-500: #737373;
  --gray-600: #666666;
  --gray-700: #454545;
  --gray-800: #2b2b2b;
  --gray-900: #171717;

  --panel:         #ffffff;
  --accent-strong: var(--green-800);
  --accent-soft:   rgba(99, 102, 241, 0.12);
  --accent-wash:   rgba(99, 102, 241, 0.06);
  --warn:          #b45309;
  --header-bg:     rgba(250, 250, 250, 0.85);
  --shadow:        0 18px 40px rgba(13, 27, 32, 0.08);

  /* Status hues need more depth to carry against light surfaces. */
  --success:        #15803d;
  --success-bg:     rgba(21, 128, 61, 0.10);
  --error:          #dc2626;
  --danger:         #dc2626;
  --color-danger:   #dc2626;
  --error-bg:       rgba(220, 38, 38, 0.08);
  --error-soft:     rgba(220, 38, 38, 0.08);
  --warning:        #b45309;
  --warn-amber:     #b45309;
  --warning-strong: #92400e;
  --warning-bg:     rgba(180, 83, 9, 0.08);
  --warning-soft:   rgba(180, 83, 9, 0.10);
  --yellow-50:      rgba(180, 83, 9, 0.07);
  --yellow-200:     rgba(180, 83, 9, 0.22);
  --yellow:         #d4a106;

  --blue-300:   #7ab8f5;
  --blue-400:   #2563eb;
  --blue-900:   #1e3a5f;
  --orange-300: #fdba74;
  --orange-400: #ea580c;
  --orange-900: #7c2d12;
  --red-400:    #ef4444;
  --red-600:    #dc2626;

  color-scheme: light;
}

html[data-env="test"] {
  --accent:       #d97706;
  --accent-hover: #b45309;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
}

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

button,
input {
  font: inherit;
}

/*
 * Form controls default to a UA white field, which is unreadable against the
 * dark text tokens. Give every control a themed surface up front; components
 * that want something else still override it.
 */
input,
textarea,
select {
  font: inherit;
  background: var(--panel);
  color: var(--ink);
  border-color: var(--line);
}

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

select option {
  background: var(--panel);
  color: var(--ink);
}

/* Range thumbs / checkboxes / radios pick this up instead of UA blue. */
input[type="range"],
input[type="checkbox"],
input[type="radio"],
progress {
  accent-color: var(--accent);
}

#app {
  min-height: 100vh;
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.auth-panel {
  width: min(460px, 100%);
  background: var(--panel);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px;
  box-shadow: var(--shadow);
}

.auth-brand {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.auth-panel h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.05;
}

.auth-subtitle {
  margin: 10px 0 0;
  color: var(--muted);
}

.auth-form {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.auth-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.95rem;
}

.auth-form input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  background: var(--panel);
  color: var(--ink);
}

.primary-button,
.secondary-button,
.ghost-button,
.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 12px 18px;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.nav-link-button {
  text-decoration: none;
}

.primary-button {
  background: var(--accent);
  color: #f5fbfa;
}

.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover,
.link-button:hover {
  transform: translateY(-1px);
}

.secondary-button,
.link-button {
  background: var(--panel-strong);
  color: var(--ink);
  border-color: var(--line);
}

.admin-button {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent-strong);
}

.primary-button:disabled,
.ghost-button:disabled {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
}

.ghost-button {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

.auth-footer {
  margin-top: 18px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--muted);
}

.not-found {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.not-found-body {
  width: min(360px, 100%);
}

.not-found-code {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--faint);
}

.not-found-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.not-found-home {
  display: inline-block;
  margin-top: 20px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

button.not-found-home {
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.not-found-home:hover {
  border-color: var(--ink);
}

.not-found-home:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.flash {
  margin-top: 18px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 12px 14px;
}

.flash.error,
.reader-status.error {
  background: rgba(231, 147, 136, 0.14);
  color: #e79388;
}

.toast {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-100%);
  z-index: 9999;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}

.toast-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.toast-success {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.toast-error {
  background: rgba(231, 147, 136, 0.14);
  color: #e79388;
}

/* The document scrolls (so the header can stick), not an inner pane. */

.pane-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
}

.pane-eyebrow {
  color: var(--accent);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
}

.admin-badge,
.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  font-size: 0.76rem;
}

.admin-badge {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.pill.stage-raw {
  background: var(--panel-strong);
  color: var(--muted);
  border-color: var(--line);
}

.pill.stage-fetched {
  background: rgba(127, 162, 240, 0.14);
  color: #7fa2f0;
  border-color: #b6d0f7;
}

.pill.stage-enriched {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent);
}

.unread-pill {
  background: var(--warning-soft);
}

.reader-newsletter-selector {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
}

.reader-newsletter-name {
  background: transparent;
  border: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 6px 6px 10px;
  border-radius: 6px 0 0 6px;
  transition: background 120ms ease;
  line-height: 1.2;
}

.reader-newsletter-name:hover {
  background: var(--panel-strong);
}

.reader-newsletter-chevron {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 0 6px 6px 0;
  transition: background 120ms ease, color 120ms ease;
  display: flex;
  align-items: center;
  line-height: 1;
}

.reader-newsletter-chevron:hover {
  background: var(--panel-strong);
  color: var(--ink);
}

.reader-newsletter-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
  min-width: 160px;
  z-index: 100;
  box-shadow: var(--shadow);
}

.reader-newsletter-dropdown-item {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--muted);
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: background 120ms ease, color 120ms ease;
}

.reader-newsletter-dropdown-item:hover,
.reader-newsletter-dropdown-item.active {
  background: var(--panel-strong);
  color: var(--ink);
}

/* Primary in-app destinations. Quiet by default; the active one is filled. */
.reader-special-channel-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
  transition: background 120ms cubic-bezier(.25, .46, .45, .94), color 120ms cubic-bezier(.25, .46, .45, .94);
}

.reader-special-channel-btn:hover {
  color: var(--ink);
  background: var(--panel-strong);
}

.reader-special-channel-btn.active {
  color: var(--ink);
  background: var(--accent-soft);
}

/* Keyboard-shortcut hint chips (j/k navigate, o expand). */
.reader-hotkey-hint {
  display: flex;
  align-items: center;
  gap: 6px;
}

.reader-hotkey-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-bottom-color: var(--line-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  line-height: 1;
}

.reader-hotkey-hint span {
  font-size: 12px;
  color: var(--faint);
}

.reader-hotkey-hint .hint-gap {
  margin-left: 6px;
}

/* The admin-mode hint is also the control, so touch devices have a way in. */
.reader-hotkey-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.reader-hotkey-toggle:hover kbd,
.reader-hotkey-toggle:focus-visible kbd {
  border-color: var(--line-strong);
  color: var(--ink);
}

.reader-hotkey-toggle:hover span {
  color: var(--muted);
}

/* Admin mode is on: the 'a' key reads as engaged. */
.reader-hotkey-hint kbd.active {
  background: var(--accent-soft, var(--panel-strong));
  border-color: var(--line-strong);
  color: var(--ink);
}

.reader-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 120ms cubic-bezier(.25, .46, .45, .94), color 120ms cubic-bezier(.25, .46, .45, .94);
}

.reader-theme-toggle:hover {
  border-color: var(--line-strong);
  color: var(--ink);
}

/* ── Marketing band under the header (subscribe CTA) ── */

/* ── Footer ── */

/* The hint chips and marketing nav are the first things to go when narrow. */
@media (max-width: 860px) {
  .reader-hotkey-hint {
    display: none;
  }
}

.story-list-pane,
.story-detail-pane {
  padding: 28px 24px;
  min-width: 0;
  overflow-y: auto;
}

.story-list-pane {
  border-right: 1px solid var(--line);
  background: var(--bg);
}

.pane-header h1,
.story-detail h2 {
  margin: 4px 0 0;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.05;
}

.reader-status {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.feed-source {
  font-weight: 500;
  color: var(--ink);
}

/* ── Full-width reader layout ── */

/* Full-bleed list: rows run edge to edge, separated only by hairlines. */

/* Migration notice above the legacy search composer. */

/* Full-width search composer. Secondary controls live underneath it. */
.search-composer-row {
  display: flex;
  align-items: flex-start;
}

.search-composer-box {
  position: relative;
  flex: 1 1 auto;
  min-width: min(100%, 380px);
}

.search-composer-side {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 9px;
}

.search-composer-under {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  margin-top: 3px;
}

/* One row whenever the controls fit, and a wrapped row when they do not — but
   never a crushed one. Flex items shrink before they wrap, and
   `.search-window-toggle` sets `overflow: hidden`, which drops its automatic
   minimum size to zero; under the old `flex-wrap: nowrap` that made it the one
   control with no width floor, so it was squeezed to a sliver and then out of
   existence as soon as an admin's extra controls (stopwatch, audit link) made
   the row too wide. Refusing to shrink turns that into a wrap. */
.search-composer-under > * {
  flex-shrink: 0;
}

/* Logged-out composer: says why the disabled search button is disabled. */
.search-composer-signin-note {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.search-composer-signin-note a {
  color: var(--link);
  text-decoration: underline;
}

.search-composer-under .search-pill {
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: 0.78rem;
}

.search-composer-under .search-toolbar-save {
  margin-left: 2px;
}

.search-composer-under .search-toolbar-save .search-save-input {
  width: 190px;
}

.search-submit {
  padding: 4px 12px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  background: var(--accent);
  color: #ffffff;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.search-submit:hover:not(:disabled),
.search-submit:focus-visible:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.search-submit:disabled {
  cursor: default;
  background: var(--panel-strong);
  border-color: var(--line);
  color: var(--faint);
}

/*
 * Segmented lookback control. The dark theme's --panel sits ~1 step off --bg,
 * so a panel-on-page chip with a --line hairline reads as nothing at all; use
 * the stronger surface + border so the control is visibly a control, and label
 * it so two bare "24h/72h" chips aren't the only cue for what it does.
 */
.search-window-toggle {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--panel-strong);
}

.search-window-toggle button {
  padding: 3px 10px;
  border: 0;
  border-right: 1px solid var(--line-strong);
  background: var(--panel-strong);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 80ms ease;
  user-select: none;
}

.search-window-toggle button:active:not(:disabled) {
  transform: scale(0.96);
}

.search-window-toggle button:hover:not(.active):not(:disabled) {
  background: var(--bg-hover);
}

.search-window-toggle button:last-child {
  border-right: 0;
}

.search-window-toggle button.active {
  background: var(--ink);
  color: var(--bg);
}

.search-window-toggle button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Admin stopwatch, matching the lookback toggle it sits beside. Tabular
   figures and a fixed min-width keep the digits from shifting the row as they
   count up. */
.search-stopwatch {
  display: inline-block;
  min-width: 52px;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: default;
}

.search-stopwatch.running {
  border-color: var(--green-300);
  color: var(--ink);
}

.search-composer-input {
  width: 100%;
  box-sizing: border-box;
  display: block;
  max-height: 168px;
  overflow-y: auto;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 16px;
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
  background: var(--panel);
}

.search-composer-input::placeholder {
  color: var(--muted);
  opacity: 0.78;
}

.search-composer-input:focus {
  outline: none;
  border-color: var(--green-300);
  box-shadow: 0 0 0 3px rgba(43, 158, 151, 0.12);
}

.search-composer-submit:hover:not(:disabled),

.saved-search-pills-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.saved-search-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 240px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 7px 13px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.saved-search-pill:hover,
.saved-search-pill:focus-visible {
  border-color: var(--line);
  background: var(--panel-strong);
}

.saved-search-dropdown-wrap {
  position: relative;
}

.saved-search-dropdown-toggle svg {
  flex: 0 0 auto;
}

.saved-search-dropdown {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  width: min(320px, calc(100vw - 48px));
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(24, 39, 47, 0.14);
  background: var(--panel);
  padding: 6px;
}

.saved-search-dropdown-item {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 6px;
  padding: 9px 10px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}

.saved-search-dropdown-item:hover,
.saved-search-dropdown-item:focus-visible {
  background: var(--panel-strong);
}

.saved-search-dropdown-item.is-muted {
  color: var(--muted);
  cursor: default;
}

.search-options-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.search-options-summary::-webkit-details-marker {
  display: none;
}

.search-options-summary svg {
  color: var(--muted);
  flex: 0 0 auto;
}

/* Unread signal: a hairline accent rule on the row's leading edge. */

/* Keyboard focus uses several cues so read rows stay obvious in either theme. */

/* Only acts as a flex line-break in the mobile media query; inert otherwise. */

/* Keep fixed title markers visible: only the title text is allowed to shrink
   and ellipsize. Rows without markers reserve no marker space. */

/* The marker's own leading space collapses when it becomes a flex item, so
   restore the gap between the title text and the marker explicitly. */

.story-permalink-control {
  position: relative;
  display: inline-flex;
}

.story-permalink-message {
  position: static;
  margin-left: 4px;
  width: max-content;
  max-width: 220px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-strong);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

.story-permalink-message.error {
  color: #b91c1c;
}

.copy-link-check {
  display: inline-flex;
  flex-shrink: 0;
  margin-left: 6px;
  color: var(--success, #4ade80);
}

.copy-link-sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.feed-item-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border: none;
  width: 20px;
  height: 20px;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  opacity: 1;
  transition: opacity 0.15s;
}

.feed-item-action-btn.active {
  opacity: 1;
}

.feed-item-action-btn:hover {
  color: var(--accent);
}

.feed-item-action-btn.active {
  color: var(--accent);
}

.feed-item-action-btn:disabled {
  cursor: default;
  opacity: 0.35;
}

.feed-item-action-btn:disabled:hover {
  color: var(--muted);
}

/* Age sits on the title line, right-aligned against the expand chevron. */

/* Chips are inline-block, not inline-flex: text-overflow only ellipsizes
   text that is a direct child of the overflowing box, and a flex container
   wraps its text in an anonymous flex item, so a flex chip clips flat. */

/* Newsletter relevance badges */
.nl-badges {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.nl-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  line-height: 1.4;
  transition: opacity 0.15s;
}

.nl-badge:hover {
  opacity: 0.8;
}

.nl-badge-4 {
  background: rgba(76, 175, 80, 0.18);
  color: #4caf50;
}

.nl-badge-5 {
  background: rgba(46, 125, 50, 0.22);
  color: #2e7d32;
}

.nl-badge-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 3px;
  border: 1px dashed var(--line);
  background: none;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
  transition: border-color 0.15s, color 0.15s;
}

.nl-badge-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Admin score breakdown — inline with meta */

.score-total {
  font-weight: 600;
}

.score-sep {
  opacity: 0.4;
}

.feed-item-base-score {
  all: unset;
  font-family: var(--font-mono, 'SF Mono', 'Menlo', monospace);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gray-500, var(--muted));
  background: var(--gray-100, var(--panel-strong));
  border: 1px solid var(--line, var(--line));
  border-radius: 4px;
  padding: 0 5px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1.5;
}

.feed-item-base-score:hover {
  background: var(--gray-200, #e5e7eb);
  color: var(--gray-700, var(--ink));
}

.judgment-run-tag {
  font-family: var(--font-mono, 'SF Mono', 'Menlo', monospace);
  font-size: 0.68rem;
  background: var(--gray-800, #1f2937);
  color: var(--gray-400, var(--muted));
  padding: 0 4px;
  border-radius: 3px;
  border: 1px solid var(--gray-700, #374151);
  letter-spacing: 0.02em;
}
.judgment-run-tag:hover {
  color: var(--gray-200, #e5e7eb);
  border-color: var(--gray-600, #4b5563);
}

.score-rule-chip {
  opacity: 0.35;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.score-rule-chip.matched {
  opacity: 0.8;
}

.score-rule-field {
  font-weight: 500;
}


/* ── Feed membership feedback button ──────────────────────────────────── */
.feed-membership-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--gray-300);
  background: var(--gray-100);
  color: var(--gray-500);
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  transition: color 0.15s, border-color 0.15s;
}
.feed-membership-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.modal-content.smart-feed-events-modal {
  max-width: 760px;
  width: 100%;
  padding: 20px 24px;
}

.smart-feed-events-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.smart-feed-events-title {
  margin: 0 0 4px;
  font-size: 1rem;
  color: var(--ink);
}

.smart-feed-events-subtitle {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

.smart-feed-events-empty {
  font-size: 0.84rem;
  color: var(--muted);
}

.smart-feed-events-error {
  color: #b91c1c;
}

.smart-feed-events-list {
  display: grid;
  gap: 12px;
}

.smart-feed-event-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--panel);
}

.smart-feed-event-topline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.smart-feed-event-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.smart-feed-event-badge.is-in {
  background: rgba(138, 229, 173, 0.14);
  color: #8ae5ad;
}

.smart-feed-event-badge.is-out {
  background: rgba(234, 134, 134, 0.14);
  color: #ea8686;
}

.smart-feed-event-current {
  font-size: 0.72rem;
  font-weight: 600;
  color: #819eee;
  background: rgba(129, 158, 238, 0.14);
  border-radius: 999px;
  padding: 2px 8px;
}

.smart-feed-event-time {
  font-size: 0.78rem;
  color: var(--muted);
  margin-left: auto;
}

.smart-feed-event-meta {
  display: grid;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--ink);
  line-height: 1.4;
}

.smart-feed-event-mono {
  font-family: var(--font-mono, 'SF Mono', 'Menlo', monospace);
}

.smart-feed-event-justification {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--ink);
  line-height: 1.45;
}

/* ── Feed membership modal ───────────────────────────────────────────── */
.feed-membership-modal {
  max-width: 520px;
  width: 100%;
  padding: 20px 24px;
}

.feed-membership-article-title {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-membership-loading,
.feed-membership-error {
  font-size: 0.85rem;
  color: var(--muted);
  padding: 12px 0;
}

.feed-membership-error {
  color: var(--warn, #ef4444);
}

.feed-membership-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 50vh;
  overflow-y: auto;
}

.feed-membership-row {
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}
.feed-membership-row:last-child {
  border-bottom: none;
}

.feed-membership-row-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.feed-membership-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  flex-shrink: 0;
}
.feed-membership-indicator.in-feed {
  background: var(--green-100, rgba(132, 235, 171, 0.14));
  color: var(--green-700, #84ebab);
}
.feed-membership-indicator.not-in-feed {
  background: var(--gray-100, var(--panel-strong));
  color: var(--gray-400, var(--muted));
}

.feed-membership-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-membership-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.feed-membership-prior {
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
}
.feed-membership-prior.prior-should {
  background: var(--green-100, rgba(132, 235, 171, 0.14));
  color: var(--green-700, #84ebab);
}
.feed-membership-prior.prior-shouldnt {
  background: rgba(236, 131, 131, 0.14);
  color: #ec8383;
}

.feed-membership-saved {
  font-size: 0.75rem;
  color: var(--accent);
  font-weight: 500;
}

.feed-membership-action-btn {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.feed-membership-action-btn:hover {
  background: var(--gray-100, var(--panel-strong));
  border-color: var(--accent);
}

.feed-membership-cancel-btn {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
}

.feed-membership-expand {
  margin-top: 8px;
  margin-left: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feed-membership-justification {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.82rem;
  font-family: inherit;
  resize: vertical;
  background: var(--panel);
  color: var(--ink);
}
.feed-membership-justification:focus {
  outline: none;
  border-color: var(--accent);
}

.feed-membership-expand .primary-button {
  align-self: flex-start;
  font-size: 0.78rem;
  padding: 5px 14px;
}

.feed-membership-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}


.comment-expand-btn {
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  font-size: inherit;
}

.comment-expand-btn:hover {
  text-decoration: underline;
}

/* Filter dropdowns */
.filter-header {
  display: inline-block;
}

.filter-header-btn {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.filter-header-btn:hover {
  color: var(--accent);
}

.filter-chevron {
  font-size: 0.65rem;
  opacity: 0.6;
}

.filter-active-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 2px;
}

.filter-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9;
}

.filter-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  z-index: 10;
  min-width: 140px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
}

.filter-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 5px 12px;
  font-size: 0.8rem;
  color: var(--ink);
  white-space: nowrap;
}

.filter-dropdown-item:hover {
  background: var(--bg-hover, var(--panel-strong));
}

.filter-dropdown-item-active {
  font-weight: 600;
  color: var(--accent);
}

.filter-dropdown-clear {
  color: var(--muted);
  font-style: italic;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
  padding-bottom: 6px;
}

/* Sortable headers */
.sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.sortable-th:hover {
  color: var(--accent);
}

.sort-chevron {
  font-size: 0.55rem;
  margin-left: 3px;
  opacity: 0.25;
  vertical-align: middle;
}

.sort-chevron-active {
  opacity: 0.8;
  color: var(--accent);
}

/* Only the topic text ellipsizes; the "(N)" count stays visible after it. */

/* Placeholder for rows with nothing to expand — keeps the age aligned. */

/* Chevron on the title line — rotates 180° when the row is open. */

/* Give the main feed's otherwise minimal expand affordance a little more
   presence without turning it into a competing visual element. */

.feed-item-expanded {
  margin: 12px 0 2px 0;
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 14px;
  line-height: 1.55;
  display: flex;
  flex-direction: column;
}

/* Sections in the expanded panel are separated by space, not rules. */
.feed-item-expanded > * + * {
  margin-top: 18px;
  padding-top: 0;
  border-top: none;
}

.feed-item-section-header {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  margin-bottom: 10px;
}

.feed-item-details-empty {
  color: var(--muted);
  font-style: italic;
}

.summary-save-btn,
.summary-cancel-btn {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid var(--line);
}

.summary-save-btn {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.summary-save-btn:disabled,
.summary-cancel-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.summary-cancel-btn {
  background: none;
  color: var(--muted);
}

/* ── Topic alternates ── */

.feed-item-alternates-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.feed-item-alternates-list a {
  color: var(--accent-strong);
  text-decoration: none;
}

.feed-item-alternates-list a:hover {
  text-decoration: underline;
}

.feed-item-alternates-meta {
  display: inline;
  font-size: 0.72rem;
  color: var(--muted);
  margin-left: 6px;
}

.feed-item-alternates-meta > span + span::before {
  content: " · ";
}

.feed-item-alternates-domain {
  color: var(--muted);
  font-size: 0.72rem;
}

.feed-item-alternates-age {
  color: var(--muted);
  font-size: 0.72rem;
}

.feed-item-alternates-reading {
  color: var(--muted);
  font-size: 0.72rem;
}

.feed-item-context-list {
  margin: 0;
  padding-left: 1.1rem;
}

/* Semantic bullets keep the prose and its citations in one compact column. */
.feed-item-context-fact {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  padding-left: 2px;
}

.feed-item-context-fact:last-child {
  margin-bottom: 0;
}

.feed-item-context-fact::marker {
  content: "•  ";
  color: var(--line-strong);
}

.feed-item-context-sources {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--faint);
  line-height: 1.45;
  margin-top: 2px;
}

.feed-item-context-sources-label {
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.feed-item-context-sources a {
  color: inherit;
  text-decoration: none;
}

.feed-item-context-sources a:hover,
.feed-item-context-sources a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}

.feed-item-discussion-picks {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.feed-item-discussion-pick-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.feed-item-discussion-pick-meta {
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-right: 6px;
}

.feed-item-discussion-pick-summary {
  color: var(--ink);
}

.feed-item-discussion-pick-link:hover .feed-item-discussion-pick-summary {
  text-decoration: underline;
}

/* ── Summary edit in article detail view ── */

.summary-edit-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.summary-edit-textarea {
  width: 100%;
  font-size: 0.9rem;
  font-family: inherit;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
  resize: vertical;
  box-sizing: border-box;
  line-height: 1.5;
}

.summary-edit-actions {
  display: flex;
  gap: 8px;
}

/* ── Article read page ── */

.title-external-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--muted);
  opacity: 0.55;
  transition: opacity 120ms ease, color 120ms ease;
  vertical-align: middle;
}

.title-external-link:hover {
  opacity: 1;
  color: var(--accent-strong);
}

.status-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.55;
  transition: opacity 120ms ease, color 120ms ease;
}

.status-icon-btn:hover {
  opacity: 1;
  color: var(--ink);
}

.status-icon-btn.read {
  opacity: 1;
  color: var(--accent);
}

.status-icon-btn.note-open {
  opacity: 1;
  color: var(--accent);
}

.status-icon-btn.note-has-content {
  opacity: 0.8;
  color: var(--accent);
}

.article-note-panel {
  margin-top: 10px;
  padding: 10px 12px 8px;
  background: var(--bg-strong);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.article-note-textarea {
  display: block;
  width: 100%;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 10px;
  font-family: "IBM Plex Mono", "Fira Code", monospace;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--panel);
  outline: none;
  transition: border-color 120ms ease;
}

.article-note-textarea:focus {
  border-color: var(--accent);
}

.article-note-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
  min-height: 15px;
}

.article-note-status {
  font-size: 11px;
  color: var(--muted);
}

.article-note-delete-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.6;
}

.article-note-delete-btn:hover {
  color: var(--danger, #c0392b);
  opacity: 1;
}

.article-note-loading {
  font-size: 12px;
  color: var(--muted);
  padding: 6px 0;
}

.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 10px;
  background: var(--accent-soft);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

.admin-topic-badge {
  font-size: 0.78rem;
  padding: 1px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  margin-left: auto;
}

.admin-topic-badge--empty {
  background: none;
  color: var(--muted);
  font-style: italic;
  opacity: 0.6;
  border: 1px dashed var(--muted);
}

.admin-topic-badge:hover {
  opacity: 0.8;
  filter: brightness(0.95);
}

.admin-topic-badge--empty:hover {
  opacity: 1;
  border-color: var(--accent);
  color: var(--accent-strong);
}

.admin-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--accent-strong);
  border-radius: 4px;
  opacity: 0.65;
  transition: opacity 120ms ease, background 120ms ease;
}

.admin-icon-link:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.lifecycle-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}

.lifecycle-arrow {
  color: var(--line);
  font-size: 0.75rem;
  line-height: 1;
  padding: 0 2px;
}

.lifecycle-step {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  border: none;
  background: transparent;
  cursor: default;
  line-height: 1.4;
}

.lifecycle-step.step-done {
  color: var(--muted);
}

.lifecycle-step.step-current {
  background: var(--bg-strong);
  color: var(--ink);
}

.lifecycle-step.step-available {
  background: var(--accent-soft);
  color: var(--accent-strong);
  cursor: pointer;
  transition: transform 100ms ease, background 100ms ease;
}

.lifecycle-step.step-available:hover {
  transform: translateY(-1px);
  background: var(--accent);
  color: #fff;
}

.lifecycle-step.step-locked {
  color: var(--muted);
  opacity: 0.45;
}

.lifecycle-step.step-queued {
  background: var(--warning-soft, rgba(241, 170, 126, 0.14));
  color: var(--warning-strong, #f1aa7e);
  cursor: default;
}

.lifecycle-dropdown {
  position: relative;
  display: inline-flex;
}

.lifecycle-step-dropdown {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.lifecycle-step-dropdown:hover {
  color: var(--ink);
}

.lifecycle-dropdown-caret {
  font-size: 0.6rem;
  opacity: 0.5;
  line-height: 1;
}

.lifecycle-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px;
  z-index: 100;
  min-width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.lifecycle-dropdown-item {
  display: block;
  width: 100%;
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink);
  white-space: nowrap;
}

.lifecycle-dropdown-item:hover {
  background: var(--bg-strong);
}

.linked-url-row {
  margin-top: 14px;
}

.linked-url-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 8px;
  transition: color 120ms ease, border-color 120ms ease;
}

.linked-url-link:hover {
  color: var(--accent-strong);
  border-color: var(--accent-strong);
}

.content-updated-notice {
  margin-top: 16px;
  padding: 6px 10px;
  font-size: 0.82rem;
  color: var(--text-secondary, var(--muted));
  background: rgba(59, 130, 246, 0.06);
  border-left: 3px solid rgba(59, 130, 246, 0.4);
  border-radius: 2px;
}

.empty-panel {
  min-height: 240px;
  display: grid;
  place-items: center;
  padding: 24px;
  border-radius: 20px;
  background: var(--panel);
  border: 1px dashed var(--line);
  color: var(--muted);
  text-align: center;
}

.admin-shell {
  min-height: 100vh;
  padding: 0 24px 40px;
}

.admin-crumb {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 10px;
}

.admin-crumb:hover {
  color: var(--accent);
}

.segmented-control {
  display: inline-flex;
  background: var(--gray-100);
  padding: 4px;
  border-radius: 12px;
  gap: 4px;
  margin-bottom: 24px;
}

.segmented-control-item {
  padding: 8px 16px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.segmented-control-item:hover {
  background: var(--gray-200);
  color: var(--ink);
}

.segmented-control-item.active {
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.admin-page-title {
  margin-bottom: 20px;
}

.admin-page-title h1 {
  margin: 0;
}

.change-detail-source-card {
  margin-bottom: 24px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.change-detail-source-label {
  margin-bottom: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.change-detail-source-grid {
  display: grid;
  gap: 12px;
}

.change-detail-source-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.change-detail-source-key {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
}

.change-detail-source-value {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.45;
}

.change-detail-source-meta {
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.change-detail-source-empty {
  color: var(--muted);
  font-size: 0.9rem;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.admin-header h1,
.site-card h3 {
  margin: 0;
}

.admin-panel h2 {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

.admin-header p {
  margin: 8px 0 0;
  color: var(--muted);
}

.admin-header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-grid,
.tuning-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.admin-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 22px;
  box-shadow: var(--shadow);
  margin-bottom: 28px;
  overflow-x: auto;
}

.score-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 18px;
}

.score-settings-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--panel);
}

.score-settings-group h2 {
  margin: 0 0 12px;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--muted);
}

.score-setting-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.score-setting-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.score-setting-copy {
  min-width: 0;
}

.score-setting-key {
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--ink);
  font-family: var(--font-mono, 'SF Mono', 'Menlo', monospace);
}

.score-setting-description,
.score-setting-meta {
  margin-top: 3px;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.35;
}

.score-setting-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.score-setting-control input {
  width: 92px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-mono, 'SF Mono', 'Menlo', monospace);
  font-size: 0.9rem;
}

.relevance-multiplier-slider {
  display: flex;
  align-items: center;
  gap: 8px;
}

.relevance-multiplier-slider input[type='range'] {
  width: 160px;
  padding: 0;
  border: 0;
  background: transparent;
}

.relevance-multiplier-readout {
  font-family: var(--font-mono, 'SF Mono', 'Menlo', monospace);
  font-size: 0.85rem;
  color: var(--muted);
  min-width: 44px;
  text-align: right;
}

.score-setting-error {
  grid-column: 1 / -1;
  color: var(--error, #dc2626);
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .score-settings-grid {
    grid-template-columns: 1fr;
  }

  .score-setting-row {
    grid-template-columns: 1fr;
  }

  .score-setting-control {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.site-card-actions.panel-footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.site-form,
.site-form-grid {
  display: grid;
  gap: 14px;
}

.site-form label,
.site-form-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.95rem;
}

.form-field-group {
  display: grid;
  gap: 18px;
}

.field-help {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
}

.site-form input,
.site-form textarea,
.site-form-grid input,
.site-form-grid textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--panel);
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.site-form input:focus,
.site-form textarea:focus,
.site-form-grid input:focus,
.site-form-grid textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.checkbox-row {
  display: flex !important;
  align-items: center;
  gap: 10px;
}

.checkbox-row input {
  width: auto;
}

.sites-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.sites-filter-input {
  flex: 1;
  min-width: 180px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 14px;
  background: var(--panel);
  color: var(--ink);
}

.sites-sort-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.sites-sort-controls select {
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--panel);
  color: var(--ink);
}

.sites-sort-dir-button {
  padding: 8px 12px !important;
  font-size: 0.85rem;
}

.site-list,
.tuning-list {
  display: grid;
  gap: 14px;
}

.site-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  padding: 18px;
}

.site-card-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.site-domain,
.site-meta {
  color: var(--muted);
}

.site-meta {
  margin-top: 8px;
  font-size: 0.9rem;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.site-fetch-status {
  color: var(--ink);
  opacity: 0.7;
}

.site-fetch-error {
  color: var(--error);
  font-size: 0.85rem;
  margin: 12px 0;
  background: var(--error-soft);
  padding: 8px 12px;
  border-radius: 10px;
  word-break: break-all;
}

.site-form-grid {
  margin-top: 14px;
}

.site-notes-row {
  grid-column: 1 / -1;
}

.site-card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.danger-button {
  color: #7c2d20;
  border-color: #d7a193;
}

.inactive-pill {
  background: var(--gray-200);
  color: var(--gray-600);
}

.site-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-domain-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.score-pill {
  font-size: 0.75rem;
  padding: 2px 7px;
  font-weight: 600;
}

.score-1 { background: rgba(233, 134, 134, 0.14); color: #e98686; }
.score-2 { background: rgba(241, 185, 126, 0.14); color: #f1b97e; }
.score-3 { background: rgba(241, 215, 126, 0.14); color: #f1d77e; }
.score-4 { background: rgba(126, 241, 209, 0.14); color: #7ef1d1; }
.score-5 { background: rgba(126, 241, 211, 0.14); color: #7ef1d3; }

/* ── Inline score editor popover (Sites table) ──────────────────── */
.score-cell {
  position: relative;
  display: inline-block;
}

.score-pill.score-empty {
  opacity: 0.5;
  color: var(--muted);
}

.score-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.score-popover-options {
  display: flex;
  gap: 6px;
}

.score-popover-option {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: 9px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.score-popover-option:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.score-popover-option.is-current {
  border-color: var(--accent-strong);
}

.score-popover-option:disabled {
  cursor: default;
  opacity: 0.6;
}

.score-popover-error {
  font-size: 0.75rem;
  color: var(--warn);
}


.stories-search-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

.stories-search-bar .sites-filter-input {
  flex: 1;
}

.fetch-recent-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.fetch-hours-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--muted);
}

.fetch-hours-input {
  width: 64px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  font: inherit;
  font-size: 0.875rem;
  text-align: center;
  color: var(--ink);
}

.fetch-hours-input:disabled {
  opacity: 0.5;
}

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

/* Admin overlay data loading over the reader's rows (admin mode switched on). */
.feed-admin-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}

.story-domain-link {
  color: var(--accent);
  text-decoration: none;
}

.story-domain-link:hover {
  text-decoration: underline;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.users-table th,
.users-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
}

.recent-searches-table {
  font-size: 0.78rem;
}

.recent-searches-table th,
.recent-searches-table td {
  padding: 6px 8px;
  white-space: nowrap;
}

.recent-searches-table td:first-child {
  white-space: normal;
  min-width: 240px;
}

.admin-table-sort {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: inherit;
  padding: 0;
}


.users-table th {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.users-table td {
  color: var(--ink);
}

.muted-text {
  color: var(--muted);
}

.add-article-btn {
  background: none;
  border: none;
  padding: 0 4px;
  margin-left: 6px;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  vertical-align: middle;
  transition: color 0.1s;
}

.add-article-btn:hover {
  color: var(--accent);
}

/* Articles table */
.articles-table-wrap {
  overflow-x: auto;
  margin-top: 8px;
}

.articles-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.articles-table th,
.articles-table td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.articles-table th {
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
}

.articles-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.1s;
}

.articles-table th.sortable:hover {
  color: var(--accent-strong);
}

.articles-table th .th-inner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.articles-table th .sort-icon {
  opacity: 0;
  font-size: 0.85em;
  transition: opacity 0.1s;
  letter-spacing: 0;
}

.articles-table th.sortable:hover .sort-icon {
  opacity: 0.3;
}

.articles-table th.sorted .sort-icon {
  opacity: 0.7;
}

.articles-table tbody tr:hover td {
  background: var(--bg-strong);
}

.articles-table tbody tr:last-child td {
  border-bottom: none;
}

.articles-table .col-title {
  min-width: 320px;
  max-width: 560px;
  width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.articles-table .col-title a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

.articles-table .col-title a:hover {
  text-decoration: underline;
}

.articles-table .col-topic {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--muted);
  cursor: pointer;
}
.articles-table .col-topic.expanded {
  white-space: normal;
  overflow: visible;
  max-width: 240px;
}

.col-title-topic {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 400;
}

.col-title-topic--empty {
  opacity: 0.45;
  font-style: italic;
}

.articles-table .col-site {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 0.82rem;
}

.articles-table .col-rank {
  width: 52px;
  text-align: center;
  color: var(--muted);
}

.articles-table .col-uuid {
  width: 72px;
  text-align: center;
  white-space: nowrap;
}

.uuid-copy-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  cursor: pointer;
  font-family: monospace;
  font-size: 0.78rem;
  color: var(--gray-500);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: border-color 0.15s, color 0.15s;
}

.uuid-copy-btn:hover {
  border-color: var(--accent);
  color: var(--fg);
}

.uuid-copy-btn.uuid-copied {
  border-color: var(--green-600, #16a34a);
  color: var(--green-600, #16a34a);
}

.uuid-copy-icon {
  font-size: 0.72rem;
}

.score-high { color: var(--accent); }
.score-mid  { color: var(--warn-amber, #b45309); }
.score-low  { color: var(--warn); }
.score-null { color: var(--muted); }

.scores-expand-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.6rem;
  padding: 0 2px;
  line-height: 1;
  vertical-align: middle;
}

.scores-expand-btn:hover {
  color: var(--ink);
}

.newsletter-scores-row td {
  padding: 6px 16px 10px;
  background: var(--bg-strong);
}

.newsletter-scores-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ns-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
}

.ns-badge .ns-score {
  font-weight: 700;
}

.score-high .ns-score { color: var(--accent); }
.score-mid  .ns-score { color: var(--warn-amber, #b45309); }
.score-low  .ns-score { color: var(--warn); }
.score-null .ns-score { color: var(--muted); }

.ns-empty {
  font-size: 0.8rem;
  color: var(--muted);
}

.articles-table .col-score {
  width: 46px;
  text-align: right;
  padding-left: 2px;
  padding-right: 6px;
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--muted);
}

.articles-table .col-tier {
  width: 30px;
  text-align: center;
  padding-left: 2px;
  padding-right: 2px;
  color: var(--muted);
}

.articles-table .col-date {
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.articles-table .col-fetched,
.articles-table .col-bool {
  width: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 0.75rem;
  padding-left: 2px;
  padding-right: 2px;
}

.articles-table th.col-bool-header {
  width: 28px;
  padding: 0 2px;
  text-align: center;
}

.articles-table th.col-bool-header .th-inner {
  white-space: nowrap;
  font-size: 0.7rem;
  line-height: 1;
}

.articles-table .col-links {
  width: 132px;
}

.article-links {
  display: flex;
  align-items: center;
  gap: 10px;
}

.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel, var(--panel-strong));
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.score-badge-load {
  cursor: pointer;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.1s, border-color 0.1s;
}

.score-badge-load:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--accent);
}

.score-badge-load:disabled {
  cursor: default;
  opacity: 0.6;
}

.article-links a,
.article-link-copy {
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  transition: color 0.1s;
}

.article-links a:hover,
.article-link-copy:hover:not(:disabled) {
  color: var(--accent);
}

.article-link-disabled {
  color: var(--line);
  font-size: 0.85rem;
  cursor: default;
}

.article-link-copy:disabled {
  opacity: 0.5;
  cursor: default;
}

.curation-notes-table .curation-notes-id {
  font-family: monospace;
  font-size: 12px;
  white-space: nowrap;
}

.curation-notes-table .curation-notes-title {
  max-width: 280px;
}

.curation-notes-extlink {
  margin-left: 6px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}

.curation-notes-action {
  font-size: 12px;
  white-space: nowrap;
}

.curation-notes-eye {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--muted);
  padding: 0 4px;
}

.curation-notes-eye:hover {
  color: var(--accent);
}

.curation-notes-when {
  font-size: 12px;
  white-space: nowrap;
}

.curation-notes-expand td {
  padding-top: 0;
  padding-bottom: 12px;
}

.curation-notes-pre {
  margin: 0;
  font-size: 12px;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--bg-strong);
  border-radius: 4px;
  padding: 8px 10px;
  color: var(--ink);
}

/* ── My Activity page ─────────────────────────────────────── */

.my-activity-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}

.my-activity-controls {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}

.my-activity-user-picker {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.my-activity-user-picker label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.my-activity-user-picker input,
.my-activity-user-picker select,
.my-activity-filter select {
  font-size: 0.82rem;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}

.my-activity-count {
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.my-activity-table {
  table-layout: fixed;
}

.my-activity-table th:nth-child(1) { width: 150px; }
.my-activity-table th:nth-child(2) { width: auto; }
.my-activity-table th:nth-child(3) { width: 140px; }
.my-activity-table th:nth-child(4) { width: 170px; }

.my-activity-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-activity-extlink {
  margin-left: 5px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.8rem;
}

.my-activity-extlink:hover {
  color: var(--accent);
}

.my-activity-domain {
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-activity-when {
  font-size: 0.82rem;
  white-space: nowrap;
}

.activity-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg-strong);
  color: var(--muted);
}

.activity-badge--flag      { background: rgba(241, 170, 126, 0.14); color: #f1aa7e; }
.activity-badge--unflag    { background: var(--panel-strong); color: var(--muted); }
.activity-badge--expand    { background: rgba(241, 170, 126, 0.14); color: #f1aa7e; }
.activity-badge--click_external { background: rgba(133, 157, 234, 0.14); color: #859dea; }
.activity-badge--return_to_feed { background: rgba(126, 199, 241, 0.14); color: #7ec7f1; }
.activity-badge--read      { background: rgba(126, 241, 209, 0.14); color: #7ef1d1; }
.activity-badge--unread    { background: var(--panel-strong); color: var(--muted); }
.activity-badge--show_summary  { background: rgba(241, 170, 126, 0.14); color: #f1aa7e; }
.activity-badge--expand_topic  { background: rgba(126, 199, 241, 0.14); color: #7ec7f1; }

.subtle-link {
  color: inherit;
  text-decoration: none;
}

.subtle-link:hover {
  color: var(--accent);
}

.sites-table {
  width: 100%;
  border-collapse: collapse;
}

.sites-table th,
.sites-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.sites-table th {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.sites-table td {
  color: var(--ink);
}

.sites-table tbody tr:hover {
  background: var(--accent-soft);
}

/* /sentence-search: interesting sentences, Beta Reader style. Sentence first,
   then source and age in the reader's muted meta type. */
.sentence-reader-form {
  margin: 8px 0 20px;
}
/* Sits inside the reader's .beta-search-bar, styled like its textarea, so it
   follows the reader's light and dark themes. */
.sentence-reader-input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
  outline: none;
  background: transparent;
  color: var(--ink, #f1efe8);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  box-shadow: none;
}
.sentence-reader-input:focus,
.sentence-reader-input:focus-visible,
.sentence-reader .sentence-reader-input:focus-visible {
  outline: none;
}
.sentence-reader-input::placeholder {
  color: var(--muted, #888780);
  opacity: 1;
}
.sentence-reader-empty {
  color: var(--muted, #888780);
}
.sentence-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sentence-list.is-loading {
  opacity: 0.5;
}
.sentence-item {
  position: relative;
  padding: 12px 12px;
  margin: 0 -12px;
  border-bottom: 1px solid var(--line);
}
.sentence-item:focus,
.sentence-item:focus-visible {
  outline: none;
}
.sentence-item.keyboard-focused,
.sentence-item.keyboard-focused:hover {
  background: transparent;
}
.sentence-item.keyboard-focused.focus-engaged {
  background: #17132b;
}
.sentence-item.keyboard-focused.focus-engaged::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #a08cff;
}
html.light .sentence-item.keyboard-focused.focus-engaged {
  background: #f0ebff;
}
@media (max-width: 600px) {
  .sentence-item {
    padding: 12px 8px;
    margin: 0 -8px;
  }
}

.sentence-text {
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
  hanging-punctuation: first;
  overflow-wrap: break-word;
}
.sentence-reader-controls {
  display: flex;
  justify-content: flex-end;
  margin: -8px 0 8px;
}
/* One line, one link to the article: title, domain, age. The title gives way
   first (ellipsis), and on wide screens is capped so the domain and age stay
   near it; the domain truncates only when the screen is too narrow for it; the
   age never does. */
.sentence-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  color: var(--muted, #888780);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
}
.sentence-meta:hover .sentence-meta-title {
  color: var(--ink, #f1efe8);
  text-decoration: underline;
}
.sentence-meta-title,
.sentence-meta-domain {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sentence-meta-title {
  flex: 0 100 auto;
  max-width: 36rem;
  font-family: inherit;
}
.sentence-meta-domain {
  flex: 0 0 auto;
  max-width: 40%;
}
@media (max-width: 640px) {
  .sentence-meta { flex-wrap: wrap; row-gap: 2px; }
  .sentence-meta-title { flex: 1 1 100%; max-width: 100%; }
  .sentence-meta-domain { max-width: 70%; }
}
.sentence-meta-age {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* sentence.tldr.fm signed in: view pills, feed and For You extras, the feed
   editor, sign-in, and sentence-admin.tldr.fm. Built on the reader's tokens so
   both themes follow. */
.sentence-reader-controls {
  align-items: center;
  gap: 12px;
}
.sentence-reader-controls > :first-child:not(:last-child) {
  margin-right: auto;
}
.sentence-account,
.sentence-view-note {
  color: var(--muted, #888780);
  font-size: 14px;
}
.beta-reader .sentence-link-button {
  color: var(--muted, #888780);
  font-size: 14px;
}
.beta-reader .sentence-link-button:hover:not(:disabled) {
  color: var(--ink, #f1efe8);
  text-decoration: underline;
}
.beta-reader .sentence-danger:hover:not(:disabled) {
  color: #e5484d;
}
.sentence-save-feed {
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sentence-extra {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
  font-size: 13px;
}
.beta-reader .sentence-feed-chip {
  color: var(--accent, #afa9ec);
  font-size: 13px;
}
.sentence-copies {
  color: var(--muted, #888780);
}
/* An article's other sentences, opened under its best one. */
.sentence-more {
  margin: 0 0 6px;
  padding: 0 0 0 12px;
  list-style: none;
  border-left: 2px solid var(--border, rgba(136, 135, 128, 0.35));
}
.sentence-more .sentence-text {
  font-size: 16px;
}
.beta-reader .sentence-more-toggle {
  font-size: 13px;
}
.beta-reader .sentence-hide {
  margin-left: auto;
  font-size: 13px;
}
.sentence-item-hidden {
  color: var(--muted, #888780);
  font-size: 14px;
}
.sentence-feed-header {
  margin: 0 0 8px;
}
.sentence-feed-query {
  margin: 0 0 2px;
  font-size: 18px;
  color: var(--ink, #f1efe8);
}
.sentence-feed-header .sentence-view-note {
  margin: 0;
}
.sentence-feed-editor,
.sentence-auth {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
}
.sentence-auth-title {
  margin: 0;
  font-size: 22px;
}
.sentence-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--ink, #f1efe8);
}
.sentence-field-inline {
  flex-direction: row;
  align-items: center;
}
.sentence-field input[type='range'] {
  width: 100%;
  accent-color: var(--accent, #8b80ed);
}
.sentence-field-input {
  border: 1px solid var(--line, #444441);
  border-radius: 8px;
  padding: 9px 12px;
  background: var(--panel-strong, #161616);
  color: var(--ink, #f1efe8);
  font: inherit;
  font-size: 16px;
}
.sentence-field-input:focus,
.sentence-field-input:focus-visible,
.sentence-reader .sentence-field-input:focus-visible {
  outline: none;
  border-color: var(--accent, #8b80ed);
}
.sentence-editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.beta-reader button.sentence-primary {
  color: #ffffff;
  background: #7058e8;
  border-radius: 7px;
  padding: 9px 17px;
}
.sentence-preview {
  border-top: 1px solid var(--line, #444441);
  padding-top: 12px;
}
.sentence-preview.is-loading {
  opacity: 0.5;
}
.sentence-preview-heading {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted, #888780);
}
.sentence-admin {
  max-width: 1200px;
}
.sentence-admin-section {
  margin: 0 0 32px;
}
.sentence-admin-section h2 {
  margin: 0 0 8px;
  font-size: 18px;
}
.sentence-admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 13px;
}
.sentence-admin-table th,
.sentence-admin-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line, #444441);
  text-align: left;
  vertical-align: top;
}
.sentence-admin-table td p {
  margin: 4px 0 0;
  max-width: 48rem;
}
.sentence-admin-table tr.is-error td {
  color: #e5484d;
}
.sentence-knob-input {
  width: 7rem;
  font-size: 14px;
  padding: 5px 8px;
}
.sentence-knob-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.sentence-admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
.sentence-admin-stat dt {
  color: var(--muted, #888780);
  font-size: 12px;
}
.sentence-admin-stat dd {
  margin: 2px 0 0;
  font-size: 18px;
}
@media (max-width: 640px) {
  .sentence-admin-table {
    display: block;
    overflow-x: auto;
  }
}

/* /admin/arxiv: dense enough to fit without sideways scrolling. */
.arxiv-table {
  font-size: 0.85rem;
}
.arxiv-table th,
.arxiv-table td {
  padding: 5px 7px;
  vertical-align: top;
}
.arxiv-table th {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.arxiv-table td {
  white-space: nowrap;
}
.arxiv-table td.arxiv-title {
  white-space: normal;
  min-width: 18rem;
  width: 100%;
}
.arxiv-table td.arxiv-affiliations {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arxiv-table tr.is-expandable {
  cursor: pointer;
}
.arxiv-table tr.is-expanded,
.arxiv-table tr.arxiv-sentences-row {
  background: var(--accent-soft);
}
.arxiv-table tr.is-expanded td {
  border-bottom: none;
}
.arxiv-table tr.arxiv-sentences-row td {
  white-space: normal;
  padding: 2px 7px 10px;
}
.arxiv-sentences {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 60rem;
}
.arxiv-sentences li {
  display: flex;
  gap: 10px;
  padding: 3px 0;
  line-height: 1.4;
}
.arxiv-sentence-score {
  flex: none;
  min-width: 1.4em;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
}

/* ── Modal: use .modal-backdrop + .modal-content for ALL modals ──────────
   RULE: modals must be visually sharp and fully opaque against the page.
   - .modal-backdrop: fixed full-screen dark overlay (z-index 1000)
   - .modal-content:  solid card (background: var(--panel) — never var(--bg)
     or any semi-transparent value; always fully opaque)
   Do NOT add opacity, rgba backgrounds, or backdrop-filter to these classes.
   SAME RULE applies to ALL dropdowns and popovers.
──────────────────────────────────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  position: relative;
}

.modal-content.tldr-prompt-modal {
  max-width: 720px;
}
.tldr-prompt-modal-title {
  margin: 0 0 16px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}

.story-list-actions {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 10px;
}

.modal-content.subscribe-feed-modal {
  max-width: 440px;
}
.modal-content.confirm-modal {
  max-width: 480px;
}
.modal-content.rule-set-create-modal {
  max-width: 420px;
}
.modal-content.api-key-modal {
  max-width: 540px;
}
.modal-content.prompt-edit-modal {
  max-width: 760px;
}
.score-breakdown {
  max-width: 720px;
}

/* Admin article page (/article/admin/:id) */
.article-admin-page {
  max-width: 1080px;
}
.article-admin-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}
.article-admin-icon-link {
  display: inline-flex;
  color: var(--muted);
  text-decoration: none;
}
.article-admin-icon-link:hover {
  color: var(--ink);
}
/* Links read as text with a quiet underline, not bright accent color. */
.article-admin-page a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 2px;
}
.article-admin-page a:hover {
  text-decoration-color: currentColor;
}
.article-admin-panel h3 {
  margin: 20px 0 6px;
  font-size: 0.9rem;
  color: var(--ink);
}
.article-admin-muted {
  color: var(--muted);
  font-size: 0.82rem;
}
.article-admin-summary {
  margin-bottom: 20px;
}
/* Topic gets its own line above the chip row: it is the field admins check first. */
.article-admin-page a.article-admin-topic-line {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 10px 0 12px;
  font-size: 1rem;
  text-decoration: none;
}
.article-admin-topic.is-label {
  font-weight: 600;
}
.article-admin-topic-line:hover .article-admin-topic.is-label {
  text-decoration: underline;
}
/* NONCE (a judged one-off) and null (no topic yet) read as tokens, not labels. */
.article-admin-topic.is-nonce,
.article-admin-topic.is-null {
  padding: 1px 7px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
}
.article-admin-topic.is-nonce {
  color: var(--accent-hover);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
}
.article-admin-topic.is-null {
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  font-style: italic;
}
/* Wraps to a second row on narrow screens. */
.article-admin-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}
.article-admin-chip-plain {
  font-variant-numeric: tabular-nums;
}
.article-admin-page a.article-admin-badge {
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.article-admin-page a.article-admin-badge:hover {
  border-color: var(--ink);
}
.article-admin-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.article-admin-copy:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}
.article-admin-panel {
  scroll-margin-top: 16px;
}
/* Each label travels with its value, even when another row has a long label. */
.article-admin-kv {
  display: grid;
  gap: 6px;
  margin: 10px 0;
  font-size: 0.85rem;
}
.article-admin-kv > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
}
.article-admin-kv dt {
  color: var(--muted);
}
.article-admin-kv dt::after {
  content: ':';
}
.article-admin-kv dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.article-admin-content-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 12px;
}
.article-admin-content-toggle {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.article-admin-content-toggle::before {
  content: '\25B8';
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.1s;
}
.article-admin-content-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}
.article-admin-content-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.article-admin-content-expanded {
  margin: 10px 0 16px;
  max-width: 75ch;
  line-height: 1.6;
}
.article-admin-facts {
  margin: 0;
  padding-left: 1.25em;
}
.article-admin-facts li + li {
  margin-top: 8px;
}
.article-admin-served {
  margin: 0 0 20px;
  padding: 10px 12px;
  font-size: 0.82rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
}
.article-admin-judgments {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.article-admin-judgments > li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.article-admin-judgments p {
  margin: 6px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
}
.article-admin-judgment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  font-size: 0.82rem;
}
.article-admin-tier-chip {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.article-admin-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px 28px;
}
.article-admin-distribution {
  border-collapse: collapse;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.article-admin-distribution td {
  padding: 3px 0;
}
.article-admin-distribution-label {
  min-width: 2ch;
  padding-right: 10px !important;
  white-space: nowrap;
}
.article-admin-distribution-bar {
  width: 160px;
}
.article-admin-distribution-bar span {
  display: block;
  height: 8px;
  border-radius: 2px;
  background: var(--muted);
  opacity: 0.45;
}
.article-admin-distribution tr.is-chosen .article-admin-distribution-bar span {
  background: var(--accent);
  opacity: 1;
}
.article-admin-distribution tr.is-chosen td {
  font-weight: 600;
}
.article-admin-distribution-value {
  padding-right: 12px !important;
  text-align: right;
  white-space: nowrap;
}
.article-admin-table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 4px 0 10px;
}
.article-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 10px;
}
.article-admin-table th {
  text-align: left;
  font-weight: 600;
  padding: 4px 12px 4px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.article-admin-table td {
  padding: 6px 12px 6px 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
.article-admin-table .is-nowrap {
  white-space: nowrap;
}
.article-admin-table .is-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.article-admin-table tr.is-current-article td {
  background: var(--accent-soft);
}
.article-admin-sort {
  all: unset;
  cursor: pointer;
}
.article-admin-sort:hover {
  text-decoration: underline;
}
/* Verdict and Pangram pills: light fills with dark text in both themes. */
.article-admin-verdict,
.pangram-verdict {
  display: inline-block;
  font-family: var(--font-sans);
  padding: 0 7px;
  border-radius: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.6;
  color: #111111;
  white-space: nowrap;
}
.article-admin-verdict.is-pending,
.pangram-verdict.is-untested {
  background: #e5e5e5;
}
.article-admin-verdict.is-relevant,
.pangram-verdict.is-not-ai {
  background: #d9f2df;
}
.article-admin-verdict.is-rejected,
.pangram-verdict.is-ai {
  background: #f8dcdc;
}
.article-admin-button {
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.4;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.article-admin-button:hover:not(:disabled) {
  border-color: var(--muted);
}
.article-admin-button:disabled {
  opacity: 0.5;
  cursor: default;
}
.article-admin-button-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--panel);
}
.article-admin-button-primary:hover:not(:disabled) {
  border-color: var(--ink);
  opacity: 0.9;
}
.article-admin-input {
  font: inherit;
  font-size: 0.82rem;
  min-width: 220px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--ink);
}
.article-admin-maintenance > summary {
  cursor: pointer;
  list-style: revert;
}
.article-admin-maintenance > summary h2 {
  display: inline;
}
.article-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.article-admin-form {
  display: grid;
  gap: 8px;
  max-width: 640px;
  margin-bottom: 8px;
}
.article-admin-field {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}
.article-admin-field > span:first-child {
  color: var(--muted);
}
.article-admin-inline-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.article-admin-inline-form input {
  flex: 1;
}
.article-admin-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Score derivation: the rule, then one row per step with its arithmetic. */
.score-derivation-formula {
  margin: 6px 0 8px;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.score-derivation-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.score-derivation-table th {
  padding: 4px 12px 4px 0;
  text-align: left;
  font-weight: 500;
  color: var(--muted);
}
.score-derivation-table td {
  padding: 4px 12px 4px 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
.score-derivation-table tr.is-strong td {
  font-weight: 600;
}
.score-derivation-label {
  white-space: nowrap;
}
.score-derivation-label .article-admin-muted {
  white-space: normal;
  font-weight: 400;
}
.score-derivation-rule {
  color: var(--muted);
}
.score-derivation-calc code {
  white-space: normal;
  overflow-wrap: anywhere;
}
.score-derivation-value {
  text-align: right;
  white-space: nowrap;
}
.score-derivation-check {
  margin: 6px 0 4px;
  font-size: 0.82rem;
}
.score-derivation-feed,
.score-derivation-others {
  margin: 6px 0;
}
.score-derivation-feed > summary,
.score-derivation-others > summary {
  cursor: pointer;
  font-size: 0.85rem;
}
.score-derivation-others > .score-derivation-feed {
  margin-left: 14px;
}
.article-admin-history {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.article-admin-history td {
  padding: 4px 12px 4px 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
.article-admin-raw {
  margin: 6px 0;
  font-size: 0.82rem;
}
.article-admin-raw summary {
  cursor: pointer;
}
.article-admin-raw pre,
.article-admin-prompt {
  max-height: 480px;
  overflow: auto;
  padding: 10px;
  font-size: 0.75rem;
  white-space: pre-wrap;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.score-breakdown-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.score-breakdown-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.score-breakdown-score {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.score-breakdown-cluster-note {
  margin: 0 0 12px;
  padding: 8px 10px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #f1aa7e;
  background: rgba(241, 170, 126, 0.14);
  border: 1px solid #fde68a;
  border-radius: 6px;
}
.score-breakdown-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}
.score-breakdown-table td {
  padding: 4px 0;
  font-size: 0.82rem;
  color: var(--ink);
}
.score-breakdown-section td {
  padding-top: 10px;
  padding-bottom: 5px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.score-breakdown-section:first-child td {
  padding-top: 0;
  border-top: 0;
}
.score-breakdown-label {
  font-weight: 500;
}
.score-breakdown-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, 'SF Mono', 'Menlo', monospace);
}
.score-breakdown-row-strong td {
  padding-top: 6px;
  font-weight: 700;
  color: var(--ink);
}
.score-breakdown-row-detail td {
  padding-top: 1px;
  padding-bottom: 1px;
  font-size: 0.74rem;
  color: var(--muted);
}
.score-breakdown-row-detail .score-breakdown-label {
  padding-left: 14px;
  font-weight: 400;
}
.score-breakdown-jump-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.score-breakdown-jump-link:hover {
  color: #2563eb;
  text-decoration-style: solid;
}
.score-breakdown-jump-arrow {
  font-size: 0.75em;
  opacity: 0.6;
  margin-left: 2px;
}
.score-breakdown-social-block {
  scroll-margin-top: 12px;
  padding: 4px 0;
}
.score-breakdown-details {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-bottom: 16px;
}
.score-breakdown-paper-sentence {
  font-size: 0.78rem;
  padding: 2px 0 6px;
}
.score-breakdown-paper-sentence blockquote {
  margin: 4px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--line);
  color: var(--ink);
  line-height: 1.45;
}
.score-breakdown-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--muted);
  padding: 2px 0;
  gap: 16px;
}
.score-breakdown-detail-row span:last-child {
  text-align: right;
}
.score-breakdown-mono {
  font-family: var(--font-mono, 'SF Mono', 'Menlo', monospace);
}
.score-breakdown-justification {
  display: block;
}
.score-breakdown-justification span {
  display: block;
  text-align: left;
}
.score-breakdown-justification span:first-child {
  margin-bottom: 2px;
}
.score-breakdown-llm-judgments {
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  padding-top: 0.8rem;
}
.score-breakdown-llm-judgments h4 {
  margin: 0 0 0.65rem;
  color: var(--ink);
}
.score-breakdown-llm-judgment {
  margin-top: 0.55rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.65rem;
  background: var(--panel);
}
.score-breakdown-llm-judgment-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
}
.score-breakdown-llm-judgment-provenance {
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.score-breakdown-llm-judgment p {
  margin: 0.35rem 0 0;
}
.score-breakdown-computed {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
}
.score-breakdown-empty {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 12px 0;
}

.modal-content.article-search-modal {
  max-width: 960px;
  width: min(960px, 96vw);
  padding-bottom: 18px;
}

.article-search-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.article-search-modal-header h2 {
  margin: 0;
  color: var(--ink);
}

.article-search-modal-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.article-search-modal-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 160px;
  max-height: calc(85vh - 220px);
  overflow-y: auto;
  padding-right: 4px;
}

.pane-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pane-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
}

.pane-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  color: var(--muted);
  opacity: 0.6;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  text-decoration: none;
  flex-shrink: 0;
}

.pane-action-btn:hover {
  opacity: 1;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.channel-setting-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  margin-bottom: 2px;
  color: var(--ink);
}

.inspect-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.inspect-header h2 {
  font-size: 1rem;
  margin: 0;
}

.inline-fetch-button {
  padding: 2px 5px;
  font-size: 0.85rem;
  margin-left: 6px;
  opacity: 0.4;
  vertical-align: middle;
}

.inline-fetch-button:hover {
  opacity: 1;
}

.section-heading-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.section-heading-row h3 {
  margin: 0;
}

.inspect-section-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  color: var(--muted);
  opacity: 0.45;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.inspect-section-btn:hover {
  opacity: 1;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.modal-content.inspect-html-modal {
  max-width: 860px;
  width: 90vw;
}

/* ── Add link modal ──────────────────────────────── */
.modal-content.add-link-modal {
  max-width: 520px;
}

.add-link-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 22px;
}

.add-link-modal-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 3px;
}

.add-link-modal-subtitle {
  font-size: 0.83rem;
  color: var(--muted);
  margin: 0;
}

.add-link-close-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.12s;
}

.add-link-close-btn:hover {
  color: var(--ink);
}

.add-link-form {
  display: grid;
  gap: 16px;
}

.add-link-label {
  display: grid;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.add-link-required {
  color: var(--warn);
}

.add-link-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 0.7;
}

.add-link-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 13px;
  background: var(--panel);
  color: var(--ink);
  font-size: 0.9rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.add-link-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.add-link-textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 13px;
  background: var(--panel);
  color: var(--ink);
  font-size: 0.9rem;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.add-link-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.add-link-tier-picker {
  display: flex;
  gap: 7px;
}

.add-link-tier-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-strong);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}

.add-link-tier-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.add-link-tier-btn.active {
  border: 2px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
}

.add-link-status {
  font-size: 0.88rem;
  padding: 9px 13px;
  border-radius: 8px;
}

.add-link-status.error {
  color: var(--warn);
  background: rgba(173, 63, 47, 0.08);
}

.add-link-status.success {
  color: var(--accent-strong);
  background: var(--accent-soft);
}

.add-link-list-picker {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.add-link-list-items {
  max-height: 140px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.add-link-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 0.84rem;
  cursor: pointer;
  border-radius: 4px;
  user-select: none;
}
.add-link-list-item:hover {
  background: var(--bg-strong);
}
.add-link-list-item input[type="checkbox"] {
  accent-color: var(--accent);
  margin: 0;
  flex-shrink: 0;
}

.add-link-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

.add-link-kbd-hint {
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 7px;
  font-family: monospace;
  align-self: center;
}

.inspect-html-pre {
  margin: 0;
  font-family: monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--ink);
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  max-height: 60vh;
  overflow-y: auto;
}

@media (max-width: 1040px) {
  

  

  

  .story-list-pane {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .admin-grid,
  .tuning-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  /* Narrow (phone) fallback — three-row wrapping layout. At wider widths the
     packed two-line layout (title, then everything on one meta line) fits and
     is preferred; below this the meta line can't fit, so we wrap it:
       row 1 — title (full width)
       row 2 — score · icons · domain · feed · badge · time · reading time
       row 3 — (view summary) · topic (with source count)
     We flatten the two stacked row wrappers with display:contents so all their
     children live in one wrapping flex row, then re-group them with `order` and
     two zero-height full-width breaks. */
  

  

  

  /* Row 1 — title only. A phone-width row holds roughly forty characters, so
     headlines wrap onto a second line instead of ellipsizing mid-word. */
  
  

  /* break before row 2 */
  

  /* Row 2 */
  
  
  .feed-item-action-btn {
    width: 18px;
    height: 18px;
  }
  
  
  
  
  
  /* Pack reading time next to the age instead of letting its base
     margin-left:auto shove it to the far right, which left mid-width rows
     with a large gap and split age/reading-time across wrapped lines. */
  

  /* The compact TLDR row has no third metadata row; keep its expand control
     beside the publisher and reading time instead of floating underneath. */
  

  /* break before row 3 */
  

  /* Row 3 */
  
  /* No chevron column to align against on mobile — drop the placeholder. */
  
  /* Fill the rest of row 3 beside (view summary) and ellipsize, so a long
     topic stays on the same line instead of wrapping to a fourth row. */
  
  

  /* Expanded blocks always span the full width, below the three rows */
  .feed-item-expanded,
  .feed-item-summary-edit {
    order: 20;
    flex-basis: 100%;
    width: 100%;
  }

  /* Page chrome shares the row's gutter so the logo, the subscribe band and
     the story titles all start on the same vertical line. */
  
  .reader-special-channel-btn {
    padding: 5px 6px;
  }
}

/* ─── Curation work page ─────────────────────────────────────────────────── */

/* Layout */
.curation-main {
  grid-template-columns: minmax(380px, 500px) minmax(0, 1fr);
}

.curation-page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.curation-back-link {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}

.curation-page-title {
  margin: 0;
  font-size: 20px;
}

.curation-hint {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 12px;
}

/* Status tabs */
.curation-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--line);
  overflow-x: auto;
}

.curation-tab {
  padding: 8px 12px;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
}

.curation-tab-count {
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 8px;
  background: var(--bg-strong, var(--gray-100));
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

/* Age filter */
.curation-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  flex-wrap: wrap;
}

.curation-filter-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.curation-filter-select {
  padding: 2px 4px;
  font: inherit;
  font-size: 13px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: inherit;
  cursor: pointer;
}

.curation-filter-select:disabled {
  background: var(--bg);
  color: var(--muted);
  cursor: not-allowed;
}

.curation-filter-number {
  width: 52px;
  padding: 2px 6px;
  font-size: 13px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.curation-filter-number:disabled {
  background: var(--bg);
  color: var(--muted);
}

.curation-filter-text--muted {
  color: var(--muted);
}

/* Bulk action bars */
.curation-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}

.curation-bulk-select-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  color: var(--muted);
}

.curation-bulk-sep {
  color: var(--muted);
}

.curation-bulk-count {
  font-weight: 600;
}

.curation-bulk-confirm-text {
  font-weight: 600;
}

.curation-bulk-confirm-text--danger { color: var(--warn); }
.curation-bulk-confirm-text--teal   { color: var(--accent); }

.curation-bulk-btn {
  padding: 4px 12px;
  border-radius: 6px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.curation-bulk-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.curation-bulk-btn--danger         { background: var(--warn); color: #fff; }
.curation-bulk-btn--teal           { background: var(--accent); color: #fff; }
.curation-bulk-btn--outline-danger { background: none; border: 1px solid var(--warn); color: var(--warn); }
.curation-bulk-btn--outline-teal   { background: none; border: 1px solid var(--accent); color: var(--accent); }

.curation-cancel-btn {
  background: none;
  border: none;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
}

.curation-clear-btn {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}

/* Article card */
.curation-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: default;
  background: var(--panel);
  transition: border-color 0.1s;
}

.curation-card.focused {
  border: 2px solid var(--accent);
  background: var(--accent-soft);
}

.curation-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.curation-card-domain {
  font-size: 12px;
  color: var(--muted);
  font-family: monospace;
}

.curation-card-date {
  font-size: 12px;
  color: var(--muted);
}

.curation-card-ext-link {
  margin-left: auto;
  font-size: 12px;
  color: var(--accent);
}

.curation-card-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  line-height: 1.4;
}

.curation-card-title-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
  outline: none;
}

.curation-card-summary {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 8px;
}

.curation-summary-toggle {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  padding: 0 4px;
}

.curation-note-wrap {
  margin-bottom: 8px;
}

.curation-note-textarea {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border-radius: 4px;
  border: 1px solid var(--line);
  resize: vertical;
}

.curation-note-discard {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 0;
}

.curation-note-add {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  padding: 0 0 8px;
}

.curation-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.curation-action-btn {
  padding: 5px 14px;
  border-radius: 6px;
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.curation-action-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.curation-action-key {
  margin-left: 6px;
  font-size: 11px;
  opacity: 0.7;
}

.curation-tier-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.curation-tier-1 { background: var(--gray-100); color: var(--gray-500); }
.curation-tier-2 { background: var(--gray-200); color: var(--gray-600); }
.curation-tier-3 { background: var(--gray-200); color: var(--gray-700); }
.curation-tier-4 { background: var(--green-100); color: var(--green-700); }
.curation-tier-5 { background: var(--green-200); color: var(--green-800); }

.curation-score-link {
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
  margin-left: -4px;
}

.curation-score-link:hover {
  color: var(--accent);
}

.curation-card-checkbox {
  cursor: pointer;
  flex-shrink: 0;
}

.curation-score-breakdown {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

.curation-score-component {
  font-variant-numeric: tabular-nums;
}

.curation-score-sep {
  opacity: 0.4;
}

.curation-score-reasoning {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  margin-top: 2px;
  line-height: 1.4;
}

.curation-tab--active {
  font-weight: 700;
}

.curation-load-more {
  text-align: center;
  padding: 16px 0;
}

.curation-card-provenance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.curation-provenance-text {
  font-size: 11px;
  color: var(--muted);
}

.curation-provenance-agent {
  font-family: monospace;
}

.curation-history-chevron {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  padding: 0 2px;
  line-height: 1;
}

.curation-history-chevron:hover {
  color: var(--accent);
}

.curation-history {
  margin-top: 6px;
}

.curation-history-loading {
  font-size: 12px;
  color: var(--muted);
}

.curation-history-table {
  width: 100%;
  font-size: 11px;
  border-collapse: collapse;
  color: var(--muted);
}

.curation-history-table th {
  text-align: left;
  padding: 2px 8px 4px 0;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}

.curation-history-table td {
  padding: 3px 8px 3px 0;
  vertical-align: top;
}

.curation-history-when {
  white-space: nowrap;
}

.curation-history-agent {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
  font-family: monospace;
}

.curation-history-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 11px;
  padding: 0 2px;
}

.curation-history-link:hover {
  color: var(--accent);
}

/* Add article panel */
.curation-add-panel {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}

.curation-add-form {
  display: flex;
  gap: 8px;
}

.curation-add-input {
  flex: 1;
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.curation-add-submit {
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.curation-add-submit:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.curation-add-error {
  margin-top: 8px;
  font-size: 13px;
  color: var(--warn);
}

.curation-add-result {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--panel);
  border-radius: 6px;
  border: 1px solid var(--line);
}

.curation-add-result-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.curation-add-exists-badge {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
  background: #d97706;
  color: #fff;
  font-weight: 700;
}

.curation-add-result-title {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
}

.curation-add-done-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.curation-add-done-text {
  font-size: 13px;
  color: #16a34a;
  font-weight: 600;
}

.curation-add-another-btn {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
}

.curation-add-status-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.curation-add-status-label {
  font-size: 12px;
  color: var(--muted);
}

.curation-add-status-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.curation-add-status-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.curation-add-dismiss-btn {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  margin-left: 4px;
}

/* Undo bar */
.curation-undo-bar {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 12px;
}

.curation-undo-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.curation-undo-label {
  font-weight: 600;
  color: var(--muted);
}

.curation-undo-toggle {
  background: none;
  border: none;
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
}

.curation-undo-event {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-top: 1px solid var(--line);
}

.curation-undo-time {
  color: var(--muted);
  min-width: 70px;
}

.curation-undo-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.curation-undo-btn {
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 11px;
  cursor: pointer;
}

.curation-undo-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Empty / loading states */
.curation-empty {
  color: var(--muted);
  font-size: 14px;
  padding: 48px 0;
  text-align: center;
}

.curation-clear-filter-btn {
  margin-top: 12px;
  padding: 6px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.curation-clear-filter-btn:hover {
  border-color: var(--text-secondary);
  color: var(--text-secondary);
}

.curation-loading {
  color: var(--muted);
  font-size: 13px;
  padding: 24px 0;
}

@media (max-width: 720px) {
  .auth-panel,
  .story-list-pane,
  .story-detail-pane {
    padding: 20px;
  }

  .pane-header h1,
  .story-detail h2,
  .auth-panel h1 {
    font-size: 1.65rem;
  }

  
}

/* ── Search input ── */
.search-input-wrap {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
  margin-bottom: 12px;
}

.search-submit-button {
  min-width: 8rem;
  padding: 0 1.5rem;
  border: 1px solid var(--accent);
  border-radius: 0.75rem;
  background: var(--accent);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.search-submit-button:disabled {
  cursor: wait;
  opacity: 0.65;
}
.search-query-summary {
  margin: 8px 0 4px;
  font-size: 0.8rem;
  color: var(--muted);
}
.table-options-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--muted);
}
.breakdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.column-legend summary {
  cursor: pointer;
  user-select: none;
}
.column-legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 6px 0 2px;
}
.search-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  box-sizing: border-box;
}
.search-input::placeholder {
  color: var(--muted);
}
.search-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ── Article filter bar ── */
.article-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.filter-bar-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-preset-button {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease;
  flex-shrink: 0;
}

.filter-preset-button:hover {
  transform: translateY(-1px);
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.filter-preset-button.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.filter-sort-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.filter-sort-label {
  font-size: 0.83rem;
  color: var(--muted);
  white-space: nowrap;
}

.filter-sort-select {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  font: inherit;
  font-size: 0.83rem;
  color: var(--ink);
  cursor: pointer;
}

.filter-sort-select:focus,
.filter-row-select:focus,
.filter-row-value:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.filter-dir-toggle {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  font: inherit;
  font-size: 0.83rem;
  color: var(--ink);
  cursor: pointer;
  transition: background 120ms ease;
  white-space: nowrap;
}

.filter-dir-toggle:hover {
  background: var(--panel-strong);
}

.filter-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 10px;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.filter-row-select {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  font: inherit;
  font-size: 0.83rem;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}

.filter-row-value {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  font: inherit;
  font-size: 0.83rem;
  color: var(--ink);
  min-width: 140px;
  flex: 1;
}

/* The date "within N days of" operator adds a second, small "± days" input. */
.filter-row-value.filter-row-within-days {
  min-width: 0;
  width: 72px;
  flex: 0 0 auto;
}

.filter-row-within-days-sep {
  color: var(--muted);
  flex-shrink: 0;
}

.filter-row-delete {
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
  margin-left: auto;
  transition: color 120ms ease, background 120ms ease;
}

.filter-row-delete:hover {
  color: var(--warn);
  background: var(--error-bg);
  border-color: var(--error);
}

.filter-bar-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.filter-add-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.83rem;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.filter-add-button:hover {
  color: var(--accent-strong);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.filter-clear-button {
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.83rem;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.filter-clear-button:hover {
  color: var(--warn);
  border-color: var(--warn);
  background: var(--error-bg);
}

/* Keyboard shortcuts overlay */
.shortcuts-overlay {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--gray-800);
  color: var(--gray-100);
  border-radius: 10px;
  padding: 16px 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  font-size: 13px;
  pointer-events: none;
  animation: shortcuts-fade-in 80ms ease;
}

@keyframes shortcuts-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.shortcuts-overlay-heading {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 6px;
}

.shortcuts-overlay-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--gray-200);
}

.shortcuts-overlay-row:last-child {
  margin-bottom: 0;
}

.shortcuts-overlay kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 1px 5px;
  background: var(--gray-600);
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  line-height: 1.6;
}

/* ── Prompts page ─────────────────────────────────────────────────────────── */

.prompts-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.prompt-card {
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 20px;
  background: var(--gray-900);
}

.prompt-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.prompt-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.prompt-card-title {
  font-weight: 600;
  font-size: 15px;
  margin-right: 10px;
}

.prompt-card-key {
  font-size: 12px;
  color: var(--gray-400);
  background: var(--gray-800);
  padding: 1px 6px;
  border-radius: 4px;
}

.prompt-card-meta {
  flex-shrink: 0;
}

.prompt-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.prompt-badge-custom {
  background: var(--blue-900, #1e3a5f);
  color: var(--blue-300, #7ab8f5);
}

.prompt-badge-default {
  background: var(--gray-800);
  color: var(--gray-400);
}

.prompt-description {
  font-size: 13px;
  color: var(--gray-400);
  margin: 0 0 14px 0;
}

.prompt-field {
  margin-bottom: 14px;
}

.prompt-field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.prompt-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}

.prompt-textarea:focus {
  outline: none;
  border-color: var(--gray-400);
}

.prompt-textarea-large {
  min-height: 200px;
}

.prompt-workbench-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.prompt-workbench-sidebar {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}

.prompt-workbench-sidebar-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
}

.prompt-workbench-sidebar-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.prompt-workbench-sidebar-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.prompt-workbench-nav-list {
  max-height: 560px;
  overflow-y: auto;
  padding: 8px;
  display: grid;
  gap: 6px;
}

.prompt-workbench-nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}

.prompt-workbench-nav-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink);
}

.prompt-workbench-nav-meta-dim {
  color: var(--muted);
}

.prompt-workbench-nav-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.prompt-workbench-nav-preview {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.prompt-workbench-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 700;
}

.prompt-workbench-archive-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.prompt-workbench-archive-btn:hover {
  background: var(--panel);
}

.prompt-workbench-model-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--gray-800);
  color: var(--gray-200);
  font-size: 11px;
  font-family: monospace;
}

.prompt-workbench-editor-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 12px 14px 14px;
  min-width: 0;
}

.prompt-workbench-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.prompt-workbench-editor-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.prompt-workbench-editor-title {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
  color: var(--ink);
}

.prompt-workbench-unsaved-badge {
  display: inline-flex;
  padding: 3px 9px;
  border: 1px solid #b45309;
  border-radius: 999px;
  background: rgba(241, 170, 126, 0.14);
  color: #f1aa7e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.prompt-workbench-promotion-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0 0 20px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.prompt-workbench-promotion-summary > div:not(.prompt-workbench-promotion-arrow) {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.prompt-workbench-promotion-summary span,
.prompt-workbench-promotion-summary small {
  color: var(--gray-500);
  font-size: 0.75rem;
}

.prompt-workbench-promotion-summary strong {
  color: var(--ink);
  font-size: 0.85rem;
}

.prompt-workbench-promotion-arrow {
  color: var(--accent-strong);
  font-size: 1.2rem;
  font-weight: 700;
}

.prompt-workbench-editor-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.prompt-workbench-compact-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.prompt-workbench-compact-button:hover {
  background: var(--panel);
}

.prompt-workbench-compact-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.prompt-workbench-compact-button-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #f5fbfa;
}

.prompt-workbench-compact-button-primary:hover {
  background: var(--accent-strong);
}

.prompt-workbench-select {
  width: 100%;
  padding: 8px 10px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
}

.prompt-workbench-editor-textarea {
  min-height: 340px;
}

.prompt-workbench-empty-state {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 16px;
  color: var(--muted);
  font-size: 13px;
  background: var(--panel);
}

.prompt-workbench-empty-state-large {
  min-height: 240px;
  display: flex;
  align-items: center;
}

.prompt-workbench-archive-toggle {
  display: block;
  width: 100%;
  padding: 8px 2px 2px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.prompt-workbench-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.prompt-workbench-collapse-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.prompt-workbench-collapse-chevron {
  display: inline-block;
  color: var(--muted);
  transition: transform 0.16s ease;
}

.prompt-workbench-collapsed-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
}

.prompt-workbench-collapsed-card {
  min-width: 250px;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.prompt-workbench-collapsed-card-meta {
  display: grid;
  gap: 2px;
  font-size: 12px;
  color: var(--ink);
}

@media (max-width: 980px) {
  .prompt-workbench-layout {
    grid-template-columns: 1fr;
  }

  .prompt-workbench-nav-list {
    max-height: 320px;
  }

  .prompt-workbench-editor-header {
    flex-direction: column;
  }

  .prompt-workbench-editor-actions {
    justify-content: flex-start;
  }

  .prompt-workbench-section-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

.prompt-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}

.prompt-error {
  font-size: 13px;
  color: var(--red-400, #f87171);
  margin-right: auto;
}

.prompt-saved {
  font-size: 13px;
  color: var(--green-400, #4ade80);
  margin-right: auto;
}

.prompt-toast {
  font-size: 0.82rem;
  padding: 8px 14px;
  border-radius: 8px;
  margin-bottom: 6px;
  animation: prompt-toast-in 0.2s ease-out;
}

.prompt-toast-success {
  background: rgba(74, 222, 128, 0.1);
  color: var(--green-600, #16a34a);
  border: 1px solid rgba(74, 222, 128, 0.25);
}

.prompt-toast-error {
  background: rgba(248, 113, 113, 0.1);
  color: var(--red-600, #dc2626);
  border: 1px solid rgba(248, 113, 113, 0.25);
}

@keyframes prompt-toast-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Feed elements list */

.muted-count {
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   List picker dropdown (StoryDetail)
   --------------------------------------------------------------------------- */

.list-picker-container {
  position: relative;
  display: inline-flex;
}

.list-picker {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  min-width: 200px;
  max-width: 280px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow);
  margin-top: 4px;
  overflow: hidden;
}

.list-picker-loading {
  padding: 12px 14px;
  font-size: 0.82rem;
  color: var(--muted);
}

.list-picker-items {
  max-height: 200px;
  overflow-y: auto;
  padding: 4px 0;
}

.list-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  font-size: 0.84rem;
  cursor: pointer;
  color: var(--ink);
}
.list-picker-item:hover {
  background: var(--bg-strong);
}
.list-picker-item input[type="checkbox"] {
  accent-color: var(--accent);
  margin: 0;
  flex-shrink: 0;
}

.list-picker-new {
  display: flex;
  align-items: center;
  gap: 4px;
  border-top: 1px solid var(--line);
  padding: 6px 8px;
}
.list-picker-new input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.82rem;
  background: var(--bg);
  color: var(--ink);
  outline: none;
}
.list-picker-new input:focus {
  border-color: var(--accent);
}
.list-picker-add-btn {
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}
.list-picker-add-btn:hover {
  background: var(--accent-strong);
}

/* ---------------------------------------------------------------------------
   Lists page
   --------------------------------------------------------------------------- */

.score-selector {
  display: inline-flex;
  gap: 2px;
}
.score-btn {
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  line-height: 22px;
  text-align: center;
}
.score-btn:hover {
  border-color: var(--accent);
  color: var(--ink);
}
.score-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.tier-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
  font-size: 0.82rem;
  min-width: 24px;
  text-align: center;
}
.tier-1 { background: #ef4444; }
.tier-2 { background: #f97316; }
.tier-3 { background: #eab308; }
.tier-4 { background: #22c55e; }
.tier-5 { background: #10b981; }

/* ── Admin home page ── */

.admin-index {
  max-width: 720px;
}

.admin-index-usage {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--muted);
  margin: -8px 0 4px;
}

.admin-index-usage-users summary {
  cursor: pointer;
}

.admin-index-usage-users ul {
  margin: 4px 0 0;
  padding-left: 18px;
}

.admin-index-group {
  margin-top: 22px;
}

.admin-index-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}

.admin-index-rows {
  border-top: 1px solid var(--line);
}

.admin-index-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 8px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}

.admin-index-row:hover {
  background: var(--panel);
}

.admin-index-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.admin-index-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}

.admin-index-desc {
  font-size: 0.8rem;
  color: var(--muted);
}

@media (max-width: 560px) {
  .admin-index-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.settings-admin-link {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
}

.settings-admin-link:hover {
  text-decoration: underline;
}

.model-variant-tag {
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-family: monospace;
  font-size: 0.7rem;
  line-height: 1.2;
  cursor: pointer;
}

.model-variant-tag:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.model-variant-tag-selected {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.model-variant-tag-label {
  font-family: inherit;
  opacity: 0.75;
}

@media (max-width: 560px) {
  .model-variant-tag-label {
    display: none;
  }
}

/* ── Search page pills & filters ── */
.search-pills-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}

.search-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--ink);
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.search-pill:hover {
  background: var(--panel-strong);
  border-color: #adb5bd;
}

.search-pill-overflow {
  color: var(--gray-500, var(--muted));
  border-style: dashed;
}

.search-options-pill {
  color: var(--gray-500, var(--muted));
}

.search-options-pill.open {
  background: var(--panel-strong);
  border-color: #adb5bd;
  color: var(--ink);
}

.search-options-modified-dot {
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.search-pill-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  margin-top: 4px;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 4px 0;
}

.search-clear-pill {
  color: var(--gray-500, var(--muted));
}

.search-clear-pill:not(:disabled) {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--panel-strong);
  cursor: pointer;
}

.search-clear-pill:disabled {
  color: var(--muted);
  opacity: 0.45;
  cursor: not-allowed;
}

.search-pill-dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
}

.search-pill-dropdown-item:hover {
  background: var(--panel-strong);
}

/* Recent searches: quiet typography and distinct, padded rows. */
.recent-searches-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  margin-top: 4px;
  background: #ffffff;
  border: 1px solid var(--line, #e4e4e4);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recent-searches-dropdown .recent-search-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: #262626;
  cursor: pointer;
}

.recent-searches-dropdown .recent-search-dropdown-item:hover,
.recent-searches-dropdown .recent-search-dropdown-item.active {
  background: #f4f4f5;
}

.recent-search-icon {
  flex-shrink: 0;
  color: #737373;
}

.recent-search-text {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-search-match {
  font-weight: 600;
  color: #262626;
}

/* ── Search controls row ── */
.search-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 8px;
}

.search-controls-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-controls-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  color: var(--gray-500, var(--muted));
  cursor: pointer;
  transition: all 0.15s;
}

.search-toggle-btn:hover {
  background: var(--panel-strong);
  color: var(--ink);
}

.search-toggle-btn.active {
  background: var(--panel-strong);
  border-color: #adb5bd;
  color: var(--ink);
}

.search-toggle-btn.modified {
  color: var(--accent, #2d4a6e);
  border-color: var(--accent, #2d4a6e);
}

.scoring-panel {
  display: grid;
  gap: 14px;
  margin: 8px 0 4px;
  padding: 14px 16px;
  background: var(--panel-strong);
  border-radius: 8px;
  border: 1px solid var(--line);
}

/* ── Search status inline ── */
.search-options-panel {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface, var(--panel-strong));
}

.search-toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}

.search-toggle-row input {
  margin: 0;
}

/* Secondary explanation under a toggle. Only worth the space where the
   toggle's own label cannot say what the option costs. */
.search-toggle-hint {
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-muted, var(--ink));
  opacity: 0.75;
}

.search-toggle-action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* One row welded to the top of the results list: count + deepen on the left,
   save controls pushed right. Replaces the old floating status line + save bar. */
.search-results-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 30px;
  font-size: 0.85rem;
}

.search-results-area {
  width: 100%;
}

/* The judges that ran, above the waterfall lanes. Wraps rather than
   truncates: a model id is the whole point of the line. */

.search-status-inline {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.85rem;
}

.search-status-inline-summary {
  display: inline-flex;
  margin-left: 16px;
}

.search-result-count {
  font-weight: 600;
  font-size: 1rem;
  font-family: var(--font-mono, 'SF Mono', 'Menlo', monospace);
  font-variant-numeric: tabular-nums;
}

.search-result-label {
  color: var(--gray-500, var(--muted));
}

.search-deeper-inline {
  margin-left: 10px;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 120ms ease;
}

.search-deeper-inline:hover {
  text-decoration: underline;
}

.search-deeper-inline:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.search-active-filters {
  color: var(--gray-400, var(--muted));
  font-size: 0.8rem;
  margin-left: 4px;
}

/* ── Filter pills ── */
.filter-pills-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  flex-wrap: wrap;
}

.filter-pills-label {
  font-size: 0.78rem;
  color: var(--gray-400, var(--muted));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
  white-space: nowrap;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: none;
  font: inherit;
  font-size: 0.8rem;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
}

.filter-pill:hover {
  background: var(--panel-strong);
}

.filter-pill.excluded {
  background: rgba(227, 140, 148, 0.14);
  border-color: #f5c6cb;
  color: #e38c94;
  text-decoration: line-through;
  opacity: 0.7;
}

.filter-pill.excluded:hover {
  opacity: 1;
}

/* ── Reading time filter ── */
.reading-time-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.reading-time-select {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font: inherit;
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--panel);
}

.reading-time-input {
  width: 56px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font: inherit;
  font-size: 0.8rem;
  color: var(--ink);
  text-align: center;
}

.reading-time-unit {
  font-size: 0.8rem;
  color: var(--gray-500, var(--muted));
}

/* ── Right side of the results toolbar: saved-search access + save controls ── */
.search-toolbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.search-toolbar-save {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Compact saved-searches control (shown once a search has run) */
.search-pills-compact {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.search-pill-dropdown-right {
  left: auto;
  right: 0;
}

.search-save-trigger {
  background: none;
  border: 1px solid var(--line);
  border-radius: 5px;
  font: inherit;
  font-size: 0.8rem;
  color: var(--gray-500, var(--muted));
  cursor: pointer;
  padding: 4px 12px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.search-save-trigger:hover {
  color: var(--accent);
  border-color: var(--green-300);
  background: var(--panel-strong);
}

.search-toolbar-save .search-save-input {
  flex: none;
  width: 220px;
  padding: 5px 12px;
}

.search-toolbar-save .primary-button,
.search-toolbar-save .ghost-button {
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 0.84rem;
}

@media (max-width: 768px) {
  .search-toolbar-right {
    margin-left: 0;
    flex-basis: 100%;
    flex-wrap: wrap;
  }
  .search-toolbar-save .search-save-input {
    flex: 1;
    width: auto;
    min-width: 0;
  }
}

.search-save-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.search-save-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--panel);
}

/* ── Saved searches CRUD page ── */

.saved-search-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 20px;
  background: var(--panel);
  transition: box-shadow 0.15s;
}

.saved-search-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.saved-search-card-editing {
  border-color: var(--accent, #2d4a6e);
  box-shadow: 0 0 0 1px var(--accent, #2d4a6e);
}

.saved-search-card-display {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.saved-search-card-main {
  flex: 1;
  min-width: 0;
}

.saved-search-card-name {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--accent, #2d4a6e);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.saved-search-card-name:hover {
  text-decoration: underline;
}

.saved-search-card-description {
  font-size: 0.84rem;
  color: var(--gray-600, var(--muted));
  margin-top: 4px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.saved-search-card-meta {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--gray-400, var(--muted));
}

.saved-search-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.saved-search-delete-btn {
  color: #dc3545 !important;
}

.saved-search-delete-btn:hover {
  background: var(--error-bg) !important;
}

/* ── Saved search edit form ── */
.saved-search-edit-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.saved-search-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.saved-search-edit-label {
  font-size: 0.78rem;
  color: var(--gray-500, var(--muted));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.saved-search-edit-input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
}

.saved-search-edit-textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  resize: vertical;
}

.saved-search-edit-row {
  display: flex;
  gap: 16px;
}

.saved-search-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

/* ── Light-mode chips ──────────────────────────────────────────────
   The badge/pill vocabulary is authored dark-first above: a 14% tint of
   the label hue behind a lifted version of that same hue. These restore
   the original pastel-on-dark-text pairs for the light theme.
──────────────────────────────────────────────────────────────────── */
html.light .flash.error,
html.light .reader-status.error { background: #f8d8d2; color: #6f2016; }
html.light .toast-error { background: #f8d8d2; color: #6f2016; }
html.light .pill.stage-fetched { background: #e8f0fe; color: #1a56db; }
html.light .smart-feed-event-badge.is-in { background: #dcfce7; color: #166534; }
html.light .smart-feed-event-badge.is-out { background: #fee2e2; color: #991b1b; }
html.light .smart-feed-event-current { background: #dbeafe; color: #1d4ed8; }
html.light .feed-membership-indicator.in-feed { background: #dcfce7; color: #15803d; }
html.light .feed-membership-prior.prior-should { background: #dcfce7; color: #15803d; }
html.light .feed-membership-prior.prior-shouldnt { background: #fef2f2; color: #b91c1c; }
html.light .curation-data-pill-quality { background: #edf6ec; color: #2e6b39; }
html.light .curation-data-pill-topic { background: #fff1e7; color: #b25917; }
html.light .curation-data-pill-duplicate { background: #eef2ff; color: #4456c6; }
html.light .lifecycle-step.step-queued { background: #fef3c7; color: #92400e; }
html.light .score-1 { background: #fdd; color: #9b1c1c; }
html.light .score-2 { background: #fde6cc; color: #8a4b08; }
html.light .score-3 { background: #fef3c7; color: #78600d; }
html.light .score-4 { background: #d1fae5; color: #065f46; }
html.light .score-5 { background: #a7f3d0; color: #064e3b; }
html.light .activity-badge--flag { background: #fef3c7; color: #92400e; }
html.light .activity-badge--expand { background: #fef3c7; color: #92400e; }
html.light .activity-badge--click_external { background: #dbeafe; color: #1e40af; }
html.light .activity-badge--return_to_feed { background: #e0f2fe; color: #0c4a6e; }
html.light .activity-badge--read { background: #d1fae5; color: #065f46; }
html.light .activity-badge--show_summary { background: #fef3c7; color: #92400e; }
html.light .activity-badge--expand_topic { background: #e0f2fe; color: #0c4a6e; }
html.light .score-breakdown-cluster-note { background: #fffbeb; color: #92400e; }
html.light .prompt-workbench-unsaved-badge { background: #fffbeb; color: #92400e; }
html.light .filter-pill.excluded { background: #f8d7da; color: #721c24; }

/* ── Email digests ──────────────────────────────────────────────────────────
   Scoped to the two feed-management surfaces (My feeds, Email digests) rather
   than changed globally. The app-wide .primary-button/.ghost-button pill --
   999px radius, 12px 18px padding -- reads consumer-app; these two pages are
   dense management lists where a row of pills crowds itself. Restyling every
   button in the app is a bigger visual decision than this change should make
   on its own, so the compact shape stops at the page wrapper. */

/* The lift-on-hover belongs to hero buttons; in a list it makes rows twitch. */

/* Six controls per row (Run, Feed URL, Subscribe, Stop, Edit, Delete) no
   longer fit beside the text: .saved-search-card-actions is flex-shrink: 0, so
   they were squeezing the name and description into a narrow column and
   wrapping "updates every 30 minutes" down five lines. Stack instead -- text
   full width, controls on their own row beneath -- and let the row wrap on
   narrow viewports. */

.digest-intro {
  margin: -6px 0 18px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--gray-500, var(--muted));
  max-width: 62ch;
}

/* The subscription dropdown. Anchors its menu, so it is positioned even while
   the menu is closed. */
.digest-menu {
  position: relative;
  display: inline-flex;
}

/* Matches .search-pill rather than .ghost-button: this is a state control that
   should read as quieter than the actions beside it, and the My-feeds pill is
   the established shape for "opens a menu". */
.digest-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  color: var(--gray-500, var(--muted));
  font: inherit;
  font-size: 0.82rem;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.digest-menu-trigger:hover:not(:disabled) {
  background: var(--panel-strong);
  border-color: #adb5bd;
  color: var(--ink);
}

.digest-menu-trigger:disabled {
  opacity: 0.55;
  cursor: default;
}

/* Subscribed is a state worth seeing at a glance down a list of feeds. */
.digest-menu-trigger-on {
  color: var(--ink);
  border-color: var(--line-strong, #adb5bd);
  background: var(--panel-strong);
}

.digest-menu-beta {
  font-size: 0.78rem;
  line-height: 1;
}

.digest-menu .search-pill-dropdown {
  /* Wide enough that "Every 3 business hours" and its story count sit on one
     line each; below this the label wraps and the count wraps with it. */
  min-width: 252px;
}

.digest-menu .search-pill-dropdown-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.digest-menu-item-note {
  font-size: 0.76rem;
  color: var(--gray-400, var(--muted));
  white-space: nowrap;
}

/* Beta reader: one personalized feed, with inline interest editing. */
/* Keep reader secondary copy legible on dark surfaces without changing light mode. */
html:not(.light) .beta-reader-page {
  --muted: #bcbcbc;
  --faint: #a3a3a3;
}

/* Shared reader controls and expanded-source metadata have a 14px floor. */
.beta-reader :is(.reader-hotkey-hint kbd, .reader-hotkey-hint span,
  .story-permalink-message, .feed-item-base-score, .feed-item-section-header,
  .feed-item-alternates-list, .feed-item-alternates-meta, .feed-item-alternates-domain,
  .feed-item-alternates-age, .feed-item-alternates-reading, .feed-item-context-sources,
  .summary-save-btn, .summary-cancel-btn) {
  font-size: 14px;
}

.beta-reader-page { min-height: 100dvh; background: var(--bg, #0b0b0b); color: var(--ink, #f1efe8); font-family: var(--font-sans); transition: background 120ms ease, color 120ms ease; }
.beta-reader { width: 100%; max-width: clamp(680px, 90vw, 1200px); margin: 0 auto; padding: 16px clamp(16px, 4vw, 48px) 48px; box-sizing: border-box; }
.beta-reader a, .beta-reader button { color: var(--accent, #afa9ec); }
.beta-reader a { text-decoration: none; }
.beta-reader button { font: inherit; cursor: pointer; border: 0; background: transparent; padding: 0; }
.beta-reader button:disabled { cursor: wait; opacity: .55; }
.beta-reader :focus-visible { outline: 2px solid #9a91f0; outline-offset: 4px; }
.beta-reader-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; font-size: 15px; }
.beta-reader-nav-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.beta-reader-nav-right { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-shrink: 0; }
.beta-reader .beta-reader-brand { color: var(--ink, #f1efe8); font-weight: 500; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.beta-reader-nav a.beta-reader-account,
.beta-reader-nav a.beta-reader-nav-link { color: var(--muted, #b4b2a9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; transition: color 120ms ease; }
.beta-reader-nav a.beta-reader-account:hover,
.beta-reader-nav a.beta-reader-nav-link:hover { color: var(--ink, #f1efe8); }
.beta-reader-signout { color: var(--muted, #b4b2a9); background: transparent; border: 1px solid var(--line); padding: 4px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; font-family: inherit; transition: border-color 120ms ease, color 120ms ease; }
.beta-reader-signout:hover { border-color: var(--line-strong); color: var(--ink, #f1efe8); }
.reader-shell > .beta-reader-nav,
.admin-shell > .beta-reader-nav { padding: 12px clamp(16px, 4vw, 48px); margin-bottom: 20px; border-bottom: 1px solid var(--line-faint); }
.admin-shell > .beta-reader-nav { margin-left: -24px; margin-right: -24px; }
.beta-admin-link { display: block; margin-bottom: 16px; color: var(--accent); }
.beta-search-bar { position: relative; display: flex; gap: 12px; align-items: center; border: 1px solid var(--line, #444441); border-radius: 8px; padding: 11px 16px; background: var(--panel-strong, #161616); transition: background 120ms ease, border-color 120ms ease; }
.beta-search-bar.focused, .beta-search-bar:focus-within { border-color: var(--accent, #8b80ed); }
.beta-search-bar textarea { width: 100%; min-width: 0; flex: 1; border: 0; padding: 0; margin: 0; border-radius: 0; outline: none; background: transparent; color: var(--ink, #f1efe8); font: inherit; font-size: 16px; line-height: 1.5; resize: none; overflow: hidden; box-sizing: border-box; box-shadow: none; }
.beta-search-bar textarea::placeholder { color: var(--muted, #888780); opacity: 1; }
.beta-search-bar > button, .beta-search-icon { color: var(--muted, #888780); font-size: 22px; line-height: 1; min-width: 22px; cursor: pointer; }
.beta-search-bar .beta-history-btn { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; min-width: 20px; transition: color 120ms ease; }
.beta-search-bar .beta-history-btn:hover,
.beta-search-bar .beta-history-btn.active { color: var(--ink, #f1efe8); }
.beta-search-bar .beta-history-btn svg { display: block; }
.beta-search-bar .beta-submit { color: var(--accent, #cecbf6); }

.beta-interest-caption { color: var(--faint, #777670); font-size: 15px; white-space: nowrap; max-width: 48%; overflow: hidden; text-overflow: ellipsis; cursor: pointer; user-select: none; }
.beta-interest-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.beta-reader .beta-pill { display: inline-flex; align-items: center; gap: 2px; padding: 4px 6px 4px 13px; border: 1px solid var(--line, #444441); border-radius: 999px; background: var(--panel, #0b0b0b); color: var(--ink, #d3d1c7); font-size: 15px; line-height: 1.35; text-align: left; }
.beta-reader .beta-pill.selected { background: var(--accent-soft, #26215c); border-color: var(--accent, #26215c); color: var(--accent, #cecbf6); }
.beta-reader button.beta-pill:not(:has(.beta-pill-toggle)) { padding: 6px 13px; gap: 8px; }
.beta-pill span { flex-shrink: 0; }
.beta-reader .beta-pill-toggle { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; line-height: inherit; margin-right: 6px; text-decoration: none; display: inline-block; }
.beta-reader .beta-pill-toggle:hover { text-decoration: underline; }
.beta-reader .beta-pill-focus,
.beta-reader .beta-pill-action { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; box-sizing: border-box; background: none; border: none; padding: 4px 6px; margin: 0; font: inherit; color: inherit; opacity: 0.75; border-radius: 999px; cursor: pointer; line-height: 1; text-decoration: none; transition: opacity 120ms ease, background 120ms ease; }
.beta-reader .beta-pill-focus:hover,
.beta-reader .beta-pill-action:hover { opacity: 1; background: rgba(255, 255, 255, 0.16); }
.beta-reader .beta-pill-focus svg { display: block; }
.beta-reader .beta-pill-delete { opacity: 0.55; margin-left: -2px; }
.beta-reader .beta-pill-delete svg { display: block; }
.beta-reader .beta-pill-delete:hover:not(:disabled) { opacity: 1; color: var(--error, #f87171); background: var(--error-soft, rgba(248, 113, 113, 0.12)); }
.beta-search-options-bar { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; flex-wrap: wrap; }
.beta-reader .beta-search-options-bar .search-window-toggle,
.beta-reader .beta-search-options-bar .beta-sort-toggle { display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--line, #444441); border-radius: 6px; background: var(--panel, #0b0b0b); }
.beta-reader .beta-search-options-bar .search-window-toggle button,
.beta-reader .beta-search-options-bar .beta-sort-toggle button { padding: 4px 11px; border: 0; border-right: 1px solid var(--line, #444441); background: var(--panel, #0b0b0b); color: var(--muted, #b4b2a9); font: inherit; font-size: 14px; line-height: 1.35; cursor: pointer; transition: background 120ms ease, color 120ms ease, transform 80ms ease; user-select: none; }
.beta-reader .beta-search-options-bar .search-window-toggle button:active:not(:disabled),
.beta-reader .beta-search-options-bar .beta-sort-toggle button:active:not(:disabled) { transform: scale(0.96); }
.beta-reader .beta-search-options-bar .search-window-toggle button:last-child,
.beta-reader .beta-search-options-bar .beta-sort-toggle button:last-child { border-right: 0; }
.beta-reader .beta-search-options-bar .search-window-toggle button:hover:not(.active):not(:disabled),
.beta-reader .beta-search-options-bar .beta-sort-toggle button:hover:not(.active):not(:disabled) { background: var(--panel-strong, #161616); color: var(--ink, #f1efe8); }
.beta-reader .beta-search-options-bar .search-window-toggle button.active,
.beta-reader .beta-search-options-bar .beta-sort-toggle button.active { background: var(--accent-soft, #26215c); color: var(--accent, #cecbf6); font-weight: 500; }
.beta-reader .beta-search-options-bar .search-window-toggle button:disabled,
.beta-reader .beta-search-options-bar .beta-sort-toggle button:disabled { opacity: 0.45; cursor: not-allowed; }
/* "← Home": the way back, drawn as one more control at the left of the toolbar. Same box as a toggle button. */
.beta-reader .beta-home-btn { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 4px 11px; border: 1px solid var(--line, #444441); border-radius: 6px; background: var(--panel, #0b0b0b); color: var(--muted, #b4b2a9); font: inherit; font-size: 14px; line-height: 1.35; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background 120ms ease, color 120ms ease, transform 80ms ease; }
.beta-reader .beta-home-btn:hover { background: var(--panel-strong, #161616); color: var(--ink, #f1efe8); text-decoration: none; }
.beta-reader .beta-home-btn:active { transform: scale(0.96); }
.beta-reader .beta-search-options-bar .beta-add-feed { margin-left: auto; }
.beta-reader .search-window-toggle { flex-shrink: 0; }
.beta-reader .search-window-toggle button { padding: 3px 10px; background: var(--panel-strong); color: var(--ink); }
.beta-reader .search-window-toggle button:hover:not(.active) { background: var(--bg-hover); }
.beta-reader .search-window-toggle button.active { background: var(--ink); color: var(--bg); }
.beta-reader .beta-add-feed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid #15803d;
  border-radius: 6px;
  background: #16a34a;
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.35;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
.beta-reader .beta-add-feed:hover:not(:disabled) {
  background: #15803d;
  border-color: #166534;
  color: #ffffff;
}
.beta-reader .beta-add-feed:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.beta-reader .beta-add-feed.added {
  padding-block: 2px;
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(74, 222, 128, 0.35);
  color: #4ade80;
  opacity: 1;
  cursor: default;
}
html.light .beta-reader .beta-add-feed.added {
  background: #dcfce7;
  border-color: #86efac;
  color: #15803d;
}
.beta-reader .beta-add-feed.in-feed {
  background: var(--panel, #0b0b0b);
  border-color: var(--line, #444441);
  color: var(--muted, #b4b2a9);
  opacity: 0.9;
  cursor: default;
}
html.light .beta-reader .beta-add-feed.in-feed {
  background: var(--panel, #ffffff);
  border-color: var(--line, #e4e4e4);
  color: var(--muted, #737373);
}
.beta-reader .beta-add-feed.secondary {
  background: var(--panel, #0b0b0b);
  border-color: var(--line, #444441);
  color: var(--ink, #f1efe8);
}
html.light .beta-reader .beta-add-feed.secondary {
  background: var(--panel, #ffffff);
  border-color: var(--line, #e4e4e4);
  color: var(--ink, #171717);
}
.beta-reader .beta-add-feed.secondary:hover:not(:disabled) {
  background: var(--panel-strong, #161616);
}
html.light .beta-reader .beta-add-feed.secondary:hover:not(:disabled) {
  background: var(--gray-200, #f0f0f0);
}
.beta-feed-edit-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.beta-feed-edit-actions .beta-add-feed { margin: 0; }
.beta-feed-container { transition: opacity 0.2s ease; }
.beta-feed-container.dimmed { opacity: 0.45; }
.beta-story {
  position: relative;
  border-top: 1px solid var(--line-faint, #262626);
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 100ms ease;
  scroll-margin-top: 72px;
  outline: none;
}
.beta-story:focus,
.beta-story:focus-visible {
  outline: none;
}
.beta-story:hover {
  background: var(--bg-strong, #1c1c1c);
}
.beta-story.keyboard-focused,
.beta-story.keyboard-focused:hover {
  background: var(--accent-soft, rgba(99, 102, 241, 0.14));
  opacity: 1;
}
.beta-story.keyboard-focused::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--accent, #8b80ed);
  border-radius: 6px 0 0 6px;
}
.beta-story > summary { display: flex; align-items: flex-start; gap: 16px; cursor: pointer; list-style: none; outline: none; }
.beta-story > summary::-webkit-details-marker { display: none; }
.beta-story-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: 0 0 auto; }
.beta-story-heading { display: block; flex: 1; min-width: 0; }
.beta-story-title { display: block; color: var(--ink, #f1efe8); font-size: 18px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; margin: 0 0 3px; }
a.beta-story-title { color: inherit; text-decoration: none; }
a.beta-story-title:hover { text-decoration: underline; }
.beta-story-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted, #888780); font-family: var(--font-mono); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; margin-top: 2px; }
.beta-story-meta .story-permalink-control,
.beta-search-options-bar .story-permalink-control,
.beta-exports .story-permalink-control { display: inline-flex; align-items: center; }
.beta-story-meta .feed-item-action-btn,
.beta-search-options-bar .feed-item-action-btn { color: var(--muted, #888780); width: 18px; height: 18px; }
.beta-story-meta .feed-item-action-btn:hover,
.beta-story-meta .feed-item-action-btn.active,
.beta-search-options-bar .feed-item-action-btn:hover,
.beta-search-options-bar .feed-item-action-btn.active { color: var(--accent, #afa9ec); }
.beta-story-meta .story-permalink-message,
.beta-search-options-bar .story-permalink-message,
.beta-exports .story-permalink-message { background: var(--panel-strong, #26215c); color: var(--ink, #cecbf6); border-color: var(--line, #444441); }
.beta-story-domain { color: var(--muted, #b4b2a9); }
.beta-story-age { color: var(--muted, #888780); font-size: 14px; white-space: nowrap; }
.beta-story-rank-factors { color: var(--muted, #888780); font-family: var(--font-mono, 'SF Mono', 'Menlo', monospace); font-size: 12px; font-variant-numeric: tabular-nums; }
.beta-story-reading-time { color: var(--muted, #888780); font-size: 14px; white-space: nowrap; }
.beta-story-interest { color: var(--accent, #afa9ec); font-family: var(--font-sans); font-size: 14px; text-decoration: none; cursor: pointer; }
.beta-story-interest:hover,
.beta-story-interest:focus-visible { text-decoration: underline; color: var(--ink, #f1efe8); }
.beta-chevron { display: block; width: 9px; height: 9px; flex: 0 0 9px; margin: 5px 4px 0 0; border-right: 2px solid var(--muted, #5f5e5a); border-bottom: 2px solid var(--muted, #5f5e5a); transform: rotate(45deg); }
.beta-story[open] .beta-chevron { transform: rotate(225deg); margin-top: 9px; }
.beta-story-summary { color: var(--muted, #b4b2a9); font-size: 16px; line-height: 1.5; margin-top: 10px; overflow-wrap: anywhere; text-wrap: pretty; }
.beta-story-summary a { white-space: nowrap; }
.beta-story-heading, .beta-story-summary, .beta-story .feed-item-details { cursor: text; }
.beta-story-heading { -webkit-user-select: text; user-select: text; }
.beta-message { color: var(--muted, #b4b2a9); line-height: 1.5; font-size: 15px; margin: 14px 0; }
.beta-message-centered { text-align: center; }
.beta-error { color: #ffb4b4; margin: 14px 0; line-height: 1.5; }
.beta-error button { text-decoration: underline; margin-left: 8px; }
.beta-empty { padding: 35px 0; }
.beta-empty h1, .beta-settings-title { font-size: 26px; font-weight: 500; color: var(--ink); }
.beta-empty p { color: var(--muted, #b4b2a9); line-height: 1.5; }
.beta-rss-link { padding: 15px 0; color: var(--muted, #b4b2a9); }
.beta-rss-link input { display: block; width: 100%; box-sizing: border-box; color: var(--ink, #f1efe8); background: var(--panel-strong, #161616); border: 1px solid var(--line, #444441); padding: 12px; margin: 8px 0; }
.beta-email-form { display: flex; flex-direction: column; gap: 18px; margin: 28px 0; }
.beta-email-form > label { display: flex; flex-direction: column; gap: 10px; }
.beta-email-form > label.beta-email-enabled { flex-direction: row; align-items: center; }
.beta-email-enabled input { width: 20px; height: 20px; accent-color: #8b80ed; }
.beta-email-form select { font: inherit; padding: 12px; color: #f1efe8; background: #161616; border: 1px solid #444441; border-radius: 6px; width: 100%; }
.beta-email-form .beta-pill { align-self: flex-start; }
.beta-settings-footer { display: flex; justify-content: space-between; border-top: 1px solid #2c2c2a; padding-top: 20px; }
@media (max-width: 480px) {
  .beta-reader { padding: 20px 18px 36px; }
  .beta-reader-nav { margin-bottom: 19px; }
  .beta-search-bar { padding: 12px 14px; gap: 9px; }
  .beta-interest-caption { font-size: 14px; }
  .beta-reader .beta-pill { padding: 6px 13px; font-size: 15px; }
  .beta-story { padding: 12px 8px; margin: 0 -8px; }
}

.beta-story:focus-visible,
.beta-search-bar textarea:focus-visible,
.beta-search-bar input:focus-visible {
  outline: none;
}
.beta-story-title, .beta-reader .beta-reader-brand { font-weight: 400; }

/* ── Beta search management table & prompt expando ──────────── */
.beta-searches-section {
  margin: 28px 0 40px;
}

.beta-searches-header {
  margin-bottom: 14px;
}

.beta-searches-header h1,
.beta-searches-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink, #ededed);
  margin: 0 0 4px;
}

.beta-searches-subtitle {
  color: var(--muted, #a1a1a1);
  font-size: 14px;
  margin: 0;
}

.beta-searches-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line, #262626);
  border-radius: 6px;
  background: var(--panel, #0a0a0a);
}

.beta-searches-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  text-align: left;
}

.beta-searches-table th {
  background: var(--panel-strong, #171717);
  color: var(--muted, #a1a1a1);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line, #262626);
  white-space: nowrap;
}

.beta-searches-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color 120ms ease;
}

.beta-searches-table th.sortable:hover {
  color: var(--ink, #ededed);
}

.beta-searches-table th .th-inner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.beta-searches-table th .sort-icon {
  opacity: 0;
  font-size: 0.9em;
  transition: opacity 120ms ease;
  letter-spacing: 0;
}

.beta-searches-table th.sortable:hover .sort-icon {
  opacity: 0.4;
}

.beta-searches-table th.sorted .sort-icon {
  opacity: 0.9;
  color: var(--accent, #6366f1);
}

.beta-searches-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line, #262626);
  color: var(--ink, #ededed);
  vertical-align: middle;
}

.beta-searches-table tr:last-child td {
  border-bottom: none;
}

.beta-searches-table tbody tr:hover td {
  background: var(--accent-wash, rgba(99, 102, 241, 0.04));
}

.beta-searches-table .col-name {
  width: 28%;
  min-width: 180px;
}

.beta-searches-table .col-prompt {
  width: 44%;
  min-width: 240px;
}

.beta-searches-table .col-status {
  width: 14%;
  min-width: 100px;
}

.beta-searches-table .col-actions {
  width: 14%;
  min-width: 100px;
  text-align: right;
}

.beta-search-name-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.beta-search-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.beta-search-name-link {
  color: var(--ink, #ededed);
  font-weight: 500;
  text-decoration: none;
}

.beta-search-name-link:hover {
  color: var(--accent, #6366f1);
  text-decoration: underline;
}

.beta-search-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  background: var(--panel-strong, #171717);
  border: 1px solid var(--line, #3d3d3d);
  color: var(--muted, #a1a1a1);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.beta-search-meta {
  font-size: 14px;
  color: var(--muted, #7d7d7d);
  font-family: var(--font-mono, monospace);
  margin-top: 2px;
}

/* Prompt cell & popunder */
.beta-prompt-cell {
  position: relative;
}

.beta-prompt-cell-short {
  color: var(--ink, #ededed);
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.beta-prompt-preview-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.beta-prompt-preview {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  color: var(--muted, #a1a1a1);
}

.beta-expando-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line, #3d3d3d);
  border-radius: 4px;
  background: var(--panel-strong, #171717);
  color: var(--muted, #a1a1a1);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 120ms ease;
}

.beta-expando-btn:hover,
.beta-expando-btn.open {
  color: var(--ink, #ededed);
  border-color: var(--accent, #6366f1);
  background: var(--panel-strong, #262626);
}

.beta-prompt-popunder {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  min-width: 320px;
  max-width: 540px;
  width: max-content;
  box-sizing: border-box;
  background: #18181b;
  color: #ededed;
  border: 1px solid var(--line, #3d3d3d);
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

html.light .beta-prompt-popunder {
  background: #ffffff;
  color: #171717;
  border-color: #dcdcdc;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
}

.beta-prompt-popunder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line, #262626);
}

.beta-prompt-popunder-title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #a1a1a1);
}

.beta-prompt-popunder-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.beta-popunder-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font-size: 14px;
  border-radius: 3px;
  border: 1px solid var(--line, #3d3d3d);
  background: transparent;
  color: var(--muted, #a1a1a1);
  cursor: pointer;
}

.beta-popunder-btn:hover {
  color: var(--ink, #ededed);
  border-color: var(--line-strong, #7d7d7d);
}

.beta-prompt-popunder-content {
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
  color: var(--ink, #ededed);
  font-family: inherit;
}

/* Tasteful professional buttons */
.beta-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid var(--line, #3d3d3d);
  background: transparent;
  color: var(--ink, #ededed);
  cursor: pointer;
  transition: all 120ms ease;
  line-height: 1.3;
}

.beta-table-btn:hover:not(:disabled) {
  background: var(--panel-strong, #171717);
  border-color: var(--line-strong, #7d7d7d);
}

.beta-table-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.beta-table-btn.primary,
.beta-primary-btn {
  background: var(--accent, #6366f1);
  border-color: var(--accent, #6366f1);
  color: #ffffff;
}

.beta-table-btn.primary:hover:not(:disabled),
.beta-primary-btn:hover:not(:disabled) {
  background: var(--accent-hover, #4f46e5);
  border-color: var(--accent-hover, #4f46e5);
}

.beta-status-btn {
  min-width: 80px;
}

.beta-status-btn.active {
  background: var(--accent-soft, rgba(99, 102, 241, 0.14));
  border-color: var(--accent, #6366f1);
  color: var(--accent-strong, #a5b0ff);
}

.beta-status-btn.inactive {
  color: var(--muted, #7d7d7d);
  border-color: var(--line, #3d3d3d);
}

.beta-status-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.beta-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  background: var(--panel-strong, #171717);
  border: 1px solid var(--line, #3d3d3d);
  color: var(--muted, #a1a1a1);
}

.beta-status-badge.in-feed {
  color: var(--success, #4ade80);
  border-color: rgba(74, 222, 128, 0.3);
  background: var(--success-bg, rgba(74, 222, 128, 0.12));
}

.beta-danger-btn {
  color: var(--muted, #7d7d7d);
  border-color: transparent;
}

.beta-danger-btn:hover:not(:disabled) {
  color: var(--error, #f87171);
  border-color: var(--error, #f87171);
  background: var(--error-soft, rgba(248, 113, 113, 0.12));
}

.beta-danger-btn-filled {
  background: var(--error, #f87171);
  border-color: var(--error, #f87171);
  color: #ffffff;
}

.beta-danger-btn-filled:hover:not(:disabled) {
  background: #ef4444;
  border-color: #ef4444;
}

.beta-empty-table {
  padding: 24px;
  text-align: center;
  color: var(--muted, #a1a1a1);
  font-size: 14px;
}

.beta-empty-table a {
  color: var(--accent, #6366f1);
  text-decoration: underline;
}

/* Beta search management dialogs */
.beta-search-dialog {
  width: min(560px, calc(100vw - 32px));
  background: #ffffff;
  color: #1f1f1f;
  --ink: #1f1f1f;
  --line: #d4d4d4;
  padding: 20px;
  border-radius: 8px;
}

.beta-search-dialog h2 {
  font-size: 18px;
  font-weight: 600;
  color: #1f1f1f;
  margin: 0 0 8px;
}

.beta-search-dialog p {
  font-size: 14px;
  color: #555555;
  margin: 0 0 16px;
  line-height: 1.45;
}

.beta-search-dialog label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #1f1f1f;
  margin-bottom: 6px;
}

.beta-search-dialog textarea {
  display: block;
  width: 100%;
  min-height: 180px;
  margin: 6px 0 0;
  padding: 10px;
  box-sizing: border-box;
  color: #1f1f1f;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  background: #ffffff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.45;
}

.beta-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.beta-dialog-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.beta-dialog-char-count {
  font-size: 14px;
  color: #777777;
  font-family: var(--font-mono, monospace);
}

.beta-dialog-input {
  display: block;
  width: 100%;
  padding: 8px 10px;
  box-sizing: border-box;
  color: #1f1f1f;
  border: 1px solid #d4d4d4;
  border-radius: 4px;
  background: #ffffff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
}

.beta-dialog-input:focus,
.beta-search-dialog textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.beta-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.beta-dialog-hint {
  font-size: 14px;
  color: #777777;
  margin: 6px 0 0;
}

/* ── Sponsored Homepage Placements ── */
.sponsored-placement-card {
  /* Inherits .beta-story row styles */
}

.sponsored-placement-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--warn, #f0803c);
  background: rgba(240, 128, 60, 0.16);
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: 1px;
  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
  line-height: 1.2;
}

.sponsored-placement-category {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted, #c4c4c4);
  text-transform: lowercase;
  font-family: var(--font-sans, sans-serif);
}

.sponsored-placement-cta {
  color: var(--warn, #f0803c);
  text-decoration: none;
  margin-left: 6px;
  white-space: nowrap;
}

.sponsored-placement-cta:hover {
  text-decoration: underline;
}

/* ── Sponsored Placements Admin UI ── */
.sponsored-admin {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

.sponsored-admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.sponsored-admin-bar h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.sponsored-admin-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sponsored-crud {
  display: grid;
  grid-template-columns: minmax(220px, 0.35fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.sponsored-crud-list,
.sponsored-crud-editor {
  background: var(--panel, #171717);
  border: 1px solid var(--line, #262626);
  border-radius: 8px;
  padding: 16px;
}
.sponsored-crud-list h2,
.sponsored-crud-editor h2 { margin: 0 0 14px; font-size: 16px; color: var(--ink, #ededed); }
.sponsored-crud-item {
  position: relative; display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; padding: 11px 54px 11px 12px; margin-bottom: 7px; text-align: left;
  color: var(--ink, #ededed); background: transparent; border: 1px solid var(--line, #262626);
  border-radius: 6px; cursor: pointer;
}
.sponsored-crud-item:hover, .sponsored-crud-item.selected { border-color: var(--warn, #f0803c); background: rgba(240, 128, 60, 0.08); }
.sponsored-crud-item small { margin-top: 4px; color: var(--muted, #a1a1a1); }
.sponsored-crud-reorder { position: absolute; right: 8px; top: 10px; display: flex; gap: 5px; }
.sponsored-crud-reorder span { padding: 2px 4px; border: 1px solid var(--line, #444); border-radius: 3px; }
.sponsored-crud-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

.sponsored-admin-card {
  background: var(--panel, #171717);
  border: 1px solid var(--line, #262626);
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s;
}

.sponsored-admin-card.active-ad {
  border-color: var(--warn, #f0803c);
}

.sponsored-admin-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sponsored-admin-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #ededed);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sponsored-status-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.sponsored-status-tag.live {
  background: rgba(74, 222, 128, 0.15);
  color: var(--success, #4ade80);
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.sponsored-status-tag.inactive {
  background: rgba(125, 125, 125, 0.15);
  color: var(--muted, #a1a1a1);
  border: 1px solid rgba(125, 125, 125, 0.25);
}

.sponsored-admin-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sponsored-admin-stats {
  display: flex;
  gap: 16px;
  font-size: 12.5px;
  color: var(--muted, #a1a1a1);
  font-family: var(--font-mono, monospace);
  padding: 6px 0;
  border-top: 1px solid var(--line-faint, #1f1f1f);
  border-bottom: 1px solid var(--line-faint, #1f1f1f);
}

/* Modal Form Styles */
.sponsored-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.sponsored-form-full {
  grid-column: 1 / -1;
}

.sponsored-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sponsored-form-group label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink, #111827);
}

.sponsored-form-group input,
.sponsored-form-group textarea,
.sponsored-form-group select {
  padding: 8px 10px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 5px;
  background: #ffffff;
  color: var(--ink, #111827);
  font-size: 13.5px;
}

.sponsored-form-group textarea {
  min-height: 80px;
  resize: vertical;
}

.sponsored-form-group input:focus,
.sponsored-form-group textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.sponsored-preview-pane {
  margin-top: 16px;
  padding: 12px;
  border: 1px dashed var(--line, #e5e7eb);
  border-radius: 6px;
  background: #000000;
}

.sponsored-preview-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #a1a1a1;
  margin-bottom: 8px;
  font-weight: 600;
}

@media (max-width: 760px) {
  .sponsored-crud { grid-template-columns: 1fr; }
  .sponsored-crud-list { max-height: 280px; overflow-y: auto; }
  .sponsored-form-grid { grid-template-columns: 1fr; }
  .sponsored-form-full { grid-column: auto; }
}

.beta-feed-prompt-input {
  position: relative;
}

.beta-feed-prompt-panel {
  margin: 0 0 24px 0;
  padding: 16px 18px;
  border: 1px solid var(--line, #444441);
  border-radius: 8px;
  background: var(--panel-strong, #161616);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Admin description preview (PRO-584): live vs draft top stories. */
.description-preview-panel {
  margin: 0 0 24px 0;
  padding: 16px 18px;
  border: 1px solid var(--line, #444441);
  border-radius: 8px;
  background: var(--panel-strong, #161616);
}
.description-preview-draft {
  margin: 0 0 12px;
  color: var(--muted, #888780);
  font-size: 13px;
  white-space: pre-wrap;
}
.description-preview-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  font-size: 12px;
  color: var(--muted, #888780);
}
.description-preview-counts {
  margin: 10px 0;
  font-size: 13px;
  color: var(--ink, #f1efe8);
}
.description-preview-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 720px) {
  .description-preview-columns { grid-template-columns: minmax(0, 1fr); }
}
.description-preview-columns h3 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #888780);
}
.description-preview-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 520px;
  overflow-y: auto;
}
.description-preview-row {
  display: flex;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--line-faint, #171717);
  font-size: 13px;
}
.description-preview-row.added { background: var(--accent-wash, rgba(99, 102, 241, 0.05)); }
.description-preview-row.dropped { opacity: 0.75; }
.description-preview-rank {
  flex: 0 0 22px;
  text-align: right;
  color: var(--faint, #7d7d7d);
  font-variant-numeric: tabular-nums;
}
.description-preview-story { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.description-preview-story a { color: var(--ink, #f1efe8); text-decoration: none; overflow-wrap: anywhere; }
.description-preview-story a:hover { text-decoration: underline; }
.description-preview-meta {
  font-size: 11px;
  color: var(--faint, #7d7d7d);
  overflow-wrap: anywhere;
}
.description-preview-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}
.description-preview-badge.added { color: var(--accent-strong, #a5b0ff); border: 1px solid var(--accent, #6366f1); }
.description-preview-badge.dropped { color: var(--warn, #f0803c); border: 1px solid var(--warn, #f0803c); }
.description-preview-promote {
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--line, #444441);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.description-preview-promote legend { padding: 0 4px; font-size: 12px; color: var(--muted, #888780); }
.description-preview-option { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink, #f1efe8); }
.description-preview-option strong { font-weight: 600; }
.description-preview-reason {
  padding: 6px 10px;
  border: 1px solid var(--line, #444441);
  border-radius: 5px;
  background: var(--panel, #0b0b0b);
  color: var(--ink, #f1efe8);
  font: inherit;
  font-size: 13px;
}
.description-preview-promote .beta-primary-btn { align-self: flex-start; }
.beta-feed-prompt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.beta-feed-prompt-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #888780);
}
.beta-feed-prompt-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.beta-feed-prompt-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 120ms ease;
}
.beta-feed-prompt-copy-btn {
  background: var(--panel, #0b0b0b);
  border: 1px solid var(--line, #444441);
  color: var(--ink, #f1efe8);
}
.beta-feed-prompt-copy-btn:hover {
  background: var(--line, #262626);
  border-color: var(--line-strong, #5a5a56);
}
.beta-feed-prompt-copy-btn.copied {
  color: var(--success, #4ade80);
  border-color: var(--success, #4ade80);
}
.beta-feed-prompt-close-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted, #888780);
}
.beta-feed-prompt-close-btn:hover {
  background: var(--panel, #0b0b0b);
  border-color: var(--line, #444441);
  color: var(--ink, #f1efe8);
}
.beta-feed-prompt-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 84px;
  padding: 10px 14px;
  border: 1px solid var(--line, #444441);
  border-radius: 6px;
  background: var(--panel, #0b0b0b);
  color: var(--ink, #f1efe8);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  overflow: hidden;
}
.beta-feed-prompt-textarea:focus {
  border-color: var(--accent, #8b80ed);
  outline: none;
  box-shadow: 0 0 0 1px var(--accent, #8b80ed);
}
.beta-feed-prompt-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}
.beta-feed-prompt-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.beta-feed-prompt-run-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 4px;
  background: var(--accent-soft, #26215c);
  color: var(--accent, #cecbf6);
  border: 1px solid var(--accent, #26215c);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 120ms ease;
  line-height: 1.3;
}
.beta-feed-prompt-run-btn:hover:not(:disabled) {
  opacity: 0.9;
}
.beta-feed-prompt-run-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Non-production visual indicator */
body.env-nonprod {
  border-top: 3px solid #f59e0b;
}

body.env-nonprod::after {
  content: attr(data-env-tag);
  position: fixed;
  top: 8px;
  right: 12px;
  z-index: 99999;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: #f59e0b;
  color: #111827;
  padding: 2px 6px;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0.9;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Room for multi-paragraph public feed prompts, including on small screens. */
.beta-public-prompt-dialog {
  width: min(800px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

.beta-public-prompt-dialog textarea {
  resize: vertical;
}

/* Long editorial briefs should read like prose and keep their controls nearby. */
.long-prompt-editor { width: 100%; min-width: 0; margin-top: 12px; }
.long-prompt-toolbar, .long-prompt-count { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.long-prompt-toolbar label { margin: 0; font-size: 14px; font-weight: 600; }
.long-prompt-toolbar button { background: var(--panel); color: var(--accent-strong); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; cursor: pointer; font: inherit; font-size: 13px; }
.long-prompt-editor textarea { display: block; width: 100%; box-sizing: border-box; min-height: 220px; max-height: 50dvh; padding: 14px; margin: 8px 0; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.65; resize: vertical; }
.long-prompt-editor-expanded textarea { min-height: 65dvh; max-height: 75dvh; }
.long-prompt-editor textarea:focus { outline: 2px solid #6366f1; outline-offset: 2px; }
.long-prompt-count { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.long-prompt-editor .long-prompt-error { color: var(--error); margin: 8px 0; font-size: 13px; }
/* The public-prompt dialog is a white .modal-content in both themes, so the editor inside it stays light. */
.beta-public-prompt-dialog .long-prompt-toolbar button { background: #ffffff; color: #4338ca; border-color: #d4d4d4; }
.beta-public-prompt-dialog .long-prompt-editor textarea { background: #ffffff; color: #1f1f1f; border-color: #d4d4d4; }
.beta-public-prompt-dialog .long-prompt-count { color: #555555; }
.beta-public-prompt-dialog .long-prompt-editor .long-prompt-error { color: #b91c1c; }
.modal-content.beta-public-prompt-dialog { background: #ffffff; max-width: 1000px; width: calc(100vw - 32px); max-height: calc(100dvh - 32px); }
.beta-public-prompt-footer { position: sticky; bottom: -20px; margin: 12px -20px -20px; padding: 16px 20px 20px; border-top: 1px solid #d4d4d4; background: #ffffff; z-index: 1; }
.beta-prompt-discard { margin-bottom: 12px; }
.beta-prompt-discard button + button { margin-left: 8px; }
@media (max-width: 600px) {
  .modal-content.beta-public-prompt-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 16px; }
  .beta-public-prompt-footer { bottom: -16px; margin-left: -16px; margin-right: -16px; margin-bottom: -16px; padding: 12px 16px 16px; }
  .long-prompt-editor textarea { font-size: 16px; }
}

/* Reader analytics uses the admin surface's typography and opaque controls. */
.reader-analytics { max-width: 1200px; }
.reader-analytics-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.reader-analytics-stat { padding: 16px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); text-decoration: none; display: flex; flex-direction: column; gap: 8px; }
.reader-analytics-stat span, .reader-analytics-note { color: var(--muted); font-size: 13px; line-height: 1.6; }
.reader-analytics-stat strong { font-size: 28px; font-variant-numeric: tabular-nums; }
.reader-analytics-toolbar, .reader-analytics-tabs { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin: 14px 0; }
.reader-analytics label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.reader-analytics input, .reader-analytics select { background: #ffffff; color: #1f1f1f; color-scheme: light; border: 1px solid var(--line); padding: 7px; border-radius: 4px; max-width: 100%; }
.reader-analytics button { cursor: pointer; font: inherit; font-size: 13px; padding: 7px 10px; background: var(--gray-100); color: var(--ink); border: 1px solid var(--line); border-radius: 5px; overflow-wrap: anywhere; }
.reader-analytics button:disabled { opacity: .5; cursor: default; }
.reader-analytics-toolbar button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); font-weight: 700; }
.reader-analytics-tabs button[aria-pressed="true"] { font-weight: 700; border-bottom: 2px solid var(--ink); }
.reader-analytics-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 14px 0; }
.reader-analytics-table { overflow-x: auto; margin: 12px 0; }
.reader-analytics table { width: 100%; border-collapse: collapse; font-size: 13px; }
.reader-analytics td, .reader-analytics th { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--line); }
.reader-analytics td button { background: transparent; border: none; color: var(--link); padding: 0; text-align: left; }
.reader-analytics-event { border: 1px solid var(--line); border-radius: 6px; margin: 8px 0; padding: 12px; }
.reader-analytics-event summary { cursor: pointer; overflow-wrap: anywhere; }
.reader-analytics-event summary > * { margin-right: 10px; }
.reader-analytics-event pre { background: #ffffff; color: #1f1f1f; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; padding: 12px; max-height: 500px; overflow: auto; }
.reader-analytics-chart button { display: flex; align-items: center; gap: 12px; width: 100%; background: transparent; border: none; padding: 6px 0; text-align: left; }
.reader-analytics-chart button > span:first-child { min-width: 90px; }
.reader-analytics-bar { display: inline-block; height: 20px; background: #729aaf; border-radius: 3px; }

@media (max-width: 760px) { .reader-analytics-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.reader-analytics-mode { display: inline-flex; margin: 12px 0; border: 1px solid var(--line); border-radius: 7px; padding: 3px; gap: 3px; background: var(--bg); }
.reader-analytics-mode button { min-width: 110px; color: var(--ink); background: var(--bg); border: none; padding: 9px 24px; }
.reader-analytics-mode button[aria-pressed="true"] { background: var(--ink); color: var(--bg); font-weight: 700; }
.reader-metrics-table { table-layout: fixed; }
.reader-metrics-table th:first-child { width: 26%; }
.reader-metrics-table th:nth-child(2) { width: 25%; }
.reader-metrics-table td, .reader-metrics-table th { vertical-align: top; overflow-wrap: anywhere; }
.reader-metrics-table td:last-child { color: var(--muted); line-height: 1.5; }
.reader-metrics-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.reader-metrics-group th { background: var(--gray-100); padding-top: 14px; padding-bottom: 14px; }
.reader-metrics > label { max-width: 240px; }
.reader-metrics table[aria-label="Search metrics by entry point"] { min-width: 780px; }
@media (max-width: 760px) {
  .reader-metrics-table { min-width: 0; }
  .reader-metrics-table thead { display: none; }
  .reader-metrics-table tbody { display: block; }
  .reader-metrics-table tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
  .reader-metrics-table th:first-child { width: auto; }
  .reader-metrics-table td, .reader-metrics-table th { border-bottom: 0; }
  .reader-metrics-table td:last-child, .reader-metrics-group th { grid-column: 1 / -1; }
}

/* Keep search on its own row so account links and admin shortcuts cannot
   squeeze the prompt into a narrow column. Mobile folds feed controls. */
/* The spec draws an 858px column at a 1280px desktop. */
.beta-reader { max-width: 906px; padding: 12px 24px 48px; }
.beta-reader-nav { gap: 16px; margin-bottom: 20px; }
.beta-reader-nav-left { flex: 0 1 auto; }
.beta-reader .beta-reader-brand { font-size: 22px; font-weight: 700; }
.beta-reader-nav:has(> .beta-search-bar) { flex-wrap: wrap; }
.beta-reader-nav > .beta-search-bar { flex: 1 0 100%; order: 3; min-width: 0; box-sizing: border-box; gap: 14px; padding: 8px 14px; }
.beta-reader-nav > .beta-search-bar textarea { font-size: 14px; line-height: 1.5; }
.beta-reader-nav > .beta-search-bar > button { font-size: 16px; min-width: 16px; }
.beta-reader-nav > .beta-search-bar .beta-search-icon { width: 16px; height: 16px; min-width: 16px; }
.beta-reader-nav-right { gap: 18px; }
.beta-reader a.beta-signin { display: inline-flex; justify-content: center; align-items: center; background: #7058e8; color: #ffffff; border-radius: 7px; padding: 9px 17px; font-size: 16px; font-weight: 600; white-space: nowrap; }
.beta-reader a.beta-signin:hover { background: #6048d8; }
.beta-theme-control { display: flex; }
.beta-mobile-menu { display: none; }
.beta-reader .beta-filter-toggle { display: none; }
.beta-home-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 0 0 12px; }
.beta-home-controls .beta-interest-pills { margin: 0; }
.beta-home-controls .beta-search-options-bar { margin: 0 0 0 auto; flex-shrink: 0; flex-wrap: nowrap; }
/* Every box in the controls row is 26px tall, as in the spec: 1px border,
   3px vertical padding and an 18px content line. */
.beta-reader .beta-export { display: inline-flex; padding: 3px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.beta-reader .beta-search-options-bar .search-window-toggle button,
.beta-reader .beta-search-options-bar .beta-sort-toggle button { padding: 3px 11px; line-height: 1.3; }
.beta-reader .beta-pill { padding: 3px 6px 3px 8px; border-radius: 6px; font-family: var(--font-mono); font-size: 13px; }
.beta-reader .beta-pill-focus,
.beta-reader .beta-pill-action { padding: 2px 6px; }
.beta-reader .beta-pill.owned.selected { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.beta-story-interest { font-family: var(--font-mono); }
.beta-story-domain { max-width: 100%; overflow-wrap: anywhere; }
/* Story rows sit inside the column (no bleed) on a 58px pitch, as in the
   spec: 16px title, 13px mono meta line, 9px above and 6px below. */
.beta-story { margin: 0; padding: 9px 12px 6px; }
.beta-story-title { font-size: 16px; margin: 0 0 2px; }
.beta-story-meta { font-size: 13px; margin-top: 0; }
.beta-story-reading-time, .beta-story-interest { font-size: 13px; }
@media (max-width: 1050px) {
  .beta-reader-nav .reader-hotkey-hint { display: none; }
}
@media (max-width: 640px) {
  .beta-reader { padding: 8px 16px 36px; }
  .beta-reader-nav { flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
  .beta-reader-nav > .beta-search-bar { padding: 6px 6px 6px 14px; min-height: 44px; }
  .beta-reader-nav > .beta-search-bar textarea { font-size: 16px; }
  .beta-reader-nav-right { gap: 20px; min-height: 36px; }
  .beta-reader .beta-reader-brand { font-size: 18px; }
  .beta-reader a.beta-signin { font-size: 14px; padding: 8px 14px; }
  .beta-reader-nav a.beta-reader-account { max-width: 100px; }
  .beta-reader-nav a.beta-reader-account[href="/searches"] { display: none; }
  .beta-theme-menu { position: relative; }
  .beta-theme-control { display: none; }
  .beta-theme-control.open { display: flex; }
  .beta-reader .beta-mobile-menu { display: block; cursor: pointer; color: var(--muted); letter-spacing: 2px; padding: 6px; }
  .beta-theme-control { position: absolute; right: 0; top: 32px; z-index: 20; padding: 12px; border: 1px solid #dedede; border-radius: 8px; background: #ffffff; color: #242424; }
  .beta-theme-control .reader-theme-toggle { color: #242424; }
  .beta-reader .beta-filter-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--panel); border-radius: 6px; padding: 8px; font-size: 14px; }
  .beta-home-controls { display: none; }
  .beta-home-controls.open { display: flex; flex-wrap: wrap; margin: 14px 0; }
  .beta-home-controls .beta-search-options-bar { margin-left: 0; }
  .beta-reader .beta-pill { padding: 3px 5px 3px 10px; }
  .beta-story { margin: 0; padding: 11px 12px; }
  .beta-story-title { font-size: 16px; }
  .beta-story-meta { font-size: 12px; gap: 4px 10px; }
  .beta-story-reading-time, .beta-story-interest { font-size: 12px; }
  .beta-chevron { display: none; }
}

/* The supplied account design uses solid dark surfaces. This scoped variant
   leaves the canonical white cards used by admin modals untouched. */
.modal-content.reader-auth-dialog { width: min(512px, calc(100vw - 32px)); max-width: 512px; max-height: calc(100dvh - 32px); overflow-y: auto; box-sizing: border-box; padding: 32px; border: 1px solid #2b2b30; border-radius: 14px; background: #161619; color: #e8e8eb; font-family: var(--font-sans); }
.reader-auth-dialog [role="dialog"] { outline: none; }
.reader-auth-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.reader-auth-heading h1 { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 600; }
.reader-auth-dialog button { font: inherit; cursor: pointer; }
.reader-auth-close { border: 0; background: none; color: #a0a0aa; font-size: 28px !important; line-height: 1; padding: 4px; }
.reader-auth-brand { display: none; }
.reader-auth-switch { color: #a0a0aa; font-size: 16px; margin: 0 0 18px; }
.reader-auth-dialog a { color: #a38cff; }
.reader-auth-switch a { font-weight: 600; text-decoration: none; }
.reader-auth-form { display: flex; flex-direction: column; gap: 10px; }
.reader-auth-form input:not([type="checkbox"]) { box-sizing: border-box; width: 100%; height: 52px; border: 1px solid #2b2b30; border-radius: 9px; padding: 14px 18px; background: #101012; color: #e8e8eb; font: inherit; font-size: 17px; }
.reader-auth-form input::placeholder { color: #92929d; opacity: 1; }
.reader-auth-password { position: relative; }
.reader-auth-password input { padding-right: 72px !important; }
.reader-auth-password button { position: absolute; right: 16px; top: 0; height: 100%; padding: 0; color: #a0a0aa; background: none; border: 0; font-size: 15px; }
.reader-auth-help { margin: 0; color: #92929d; font-size: 14px; }
.reader-auth-brief { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 15px; color: #bcbcc5; cursor: pointer; }
.reader-auth-brief input { width: 18px; height: 18px; margin: 0; accent-color: #7058e8; }
.reader-auth-submit { border: 0; border-radius: 9px; padding: 14px; background: #7058e8; color: #ffffff; font-size: 17px !important; font-weight: 600 !important; }
.reader-auth-submit:hover { background: #6048d8; }
.reader-auth-dialog button:disabled { cursor: wait; opacity: .6; }
.reader-auth-terms { color: #92929d; font-size: 14px; line-height: 1.6; margin: 18px 0 0; }
.reader-auth-terms a { color: #a0a0aa; text-decoration: underline; }
.reader-auth-forgot { font-size: 14px; }
.reader-auth-skip { border: 0; background: none; padding: 6px; color: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.reader-auth-error { margin: 0; color: #ffaaaa; font-size: 14px; }
.reader-auth-continue { border: 0; background: none; color: #a38cff; padding: 8px; }
.reader-auth-google-btn { display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: center; gap: 12px; height: 52px; border: 1px solid #2b2b30; border-radius: 9px; background: #101012; color: #e8e8eb; font-size: 17px !important; font-weight: 600 !important; }
.reader-auth-google-btn:hover { background: #1c1c20; border-color: #3a3a41; }
.reader-auth-divider { display: flex; align-items: center; gap: 12px; margin: 6px 0; color: #92929d; font-size: 14px; }
.reader-auth-divider::before, .reader-auth-divider::after { content: ""; flex: 1; border-top: 1px solid #2b2b30; }
.auth-callback { max-width: 480px; margin: 20vh auto 0; padding: 0 16px; text-align: center; }
.auth-callback button { margin: 8px 6px 0; }
.reader-auth-dialog :focus-visible { outline: 2px solid #a38cff; outline-offset: 3px; }
html.light .modal-content.reader-auth-dialog { background: #ffffff; color: #202024; border-color: #dedee4; }
html.light .reader-auth-form input:not([type="checkbox"]) { background: #fafafa; color: #202024; border-color: #dedee4; }
html.light .reader-auth-brief, html.light .reader-auth-switch, html.light .reader-auth-help, html.light .reader-auth-terms, html.light .reader-auth-terms a { color: #656570; }
html.light .reader-auth-error { color: #b42318; }
html.light .reader-auth-google-btn { background: #ffffff; color: #202024; border-color: #dedee4; }
html.light .reader-auth-google-btn:hover { background: #f4f4f6; }
html.light .reader-auth-divider { color: #656570; }
html.light .reader-auth-divider::before, html.light .reader-auth-divider::after { border-top-color: #dedee4; }
@media (max-width: 640px) {
  .modal-content.reader-auth-dialog { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; border: 0; border-radius: 0; padding: 16px; background: #0b0b0b; }
  .reader-auth-heading { justify-content: center; position: relative; margin-bottom: 36px; }
  .reader-auth-heading h1 { font-size: 18px; }
  .reader-auth-close { position: absolute; left: 2px; top: -4px; }
  .reader-auth-brand { display: block; font-size: 20px; font-weight: 700; margin-bottom: 18px; }
  .reader-auth-switch { font-size: 15px; margin-bottom: 16px; }
  .reader-auth-form input:not([type="checkbox"]) { height: 44px; font-size: 16px; padding: 12px 14px; }
  .reader-auth-submit { padding: 12px; }
  .reader-auth-google-btn { height: 44px; font-size: 16px !important; }
  .reader-auth-terms { font-size: 13px; }
}
html:not(.light) .beta-reader-page {
  --bg: #0b0b0d;
  --panel: #161619;
  --panel-strong: #161619;
  --ink: #e8e8eb;
  --muted: #92929d;
  --accent: #a38cff;
  --accent-soft: #191329;
  --line: #2b2b30;
  --line-faint: #202024;
}
.beta-reader .beta-filter-toggle { background: #24242c; color: #c3c3cc; }
html.light .beta-reader .beta-filter-toggle { background: #eeeeF2; color: #656570; }
@media (max-width: 640px) and (hover: none) {
  .beta-story.keyboard-focused:not(:focus-visible) { background: transparent; }
  .beta-story.keyboard-focused:not(:focus-visible)::before { display: none; }
}
.beta-mobile-searches { display: none; }
@media (max-width: 640px) {
  .beta-theme-control { flex-direction: column; align-items: flex-start; gap: 12px; }
  .beta-reader .beta-mobile-searches { display: block; color: #242424; }
}

/* Reader combined layout. Opaque surfaces are deliberate in both themes. */
.beta-reader-page, .reader-auth-dialog { --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace; font-family: var(--font-sans); }
html:not(.light) .beta-reader-page { --accent: #a08cff; --ink: #e8e8eb; --muted: #92929d; --line: #29292f; --line-faint: #1c1c21; background: #0b0b0d; }
.beta-reader { max-width: 960px; padding: 12px 20px 60px; margin: 0 auto; }
.beta-reader-nav, .beta-reader-nav:has(> .beta-search-bar) { display: flex; flex-wrap: nowrap; gap: 14px; margin-bottom: 16px; }
.beta-reader-nav-left { flex: 0 0 auto; }
.beta-reader-brand, .beta-reader .beta-reader-brand { font-size: 18px; }
.beta-reader-nav > .beta-search-bar { flex: 1 1 auto; order: 0; min-width: 240px; margin: 0; min-height: 40px; padding: 7px 12px; gap: 10px; border-radius: 8px; }
.beta-reader-nav > .beta-search-bar textarea { text-align: left; font-family: var(--font-sans); font-size: 15px; }
/* Keep the placeholder on one line: a wrapped hint doubles the header height. */
.beta-reader-nav > .beta-search-bar textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.beta-reader-nav-right { gap: 16px; flex-shrink: 0; }
.beta-reader .reader-hotkey-hint { display: flex; gap: 12px; font-size: 12.5px; color: #8f8f98; }
.beta-reader .reader-hotkey-hint > span { white-space: nowrap; display: inline-flex; gap: 4px; align-items: center; }
.beta-reader .reader-hotkey-hint kbd { margin: 0; padding: 1px 5px; font: 11px var(--font-mono); border: 1px solid #3a3a42; border-radius: 4px; color: #c9c9d0; background: #16161a; }
html.light .beta-reader .reader-hotkey-hint kbd { border-color: #d8d8de; color: #4a4a52; background: #f4f4f6; }
.beta-reader .reader-theme-toggle { color: #c9c9d0; }
html.light .beta-reader .reader-theme-toggle { color: #4a4a52; }
.beta-reader .reader-desktop-theme { display: inline-flex; }
.beta-reader a.beta-signin, .reader-auth-submit, .beta-reader .beta-add-feed { background: #6d5be6; border: 1px solid #6d5be6; color: #fff; border-radius: 6px; padding: 7px 14px; font-size: 14px; font-weight: 600; text-decoration: none; }
.beta-reader .beta-add-feed:hover:not(:disabled), .reader-auth-submit:hover { background: #5f4cd4; border-color: #5f4cd4; }
.beta-reader .beta-add-feed.added { background: #17142a; border-color: #2a2450; color: #a08cff; }
.beta-reader a.beta-reader-account { border-radius: 50%; width: 32px; height: 32px; padding: 0; display: inline-flex; justify-content: center; align-items: center; background: #24212f; color: #e8e8eb; font-size: 13px; text-decoration: none; }
.beta-theme-menu { position: relative; }
.beta-mobile-menu { display: none; }
.beta-home-controls { display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; margin-bottom: 12px; }
.beta-reader .reader-chip-container { flex: 1; min-width: 0; position: relative; }
.beta-interest-pills { display: flex; gap: 8px; flex-wrap: nowrap; align-items: center; margin: 0; overflow: hidden; }
.beta-reader .reader-chip-measure { position: absolute; display: flex; width: max-content; gap: 8px; visibility: hidden; pointer-events: none; height: 0; overflow: hidden; }
.beta-reader .beta-pill.owned.selected { flex: 0 0 auto; display: inline-flex; align-items: center; height: 24px; box-sizing: border-box; padding: 0; border-radius: 5px; border: 1px solid #2a2450; background: #17142a; color: #a08cff; font: 12px var(--font-mono); }
.beta-reader .beta-pill-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 0 2px 0 8px; color: inherit; min-width: 0; font: inherit; text-decoration: none; }
.beta-reader .reader-chip-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beta-reader .beta-pill-action { display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-right: 2px; width: 20px; height: 20px; border-radius: 4px; min-height: 0; border: 0; background: none; color: #92929d; font: inherit; }
.beta-reader .reader-view-feeds { display: inline-flex; gap: 5px; align-items: center; flex: 0 0 auto; border: 1px solid #3d3d48; border-radius: 5px; height: 24px; padding: 0 8px 0 6px; box-sizing: border-box; color: #c9c9d0; text-decoration: none; white-space: nowrap; font: 12px var(--font-mono); }
.beta-reader .reader-chip-overflow { flex: 0 0 auto; color: var(--muted); white-space: nowrap; text-decoration: none; font: 12px var(--font-mono); }
.beta-reader .sentence-pills { display: flex; gap: 8px; flex-wrap: nowrap; align-items: center; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; }
.beta-reader .sentence-pills::-webkit-scrollbar { display: none; }
.beta-reader .sentence-pill { flex: 0 0 auto; display: inline-flex; align-items: center; height: 24px; box-sizing: border-box; padding: 0 8px; border-radius: 5px; border: 1px solid #3d3d48; background: transparent; color: #c9c9d0; font: 12px var(--font-mono); line-height: normal; text-decoration: none; white-space: nowrap; }
.beta-reader .sentence-pill:hover:not(.selected) { border-color: #555560; color: var(--ink, #f1efe8); text-decoration: none; }
.beta-reader .sentence-pill.selected { border-color: #2a2450; background: #17142a; color: #a08cff; }
.beta-reader .sentence-pill.is-excluded { opacity: 0.6; }
.beta-home-controls .beta-search-options-bar { margin: 0; gap: 8px; }
/* For You keeps sorting beside the time window, without a separate results row. */
.beta-home-controls .reader-for-you-options { flex-wrap: wrap; max-width: 100%; }
.beta-reader .beta-export { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; height: 26px; font: 12.5px var(--font-sans); padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: #c9c9d0; text-decoration: none; }
.beta-reader .beta-export.reader-mono { font: 12px var(--font-mono); }
html.light .beta-reader .beta-export { color: #4a4a52; }
.beta-reader .search-window-toggle button { height: 26px; padding: 0 10px; font-size: 12.5px; font-weight: 500; background: transparent; color: #a1a1aa; }
.beta-reader .search-window-toggle button.active, .beta-sort-toggle button.active { background: #2a2450; color: #ece8ff; }
.beta-reader .reader-home-switch { display: inline-flex; align-items: center; flex: 0 0 32px; width: 32px; min-width: 32px; height: 18px; border: 0; border-radius: 9px; padding: 2px; background: #2f2f38; cursor: pointer; }
.beta-reader .reader-home-switch[aria-checked="true"] { background: #6d5be6; }
.beta-reader .reader-home-switch > span { width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 120ms; }
.beta-reader .reader-home-switch[aria-checked="true"] > span { transform: translateX(14px); }
.beta-reader .reader-home-switch:disabled { cursor: wait; }
.beta-story { margin: 0; padding: 10px 12px; border-radius: 0; border-top: 0; border-bottom: 1px solid var(--line-faint); }
.beta-story:hover, .beta-story.keyboard-focused, .beta-story.keyboard-focused:hover { background: transparent; }
.beta-story.keyboard-focused.focus-engaged { background: #17132b; }
.beta-story.keyboard-focused::before { width: 3px; background: #a08cff; border-radius: 0; }
.beta-story > summary { align-items: center; gap: 12px; }
.beta-story-title { font-size: 15px; font-weight: 500; line-height: 1.3; margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Truncate the title text, never its ($)/(YouTube)/(PDF) markers: an ellipsis
   on the whole link hid the paywall marker on every long title. */
.beta-story-title-marked { display: flex; align-items: baseline; min-width: 0; }
.beta-story-title-marked > .beta-story-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beta-story-title-marked > .gated-marker { flex: none; white-space: pre; }
.beta-story-meta { gap: 10px; font: 12.5px/1.2 var(--font-mono); color: #8f8f98; }
.beta-story-domain { color: #c9c9d0; }
html.light .beta-story-domain { color: #3a3a42; }
.beta-story-reading-time, .beta-story-interest { font: inherit; }
.beta-story-interest { color: #a08cff; }
.beta-story-side { display: flex; flex-direction: row; align-items: center; gap: 6px; position: relative; }
.beta-reader .reader-hide-control, .beta-reader .reader-expand-control { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 6px; color: #c9c9d0; background: #1c1c22; visibility: hidden; cursor: pointer; }
.beta-reader .reader-expand-control { width: 36px; height: 40px; color: #8f8f98; background: transparent; }
.beta-story.keyboard-focused .reader-hide-control, .beta-story.keyboard-focused .reader-expand-control { visibility: visible; }
@media (hover: hover) { .beta-story:hover .reader-hide-control, .beta-story:hover .reader-expand-control { visibility: visible; } }
.beta-chevron { width: 7px; height: 7px; flex-basis: 7px; margin: -4px 0 0; border-width: 1px; transition: transform 120ms ease, margin-top 120ms ease; }
.beta-story[open] .beta-chevron { margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  .beta-chevron, .beta-reader .reader-home-switch > span { transition: none; }
}
.beta-reader .reader-row-menu { display: none; }
.beta-reader .reader-popover { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; display: flex; flex-direction: column; gap: 4px; min-width: 170px; max-width: calc(100vw - 32px); padding: 8px; background: #17171d; color: #e8e8eb; border: 1px solid #303038; border-radius: 8px; box-shadow: 0 8px 24px #0005; font: 14px/1.5 var(--font-sans); }
.beta-reader .reader-popover > button, .beta-reader .reader-popover > a, .beta-reader .reader-popover .feed-item-action-btn { display: flex; gap: 10px; align-items: center; min-height: 36px; width: auto; padding: 6px 10px; border: 0; background: transparent; color: inherit; font: inherit; text-decoration: none; text-align: left; cursor: pointer; }
.beta-reader .reader-hidden-story { padding: 0 8px 0 15px; background: #101013; border-bottom: 1px solid var(--line-faint); color: #8f8f98; }
.beta-reader .reader-hidden-line { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 13px; }
.beta-reader .reader-hidden-desktop { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beta-reader .reader-hidden-line button { margin-left: auto; flex-shrink: 0; }
.beta-reader .reader-hidden-story button { box-sizing: border-box; height: 28px; padding: 0 11px; border: 1px solid #2a2a30; border-radius: 6px; background: #16161a; color: #c9c9d0; font: 13px var(--font-sans); white-space: nowrap; cursor: pointer; }
.beta-reader .reader-hide-prompt { padding: 0 4px 14px 0; font-size: 13px; color: #a1a1aa; }
.beta-reader .reader-hide-prompt p { margin: 0 0 8px; }
.beta-reader .reader-reason-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.beta-reader .reader-reason-buttons button, .beta-reader .reader-hide-prompt form button { box-sizing: border-box; height: 28px; padding: 0 11px; border: 1px solid #2a2a30; border-radius: 6px; background: #16161a; color: #c9c9d0; font: 13px var(--font-sans); white-space: nowrap; cursor: pointer; }
.beta-reader .reader-hide-prompt form button[type="submit"] { height: 34px; padding: 0 14px; border-color: #6d5be6; background: #6d5be6; color: #fff; font-size: 13.5px; font-weight: 600; }
.beta-reader .reader-hide-prompt form { display: flex; gap: 8px; align-items: center; }
.beta-reader .reader-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.beta-reader .reader-hide-prompt label { flex: 1; }
.beta-reader .reader-hide-prompt input { display: block; box-sizing: border-box; width: 100%; height: 34px; margin: 0; border: 1px solid #2a2a30; border-radius: 6px; background: #0b0b0d; color: #e8e8eb; padding: 0 12px; font: 13.5px var(--font-sans); }
.beta-reader .reader-hidden-mobile { display: none; }
.beta-reader .reader-results-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.beta-reader .reader-save-group { display: flex; flex: 0 0 auto; align-items: stretch; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.beta-reader .reader-save-group .beta-add-feed { border-radius: 0; border: 0; }
.beta-reader .reader-save-group label { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-left: 1px solid var(--line); font-size: 13px; color: #c9c9d0; white-space: nowrap; }
.beta-reader .reader-save-group .beta-add-feed { height: 32px; padding: 0 14px; font-size: 13.5px; }
.beta-reader .reader-results-copy button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: #a1a1aa; }
.beta-reader .reader-results-count { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12.5px var(--font-mono); color: #a1a1aa; text-align: right; }
.beta-reader .reader-desktop-sort { margin-left: auto; }
.beta-reader .reader-desktop-sort .beta-sort-toggle, .beta-reader .reader-mobile-sort .beta-sort-toggle { margin: 0; }
.beta-reader .reader-desktop-sort .beta-sort-toggle button, .beta-reader .reader-mobile-sort .beta-sort-toggle button { height: 26px; font-size: 12.5px; font-weight: 500; padding: 0 10px; white-space: nowrap; }
.beta-reader .reader-count-mobile, .beta-reader .reader-mobile-sort, .beta-reader .reader-results-filters { display: none; }
.beta-reader .reader-toast { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 12px; border: 1px solid #2a2450; border-radius: 6px; background: #17142a; color: #e8e8eb; font-size: 13px; }
.beta-reader .reader-toast a { color: #a08cff; }
.beta-reader .reader-toast button { margin-left: auto; background: none; color: inherit; border: 0; cursor: pointer; }
.beta-reader .reader-mono { font-family: var(--font-mono); }
.beta-reader .reader-feeds-search { box-sizing: border-box; height: 40px; color: #8f8f98; text-decoration: none; font-size: 15px; }
.beta-reader .reader-feeds-heading { display: flex; align-items: center; gap: 14px; margin: 20px 0 16px; }
.beta-reader .reader-feeds-heading h1 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0.01em; }
.beta-reader .reader-feeds-heading > a { color: #a1a1aa; font-size: 13px; text-decoration: none; }
.beta-reader .reader-feeds-heading > span { color: var(--muted); font-size: 12px; }
.beta-reader .reader-feeds-heading p { margin: 0 0 0 auto; color: var(--muted); font-size: 12px; }
.beta-reader .reader-feeds-window { display: none; }
.beta-reader .reader-feeds-section { display: flex; flex-wrap: wrap; align-items: baseline; margin: 22px 0; }
.beta-reader .reader-feeds-section h2 { margin: 0 0 12px 12px; text-transform: uppercase; font: 12px var(--font-mono); color: var(--muted); }
.beta-reader .reader-feeds-section > p { margin: 0 12px 12px auto; color: var(--muted); font-size: 12px; }
.beta-reader .reader-feed-row { display: flex; align-items: center; gap: 16px; width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 12px; border-bottom: 1px solid var(--line-faint); }
.beta-reader .reader-feed-kind { color: var(--muted); font-size: 12px; width: 12px; text-align: center; }
.beta-reader a.reader-feed-kind { display: inline-flex; justify-content: center; text-decoration: none; }
.beta-reader a.reader-feed-kind:hover, .beta-reader a.reader-feed-kind:focus-visible { color: var(--ink); }
.beta-reader .reader-feed-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.beta-reader .reader-feed-count { color: var(--muted); white-space: nowrap; font: 12px var(--font-mono); }
.beta-reader .reader-feed-links { display: flex; align-items: center; gap: 2px; }
.beta-reader .reader-feed-links a, .beta-reader .reader-feed-links button { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; box-sizing: border-box; border: 0; border-radius: 6px; background: transparent; color: #8f8f98; font-size: 11.5px; font-weight: 500; text-decoration: none; }
.beta-reader .reader-feed-delete { border: 0; background: none; color: var(--muted); padding: 4px; cursor: pointer; }
.beta-reader .reader-feed-menu { display: none; position: relative; }
.beta-reader .reader-deleted-feed { color: var(--muted); font-size: 14px; }
.beta-reader .reader-deleted-feed { background: #101013; font-size: 13px; }
.beta-reader .reader-deleted-feed button { margin-left: auto; height: 28px; padding: 0 11px; border: 1px solid #2a2a30; border-radius: 6px; background: #16161a; color: #c9c9d0; font-size: 13px; cursor: pointer; }
.modal-content.reader-auth-dialog { width: 440px; max-width: calc(100vw - 32px); background: #16161a; border-color: #2a2a30; border-radius: 12px; padding: 22px 28px 24px; }
.reader-auth-heading { margin-bottom: 16px; }
.reader-auth-heading h1 { font-size: 20px; text-wrap: balance; }
.reader-auth-done-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: #1f1a3a; color: #a08cff; }
.reader-auth-switch { font-size: 14px; }
.reader-auth-switch button { border: 0; background: none; color: #a08cff; padding: 0; font-weight: 600; }
.reader-auth-form input:not([type="checkbox"]) { height: 44px; padding: 0 14px; border-radius: 8px; background: #0f0f12; font-size: 15px; }
.reader-auth-password button { font-size: 13px; }
.reader-auth-help { font-size: 13px; }
.reader-auth-form input[aria-invalid="true"] { border-color: #ef7373; }
.reader-auth-submit { height: 44px; font-size: 15px !important; padding: 0 14px; border-radius: 8px; }
.reader-auth-terms { font-size: 12px; text-wrap: pretty; }
.beta-reader .reader-story-popover { gap: 2px; min-width: 150px; padding: 4px; font-size: 13px; }
.beta-reader .reader-story-popover > button, .beta-reader .reader-story-popover .feed-item-action-btn { gap: 8px; min-height: 30px; padding: 4px 8px; border-radius: 4px; }
.beta-reader .reader-story-popover > button:hover, .beta-reader .reader-story-popover .feed-item-action-btn:hover { background: #26262e; }
html.light .beta-reader .reader-story-popover > button:hover, html.light .beta-reader .reader-story-popover .feed-item-action-btn:hover { background: #f0ebff; }
html.light .reader-popover { background: #ffffff; color: #202024; border-color: #dedee4; }
html.light .beta-story.keyboard-focused.focus-engaged { background: #f0ebff; }
html.light .reader-hide-prompt input { background: #ffffff; color: #202024; border-color: #dedee4; }
html.light .beta-reader .reader-hidden-story, html.light .beta-reader .reader-deleted-feed { background: #f6f6f8; }
html.light .beta-reader .reader-hidden-story button:not([type="submit"]), html.light .beta-reader .reader-deleted-feed button { background: #ffffff; border-color: #dedee4; color: #3a3a42; }
html.light .beta-reader .reader-save-group label { color: #3a3a42; }
html.light .reader-toast { background: #f4f0ff; color: #202024; border-color: #d9d0ff; }
/* The spec is dark-only; these controls hardcode its dark surfaces. */
html.light .beta-reader .beta-pill.owned.selected, html.light .beta-reader .beta-add-feed.added { background: #f4f0ff; border-color: #d9d0ff; color: var(--accent); }
html.light .beta-reader .search-window-toggle button.active, html.light .beta-reader .beta-sort-toggle button.active { background: #ece8ff; color: #3b2fa0; }
/* The dark-first rules above hardcode pale greys for these controls; on a light page they read as disabled. */
html.light .beta-reader .search-window-toggle button:not(.active) { color: #4a4a52; }
html.light .beta-reader .reader-view-feeds { border-color: #d8d8de; color: #4a4a52; }
html.light .beta-reader .sentence-pill { border-color: #d8d8de; color: #4a4a52; background: transparent; }
html.light .beta-reader .sentence-pill:hover:not(.selected) { border-color: #b0b0b8; color: #111; }
html.light .beta-reader .sentence-pill.selected { background: #f4f0ff; border-color: #d9d0ff; color: var(--accent); }
html.light .beta-reader .reader-home-switch { background: #d8d8de; }
html.light .beta-reader .reader-home-switch[aria-checked="true"] { background: #6d5be6; }
html.light .beta-reader .reader-hide-control { background: #f4f4f6; color: #4a4a52; }
html.light .beta-reader .reader-reason-buttons button, html.light .beta-reader .reader-hide-prompt form button { background: #ffffff; border-color: #dedee4; color: #3a3a42; }
@media (max-width: 1050px) and (min-width: 701px) {
  .beta-reader .reader-hotkey-hint { gap: 6px; font-size: 11px; }
  .beta-reader .reader-hotkey-hint > span { display: inline-flex; }
  .beta-reader-nav-right { gap: 10px; }
}
@media (max-width: 700px) {
  .beta-reader { padding: 16px 16px 48px; }
  .beta-reader-nav, .beta-reader-nav:has(> .beta-search-bar) { flex-wrap: wrap; gap: 16px; margin-bottom: 12px; }
  .beta-reader-nav-left { flex: 1; }
  .beta-reader-brand { font-size: 20px; }
  .beta-reader-nav-right { margin: 0; min-height: 24px; }
  .beta-reader-nav .reader-hotkey-hint, .reader-desktop-theme, .beta-reader-nav .reader-desktop-account { display: none !important; }
  .beta-mobile-menu { display: flex; align-items: center; padding: 0; border: 0; background: none; color: var(--ink); }
  .beta-reader-nav > .beta-search-bar { flex: 1 0 100%; order: 3; min-height: 44px; padding: 6px 6px 6px 12px; }
  .beta-reader-nav > .beta-search-bar textarea { font-size: 16px; text-align: left; }
  .beta-filter-toggle { display: inline-flex !important; align-items: center; gap: 6px; }
  .beta-home-controls { display: none; }
  .beta-home-controls.open { display: flex; flex-wrap: wrap; gap: 12px; }
  .beta-home-controls.open .reader-chip-container { flex-basis: 100%; }
  .beta-home-controls .beta-export { display: none; }
  .beta-reader .reader-mobile-sort { display: block; }
  .beta-story { padding: 12px 10px; }
  .beta-story > summary { gap: 8px; align-items: flex-start; }
  .beta-story-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; line-height: 1.35; font-weight: 500; }
  .beta-story-title-marked { display: flex; align-items: flex-end; }
  .beta-story-title-marked > .beta-story-title-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .beta-story-meta { font-size: 12px; line-height: 1.5; gap: 4px 8px; margin-top: 4px; }
  .beta-story.keyboard-focused::before { display: none; }
  .beta-story.keyboard-focused.focus-engaged { background: transparent; }
  .beta-reader .reader-hide-control, .beta-reader .reader-expand-control { display: none; }
  .beta-reader .reader-row-menu { display: block; width: 24px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
  .beta-reader .reader-hidden-desktop, .beta-reader .reader-hide-help, .beta-reader .reader-other-desktop { display: none; }
  .beta-reader .reader-hidden-mobile, .beta-reader .reader-other-mobile { display: inline; }
  .beta-reader .reader-results-bar { gap: 6px; margin-bottom: 8px; }
  .beta-reader .reader-save-group .beta-add-feed { padding: 7px 10px; font-size: 12px; }
  .beta-reader .reader-save-group label { gap: 6px; padding: 0 8px; font-size: 11px; }
  .beta-reader .reader-results-count { text-align: right; font-size: 11px; }
  .beta-reader .reader-desktop-sort, .beta-reader .reader-results-copy, .beta-reader .reader-count-desktop { display: none; }
  .beta-reader .reader-count-mobile { display: inline; }
  .beta-reader .reader-results-filters { display: block; padding: 4px 0; margin: 0 0 4px auto; border: 0; background: none; color: #a08cff; font-size: 12px; }
  .beta-reader:has(.reader-feeds-page) > .beta-reader-nav { display: none; }
  .beta-reader .reader-feeds-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; position: relative; margin: 0 0 26px; }
  .beta-reader .reader-feeds-heading h1 { grid-row: 1; grid-column: 1 / -1; text-align: center; font-size: 16px; }
  .beta-reader .reader-feeds-heading > a { grid-row: 1; grid-column: 1; z-index: 1; width: 32px; font-size: 22px; }
  .beta-reader .reader-feeds-heading > a span { display: none; }
  .beta-reader .reader-feeds-heading > span { grid-row: 2; font-size: 12px; align-self: center; }
  .beta-reader .reader-feeds-window { display: block; grid-row: 2; justify-self: end; }
  .beta-reader .reader-feeds-heading p { grid-column: 1 / -1; font-size: 13px; margin: 0; }
  .beta-reader .reader-feeds-section { margin-top: 26px; }
  .beta-reader .reader-feeds-section h2 { margin-left: 4px; }
  .beta-reader .reader-feeds-section > p { order: 2; margin: 14px 4px 0; font-size: 12px; }
  .beta-reader .reader-feed-row { min-height: 56px; padding: 10px 4px; gap: 10px; }
  .beta-reader .reader-feed-name { font-size: 14px; }
  .beta-reader .reader-feed-count { font-size: 11px; }
  .beta-reader .reader-feed-links { display: none; }
  .beta-reader .reader-feed-menu { display: block; }
  .beta-reader .reader-feed-menu summary { cursor: pointer; list-style: none; color: var(--muted); font-size: 20px; }
  .beta-reader .reader-feed-menu summary::-webkit-details-marker { display: none; }
  .modal-content.reader-auth-dialog { inset: 0; width: 100%; max-width: none; height: 100dvh; padding: 16px; border: 0; border-radius: 0; background: #0b0b0d; }
  .reader-auth-heading h1 { font-size: 18px; }
}

.beta-reader .reader-desktop-sort .beta-sort-toggle, .beta-reader .reader-mobile-sort .beta-sort-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.beta-reader .reader-desktop-sort .beta-sort-toggle button, .beta-reader .reader-mobile-sort .beta-sort-toggle button { background: transparent; color: #a1a1aa; }
.beta-reader .reader-desktop-sort .beta-sort-toggle button.active, .beta-reader .reader-mobile-sort .beta-sort-toggle button.active { background: #2a2450; color: #ece8ff; }
.beta-reader .reader-save-group .beta-add-feed { border: 0; border-radius: 0; }
.beta-reader .reader-feed-name { color: var(--ink); }
.beta-reader .reader-feed-delete { color: var(--muted); }
.beta-reader .reader-popover a.beta-signin { background: #6d5be6; color: #fff; }
@media (max-width:700px) { .beta-reader .beta-mobile-menu { display: flex; padding: 0; color: var(--ink); } }
/* Once the right side is only the menu button, the search fits between it and
   the brand; a row of its own would strand the brand across empty space. Only
   narrow phones still need the full-width row. */
@media (max-width: 700px) and (min-width: 481px) {
  .beta-reader-nav, .beta-reader-nav:has(> .beta-search-bar) { flex-wrap: nowrap; }
  .beta-reader-nav-left { flex: 0 1 auto; }
  /* Zero basis: an auto basis sized the bar to its one-line prompt, which
     squeezed a feed's name down to "T…". The bar takes what the brand leaves. */
  .beta-reader-nav > .beta-search-bar { flex: 1 1 0; order: 0; min-width: 240px; }
}

.beta-reader .reader-shared-home { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
@media (min-width: 701px) { .beta-reader-nav .reader-hotkey-hint { display: flex; } }
/* Below 900px the hotkey hints squeeze the search bar; drop them first. */
@media (max-width: 900px) and (min-width: 701px) { .beta-reader-nav .reader-hotkey-hint { display: none; } }
/* A typed query needs the width more than the hints do: with them showing, the
   960px header left the search ~240px, and a wrapped query grew it three lines
   tall. Unfocused, show only the query's first line; focus reveals all of it. */
.beta-reader-nav:has(> .beta-search-bar textarea:not(:placeholder-shown)) .reader-hotkey-hint { display: none; }
.beta-reader-nav > .beta-search-bar:not(:focus-within) textarea { max-height: 1.5em; }
/* Focused, the full query drops down over the feed instead of growing the
   header: the negative margin takes the bar out of the row's height, and the
   brand's min-height holds the row at the unfocused bar's 40px. Phones that
   give the search its own row keep growing in flow. */
@media (min-width: 481px) {
  .beta-reader-nav:has(> .beta-search-bar) > .beta-reader-nav-left { min-height: 40px; }
  .beta-reader-nav > .beta-search-bar:focus-within { align-self: flex-start; align-items: flex-start; margin-bottom: -100vh; position: relative; z-index: 30; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); }
  .beta-reader-nav > .beta-search-bar:focus-within > button:not(.beta-filter-toggle), .beta-reader-nav > .beta-search-bar:focus-within > .beta-search-icon { display: inline-flex; align-items: center; justify-content: center; height: 1.5rem; }
  .beta-reader-nav > .beta-search-bar:focus-within textarea { max-height: 12em; overflow-y: auto; }
}

/* Feed switcher: the button after the "TLDR" brand on Home and feed pages
   opens a filterable list of every feed the reader has. Popover colours come from .reader-popover
   (opaque in both themes). */
.feed-switcher { position: relative; min-width: 0; max-width: 100%; }
.beta-reader .feed-switcher-button { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; margin: -2px -8px; padding: 2px 8px; border: 0; border-radius: 6px; background: transparent; font-family: inherit; line-height: inherit; text-align: left; cursor: pointer; transition: background 120ms ease; }
.beta-reader .feed-switcher-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beta-reader .feed-switcher-button svg { flex-shrink: 0; color: var(--muted, #b4b2a9); transition: color 120ms ease; }
.beta-reader .feed-switcher-button:hover, .beta-reader .feed-switcher-button[aria-expanded="true"] { background: rgba(255, 255, 255, 0.08); }
.beta-reader .feed-switcher-button:hover svg, .beta-reader .feed-switcher-button[aria-expanded="true"] svg { color: var(--ink, #f1efe8); }
html.light .beta-reader .feed-switcher-button:hover, html.light .beta-reader .feed-switcher-button[aria-expanded="true"] { background: rgba(0, 0, 0, 0.06); }
.beta-reader .feed-switcher-popover { left: 0; right: auto; width: 320px; gap: 6px; border-radius: 15px; }
.beta-reader .feed-switcher-filter { box-sizing: border-box; width: 100%; height: 36px; padding: 0 10px; border: 1px solid #303038; border-radius: 6px; background: #0f0f12; color: inherit; font: inherit; }
.beta-reader .feed-switcher-filter:focus { outline: none; border-color: #6d5be6; }
.beta-reader .feed-switcher-list { max-height: min(360px, 60vh); overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.beta-reader .feed-switcher-item { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 10px; border-radius: 6px; color: inherit; text-decoration: none; }
.beta-reader .feed-switcher-item.active { background: #26262e; }
.beta-reader .feed-switcher-item.inactive { color: #8f8f98; }
.beta-reader .feed-switcher-item.current .feed-switcher-name { font-weight: 600; }
.beta-reader .feed-switcher-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beta-reader .feed-switcher-badge { flex-shrink: 0; font: 11px var(--font-mono, monospace); color: #a08cff; }
.beta-reader .feed-switcher-note { margin: 4px 10px; font-size: 13px; color: #8f8f98; }
.beta-reader .feed-switcher-footer { display: flex; justify-content: space-between; padding: 6px 10px 0; border-top: 1px solid #303038; font-size: 13px; }
.beta-reader .feed-switcher-footer a { color: #a08cff; text-decoration: none; }
html.light .beta-reader .feed-switcher-filter { background: #ffffff; border-color: #dedee4; }
html.light .beta-reader .feed-switcher-item.active { background: #f0ebff; }
html.light .beta-reader .feed-switcher-item.inactive { color: #6b6b75; }
html.light .beta-reader .feed-switcher-footer { border-color: #dedee4; }
html.light .beta-reader .feed-switcher-badge, html.light .beta-reader .feed-switcher-footer a { color: #5b48d6; }
/* On phones the switcher sits after the TLDR link, so anchor its full-width popover to the brand slot, which starts at the page gutter. */
@media (max-width: 640px) {
  .beta-reader-nav-left { position: relative; }
  .beta-reader-nav-left .feed-switcher { position: static; }
  .beta-reader .feed-switcher-popover { width: calc(100vw - 32px); }
}

/* Give Home and feed pages the same brand/query bases, independent of their
   text. Let the brand shrink when the search minimum and account controls
   need more room, keeping the query aligned without overflowing the header. */
@media (min-width: 701px) {
  .beta-reader-nav-left { flex: 0 1 240px; width: 240px; }
  .beta-reader-nav > .beta-search-bar { flex-basis: 240px; }
}
.beta-reader-nav-left { gap: 0; }
.beta-reader-nav-left > .beta-reader-brand { flex-shrink: 0; }
.beta-reader-nav-left .feed-switcher-button { margin: -2px 0; padding: 2px 6px 2px 4px; }
/* A feed's prompt fills the query bar Home uses for search. */
/* `.beta-reader button` strips borders and backgrounds; restore the bar's. */
.beta-reader button.reader-feed-prompt-bar { box-sizing: border-box; border: 1px solid var(--line, #444441); background: var(--panel-strong, #161616); color: var(--ink); text-align: left; cursor: pointer; }
.beta-reader button.reader-feed-prompt-bar:hover, .beta-reader button.reader-feed-prompt-bar[aria-expanded="true"] { border-color: var(--accent); }
.beta-reader .reader-feed-prompt-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 1.5; }
.beta-reader .reader-feed-context { flex: 1; min-width: 0; }
.beta-reader .reader-feed-controls .beta-sort-toggle, .beta-reader .reader-for-you-options .beta-sort-toggle { margin: 0; display: inline-flex; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.beta-reader .reader-feed-controls .beta-sort-toggle button, .beta-reader .reader-for-you-options .beta-sort-toggle button { height: 26px; padding: 0 10px; font-size: 12.5px; font-weight: 500; white-space: nowrap; background: transparent; color: #a1a1aa; }
.beta-reader .reader-feed-controls .beta-sort-toggle button.active, .beta-reader .reader-for-you-options .beta-sort-toggle button.active { background: #2a2450; color: #ece8ff; }
html.light .beta-reader .reader-feed-controls .beta-sort-toggle button:not(.active), html.light .beta-reader .reader-for-you-options .beta-sort-toggle button:not(.active) { color: #4a4a52; }
html.light .beta-reader .reader-feed-controls .beta-sort-toggle button.active, html.light .beta-reader .reader-for-you-options .beta-sort-toggle button.active { background: #ece8ff; color: #3b2fa0; }
@media (max-width: 700px) {
  /* Home folds its chips behind the filter toggle; a feed's row is short enough to stay. */
  .beta-home-controls.reader-feed-controls { display: flex; flex-wrap: wrap; gap: 12px; }
  .beta-reader .reader-feed-controls .reader-feed-context { flex-basis: 100%; }
  .beta-reader .reader-feed-controls .beta-search-options-bar { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
  .beta-reader .reader-feed-prompt-text { font-size: 16px; }
}

/* Decision model scoring evaluations (first-pass gate eval runs and summaries). */
.first-pass-gate-evals { width: 100%; }
.decision-model-eval-hint { color: var(--muted); font-size: .82rem; line-height: 1.5; margin-left: 8px; }
.decision-model-eval-buttons { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.decision-model-eval-runs { display: flex; flex-direction: column; gap: 5px; margin: 0 0 12px; font-size: .82rem; max-width: 100%; }
.decision-model-eval-runs select { max-width: 100%; padding: 6px 8px; border: 1px solid #dedede; border-radius: 4px; color: #262626; background: #ffffff; }
.decision-model-eval-sweep { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .8rem; margin: 8px 0; }
.decision-model-eval-sweep th, .decision-model-eval-sweep td { padding: 3px 8px; border: 1px solid var(--line); text-align: right; white-space: nowrap; }
.decision-model-eval-sweep tbody th, .decision-model-eval-sweep thead th:first-child { text-align: left; }
.first-pass-gate-evals [role="alert"] { color: #b91c1c; }
.decision-model-eval-summary { margin: 12px 0; padding: 12px; border: 1px solid var(--line); border-radius: 6px; display: flex; flex-direction: column; gap: 10px; }
.decision-model-eval-summary [role="alert"] { color: #b91c1c; margin: 0; }
.decision-model-eval-summary-head { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: .9rem; }
.decision-model-eval-live { padding: 0 6px; border: 1px solid var(--accent); border-radius: 999px; font-size: .68rem; color: var(--accent); text-transform: uppercase; }
.decision-model-eval-compare { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .82rem; }
.decision-model-eval-compare select { max-width: 100%; padding: 4px 8px; border: 1px solid #dedede; border-radius: 4px; color: #262626; background: #ffffff; }
.decision-model-eval-metrics { display: block; overflow-x: auto; border-collapse: collapse; font-size: .85rem; width: max-content; max-width: 100%; }
.decision-model-eval-metrics th, .decision-model-eval-metrics td { padding: 4px 12px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.decision-model-eval-metrics tbody th, .decision-model-eval-metrics thead th { text-align: left; font-weight: 600; }
.decision-model-eval-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.decision-model-eval-filters button { padding: 4px 12px; font-size: .82rem; }
.decision-model-eval-details summary { cursor: pointer; font-size: .82rem; color: var(--muted); }
.decision-model-eval-details .decision-model-eval-hint { margin-left: 0; }

/* ===================================================================   sentence.tldr.fm design explorations (/d1 ... /d8, SentenceDesignsPage).
   Shared principles: sentences set at 17-23px with 1.45-1.6 leading and a
   55-75 character measure; ragged right, never justified; `text-wrap: pretty`
   against one-word last lines; every text color >= 4.5:1 on its background,
   and no pure black-on-white or white-on-black (halation in dark mode).
   Each design sets its palette and faces as --sd-* variables on .sd-dN.
   Fonts are self-hosted (CSP font-src 'self'), all SIL Open Font License.
   ========================================================================== */
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/newsreader-latin-wght-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/assets/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/assets/fonts/source-serif-4-latin-wght-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/assets/fonts/literata-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("/assets/fonts/literata-latin-wght-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/assets/fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* --- Shared base ---------------------------------------------------------- */
.sd {
  --sd-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sd-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  background: var(--sd-bg);
  color: var(--sd-ink);
  font-family: var(--sd-body);
  font-kerning: normal;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
.sd-page { max-width: var(--sd-max, 760px); margin: 0 auto; padding: var(--sd-top, 40px) var(--sd-gutter, 24px) 64px; box-sizing: border-box; }
.sd-sentence { margin: 0; text-wrap: pretty; hanging-punctuation: first; overflow-wrap: break-word; }
.sd-list { list-style: none; margin: 0; padding: 0; }
.sd-num { display: none; }
.sd-results.is-loading { opacity: 0.45; transition: opacity 120ms ease; }
.sd-status { color: var(--sd-muted); font-family: var(--sd-mono); font-size: 13px; }
.sd a { color: inherit; }

.sd-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: var(--sd-controls-gap, 28px); }
.sd-search { flex: 1 1 260px; margin: 0; }
.sd-search input {
  width: 100%; box-sizing: border-box; margin: 0; padding: 10px 12px;
  font: inherit; font-size: 16px; line-height: 1.4;
  color: var(--sd-ink); background: var(--sd-field, transparent);
  border: 1px solid var(--sd-rule); border-radius: 0; outline: none; box-shadow: none;
  -webkit-appearance: none; appearance: none;
}
.sd-search input::placeholder { color: var(--sd-muted); opacity: 1; }
.sd-search input:focus { border-color: var(--sd-accent); box-shadow: 0 0 0 1px var(--sd-accent); }

.sd .search-window-toggle { border: 1px solid var(--sd-rule); border-radius: 0; background: transparent; }
.sd .search-window-toggle button {
  padding: 9px 12px; border: 0; border-right: 1px solid var(--sd-rule); border-radius: 0;
  background: transparent; color: var(--sd-muted);
  font-family: var(--sd-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em;
}
.sd .search-window-toggle button:last-child { border-right: 0; }
.sd .search-window-toggle button:hover:not(.active):not(:disabled) { background: transparent; color: var(--sd-ink); }
.sd .search-window-toggle button.active { background: var(--sd-ink); color: var(--sd-bg); }

/* Title (gives way first), domain (only when very narrow), age (never). */
.sd-meta { display: flex; align-items: baseline; gap: 10px; min-width: 0; margin-top: 8px; color: var(--sd-muted); text-decoration: none; font-family: var(--sd-meta-font, var(--sd-mono)); font-size: var(--sd-meta-size, 13px); line-height: 1.4; }
.sd-meta-title, .sd-meta-domain { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-meta-title { flex: 0 100 auto; max-width: 34rem; color: var(--sd-title, var(--sd-muted)); }
.sd-meta-domain { flex: 0 0 auto; max-width: 40%; }
.sd-meta-age { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sd-meta:hover .sd-meta-title { color: var(--sd-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.sd-index { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--sd-rule); font-family: var(--sd-mono); font-size: 12px; color: var(--sd-muted); }
.sd-index a { text-decoration: none; }
.sd-index a:hover, .sd-index a[aria-current] { color: var(--sd-ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .sd-page { padding: 24px 16px 48px; }
  .sd-meta { flex-wrap: wrap; row-gap: 2px; }
  .sd-meta-title { flex: 1 1 100%; max-width: 100%; }
  .sd-meta-domain { max-width: 70%; }
}

/* --- d1 Ledger: a table, light. Sentence widest, then article, source, age. */
.sd-d1 {
  --sd-bg: #FAFAF7; --sd-ink: #16181D; --sd-muted: #575D69; --sd-rule: #E2E0D9; --sd-accent: #1F45C8; --sd-field: #FFFFFF;
  --sd-body: var(--sd-sans); --sd-max: 1180px;
}
.sd-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sd-col-title { width: 24%; }
.sd-col-domain { width: 10.5rem; }
.sd-col-age { width: 8.5rem; }
.sd-table th {
  position: sticky; top: 0; z-index: 1; background: var(--sd-bg);
  padding: 10px 14px 8px; text-align: left; border-bottom: 1px solid var(--sd-ink);
  font-family: var(--sd-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sd-muted);
}
.sd-table th:last-child, .sd-cell-age { text-align: right; }
.sd-table td { padding: 13px 14px 14px; border-bottom: 1px solid var(--sd-rule); vertical-align: top; }
.sd-table tbody tr:hover td { background: #F2F1EC; }
.sd-cell-sentence { font-size: 16px; line-height: 1.55; text-wrap: pretty; hanging-punctuation: first; }
.sd-cell-title { font-size: 14px; line-height: 1.45; }
.sd-cell-title a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; }
.sd-cell-title a:hover { color: var(--sd-accent); text-decoration: underline; text-underline-offset: 3px; }
.sd-cell-domain, .sd-cell-age { font-family: var(--sd-mono); font-size: 12.5px; line-height: 1.6; color: var(--sd-muted); }
.sd-cell-domain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-cell-age { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .sd-table, .sd-table tbody { display: block; }
  .sd-table colgroup, .sd-table thead { display: none; }
  .sd-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--sd-rule); }
  .sd-table td { padding: 0; border: 0; }
  .sd-table tbody tr:hover td { background: transparent; }
  .sd-cell-sentence { grid-column: 1 / -1; margin-bottom: 6px; }
  .sd-cell-title a { -webkit-line-clamp: 1; color: var(--sd-muted); }
  .sd-cell-title, .sd-cell-domain, .sd-cell-age { font-size: 12.5px; }
}

/* --- d2 Broadsheet: warm newsprint, light. Numbered, serif, cited titles. */
.sd-d2 {
  --sd-bg: #F4EFE4; --sd-ink: #1C1A16; --sd-muted: #5F584B; --sd-title: #3A352C; --sd-rule: #D6CDBB; --sd-accent: #A8261D; --sd-field: transparent;
  --sd-body: "Newsreader", "Iowan Old Style", Georgia, serif; --sd-max: 720px; --sd-top: 56px;
  --sd-meta-font: "Newsreader", Georgia, serif; --sd-meta-size: 15px;
}
.sd-d2 .sd-search input { border: 0; border-bottom: 1px solid var(--sd-ink); padding: 8px 0; font-size: 19px; font-style: italic; }
.sd-d2 .sd-search input:focus { box-shadow: none; border-bottom-color: var(--sd-accent); }
.sd-d2 .sd-list { border-top: 3px double var(--sd-ink); }
.sd-d2 .sd-item { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); padding: 22px 0 20px; border-bottom: 1px solid var(--sd-rule); }
.sd-d2 .sd-num { display: block; padding-top: 5px; color: var(--sd-accent); font-size: 15px; font-variant-numeric: oldstyle-nums tabular-nums; }
.sd-d2 .sd-sentence { font-size: 21px; line-height: 1.5; font-weight: 410; }
.sd-d2 .sd-meta-title { font-style: italic; }
.sd-d2 .sd-meta-domain { font-variant-caps: all-small-caps; letter-spacing: 0.05em; }
.sd-d2 .sd-meta-age { font-variant-numeric: oldstyle-nums tabular-nums; }
.sd-d2 .search-window-toggle button { font-family: "Newsreader", Georgia, serif; font-size: 15px; font-weight: 500; letter-spacing: 0; }
@media (max-width: 640px) {
  .sd-d2 .sd-item { grid-template-columns: 1.8rem minmax(0, 1fr); }
  .sd-d2 .sd-sentence { font-size: 19px; }
}

/* --- d3 Night desk: dark, blue-black. Atkinson Hyperlegible; 1.0s marked amber. */
.sd-d3 {
  --sd-bg: #0F1318; --sd-ink: #D9DEE4; --sd-muted: #8D98A6; --sd-title: #B6BFCA; --sd-rule: #252C35; --sd-accent: #E2A93B; --sd-field: #151A21;
  --sd-body: "Atkinson Hyperlegible", var(--sd-sans); --sd-max: 740px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.sd-d3 .sd-item { position: relative; padding: 18px 0 18px 20px; border-bottom: 1px solid var(--sd-rule); }
.sd-d3 .sd-item::before { content: ""; position: absolute; left: 0; top: 24px; width: 3px; height: 1.05em; background: #3A4452; }
.sd-d3 .sd-item[data-score="1.0"]::before { background: var(--sd-accent); }
.sd-d3 .sd-sentence { font-size: 19px; line-height: 1.6; letter-spacing: 0.005em; }
.sd-d3 .sd-meta-title { font-family: "Atkinson Hyperlegible", sans-serif; font-size: 14px; }
.sd-d3 .search-window-toggle button.active { background: var(--sd-accent); color: #0F1318; }

/* --- d4 Margin notes: light, generous margins; the citation sits in the margin. */
.sd-d4 {
  --sd-bg: #FCFCFA; --sd-ink: #141414; --sd-muted: #5C5C57; --sd-rule: #E4E4DE; --sd-accent: #8A1C1C; --sd-field: #FFFFFF;
  --sd-body: "Source Serif 4", "Iowan Old Style", Georgia, serif; --sd-max: 1120px; --sd-top: 80px; --sd-gutter: 48px; --sd-controls-gap: 56px;
}
.sd-d4 .sd-controls, .sd-d4 .sd-margin-list, .sd-d4 .sd-status { margin-left: clamp(0px, 9vw, 128px); }
.sd-d4 .sd-controls { max-width: 36em; }
.sd-d4 .sd-margin-item { display: grid; grid-template-columns: minmax(0, 34em) 15rem; column-gap: 3.5rem; padding-bottom: 2.75rem; }
.sd-d4 .sd-sentence { font-size: 20px; line-height: 1.58; }
.sd-d4 .sd-sidenote { display: flex; flex-direction: column; gap: 3px; padding: 4px 0 0 14px; border-left: 1px solid var(--sd-rule); text-decoration: none; font-family: var(--sd-sans); font-size: 13px; line-height: 1.45; color: var(--sd-muted); }
.sd-d4 .sd-sidenote-title { color: #2E2E2B; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sd-d4 .sd-sidenote:hover .sd-sidenote-title { color: var(--sd-accent); text-decoration: underline; text-underline-offset: 3px; }
.sd-d4 .sd-sidenote-source { font-family: var(--sd-mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-d4 .sd-index { margin-left: clamp(0px, 9vw, 128px); }
@media (max-width: 900px) {
  .sd-d4 { --sd-top: 40px; --sd-gutter: 28px; --sd-controls-gap: 32px; }
  .sd-d4 .sd-margin-item { grid-template-columns: minmax(0, 1fr); padding-bottom: 2rem; }
  .sd-d4 .sd-sidenote { margin-top: 10px; padding-top: 0; }
  .sd-d4 .sd-sidenote-title { -webkit-line-clamp: 1; }
}
@media (max-width: 640px) {
  .sd-d4 .sd-sentence { font-size: 18.5px; }
  .sd-d4 .sd-controls, .sd-d4 .sd-margin-list, .sd-d4 .sd-status, .sd-d4 .sd-index { margin-left: 0; }
}

/* --- d5 Signal: dark green, cream type; the left rule's color is the score. */
.sd-d5 {
  --sd-bg: #0E2A21; --sd-ink: #EDE6D4; --sd-muted: #A9BEB1; --sd-title: #D5CDB8; --sd-rule: #21443A; --sd-accent: #F0B23A; --sd-field: #113226;
  --sd-body: "Literata", Georgia, serif; --sd-meta-font: var(--sd-sans); --sd-max: 760px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.sd-d5 .sd-item { position: relative; padding: 20px 0 20px 22px; border-bottom: 1px solid var(--sd-rule); }
.sd-d5 .sd-item::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 4px; background: #2E5A4A; }
.sd-d5 .sd-item[data-score="1.0"]::before { background: var(--sd-accent); }
.sd-d5 .sd-item[data-score="0.8"]::before { background: #6FA58B; }
.sd-d5 .sd-sentence { font-size: 19.5px; line-height: 1.6; font-weight: 380; }
.sd-d5 .sd-meta-domain { color: #E3C98D; }
.sd-d5 .search-window-toggle button.active { background: var(--sd-accent); color: #0E2A21; }

/* --- d6 Long read: warm paper, large type, one column, a reading position. */
.sd-d6 {
  --sd-bg: #F6F0E4; --sd-ink: #2A231A; --sd-muted: #6A5E4F; --sd-title: #4A4033; --sd-rule: #E2D8C5; --sd-accent: #B9501C; --sd-field: #FBF7EF;
  --sd-body: "Literata", Georgia, serif; --sd-meta-font: var(--sd-sans); --sd-meta-size: 14px; --sd-max: 690px; --sd-top: 64px;
}
.sd-d6 .sd-keys { margin: -12px 0 24px; font-family: var(--sd-mono); font-size: 12px; color: var(--sd-muted); }
.sd-d6 .sd-keys kbd { display: inline-block; min-width: 1.4em; margin: 0 4px 0 10px; padding: 1px 5px; border: 1px solid var(--sd-rule); background: var(--sd-field); font: inherit; text-align: center; color: var(--sd-ink); }
.sd-d6 .sd-keys kbd:first-child { margin-left: 0; }
.sd-d6 .sd-item { position: relative; padding: 26px 0; scroll-margin: 30vh; }
.sd-d6 .sd-item + .sd-item { border-top: 1px solid var(--sd-rule); }
.sd-d6 .sd-item.is-current::before { content: ""; position: absolute; left: -24px; top: 36px; width: 4px; height: 1.25em; background: var(--sd-accent); }
.sd-d6 .sd-sentence { font-size: 23px; line-height: 1.6; }
@media (max-width: 640px) {
  .sd-d6 .sd-sentence { font-size: 20px; }
  .sd-d6 .sd-item.is-current::before { left: -12px; top: 32px; width: 3px; }
  .sd-d6 .sd-keys { display: none; }
}

/* --- d7 By article: dark graphite. The article heads; its sentences follow. */
.sd-d7 {
  --sd-bg: #191917; --sd-ink: #EAE7E0; --sd-muted: #9B978D; --sd-rule: #2E2D2A; --sd-accent: #7FC8B6; --sd-field: #201F1D;
  --sd-body: var(--sd-sans); --sd-max: 760px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.sd-d7 .sd-group { padding: 24px 0 14px; border-bottom: 1px solid var(--sd-rule); }
.sd-d7 .sd-group-head { display: flex; flex-direction: column; gap: 3px; text-decoration: none; }
.sd-d7 .sd-group-title { font-size: 15px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sd-d7 .sd-group-head:hover .sd-group-title { color: var(--sd-accent); }
.sd-d7 .sd-group-source { font-family: var(--sd-mono); font-size: 12.5px; color: var(--sd-muted); }
.sd-d7 .sd-group-sentences { list-style: none; margin: 14px 0 0; padding: 0; }
.sd-d7 .sd-group-sentences li { margin: 0 0 12px; padding-left: 16px; border-left: 2px solid #3F6D63; font-family: "Source Serif 4", Georgia, serif; font-size: 18.5px; line-height: 1.55; text-wrap: pretty; hanging-punctuation: first; }
.sd-d7 .search-window-toggle button.active { background: var(--sd-accent); color: #191917; }

/* --- d8 Contact sheet: light, a hairline grid for scanning many at once. */
.sd-d8 {
  --sd-bg: #ECEEED; --sd-ink: #141616; --sd-muted: #565D5A; --sd-title: #2E3432; --sd-rule: #D2D6D4; --sd-accent: #2B3FD3; --sd-field: #FFFFFF;
  --sd-body: var(--sd-sans); --sd-meta-size: 12.5px; --sd-max: 1440px;
}
.sd-d8 .sd-controls { max-width: 760px; }
.sd-d8 .sd-sheet { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1px; background: var(--sd-rule); border: 1px solid var(--sd-rule); }
.sd-d8 .sd-sheet-cell { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 16px 18px 14px; background: #F7F8F7; }
.sd-d8 .sd-sheet-cell:hover { background: #FFFFFF; }
.sd-d8 .sd-sentence { font-size: 16px; line-height: 1.5; }
.sd-d8 .sd-meta { margin-top: 0; flex-wrap: wrap; row-gap: 2px; }
.sd-d8 .sd-meta-title { flex: 1 1 100%; max-width: 100%; }
.sd-d8 .sd-meta-domain { max-width: 70%; }
.sd-d8 .sd-meta:hover .sd-meta-title { color: var(--sd-accent); }

/* Admin eval corpus browser */
.eval-browser { font-size: 1.125rem; line-height: 1.55; margin: 0 auto; padding-bottom: 48px; }
.eval-muted, .eval-case-count, .eval-panel > p { color: var(--muted); font-size: 1rem; }
.eval-browser label { display: flex; flex-direction: column; gap: 6px; font-size: 1rem; font-weight: 600; }
.eval-browser input, .eval-browser select, .eval-browser textarea { box-sizing: border-box; max-width: 100%; padding: 9px 10px; color: #172033; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 5px; font: inherit; }
.eval-browser textarea { width: 100%; resize: vertical; line-height: 1.5; }
.eval-browser button { cursor: pointer; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; font-size: 1rem; }
.eval-browser button:hover:not(:disabled) { border-color: var(--accent); }
.eval-browser .primary-button { background: var(--accent); color: #ffffff; }
.eval-browser button:disabled { cursor: default; opacity: .5; }
.eval-toolbar { display: flex; align-items: end; gap: 16px; margin: 24px 0 12px; flex-wrap: wrap; }
.eval-toolbar > label:first-child { flex: 0 1 280px; }
.eval-toolbar .eval-case-nav { margin: 0; }
.eval-case-finder { position: relative; flex: 1 1 320px; min-width: 0; }
.eval-case-finder input { width: 100%; }
.eval-case-results { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 60vh; overflow-y: auto; padding: 4px 8px 8px; background: #ffffff; color: #172033; border: 1px solid #cbd5e1; border-radius: 6px; box-shadow: 0 8px 24px rgba(15, 23, 42, .18); }
.eval-case-results ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.eval-case-results .eval-case-count { margin: 6px 4px; }
.eval-browser .eval-case-results button { width: 100%; display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 8px 10px; border: 1px solid transparent; background: #ffffff; color: #172033; overflow-wrap: anywhere; }
.eval-browser .eval-case-results button:hover, .eval-browser .eval-case-results button:focus { border-color: #8aa9d7; background: #eef4fc; }
.eval-case-results small { color: #596579; }
.eval-catalog { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 24px; }
.eval-type-card { display: flex; flex-direction: column; gap: 10px; text-align: left; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.eval-type-card:hover { border-color: #59769d; }
.eval-type-card strong { font-size: 1.25rem; }
.eval-type-heading, .eval-editor-title { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin: 24px 0 16px; }
.eval-type-heading h2, .eval-editor-title h3 { margin: 0 0 8px; }
.eval-type-heading form { width: 100%; display: grid; gap: 12px; }
.eval-case-count, .eval-case-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0; }
.eval-detail { min-width: 0; border-top: 1px solid var(--line); padding-top: 20px; }
.eval-toolbar > .eval-status-filter { flex: 0 0 150px; }
.eval-draft-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid #946b30; border-radius: 4px; color: #d6a75c; font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.eval-case-results .eval-draft-badge { color: #7a5418; }
.eval-status-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 1rem; }
.eval-status-bar .eval-draft-badge { margin-left: 0; }
.eval-status-bar button { margin-left: auto; }
.eval-status-bar.is-draft { border-color: #946b30; }
.eval-actions { display: flex; gap: 8px; flex-shrink: 0; }
.eval-editor-title code { overflow-wrap: anywhere; }
.eval-panels { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.eval-panel { min-width: 0; border: 1px solid var(--line); border-top: 3px solid #3b749d; padding: 16px; border-radius: 6px; background: var(--panel); color: var(--ink); }
.eval-expected { grid-column: 1 / -1; }
.eval-html-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.eval-html-toolbar > span { font-size: 1rem; font-weight: 600; text-transform: capitalize; color: var(--muted); }
.eval-html-toolbar button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.eval-html-preview { width: 100%; height: 480px; border: 1px solid var(--line); border-radius: 4px; margin-top: 6px; background: #ffffff; }
.eval-private { border-top-color: #946b30; background: var(--panel); }
.eval-panel > h3 { margin: 0; }
.eval-field { margin: 12px 0; min-width: 0; }
.eval-field > span, .eval-fields legend { font-size: 1rem; font-weight: 600; text-transform: capitalize; color: var(--muted); }
.eval-field pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 1rem/1.6 ui-monospace, monospace; margin: 6px 0; max-height: 480px; overflow-y: auto; }
.eval-fields { border: 1px solid var(--line); border-radius: 4px; min-width: 0; margin: 12px 0; padding: 4px 12px; }
.eval-browser .eval-checkbox { flex-direction: row; align-items: center; margin: 12px 0; }
.eval-error { padding: 12px; background: #fff0f0; color: #982c2c; border-radius: 6px; margin: 12px 0; }
.eval-import { width: min(760px, 94vw); max-height: 90vh; overflow: auto; }
.eval-import form { display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 1100px) { .eval-panels { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .eval-toolbar, .eval-type-heading, .eval-editor-title { flex-direction: column; align-items: stretch; }
  .eval-toolbar > label:first-child, .eval-case-finder { flex-basis: auto; }
  .eval-case-nav { font-size: 1rem; }
}
.eval-metadata-fields { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.eval-runs { margin: 0 0 20px; border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px; background: var(--panel); color: var(--ink); }
.eval-runs > summary { cursor: pointer; font-weight: 600; }
.eval-runs-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 12px 0; }
.eval-runs-heading p { margin: 0; }
.eval-run-table { width: 100%; border-collapse: collapse; font-size: 1rem; margin: 8px 0 16px; }
.eval-run-table th, .eval-run-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.eval-run-table tr[aria-selected="true"] { background: var(--accent-soft); }
.eval-run-table td button { padding: 2px 6px; }
.eval-run-table pre, .eval-run-detail pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 1rem/1.5 ui-monospace, monospace; max-height: 360px; overflow-y: auto; margin: 6px 0; }
.eval-run-detail { border-top: 1px solid var(--line); margin-top: 8px; }
.eval-run-metrics { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 12px; font-size: 1rem; }
.eval-run-metrics dt { color: var(--muted); text-transform: capitalize; }
.eval-run-metrics dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.eval-run-error { color: #982c2c; }

/* evals.tldr.fm: the eval browser on its own host (pages/evals/EvalsApp.tsx). */
.evals-site { font-size: 1.125rem; line-height: 1.55; }
.evals-site-header { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "title views account"; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
/* "Home / page name" is one breadcrumb: same size and weight, set apart by color and a muted slash only. */
.evals-site-title { grid-area: title; display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 1.125rem; font-weight: 600; }
.evals-site-home { color: var(--muted); text-decoration: none; white-space: nowrap; }
.evals-site-home:hover { color: var(--ink); }
.evals-site-home::after { content: "/" / ""; margin-left: 8px; color: var(--line-strong); }
.evals-site .evals-site-brand { margin: 0; font-weight: 600; font-size: inherit; line-height: inherit; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The account line and theme toggle never wrap: a squeezed header truncates the breadcrumb title instead. */
.evals-site-controls { grid-area: account; justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: 10px; white-space: nowrap; }
.evals-site-controls .reader-theme-toggle { width: 40px; height: 40px; }
/* The username and "Sign out" are one line of plain muted text; only hover marks Sign out as a control. */
.evals-site-account { display: flex; align-items: baseline; gap: 12px; font-size: 1rem; color: var(--muted); }
.evals-view-toggle { grid-area: views; display: flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.evals-view-toggle a { padding: 5px 12px; border-radius: 5px; font-size: 1rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
.evals-view-toggle a:hover { color: var(--ink); background: var(--panel-strong); }
.evals-view-toggle a.is-active { color: var(--ink); font-weight: 600; background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
@media (max-width: 860px) {
  .evals-site-header { grid-template-columns: 1fr auto; grid-template-areas: "title account" "views views"; }
  .evals-view-toggle { overflow-x: auto; }
  .evals-view-toggle a { flex: 1 0 auto; text-align: center; }
}
.evals-site-account button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.evals-site-account button:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* "Report or improve" is outlined like the theme toggle beside it: same height, border, radius and muted ink. */
.evals-site-feedback { height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-size: 1rem; cursor: pointer; transition: border-color 120ms cubic-bezier(.25, .46, .45, .94), color 120ms cubic-bezier(.25, .46, .45, .94); }
.evals-site-feedback:hover { border-color: var(--line-strong); color: var(--ink); }
.evals-sign-in { display: flex; flex-direction: column; gap: 12px; max-width: 360px; margin: 48px auto; }
.evals-sign-in h1 { margin: 0; font-size: 1.75rem; }
.evals-sign-in label { display: flex; flex-direction: column; gap: 6px; font-size: 1rem; font-weight: 600; }
.evals-sign-in input { padding: 9px 10px; color: #172033; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 5px; font: inherit; }
.evals-sign-in .primary-button { padding: 9px 12px; border: 0; border-radius: 5px; background: var(--accent); color: #ffffff; font: inherit; font-weight: 600; cursor: pointer; }
.evals-spot-check { margin-bottom: 16px; }
.evals-spot-check > h2 { margin: 0 0 4px; font-size: 1.375rem; }
.evals-spot-score { margin: 0 0 12px; font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.evals-misses { margin: 8px 0 0; padding-left: 18px; font-size: 1rem; line-height: 1.6; }
.evals-site h1 { margin: 0 0 6px; font-size: 1.75rem; }
.evals-site h2 { margin: 20px 0 8px; font-size: 1.25rem; }
.evals-type-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.evals-type-list li { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.evals-type-list li:hover { border-color: var(--accent); }
.evals-type-list a { display: block; padding: 14px 16px; color: var(--ink); text-decoration: none; }
.evals-type-list strong { color: var(--accent); }
.evals-type-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.evals-run-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin: 0 0 12px; font-size: 1.125rem; }
.evals-run-summary > .eval-muted { font-size: inherit; }
.evals-run-summary > .evals-prompt[open] { flex-basis: 100%; }
.evals-run-baseline { margin: -4px 0 8px; font-size: 1.125rem; }
.evals-run-baseline .is-better { color: var(--success); }
.evals-run-baseline .is-worse { color: var(--danger); }
.evals-runs summary, .evals-prompt summary { cursor: pointer; }
.evals-runs .evals-run-status { white-space: nowrap; }
.eval-browser .evals-expando { padding: 0 2px; border: 0; background: none; color: var(--muted); font: inherit; }
.eval-browser .evals-expando:hover { color: var(--accent); }
.evals-active-mark { margin-left: 4px; color: var(--accent); font-weight: 700; cursor: help; }
.evals-runs .evals-run-detail > td { padding-top: 0; }
/* An expanded run's evals or prompt text must not widen the table and shift its columns. */
.evals-runs .evals-run-detail > td > * { width: 0; min-width: 100%; box-sizing: border-box; }
.evals-runs .evals-prompt p { margin: 4px 0 0; }
.evals-prompt h4 { margin: 10px 0 4px; font-size: 1rem; text-transform: uppercase; color: var(--muted); }
.evals-prompt pre { max-height: 320px; overflow: auto; white-space: pre-wrap; font-size: 1rem; padding: 8px; border: 1px solid var(--line); border-radius: 5px; }
.evals-run-evals { margin: 8px 0 0; padding-left: 18px; font-size: 1rem; line-height: 1.6; }
.evals-run-evals li.is-fail::marker { color: var(--danger); }
.evals-run-evals li.is-fail > a { font-weight: 600; }
.evals-run-evals li.is-near::marker { color: var(--yellow); }
.evals-reasoning { margin: 4px 0 0; color: var(--muted); font-size: 1rem; }
.evals-filter { max-width: 360px; margin-bottom: 8px; }
.evals-older-runs > summary { cursor: pointer; font-size: 1rem; margin-bottom: 8px; }
.evals-cases { width: auto; min-width: 0; }
/* At most half the screen, and never so wide the row outgrows the window (the other columns take ~44rem). */
.evals-case-title { max-width: clamp(12rem, calc(100vw - 68rem), 28rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.evals-cases td:not(.evals-case-title), .evals-cases th { white-space: nowrap; }
.eval-browser .evals-sort, .eval-browser .evals-notes-toggle { padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.eval-browser .evals-notes-toggle { color: var(--muted); }
.eval-browser .evals-sort:hover, .eval-browser .evals-notes-toggle:hover { color: var(--accent); }
.evals-cases .evals-notes-row > td { white-space: normal; }
/* Opening a row's notes must not widen the table and shift its columns. */
.evals-notes { width: 0; min-width: 100%; }
.evals-notes textarea { min-height: 96px; }
.evals-notes p { margin: 0 0 8px; }
.evals-notes-text { white-space: pre-wrap; line-height: 1.5; }
.evals-model-inputs th[scope="row"] { white-space: nowrap; }
.evals-model-inputs td { width: 30%; }
.evals-model-inputs td:last-child { width: auto; }
.evals-model-inputs code { font-size: 0.9rem; overflow-wrap: anywhere; }
.evals-input-sent { font-weight: 600; }
.evals-cases tr.is-focused > td { background: var(--accent-soft); }
.evals-cases tr.is-focused > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.evals-case-date { font-variant-numeric: tabular-nums; color: var(--muted); }
.evals-case-domain { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.evals-case-field { color: var(--muted); }
.evals-tiers { position: relative; display: flex; align-items: center; gap: 3px; }
.eval-browser .evals-score-range { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 1rem; font-weight: 600; }
.eval-browser .evals-score-range.is-compact { gap: 4px; }
/* Two range inputs stacked on one track: the inputs ignore the pointer and only their thumbs take it, so either thumb
   can be grabbed. The drawn track is inset by half a thumb, where a native thumb's centre stops at either end. */
.evals-score-range-track { position: relative; flex: none; width: 320px; height: 24px; }
.evals-score-range.is-compact .evals-score-range-track { width: 200px; }
/* The filled bar, over a tick at each stop the thumbs snap to (`--range-steps` intervals, the last tick drawn on its own). */
.evals-score-range-track::before { content: ""; position: absolute; top: 50%; left: 8px; right: 8px; height: 10px; transform: translateY(-50%);
  background:
    linear-gradient(to right, var(--line) var(--range-low), var(--accent) var(--range-low), var(--accent) var(--range-high), var(--line) var(--range-high)) center / 100% 4px no-repeat,
    repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc(100% / var(--range-steps))),
    linear-gradient(var(--line), var(--line)) right / 1px 100% no-repeat; }
/* No field padding/border/background from `.eval-browser input`: padding shortens the thumb's travel, so 5.00 stopped short of the right end. */
.eval-browser .evals-score-range-track input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent;
  pointer-events: none; -webkit-appearance: none; appearance: none; }
.evals-score-range-track input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.evals-score-range-track input[type="range"]::-moz-range-track { background: transparent; }
.evals-score-range-track input[type="range"]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; appearance: none; width: 16px; height: 16px;
  border: 2px solid #ffffff; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); cursor: pointer; }
.evals-score-range-track input[type="range"]::-moz-range-thumb { pointer-events: auto; box-sizing: border-box; width: 16px; height: 16px;
  border: 2px solid #ffffff; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); cursor: pointer; }
.evals-score-range-track input[type="range"]:focus-visible { outline: none; }
.evals-score-range-track input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--accent); }
.evals-score-range-track input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--accent); }
.evals-score-range-track input[type="range"]:disabled::-webkit-slider-thumb { cursor: default; opacity: .5; }
.eval-browser .evals-score-range output { min-width: 6.6em; font-variant-numeric: tabular-nums; }
/* −/+ beside each end of the track: the low end's on its left, the high end's on its right. */
.evals-score-range-steps { display: inline-flex; gap: 2px; }
.eval-browser .evals-score-range-steps button { width: 24px; height: 24px; padding: 0; border-radius: 5px; font-size: 1rem; font-weight: 600; line-height: 1; }
.eval-browser .evals-score-range-steps button:disabled { cursor: default; opacity: .35; }
.evals-notes-more { margin-top: 16px; }
.evals-notes-more > summary { cursor: pointer; font-weight: 600; }
.evals-notes-more[open] > summary { margin-bottom: 8px; }
.evals-text-view, .evals-notes-view { margin-top: 20px; scroll-margin-top: 16px; }
.evals-text-hint { margin: 0 0 16px; font-size: 0.9375rem; text-align: center; }
.evals-text-hint kbd { padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; font-family: var(--font-mono); font-size: 0.85em; }
.evals-view-toggle { display: inline-flex; }
.eval-browser .evals-view-toggle button { border-radius: 0; }
.eval-browser .evals-view-toggle button:first-child { border-radius: 5px 0 0 5px; }
.eval-browser .evals-view-toggle button:last-child { border-radius: 0 5px 5px 0; margin-left: -1px; }
.eval-browser .evals-view-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.evals-article-text > summary { cursor: pointer; margin-top: 12px; }
/* A reading column: centred, a comfortable measure, large type and open leading. */
.evals-article-body { max-width: 64ch; margin: 8px auto 0; font-size: 1.375rem; line-height: 1.75; color: var(--ink); text-wrap: pretty; overflow-wrap: break-word; }
.evals-article-body p, .evals-article-body ul, .evals-article-body ol, .evals-article-body blockquote, .evals-article-body pre { margin: 0 0 1.2em; }
.evals-article-body p { white-space: pre-line; }
@media (max-width: 640px) { .evals-article-body { font-size: 1.1875rem; line-height: 1.7; } }
.evals-article-body h3 { margin: 1.6em 0 0.5em; font-size: 1.2em; line-height: 1.35; text-wrap: balance; }
.evals-article-body > h3:first-child { margin-top: 0; }
.evals-article-body ul, .evals-article-body ol { padding-left: 1.5em; }
.evals-article-body li + li { margin-top: 0.3em; }
.evals-article-body blockquote { padding-left: 1em; border-left: 3px solid var(--line); color: var(--muted); }
.evals-article-body blockquote p { margin: 0; }
.evals-article-body pre { padding: 12px 14px; border-radius: 6px; background: var(--panel-strong); overflow-x: auto; font-size: 0.95rem; line-height: 1.5; }
.evals-article-body code { font-family: var(--font-mono); font-size: 0.9em; }
.evals-article-body :not(pre) > code { padding: 1px 4px; border-radius: 4px; background: var(--panel-strong); }
.evals-article-body strong { font-weight: 700; color: var(--ink); border-radius: 3px; transition: background-color 0.2s; }
.evals-article-body strong.is-current { background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.eval-browser .evals-tiers-save, .eval-browser .evals-tiers-discard { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 5px; color: #ffffff; font-size: 1rem; font-weight: 700; }
.evals-tiers-actions { display: flex; gap: 3px; margin-left: 6px; }
.evals-tiers-actions[hidden] { display: flex; visibility: hidden; }
.eval-browser .evals-tiers-save { background: #16a34a; }
.eval-browser .evals-tiers-discard { background: #dc2626; }
.evals-tiers-problem { position: absolute; top: calc(100% + 4px); left: 0; z-index: 2; padding: 3px 6px; border-radius: 5px; background: #ffffff; color: #b91c1c; font-size: 1rem; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.evals-form { display: flex; flex-direction: column; gap: 12px; }
.evals-approval { position: relative; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
/* evals.tldr.fm/sources (PRO-1142): judging sources and their algorithm versions. */
.sources-judge, .sources-search { max-width: 720px; }
.sources-search { position: relative; display: flex; flex-direction: column; gap: 6px; }
/* A floating list: always opaque (frontend/CLAUDE.md). */
.sources-matches { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; max-height: 360px; overflow-y: auto; margin: 2px 0 0; padding: 4px; list-style: none; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 6px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18); }
.sources-matches button { display: block; width: 100%; padding: 6px 8px; border: 0; border-radius: 4px; background: #ffffff; color: #172033; font: inherit; font-size: 1rem; text-align: left; cursor: pointer; }
.sources-matches button:hover, .sources-matches button:focus-visible { background: #eef4fb; }
.eval-browser .sources-check { display: flex; flex-direction: row; align-items: baseline; gap: 8px; font-weight: 400; }
.sources-labels { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.sources-settings { display: flex; flex-direction: column; gap: 12px; }
.sources-settings fieldset { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 20px; min-width: 0; margin: 0; padding: 10px 14px 12px; border: 1px solid var(--line); border-radius: 6px; }
.sources-settings legend { padding: 0 4px; font-size: 13px; font-weight: 600; }
.eval-browser .sources-settings legend .sources-check { font-weight: 600; }
.sources-settings input[type="number"] { width: 8em; }
.sources-settings-group { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 20px; flex-basis: 100%; }
.sources-settings-row { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.evals-fork textarea.sources-notes { min-height: 72px; font: inherit; }
.evals-cases tr.is-draft > td { color: var(--muted); }
.sources-evidence td:not(:first-child), .sources-evidence th { white-space: nowrap; }
.evals-prompts td:not(:nth-child(4)), .evals-prompts th { white-space: nowrap; }
.evals-prompt-actions { display: flex; gap: 6px; justify-content: flex-end; }
.eval-browser .evals-promote-button { display: inline-flex; align-items: center; gap: 6px; }
.eval-browser .evals-promote-button[aria-disabled="true"] { cursor: default; }
.eval-browser .evals-promote-button .spinner { border-color: rgba(255, 255, 255, 0.4); border-top-color: #ffffff; }
.eval-browser .evals-promote-button.is-promoted { background: #16a34a; border-color: #16a34a; }
.evals-promoted-status { margin: 0; color: #15803d; font-weight: 600; }
.evals-promoted-status:empty { display: none; }
.evals-review-notice { margin: 0 0 12px; padding: 10px 14px; border-radius: 6px; color: var(--success); background: var(--success-bg); font-weight: 600; }
.evals-review-lead { margin: 0 0 8px; }
.evals-approval-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
.evals-prompts td:nth-last-child(-n + 2) { width: 1%; }
.evals-prompts .evals-compare-cell { text-align: center; }
/* A version saved since the page loaded: a brief glow that settles to a faint wash, an accent edge and a quiet tag. */
.evals-prompts tr.is-new > td { background: var(--accent-wash); animation: evals-new-prompt 1.6s ease-out; }
.evals-prompts tr.is-new > td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
@keyframes evals-new-prompt { from { background: var(--accent-soft); } }
.evals-new-mark { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 0.72em; font-weight: 600; letter-spacing: 0.03em; vertical-align: 2px; cursor: help; }
@media (prefers-reduced-motion: reduce) { .evals-prompts tr.is-new > td { animation: none; } }
.modal-content.eval-import.evals-fork { width: min(1080px, 94vw); max-width: none; }
/* The Run panel: a run's version, comparison version and parameters, in one row that wraps on narrow screens. */
.evals-run-panel { margin: 0 0 20px; }
.evals-run-panel > h2 { margin: 0 0 10px; font-size: 1.375rem; }
.evals-run-panel > .eval-muted { margin: 10px 0 0; }
.evals-run-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.evals-run-form label { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; }
.evals-run-form select { max-width: min(420px, 100%); }
.evals-run-form input[type="number"] { width: 110px; }
.evals-run-form input[aria-invalid="true"] { border-color: var(--danger); }
.evals-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 16px; }
.evals-pair .eval-panel > h2 { margin: 0 0 6px; font-size: 1.125rem; }
/* Each run's answer tinted by its grade, in the cluster table's green and amber (and a red as soft). */
.evals-pair-evals th:nth-child(2), .evals-pair-evals th:nth-child(3) { width: 28%; }
.evals-pair-evals td.is-best { background: rgba(34, 197, 94, 0.20); }
.evals-pair-evals td.is-acceptable { background: rgba(234, 179, 8, 0.20); }
.evals-pair-evals td.is-bad { background: rgba(239, 68, 68, 0.20); }
html.light .evals-pair-evals td.is-best { background: rgba(22, 163, 74, 0.12); }
html.light .evals-pair-evals td.is-acceptable { background: rgba(234, 179, 8, 0.16); }
html.light .evals-pair-evals td.is-bad { background: rgba(220, 38, 38, 0.10); }
.evals-pair-filters { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.evals-pair-filters > div { display: flex; flex-wrap: wrap; gap: 6px; }
.eval-browser .evals-pair-filters button { padding: 4px 12px; border-radius: 999px; font-size: 0.9375rem; }
.eval-browser .evals-pair-filters button[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.evals-pair-count { margin-left: 2px; color: var(--muted); font-variant-numeric: tabular-nums; }
.evals-pair-filters button[aria-pressed="true"] .evals-pair-count { color: inherit; opacity: 0.75; }
.evals-grade-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.evals-grade-dot.is-best { background: #16a34a; }
.evals-grade-dot.is-acceptable { background: #eab308; }
.evals-grade-dot.is-bad { background: #dc2626; }
@media (max-width: 700px) { .evals-pair { grid-template-columns: 1fr; } }
.evals-fork label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.evals-fork select { max-width: 420px; }
.evals-fork textarea { min-height: 240px; font: 12px/1.5 ui-monospace, monospace; }
/* Two prompt versions side by side: the older on the left, removed lines red, added green, changed words marked. */
.modal-content.eval-import.evals-compare { width: min(1400px, 96vw); max-width: none; }
.evals-compare-summary { display: grid; grid-template-columns: max-content 1fr; gap: 2px 16px; margin: 0 0 8px; font-size: 1rem; }
.evals-compare-summary dt { font-weight: 600; }
.evals-compare-summary dd { margin: 0; }
.evals-compare h3 { margin: 16px 0 6px; font-size: 1rem; text-transform: uppercase; color: var(--muted); }
.evals-compare del, .evals-compare ins { text-decoration: none; border-radius: 2px; }
.evals-compare del { background: #fecaca; }
.evals-compare ins { background: #bbf7d0; }
.evals-diff-scroll { max-height: 60vh; overflow: auto; border: 1px solid var(--line); border-radius: 5px; }
.evals-diff { width: 100%; table-layout: fixed; border-collapse: collapse; font: 0.8125rem/1.5 ui-monospace, monospace; }
.evals-diff col.evals-diff-number { width: 3.5em; }
.evals-diff thead th { position: sticky; top: 0; z-index: 1; padding: 6px 8px; background: #f1f5f9; border-bottom: 1px solid var(--line); text-align: left; font: 600 0.875rem/1.4 system-ui, sans-serif; }
.evals-diff td { padding: 0 8px; vertical-align: top; }
.evals-diff td.evals-diff-number { padding: 0 6px; text-align: right; color: var(--muted); user-select: none; }
.evals-diff td:nth-child(3) { border-left: 1px solid var(--line); }
.evals-diff-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.evals-diff-text.is-removed { background: #fef2f2; }
.evals-diff-text.is-added { background: #f0fdf4; }
.evals-diff td.is-empty { background: #f8fafc; }
.evals-diff-fold > td { padding: 0; background: #f1f5f9; text-align: center; }
.eval-browser .evals-diff-fold button { width: 100%; padding: 2px 8px; border: 0; background: none; color: var(--accent); font: 0.8125rem/1.5 system-ui, sans-serif; cursor: pointer; }
.evals-expected { margin: 16px 0; }
.evals-expected-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.evals-expected-heading h2 { margin: 0; }
.evals-notes { white-space: pre-wrap; }
.evals-labels { width: 0; min-width: 100%; }
/* Canonical selection's candidates: a sortable table, labelled green (best), yellow (acceptable), red (bad). */
.evals-labels-bar { display: flex; align-items: center; gap: 4px; margin: 0 0 8px; font-size: 1rem; }
.evals-cluster-scroll { max-width: 100%; overflow-x: auto; }
.evals-cluster { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.evals-labels .evals-cluster th, .evals-labels .evals-cluster td { padding: 8px 7px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: nowrap; overflow-wrap: normal; }
.evals-labels .evals-cluster th { background: var(--panel); font-size: 0.875rem; }
.evals-labels .evals-cluster .is-number { text-align: right; font-variant-numeric: tabular-nums; }
/* Title and summary are clipped to ~50 characters; the cell takes the slack, so date and author sit at the right edge. */
.evals-labels .evals-cluster td.evals-cluster-article { width: 100%; }
.evals-cluster-article > a, .evals-cluster-article > span:first-child { font-weight: 600; }
.evals-cluster-article p { margin: 2px 0 0; color: var(--muted); font-size: 0.9375rem; }
.evals-cluster-tag { margin-left: 6px; padding: 0 5px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: 0.8125rem; white-space: nowrap; }
.evals-cluster-domain { display: inline-block; padding: 1px 7px; border-radius: 5px; background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.evals-cluster-muted { color: var(--muted); }
.evals-cluster tbody tr > td:first-child { box-shadow: inset 4px 0 0 transparent; }
.evals-cluster tbody tr.is-best > td { background: rgba(22, 163, 74, 0.12); }
.evals-cluster tbody tr.is-best > td:first-child { box-shadow: inset 4px 0 0 #16a34a; }
.evals-cluster tbody tr.is-acceptable > td { background: rgba(234, 179, 8, 0.11); }
.evals-cluster tbody tr.is-acceptable > td:first-child { box-shadow: inset 4px 0 0 #eab308; }
.evals-cluster tbody tr.is-bad > td:first-child { box-shadow: inset 4px 0 0 #dc2626; }
.evals-cluster-grade small { display: block; margin-top: 3px; color: var(--muted); font-size: 0.8125rem; font-style: italic; }
.eval-browser .evals-grade-select { padding: 3px 6px; border-width: 1px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.eval-browser .evals-grade-select.is-best { border-color: #16a34a; color: #15803d; }
.eval-browser .evals-grade-select.is-acceptable { border-color: #eab308; color: #a16207; }
.eval-browser .evals-grade-select.is-bad { border-color: #dc2626; color: #b91c1c; }
.evals-grader-article { min-width: 0; flex: 1; white-space: normal; }
.evals-grader-article > a, .evals-grader-article > span { font-weight: 600; }
.evals-grader-article p { margin: 2px 0 0; line-height: 1.45; }
.evals-grader-summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.evals-grade { flex: none; width: 7.5em; font-weight: 600; text-transform: capitalize; color: var(--muted); }
.evals-grade.is-best { color: #16a34a; }
.evals-grade.is-acceptable { color: #ca8a04; }
.evals-grade.is-bad { color: #dc2626; }
/* The bright green and amber are tuned for the dark surface; on white they fall to ~3:1. */
html.light .evals-grade.is-best { color: #15803d; }
html.light .evals-grade.is-acceptable { color: #a16207; }
.evals-grade-buttons { flex: none; display: flex; }
.eval-browser .evals-grade-buttons button { padding: 3px 8px; border: 1px solid var(--line); border-radius: 0; background: var(--panel); color: var(--ink); font: inherit; font-size: 0.875rem; cursor: pointer; }
.eval-browser .evals-grade-buttons button:first-child { border-radius: 5px 0 0 5px; }
.eval-browser .evals-grade-buttons button:last-child { border-radius: 0 5px 5px 0; }
.eval-browser .evals-grade-buttons button + button { border-left: 0; }
.eval-browser .evals-grade-buttons button:disabled { cursor: default; opacity: 0.45; }
.eval-browser .evals-grade-buttons button[aria-pressed="true"] { opacity: 1; color: #ffffff; font-weight: 600; }
/* The story clock: a story's moments in time order, those on the best member's instant marked green and those on an
   acceptable member's amber; above them, the story's timeline. */
.evals-clock-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 2px; font-size: 1rem; }
.evals-clock-list > li { display: flex; align-items: flex-start; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-left-width: 4px; border-radius: 5px; background: var(--panel); }
.evals-clock-list > li.is-best { border-left-color: #16a34a; }
.evals-clock-list > li.is-acceptable { border-left-color: #eab308; }
.evals-clock-list.is-timeline > li { padding: 4px 10px; }
.evals-clock-when { flex: none; width: 13em; display: grid; gap: 2px; font-variant-numeric: tabular-nums; }
.evals-clock-label { flex: none; display: grid; gap: 2px; justify-items: end; }
.evals-clock-chart { margin: 0 0 16px; overflow-x: auto; }
/* Below 560px the chart scrolls in its own box rather than shrinking its labels out of reach. */
.evals-clock-chart svg { display: block; width: 100%; min-width: 560px; max-width: 960px; height: auto; overflow: visible; }
.evals-clock-chart figcaption { margin-top: 4px; font-size: 0.875rem; }
.evals-clock-chart-bar { fill: var(--muted); opacity: 0.55; }
.evals-clock-chart-bar:hover { opacity: 0.9; }
.evals-clock-chart-axis { stroke: var(--line); stroke-width: 1.5; }
.evals-clock-chart-break { fill: var(--muted); font-size: 16px; }
.evals-clock-chart-dates text { fill: var(--muted); font-size: 12px; }
.evals-clock-chart-best line { stroke: #16a34a; stroke-width: 2; opacity: 0.8; }
.evals-clock-chart-best text { fill: #16a34a; font-size: 12px; font-weight: 600; }
.evals-clock-chart-acceptable { stroke: #eab308; stroke-width: 2; }
.evals-clock-chart-candidate { fill: var(--panel); stroke: var(--muted); stroke-width: 1.5; }
.evals-clock-chart-candidate.is-best { fill: #16a34a; stroke: #16a34a; }
.evals-clock-chart-candidate.is-acceptable { fill: #eab308; stroke: #eab308; }
.evals-clock-chart-rule { fill: var(--ink); }
.evals-clock-chart-landing rect { fill: var(--accent); }
.evals-clock-key.is-best { color: #16a34a; }
.evals-clock-key.is-acceptable { color: #ca8a04; }
.evals-clock-key.is-landing { color: var(--accent); }
html.light .evals-clock-chart-best text, html.light .evals-clock-key.is-best { fill: #15803d; color: #15803d; }
html.light .evals-clock-key.is-acceptable { color: #a16207; }
.eval-browser .evals-clock-unofferable { color: #b91c1c; }
.evals-clock-cell { white-space: nowrap; }
@media (max-width: 700px) { .evals-type-heading, .evals-expected-heading, .evals-clock-list > li { flex-direction: column; } .evals-clock-when { width: auto; } .evals-clock-label { justify-items: start; } .evals-runs, .evals-cases { display: block; overflow-x: auto; } }

.eval-import { background: #ffffff; color: #172033; --ink: #172033; --muted: #596579; --line: #ccd7e4; --panel: #ffffff; }
.eval-import .eval-browser { padding-bottom: 0; }
/* Story-membership case: expected answer, article, candidate stories; the rest behind expandos. */
.sm-case { display: flex; flex-direction: column; gap: 16px; }
.sm-expected-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sm-kicker { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sm-expected-line strong { font-size: 1.25rem; }
.sm-expected-line select { flex: 1 1 360px; min-width: 0; font-size: 1rem; font-weight: 600; }
.sm-also { margin: 8px 0 0; font-size: 1rem; }
.sm-more > summary { cursor: pointer; font-weight: 600; font-size: 1rem; }
.sm-expected .sm-more { margin-top: 10px; }
.sm-acceptable-answers { border: 0; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.sm-acceptable-answers legend { font-size: 1rem; font-weight: 600; color: var(--muted); }
.sm-acceptable-answers .eval-checkbox { margin: 6px 0; font-weight: 400; }
.sm-case-id { font-size: 1rem; color: var(--muted); }
.sm-article h3 { margin: 6px 0 4px; font-size: 1.375rem; }
.sm-article h3 a { color: inherit; }
.sm-article .eval-muted { margin: 0 0 10px; }
.sm-summary { margin: 0 0 10px; line-height: 1.55; }
.sm-excerpt p { margin: 0; white-space: pre-wrap; line-height: 1.55; color: var(--muted); font-size: 1rem; }
.sm-excerpt .sm-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.eval-browser .sm-link-button { border: 0; padding: 4px 0; background: none; color: var(--accent); }
.sm-choices h3 { margin: 4px 0 8px; }
.sm-choices ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sm-story { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 6px; padding: 10px 14px; background: var(--panel); color: var(--ink); }
.sm-story-expected { border-left-color: #3fa463; background: rgba(63, 164, 99, 0.1); }
.sm-story-acceptable { border-left-color: #8ab89a; }
.sm-story-head { display: flex; align-items: baseline; gap: 10px; }
.sm-story-id { font: 600 1rem ui-monospace, monospace; color: var(--muted); flex-shrink: 0; }
.sm-badge { margin-left: auto; flex-shrink: 0; font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #3fa463; }
.sm-story > .eval-muted { margin: 4px 0 6px; font-size: 1rem; }
.sm-members { margin: 0; padding-left: 18px; font-size: 1rem; line-height: 1.5; }
.sm-members .eval-muted { font-size: 1rem; }
.sm-members-more > summary { cursor: pointer; font-size: 1rem; color: var(--muted); margin: 4px 0 0 18px; }
.sm-confirm { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 16px 0; }
.sm-confirm dt { font-weight: 600; color: var(--muted); }
.sm-confirm dd { margin: 0; overflow-wrap: anywhere; }

/* Wave updates remain available without inserting space above the focused row. */
/* Rankings apply as they arrive. When one pushes the reader's row out of view,
   the list returns to its top under this note (BetaStoryList). Keep the browser's
   scroll anchoring: it usually holds the row in place as stories land above it. */
.reader-new-results {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 20px;
  margin: 0 0 10px;
  overflow: hidden;
  color: var(--accent);
  font: 500 12px/20px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  scroll-margin-top: 16px;
  animation: reader-new-results 5s ease-out forwards;
}
.reader-new-results::before,
.reader-new-results::after { content: ''; flex: 1; height: 1px; background: var(--accent-soft); }
.reader-new-results::before { background: linear-gradient(to right, transparent, var(--accent-soft)); }
.reader-new-results::after { background: linear-gradient(to left, transparent, var(--accent-soft)); }
@keyframes reader-new-results {
  0% { opacity: 0; transform: translateY(-3px); }
  6% { opacity: 1; transform: none; }
  20% { opacity: 0.55; }
  34% { opacity: 1; }
  80% { opacity: 1; height: 20px; margin-bottom: 10px; }
  92% { opacity: 0; height: 20px; margin-bottom: 10px; }
  100% { opacity: 0; height: 0; margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .reader-new-results { animation: reader-new-results-gone 5s step-end forwards; }
  @keyframes reader-new-results-gone { to { opacity: 0; height: 0; margin-bottom: 0; } }
}

/* A story a ranking just put above ones the reader was shown (utils/storyArrivals), or moved up or down the list
   (utils/storyMoves), lands with a soft wash of the
   accent that beats twice and fades: the first beat on its onset, where the eye already goes, the second ~1s later
   for a reader who glanced away. Colour only (no movement, no change in size), so nothing else on the page moves;
   about 1 Hz, far under the 3-per-second flash limit; low contrast, so the title stays readable throughout. The row
   drops the class when the animation ends. Reduced motion keeps one fade without the beat. */
.beta-story.is-arrived {
  --story-arrived: color-mix(in srgb, var(--accent) 18%, transparent);
  --story-arrived-dim: color-mix(in srgb, var(--accent) 7%, transparent);
  animation: beta-story-arrived 2.4s ease-in-out;
}
@keyframes beta-story-arrived {
  0% { background-color: transparent; }
  8% { background-color: var(--story-arrived); }
  28% { background-color: var(--story-arrived-dim); }
  46% { background-color: var(--story-arrived); }
  100% { background-color: transparent; }
}
.beta-story.is-arrived-again { animation-name: beta-story-arrived-again; }
@keyframes beta-story-arrived-again {
  0% { background-color: transparent; }
  8% { background-color: var(--story-arrived); }
  28% { background-color: var(--story-arrived-dim); }
  46% { background-color: var(--story-arrived); }
  100% { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .beta-story.is-arrived { animation: beta-story-arrived-fade 1.6s ease-out; }
  .beta-story.is-arrived-again { animation-name: beta-story-arrived-fade-again; }
  @keyframes beta-story-arrived-fade { from { background-color: var(--story-arrived); } }
  @keyframes beta-story-arrived-fade-again { from { background-color: var(--story-arrived); } }
}

/* Run eval results: readable article text and aligned, sortable numeric columns. */
.evals-results-scroll { max-width: 100%; overflow-x: auto; margin: 12px 0 20px; }
.evals-results-table { width: 100%; min-width: 600px; border-collapse: collapse; table-layout: fixed; font-size: 1.1875rem; line-height: 1.5; }
.evals-results-table th, .evals-results-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.evals-results-table th { text-align: left; background: var(--panel); }
.evals-results-table th:first-child { width: 58%; }
.evals-results-table th:nth-child(n+2):nth-child(-n+4), .evals-results-table td:nth-child(n+2):nth-child(-n+4) { text-align: right; font-variant-numeric: tabular-nums; }
.evals-results-table td { overflow-wrap: anywhere; }
.evals-results-table td small { display: block; font-size: .875rem; color: var(--muted); }
.evals-results-table td p { margin: 6px 0 0; }
.evals-results-table tr.is-fail td:first-child { box-shadow: inset 3px 0 var(--danger); }
.evals-results-table tr.is-fail td:last-child, .evals-eval-error { color: var(--danger); }
.evals-results-table tbody tr:hover { background: var(--accent-soft); }
.evals-results-table .evals-sort { white-space: nowrap; }

/* A source eval run (/sources/evals/runs/<id>): one line per source, tinted by pass or fail, opening to how its score
   came about. The last column takes the slack so the numbers sit next to the source they belong to. Child selectors
   only: an open row nests the derivation's own table. */
.sources-golden-table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.4; font-variant-numeric: tabular-nums; }
.sources-golden-table > * > tr > th, .sources-golden-table > * > tr > td { padding: 5px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: baseline; white-space: nowrap; }
.sources-golden-table > thead > tr > th { background: var(--panel); font-weight: 600; }
.sources-golden-table > * > tr > :last-child { width: 100%; white-space: normal; }
.sources-golden-table > * > tr > .is-number { text-align: right; }
.sources-golden-table > tbody > tr.is-pass > td { background-color: color-mix(in srgb, var(--success) 5%, transparent); }
.sources-golden-table > tbody > tr.is-fail > td { background-color: color-mix(in srgb, var(--danger) 7%, transparent); }
.sources-golden-table > tbody > tr.is-pass > td:first-child { box-shadow: inset 3px 0 color-mix(in srgb, var(--success) 55%, transparent); }
.sources-golden-table > tbody > tr.is-fail > td:first-child { box-shadow: inset 3px 0 var(--danger); }
.sources-golden-table > tbody > tr.is-pass > .sources-golden-outcome { color: var(--success); }
.sources-golden-table > tbody > tr.is-fail > .sources-golden-outcome { color: var(--danger); font-weight: 600; }
.sources-golden-table > tbody > tr.is-near > td { background-color: color-mix(in srgb, var(--yellow) 12%, transparent); }
.sources-golden-table > tbody > tr.is-near > td:first-child { box-shadow: inset 3px 0 var(--yellow); }
.sources-golden-table > tbody > tr.is-near > .sources-golden-outcome { color: var(--warning); font-weight: 600; }
.sources-golden-table > tbody > tr.is-expandable { cursor: pointer; }
.sources-golden-table > tbody > tr.is-expandable:hover > td { background-image: linear-gradient(var(--accent-soft), var(--accent-soft)); }
.sources-golden-table > tbody > tr.is-open > td { border-bottom-color: transparent; }
.sources-golden-table .evals-eval-error { white-space: normal; }
.sources-golden-table > tbody > tr.is-out > td { color: var(--muted); }
.sources-golden-table > tbody > tr.is-arrived > td { animation: sources-golden-arrived 1.6s ease-out; }
@keyframes sources-golden-arrived { from { background-color: var(--accent-soft); } }
.sources-golden-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 4px; font-size: 1.125rem; }
.sources-golden-progress > progress { flex: 0 1 240px; min-width: 120px; height: 8px; appearance: none; border: 0; border-radius: 4px; overflow: hidden; background: var(--line); }
.sources-golden-progress > progress::-webkit-progress-bar { background: var(--line); }
.sources-golden-progress > progress::-webkit-progress-value { background: var(--accent); transition: width 0.4s ease-out; }
.sources-golden-progress > progress::-moz-progress-bar { background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .sources-golden-table > tbody > tr.is-arrived > td { animation: none; } }
.sources-section-toggle { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.sources-section-toggle:hover { color: var(--accent); }
.sources-section-toggle > span { display: inline-block; width: 1em; color: var(--muted); }
.sources-farm-tag { margin-left: 6px; padding: 0 5px; border: 1px solid var(--line); border-radius: 4px; font-size: .75rem; color: var(--muted); vertical-align: 1px; }
.sources-golden-table > tbody > tr.sources-golden-open > td { padding: 2px 12px 14px 34px; }
.sources-golden-detail .score-derivation-table { width: auto; max-width: 100%; font-size: .9375rem; }
.sources-golden-detail .score-derivation-label small { display: block; color: var(--muted); font-weight: 400; white-space: normal; }
.sources-golden-detail .score-derivation-rule { max-width: 36ch; }
.sources-golden-detail .score-derivation-calc code { white-space: nowrap; }
.sources-golden-detail .score-derivation-value.is-ok { color: var(--success); }
.sources-golden-detail .score-derivation-value.is-bad { color: var(--danger); }
.sources-golden-detail .evals-reasoning { max-width: 90ch; }
/* Canonical selection: faces are text, so its columns read left to right like the article's. */
.evals-results-table.is-canonical th:first-child { width: 40%; }
.evals-results-table.is-canonical th:nth-child(2), .evals-results-table.is-canonical th:nth-child(3) { width: 23%; }
.evals-results-table.is-canonical th:nth-child(n+2):nth-child(-n+4), .evals-results-table.is-canonical td:nth-child(n+2):nth-child(-n+4) { text-align: left; }
.evals-candidates { margin: 6px 0 0; padding-left: 1.5em; font-size: 1rem; color: var(--muted); }
.evals-candidates li { margin: 2px 0; }
.evals-candidates .evals-grade { display: inline-block; width: 6.5em; }
.evals-candidates li.is-picked { color: var(--ink); }
/* AI detection: the label and verdict are words, read left to right; the probability stays a number. */
.evals-results-table.is-ai th:nth-child(2), .evals-results-table.is-ai td:nth-child(2),
.evals-results-table.is-ai th:nth-child(4), .evals-results-table.is-ai td:nth-child(4) { text-align: left; }
.eval-browser .evals-grade-buttons button.is-ai[aria-pressed="true"] { background: #dc2626; border-color: #dc2626; }
.eval-browser .evals-grade-buttons button.is-human[aria-pressed="true"] { background: #16a34a; border-color: #16a34a; }
.evals-sweep th, .evals-sweep td { text-align: right; font-variant-numeric: tabular-nums; }
.evals-sweep th[scope="row"] { text-align: left; white-space: nowrap; }
.evals-sweep .is-current { font-weight: 700; background: var(--accent-soft); }
/* The X account judge's evals (PRO-1169): a post or judge state as the model reads it, and a grade band per dimension. */
.evals-x-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 32rem; overflow: auto; font-size: 0.9rem; }
.evals-x-band { display: flex; align-items: center; gap: 0.5rem; }
.evals-x-band > span:first-child { min-width: 7rem; }

/* Opaque white card with dark ink in both themes, as .eval-import does. */
.modal-content.evals-feedback-dialog { background: #ffffff; color: #172033; --ink: #172033; --muted: #596579; --line: #ccd7e4; --panel: #ffffff; }
.evals-feedback-dialog h2 { margin: 0 0 4px; font-size: 1.375rem; }
.evals-feedback-dialog h3 { margin: 24px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 1rem; }
.evals-feedback-dialog form { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.evals-feedback-dialog label { display: flex; flex-direction: column; gap: 6px; font-size: 1rem; font-weight: 600; }
.evals-feedback-dialog select, .evals-feedback-dialog textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: #ffffff; color: var(--ink); font: inherit; font-weight: 400; }
.evals-feedback-dialog select { align-self: flex-start; min-width: 180px; }
.evals-feedback-dialog textarea { width: 100%; min-height: 130px; box-sizing: border-box; resize: vertical; }
.evals-feedback-dialog select:focus, .evals-feedback-dialog textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.evals-feedback-dialog form p { margin: 0; font-size: 0.95rem; color: var(--muted); }
.evals-feedback-dialog li { margin: 8px 0; overflow-wrap: anywhere; }
/* The dialog section fills the card, padding included, so a file dropped anywhere on the modal lands on it. */
.modal-content.evals-feedback-dialog { padding: 0; }
.evals-feedback-dialog > section { padding: 24px; border-radius: inherit; }
.evals-feedback-dialog > section.is-dropping { outline: 3px dashed #2563eb; outline-offset: -8px; background: #eff6ff; }
.evals-feedback-dialog .evals-feedback-hint { margin: -6px 0 12px; color: var(--muted); font-size: 0.85rem; }
/* Close and Submit sit together at the form's end; Submit is the one filled button. */
.evals-feedback-actions { display: flex; justify-content: flex-end; gap: 8px; }
.evals-feedback-actions button { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 6px; font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 120ms, border-color 120ms, color 120ms; }
.evals-feedback-actions button:disabled { cursor: default; opacity: .6; }
.evals-feedback-secondary { background: #ffffff; color: var(--ink); }
.evals-feedback-secondary:hover:not(:disabled) { border-color: var(--line-strong); background: #f3f5f8; }
.evals-feedback-primary { border-color: var(--accent); background: var(--accent); color: #ffffff; }
.evals-feedback-primary:hover:not(:disabled) { border-color: var(--accent-hover); background: var(--accent-hover); }
.evals-feedback-primary kbd { padding: 1px 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.2); font: inherit; font-size: 0.8rem; font-weight: 500; }

/* An admin's tab viewing the reader as another user (?view_as=, PRO-1253). */
.view-as-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  background: var(--panel-strong);
  border-bottom: 2px solid var(--warn);
  color: var(--ink);
  font-size: 0.85rem;
}
.view-as-banner-stop {
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}