/* Theme = light (default), dark, or system. The server sets data-theme on
   <html>; absent/"system" follows prefers-color-scheme. The dark palette is
   intentionally duplicated for the system-dark media query and the forced-dark
   selector below — keep the two blocks in sync. */
:root {
  color-scheme: light dark;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-soft: #fbfcfd;
  --text: #1d232a;
  --muted: #65717f;
  --line: #d8dee6;
  --accent: #226c5f;
  --accent-soft: #e7f2ef;
  --accent-hover: #18584e;
  --on-accent: #ffffff;
  --warn: #8a5b12;
  --warn-soft: #fbf1db;
  --accent2: #345b8a;
  --accent2-soft: #e4edf5;
  --code-bg: #eef1f5;
  --pre-bg: #f6f7f9;
  --danger: #9a2c2c;
  --danger-soft: #fff0f0;
  --danger-line: #d8a8a8;
  --success: #226c4d;
  --success-soft: #eaf7f1;
  --success-line: #b6d7c8;
  --shadow: rgba(29, 35, 42, 0.14);
}

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

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

/* System default: follow the OS unless the user forced light or dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #14181d;
    --panel: #1b2026;
    --panel-soft: #20262d;
    --text: #e2e7ec;
    --muted: #95a1ad;
    --line: #333c46;
    --accent: #4fb39f;
    --accent-soft: #1e352f;
    --accent-hover: #6cc7b5;
    --on-accent: #0d1f1b;
    --warn: #d8aa56;
    --warn-soft: #3a2f17;
    --accent2: #7da4d4;
    --accent2-soft: #24303f;
    --code-bg: #2a323b;
    --pre-bg: #171c22;
    --danger: #e08c8c;
    --danger-soft: #392125;
    --danger-line: #5d3439;
    --success: #82c9a5;
    --success-soft: #1d3226;
    --success-line: #2d4b3a;
    --shadow: rgba(0, 0, 0, 0.5);
  }
}

/* Forced dark (mirror of the system-dark palette above). */
:root[data-theme="dark"] {
  --bg: #14181d;
  --panel: #1b2026;
  --panel-soft: #20262d;
  --text: #e2e7ec;
  --muted: #95a1ad;
  --line: #333c46;
  --accent: #4fb39f;
  --accent-soft: #1e352f;
  --accent-hover: #6cc7b5;
  --on-accent: #0d1f1b;
  --warn: #d8aa56;
  --warn-soft: #3a2f17;
  --accent2: #7da4d4;
  --accent2-soft: #24303f;
  --code-bg: #2a323b;
  --pre-bg: #171c22;
  --danger: #e08c8c;
  --danger-soft: #392125;
  --danger-line: #5d3439;
  --success: #82c9a5;
  --success-soft: #1d3226;
  --success-line: #2d4b3a;
  --shadow: rgba(0, 0, 0, 0.5);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
}

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

a:hover {
  text-decoration: underline;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 56px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
}

.brand-mark {
  display: block;
  flex: none;
  border-radius: 9px;
  transition: transform 120ms ease;
}

.brand:hover .brand-mark {
  transform: translateY(-1px);
}

.nav {
  display: flex;
  gap: 12px;
}

.nav-link {
  color: var(--muted);
}

.nav-link.active {
  color: var(--text);
  font-weight: 700;
}

.logout-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.mobile-primary-nav,
.mobile-nav-menu {
  display: none;
}

.nav-user {
  color: var(--muted);
  font-size: 13px;
}

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px;
}

.feed-header,
.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 4px;
  font-size: 32px;
  line-height: 1.15;
}

h2 {
  font-size: 19px;
  line-height: 1.25;
}

h3 {
  font-size: 15px;
}

.subtle,
.crumb {
  color: var(--muted);
}

.filter-form {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}

.feed-header-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.feed-mobile-actions {
  display: none;
}

.feed-refresh-form {
  display: grid;
  justify-items: end;
  gap: 4px;
  margin: 0;
}

.feed-refresh-status {
  max-width: 280px;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

/* Deliberately secondary: cron fetches on its own, and this sits next to
   "Apply filters" where an accent button invites accidental pipeline runs. */
.feed-refresh-form button {
  color: var(--muted);
  font-weight: 600;
}

.feed-refresh-form button:hover {
  border-color: var(--accent);
  color: var(--text);
}

.filter-form label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
}

.filter-form select[name="source"] {
  max-width: min(320px, 68vw);
}

.day-nav {
  display: flex;
  align-items: end;
  gap: 6px;
  flex-wrap: wrap;
}

input,
select,
textarea,
button,
.button-link {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

input,
select,
textarea {
  padding: 0 10px;
}

textarea {
  min-height: 88px;
  padding-top: 8px;
  padding-bottom: 8px;
  resize: vertical;
}

.search-form {
  margin-bottom: 24px;
}

.search-mobile-form {
  display: none;
}

.search-question-label {
  display: grid;
  gap: 4px;
  width: 100%;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
}

.search-question-label textarea {
  width: 100%;
  box-sizing: border-box;
}

.search-controls {
  justify-content: flex-start;
}

.search-controls > button[type="submit"] {
  margin-left: auto;
}

.search-checkbox-label {
  align-self: end;
  min-height: 36px;
}

.search-diagnostics {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px 14px;
  margin: -4px 0 18px;
  color: var(--muted);
  font-size: 13px;
}

.search-diagnostics-main,
.search-term-row,
.search-recovery-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.search-term-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 650;
}

.search-term-chip--must {
  border-color: var(--accent2);
  color: var(--accent2);
}

.search-recovery-actions {
  margin-top: 2px;
}

.empty-action-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 6px;
  min-height: 38px;
  color: var(--muted);
}

.filter-form .checkbox-label {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  padding: 0;
  accent-color: var(--accent);
}

.filter-form .checkbox-label input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
}

button,
.button-link {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Spinner for submits that block on slow work (e.g. archive search LLM calls),
   added by form_submit_state.js so the wait visibly animates. */
button.is-processing::after {
  content: "";
  width: 12px;
  height: 12px;
  min-height: 12px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: button-spin 0.8s linear infinite;
}

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

/* Ask: in-flight archive query panel (page polls its job and reloads). */
.search-pending {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 18px;
}

.search-pending-spinner {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  border: 2.5px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: button-spin 0.8s linear infinite;
}

.search-pending-message {
  margin: 0 0 4px;
  font-weight: 600;
}

.search-pending .subtle {
  margin: 0;
  font-size: 13px;
}

button.danger {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}

button.primary {
  justify-content: center;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

button.primary:hover:not(:disabled) {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}

.button-link.primary-link {
  justify-content: center;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.button-link.primary-link:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  text-decoration: none;
}

.button-link.disabled-link,
.button-link:disabled {
  border-color: var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.72;
}

.button-link.disabled-link:hover,
.button-link:disabled:hover {
  border-color: var(--line);
  background: var(--panel-soft);
  text-decoration: none;
}

button.compact,
.button-link.compact {
  height: 28px;
  padding: 0 10px;
  font-size: 13px;
}

.banner {
  border-radius: 8px;
  padding: 10px 12px;
}

.banner.success {
  border: 1px solid var(--success-line);
  background: var(--success-soft);
  color: var(--success);
}

.banner.error {
  border: 1px solid var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}

.auth-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  /* The forms sit in the right rail rather than above the proof. They are still
     first among the forms in the DOM -- Enter-key submission and password
     managers both key off that -- but grid areas decide what a stranger reads
     first, and that has to be the output, not a password box. */
  grid-template-areas:
    "intro rail"
    "proof rail";
  column-gap: 40px;
  row-gap: 34px;
  align-items: start;
  max-width: 1060px;
  margin: 24px auto 0;
}

.auth-page h1 {
  max-width: 780px;
  margin: 0 0 14px;
  font-size: 42px;
  line-height: 1.05;
  /* Even line lengths instead of one orphaned word; harmless where
     unsupported, since the fallback is the normal greedy break. */
  text-wrap: balance;
}

.auth-intro {
  grid-area: intro;
  max-width: 820px;
}

/* The kicker and the rail's first label start the two columns, so they share
   a line box -- otherwise the eye reads two different starting heights across
   the fold. */
.auth-kicker {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 800;
  line-height: 22px;
}

.auth-summary {
  max-width: 620px;
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.55;
  opacity: 0.86;
}
















.auth-section-label {
  margin: 0 0 10px;
  line-height: 22px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}












.auth-panel {
  grid-area: request;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 22px;
}

.auth-request-panel {
  grid-area: auto;
  border-color: var(--accent);
  box-shadow: 0 12px 28px var(--shadow);
}

.auth-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.auth-panel h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

.auth-panel-copy {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.auth-panel-header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.auth-panel .banner {
  margin-bottom: 16px;
}

.auth-form,
.auth-join-form {
  display: grid;
  gap: 12px;
}

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

.auth-join-form button {
  justify-content: center;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.auth-join-form button:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}

/* ── Landing: the numbers under the headline ──────────────────────────────── */
/* Proof of life. A row of separated figures rather than a sentence, so the
   eye takes all four in one pass on the way down to the brief. */
.auth-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.01em;
}

.auth-stats li {
  display: grid;
  gap: 1px;
}

.auth-stats strong {
  color: var(--accent);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* ── Landing: the right rail holding both forms ───────────────────────────── */
.auth-rail {
  grid-area: rail;
  display: grid;
  align-content: start;
  gap: 26px;
}

.auth-access {
  display: grid;
  gap: 12px;
}

/* ── Landing: a real brief entry, not a description of one ────────────────── */
.auth-proof {
  grid-area: proof;
  display: grid;
  gap: 0;
  min-width: 0;
}

/* The brief itself. Styled as the document it is -- sections and bullets --
   rather than as a card, because that is the thing a reader opens each
   morning and the one artifact the whole pipeline exists to produce. */
.auth-brief {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 26px 30px 24px;
  box-shadow: 0 1px 2px var(--shadow), 0 12px 32px -18px var(--shadow);
}

.auth-brief-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 13px;
}

.auth-brief-meta span + span::before {
  content: "·";
  margin-right: 14px;
}

.auth-brief-meta strong {
  color: var(--text);
  font-weight: 800;
}

/* Section rules, not coloured mini-headings. The brief should read as a
   document someone wrote, and a document's sections are separated by space and
   a line rather than by another shade of green. */
.auth-brief-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 13px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.auth-brief-section::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-brief-section:first-of-type {
  margin-top: 0;
}

.auth-brief-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 64ch;
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
  opacity: 0.88;
}

.auth-brief-list li {
  position: relative;
  padding-left: 18px;
}

.auth-brief-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent);
}

.auth-brief-list strong {
  color: var(--text);
  font-weight: 700;
  opacity: 1;
}

/* The citation markers. Real briefs render these as links into the archive;
   here they are inert, but they have to look like what they are, because
   "every claim is linked" is a claim the page is making. */
.auth-cites {
  margin-left: 3px;
  white-space: nowrap;
}

/* Superscript marks. As filled chips these interrupted every sentence they
   were meant to support -- the point is that the claim is sourced, not that a
   number is present. */
.auth-cites span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  vertical-align: super;
  line-height: 1;
}

.auth-cites span + span::before {
  content: ",";
  color: var(--muted);
}

.auth-brief-foot {
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}








/* ── Landing: the feed, in the feed's own markup ───────────────────────────
   Not an image. Reusing `.feed-card` means this follows the viewer's theme and
   any later restyle for free, where a screenshot would drift the first time
   the card changed. */
.auth-shot-label {
  margin-top: 44px;
}

.auth-shot-lede {
  max-width: 64ch;
  margin: 0 0 18px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.62;
  opacity: 0.82;
}

.auth-shot {
  display: grid;
  gap: 10px;
}

.auth-shot .feed-card {
  margin: 0;
  border-radius: 10px;
}

/* The sample is illustration: nothing in it navigates, so the cursor must not
   promise otherwise. */
.auth-shot .feed-card-title {
  margin: 0;
  cursor: default;
}

.auth-shot-summary {
  margin: 10px 0 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.58;
  opacity: 0.82;
}

/* The suppressed twin. Dimmed and collapsed to a single line: it is evidence
   that dedup happened, and giving it the same weight as the card that survived
   would argue the opposite. */
.feed-card--muted {
  opacity: 0.62;
  border-style: dashed;
}

.feed-card--muted .feed-card-title {
  font-size: 15px;
}

/* ── Landing: the claims worth making out loud ────────────────────────────── */
/* Stacked in the rail beside the artifact, as notes on what the reader is
   already looking at. Boxes were wrong here: four bordered cards in a row read
   as a footer, and this is the argument for the product. */
.auth-capabilities {
  display: grid;
  align-content: start;
  gap: 26px;
}

.auth-capability {
  display: grid;
  align-content: start;
  gap: 5px;
  border-left: 2px solid var(--accent-soft);
  padding-left: 14px;
}

.auth-capability strong {
  color: var(--text);
  font-size: 17px;
  line-height: 1.35;
}

.auth-capability p {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.78;
}

.auth-login-panel {
  grid-area: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 16px;
}

.auth-login-panel h2 {
  margin: 0 0 14px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
}

.auth-login-panel .banner {
  margin-bottom: 12px;
}

.auth-form button {
  justify-content: center;
  background: var(--panel);
  font-weight: 700;
}

.auth-form button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* The compounding claim, set apart from the artifacts above it: those show
   what voilr does today, this one is about what it becomes. Tinted rather than
   bordered so it reads as a statement, not another specimen. */



.auth-page :is(input, button) {
  height: 42px;
  font-size: 16px;
}

.auth-page :is(input, button, a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.auth-page--compact {
  display: block;
  max-width: 520px;
}

.auth-page--compact .auth-login-panel {
  margin: 3rem auto;
}

.auth-help-link {
  font-size: 15px;
  margin: 0.8rem 0 0;
  text-align: center;
}

@media (max-width: 900px) {
  .auth-page {
    grid-template-columns: 1fr;
    /* One column. The forms used to go last, "after the reason to fill them
       in", which put the login form ~3,470px down a 375px phone: five screens
       of pitch between a returning reader and their feed, on the page every
       signed-out visit lands on. Now the promise, then the way in, then the
       evidence. The two wrappers dissolve (display: contents) so their
       children can be ordered one by one while the DOM keeps the login form
       first among the forms. */
    grid-template-areas: none;
    row-gap: 0;
    align-items: stretch;
    align-content: start;
    min-height: auto;
    max-width: 620px;
    margin-top: 20px;
  }

  .auth-intro,
  .auth-rail { display: contents; }
  .auth-kicker { order: 1; }
  .auth-page h1 { order: 2; font-size: 30px; }
  .auth-summary { order: 3; }
  .auth-access { order: 4; margin-top: 22px; }
  .auth-stats { order: 5; margin-top: 30px; }
  .auth-proof { order: 6; grid-area: auto; margin-top: 30px; }
  .auth-capabilities { order: 7; margin-top: 34px; }
  /* The "·" separators led the second line once the meta row wrapped. */
  .auth-brief-meta span + span::before { content: none; }

  .auth-summary {
    font-size: 15px;
  }


  .auth-panel {
    padding: 20px;
  }

  .auth-panel-header {
    display: grid;
    gap: 4px;
  }


}

.run-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.feed-topic-filter {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin: -8px 0 18px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12.5px;
}
.feed-topic-filter form { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.feed-topic-filter select,
.feed-topic-filter button { min-height: 30px; font-size: 12px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.chip,
.status,
.source-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
}

.chip {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
}

.chip--profile,
.interest-chip,
.interest-score-chip {
  --interest-color: hsl(var(--interest-hue, 210) 52% 34%);
  --interest-border: hsl(var(--interest-hue, 210) 42% 68%);
  --interest-bg: hsl(var(--interest-hue, 210) 58% 96%);
  --interest-bg-active: hsl(var(--interest-hue, 210) 58% 90%);
  --interest-solid: hsl(var(--interest-hue, 210) 52% 34%);
  --interest-on-solid: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .chip--profile,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .interest-chip,
  :root:not([data-theme="light"]):not([data-theme="dark"]) .interest-score-chip {
    --interest-color: hsl(var(--interest-hue, 210) 68% 74%);
    --interest-border: hsl(var(--interest-hue, 210) 34% 42%);
    --interest-bg: hsl(var(--interest-hue, 210) 32% 18%);
    --interest-bg-active: hsl(var(--interest-hue, 210) 36% 24%);
    --interest-solid: hsl(var(--interest-hue, 210) 68% 68%);
    --interest-on-solid: #11171c;
  }
}

:root[data-theme="dark"] .chip--profile,
:root[data-theme="dark"] .interest-chip,
:root[data-theme="dark"] .interest-score-chip {
  --interest-color: hsl(var(--interest-hue, 210) 68% 74%);
  --interest-border: hsl(var(--interest-hue, 210) 34% 42%);
  --interest-bg: hsl(var(--interest-hue, 210) 32% 18%);
  --interest-bg-active: hsl(var(--interest-hue, 210) 36% 24%);
  --interest-solid: hsl(var(--interest-hue, 210) 68% 68%);
  --interest-on-solid: #11171c;
}

.chip.chip--profile {
  border-color: transparent;
  background: transparent;
  color: var(--interest-color);
}

.feed-profile-chips .chip--profile:nth-child(1) {
  --interest-hue: 210;
}

.feed-profile-chips .chip--profile:nth-child(2) {
  --interest-hue: 168;
}

.feed-profile-chips .chip--profile:nth-child(3) {
  --interest-hue: 216;
}

.feed-profile-chips .chip--profile:nth-child(4) {
  --interest-hue: 268;
}

.feed-profile-chips .chip--profile:nth-child(5) {
  --interest-hue: 18;
}

.feed-profile-chips .chip--profile:nth-child(6) {
  --interest-hue: 94;
}

.feed-profile-chips .chip--profile:nth-child(7) {
  --interest-hue: 326;
}

.feed-profile-chips .chip--profile:nth-child(8) {
  --interest-hue: 188;
}

.feed-profile-chips .chip--profile:nth-child(9) {
  --interest-hue: 42;
}

.feed-profile-chips .chip--profile:nth-child(10) {
  --interest-hue: 296;
}

.feed-profile-chips .chip--profile:nth-child(11) {
  --interest-hue: 132;
}

.feed-profile-chips .chip--profile:nth-child(12) {
  --interest-hue: 244;
}

.feed-profile-chips .chip--profile:nth-child(13) {
  --interest-hue: 352;
}

.chip.active,
.source-badge {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent);
}

/* A long source name ("arXiv.org CS.AI (Artificial Intelligence) Updates")
   was cut mid-glyph by its card; end it with an ellipsis instead. */
.feed-card-meta .source-badge {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  line-height: 26px;
}

.chips-group {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
  min-width: 0;
  padding: 4px 10px;
  border-radius: 8px;
}

.chips-group--sources {
  background: var(--accent-soft);
}

.chips-group--profiles {
  background: var(--accent2-soft);
}

.chips-group--flags {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  padding: 3px;
}

.chip--flagged {
  gap: 5px;
  border-color: transparent;
  background: transparent;
}

.chip-flag-icon,
.flag-icon,
.action-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.chip--flagged.active .chip-flag-icon,
.flag-button--active .flag-icon {
  fill: currentColor;
}

.chips-label {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  margin-right: 2px;
}

.chips-group--sources .chips-label {
  color: var(--accent);
}

.chips-group--profiles .chips-label {
  color: var(--accent2);
}

/* Active chips inside groups use solid color with contrasting text to stand
   out from the group background tint. Must come after .chip.active (equal
   specificity 0,2,0) to win the cascade. */
.chips-group .chip.active {
  border-color: transparent;
  background: var(--accent);
  color: var(--on-accent);
}

.chips-group .chip--profile.active {
  border-color: var(--interest-solid);
  background: var(--interest-solid);
  color: var(--interest-on-solid);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--interest-solid) 28%, transparent);
}

.feed-list {
  display: grid;
  /* minmax(0, 1fr), not the implicit auto column: an auto column sizes to its
     widest card's min-content, so one summary holding an unbreakable line (a
     code block, a long URL) widened every card on the page — 765px cards at a
     412px phone width on 2026-10-01. Capped here, `.markdown-body pre`'s own
     overflow-x: auto scrolls the line inside its card instead. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.feed-card,
.empty,
.comment {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.feed-card {
  padding: 18px;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}

.feed-card:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  box-shadow: 0 3px 14px var(--shadow);
}

.feed-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.feed-card h2 {
  margin: 0;
}

.feed-card-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.feed-card-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

.feed-card h2 > a:first-child {
  color: var(--text);
}

.feed-card h2 > a:first-child:hover {
  color: var(--accent);
}

.post-media {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.post-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 12px 0 0;
}

.post-media--feed {
  grid-template-columns: repeat(auto-fit, minmax(120px, 180px));
}

.post-media-item {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.post-media-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-media-item {
  cursor: zoom-in;
}

/* Inline gallery shown under a post summary. */
.post-media--summary {
  margin: 14px 0 6px;
}

/* A lone image reads better shown near its natural size than as a
   16:10-cropped thumbnail. */
.post-media--summary.post-media--single {
  display: block;
}

.post-media--summary.post-media--single .post-media-item {
  aspect-ratio: auto;
  max-width: min(100%, 480px);
}

.post-media--summary.post-media--single .post-media-item img {
  height: auto;
  max-height: 400px;
  object-fit: contain;
}

/* Fullscreen image viewer (lightbox.js). */
body.lightbox-open {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(12px, 4vw, 48px);
  background: rgba(0, 0, 0, 0.86);
  backdrop-filter: blur(2px);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  max-height: 100%;
}

.lightbox-img {
  max-width: min(92vw, 1400px);
  max-height: 82vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  background: #111;
}

.lightbox-caption {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  text-align: center;
  max-width: 80ch;
}

.lightbox-caption[hidden] {
  display: none;
}

.lightbox-counter {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.lightbox-counter[hidden] {
  display: none;
}

.lightbox-close,
.lightbox-nav {
  flex: none;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  border-radius: 999px;
  line-height: 1;
  transition: background 0.15s ease;
}

.lightbox-close:hover,
.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.28);
}

.lightbox-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 40px;
  height: 40px;
  font-size: 26px;
}

.lightbox-nav {
  width: 48px;
  height: 48px;
  font-size: 30px;
}

.lightbox-nav[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
}

.thread-context {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.thread-context--feed {
  margin: 10px 0 12px;
  font-size: 14px;
}

.thread-context--feed p:last-child {
  margin-bottom: 0;
}

.feed-extra {
  margin: 6px 0 10px;
}

.feed-extra > summary {
  display: inline-flex;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.feed-extra > summary:hover {
  color: var(--accent);
}

.feed-extra[open] > summary {
  margin-bottom: 8px;
}

.thread-context-list {
  display: grid;
  gap: 10px;
}

.thread-context-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
}

.feed-source-link {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

/* The post carries no body of its own, so this link is the only route to the
   content rather than a supplementary reference. ~7% of posts. */
.feed-source-link--primary {
  color: var(--accent);
  font-weight: 600;
}

.post-links--detail {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 14px 0 0;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}

.card-secondary-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.feed-tag-list { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.feed-tag-chip {
  display: inline-flex;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 11px;
}
.feed-tag-chip:hover { color: var(--accent); }

.score-badge,
.interest-chip,
.content-type,
.tag-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 600;
}

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

.interest-chip {
  border: 1px solid var(--interest-border);
  background: var(--interest-bg);
  color: var(--interest-color);
}

.content-type {
  background: var(--accent2-soft, var(--panel));
  color: var(--muted);
  text-transform: capitalize;
}

.tag-chip {
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 500;
}

.summary,
.body-text,
.comment-body {
  overflow-wrap: anywhere;
}

.body-text,
.comment-body {
  white-space: pre-wrap;
}

/* When the extracted body is rendered as Markdown it produces real block
   elements, so the plain-text pre-wrap (which would double newlines against
   nl2br) must be off; overflow-wrap from .body-text stays for long URLs. */
.body-text.markdown-body {
  white-space: normal;
}

.comment-body {
  margin: 0;
}

.summary-clamp {
  position: relative;
}

.summary-clamp.clamped {
  max-height: 120px;
  overflow: hidden;
}

.summary-clamp.clamped::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46px;
  background: linear-gradient(to bottom, transparent, var(--panel));
  pointer-events: none;
}

.summary-toggle {
  height: auto;
  margin-top: 6px;
  border: 0;
  background: transparent;
  color: var(--accent);
  padding: 0;
  font-size: 13px;
  font-weight: 600;
}

.summary-toggle:hover {
  text-decoration: underline;
}

/* Community reception — how the thread received the post. */
.reception {
  margin: 14px 0 0;
  padding: 9px 12px;
  border-left: 3px solid var(--accent2);
  border-radius: 0 8px 8px 0;
  background: var(--accent2-soft);
}

.reception--detail {
  margin-top: 16px;
}

.reception-line {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}

.reception-line + .reception-line {
  margin-top: 5px;
}

/* Keep feed cards scannable: fold long reception lines to 2 lines each. The
   full text stays in the DOM; summary_toggle.js reveals "Show more" only when
   it overflows, and post detail (.reception--detail) never folds. The `.clamped`
   class is added by JS on measure, so no-JS/expanded shows the full text. */
.reception-clamp.clamped .reception-line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.reception-toggle {
  height: auto;
  margin-top: 6px;
  border: 0;
  background: transparent;
  color: var(--accent2);
  padding: 0;
  font-size: 12px;
  font-weight: 700;
}

.reception-toggle:hover {
  text-decoration: underline;
}

.reception-line--critique {
  color: var(--muted);
}

.reception-label {
  margin-right: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--accent2);
}

.reception-label--critique {
  color: var(--warn);
}

/* Duplicate-suppressed post: point at the primary that has the summary. */
.covered-by {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--panel-soft);
  font-size: 14px;
}

/* Entity/topic chips (feature_ideas #8). */
.entity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.entity-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  font-size: 12px;
  font-weight: 600;
}

.entity-chip-link {
  color: var(--muted);
  text-decoration: none;
}

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

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

/* The +/check follow toggle inside a chip. */
.entity-chip-follow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.entity-chip-follow:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.entity-chip--followed {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.entity-chip--followed .entity-chip-link,
.entity-chip--followed .entity-chip-follow {
  color: var(--accent);
}

/* Following-page topic unfollow button. */
.entity-follow-toggle {
  padding: 3px 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.entity-follow-toggle:hover {
  background: transparent;
}

.following-header--topics {
  margin-top: 28px;
}

.following-section-title {
  font-size: 18px;
  margin: 0;
}

/* "Also discussed on …" — novelty's collapsed duplicate siblings. */
.also-discussed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
}

.also-discussed-label {
  color: var(--muted);
  font-weight: 600;
}

.also-discussed-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 9px;
  background: var(--panel-soft);
  color: var(--muted);
  text-decoration: none;
}

.also-discussed-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Nav "Following" badge + the Following page. */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  vertical-align: 1px;
}

.following-header {
  margin-bottom: 18px;
}

.following-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.following-story {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 16px 18px;
}

.following-story--new {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

/* Quiet follows (no updates yet) recede below the active ones. */
.following-story--quiet {
  opacity: 0.66;
  background: transparent;
}

.following-story--quiet:hover {
  opacity: 1;
}

/* Archive: collapsed extra interest scores + sortable headers. */
.interest-more-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
}

.th-sort {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.th-sort:hover { color: var(--accent); }
.th-sort--active { color: var(--text); }

.following-story-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.following-story-title {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
}

.following-new-badge {
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.following-story-meta {
  margin: 4px 0 0;
  font-size: 13px;
}

.following-updates {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.following-update {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding-left: 14px;
  border-left: 2px solid var(--line);
  font-size: 14px;
}

.following-update--new {
  border-left-color: var(--accent);
}

.following-update-new {
  color: var(--accent);
  font-weight: 700;
}

.markdown-body > :last-child {
  margin-bottom: 0;
}

.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body blockquote,
.markdown-body pre,
.markdown-body table {
  margin: 0 0 10px;
}

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

.markdown-body code {
  border-radius: 4px;
  background: var(--code-bg);
  padding: 1px 5px;
  font-size: 0.92em;
}

.markdown-body pre {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--pre-bg);
  padding: 10px;
}

.markdown-body pre code {
  background: transparent;
  padding: 0;
}

.markdown-body blockquote {
  border-left: 3px solid var(--line);
  color: var(--muted);
  padding-left: 12px;
}

.markdown-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 13px;
}

.markdown-body th,
.markdown-body td {
  border: 1px solid var(--line);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}

.markdown-body th {
  background: var(--bg);
  font-weight: 700;
}

.markdown-body th[align="center"],
.markdown-body td[align="center"] {
  text-align: center;
}

.markdown-body th[align="right"],
.markdown-body td[align="right"] {
  text-align: right;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.card-statuses,
.card-actions,
.feed-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.card-statuses {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
}

.card-actions,
.feed-card-actions {
  position: relative;
}

.card-actions {
  width: 100%;
  margin-left: 0;
  justify-content: space-between;
}

.feed-card-actions,
.card-actions .feed-card-actions {
  margin-left: auto;
}

.inline-action {
  display: inline-flex;
  margin: 0;
}

.icon-button {
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
}

.post-flag-form {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.flag-button {
  justify-content: center;
  border-color: var(--line);
  background: var(--panel-soft);
  color: var(--muted);
}

.flag-button:hover,
.flag-button:focus-visible,
.flag-button--active {
  border-color: var(--accent);
  color: var(--accent);
}

.flag-button--active {
  background: var(--accent-soft);
}

.flag-button--labeled {
  gap: 6px;
  min-height: 30px;
  height: auto;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 700;
}

.post-flag-form[data-flag-busy="1"] {
  opacity: 0.72;
}

.flag-save-status {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  width: max-content;
  max-width: 220px;
  border: 1px solid var(--success-line);
  border-radius: 6px;
  background: var(--success-soft);
  box-shadow: 0 8px 20px var(--shadow);
  color: var(--success);
  padding: 5px 8px;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}

.flag-save-status[data-state="error"] {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}

.feedback-button {
  font-size: 16px;
  line-height: 1;
}

.feedback-button[aria-pressed="true"],
.feedback-button-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.feedback-comment {
  position: relative;
  margin: 0;
}

.email-link-titles {
  margin: 0 0 14px;
  padding-left: 18px;
}

.email-link-reason {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.brief-not-for-me {
  display: inline;
  min-height: 0;
  margin: 0;
  border: 0;
  background: none;
  padding: 0 2px;
  color: var(--muted);
  font: inherit;
  font-size: 0.82em;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

.brief-not-for-me:hover,
.brief-not-for-me:focus-visible {
  color: var(--accent);
}

.brief-not-for-me[aria-pressed="true"] {
  color: var(--accent);
  text-decoration: none;
}

.feedback-comment > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  padding: 0;
  cursor: pointer;
  font-size: 13px;
  list-style: none;
}

.feedback-comment > summary::marker,
.feedback-comment > summary::-webkit-details-marker {
  display: none;
}

.feed-card-actions[data-feedback-busy="1"] {
  opacity: 0.78;
}

.feedback-comment-active > summary {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.feedback-comment-form {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(440px, calc(100vw - 56px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 8px 24px var(--shadow);
  padding: 10px;
}

.feedback-comment-form input[type="text"] {
  flex: 1;
  min-width: 0;
  height: 30px;
  font-size: 13px;
}

.feedback-save-status {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 35;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  max-width: min(260px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 28px var(--shadow);
  color: var(--text);
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  pointer-events: none;
  white-space: nowrap;
}

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

.feedback-save-status::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 14px;
  border: 6px solid transparent;
  border-top-color: var(--panel);
}

.feedback-save-status[data-state="saved"] {
  color: var(--success);
}

.feedback-save-status[data-state="error"] {
  color: var(--danger);
}

.status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.status {
  background: var(--code-bg);
  color: var(--muted);
}

.status.muted {
  background: var(--bg);
  color: var(--muted);
}

.status.warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.daily-fallback-note {
  display: inline-block;
  margin: 6px 0 0;
  border-radius: 6px;
  background: var(--warn-soft);
  color: var(--warn);
  padding: 3px 9px;
  font-size: 13px;
}

.status.success {
  background: var(--success-soft);
  color: var(--success);
}

.status.keep {
  background: var(--accent-soft);
  color: var(--accent);
}

.status.running {
  background: var(--accent-soft);
  color: var(--accent);
}

.status.error {
  background: var(--danger-soft);
  color: var(--danger);
}

a.status {
  text-decoration: none;
}

a.status:hover {
  text-decoration: underline;
}

.daily-digest {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 18px;
  margin-bottom: 18px;
}

.daily-digest-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.daily-digest-header h2 {
  margin-bottom: 4px;
}

.daily-digest-header .daily-digest-meta {
  display: grid;
  gap: 6px;
  font-size: 12px;
}

.daily-digest-header > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.daily-digest-state,
.daily-digest-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.daily-digest-state {
  position: relative;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
}

.daily-generated-at {
  min-width: 0;
  white-space: nowrap;
}

.daily-digest-state > .status,
.daily-digest-state > .daily-generate-form {
  flex: 0 0 auto;
}

.daily-digest-state > .daily-digest-actions {
  display: flex;
  width: auto;
  margin: 0 0 0 auto;
}

.daily-digest-state > .daily-digest-actions > .daily-generate-form {
  width: auto;
}

.daily-digest-actions {
  align-items: flex-start;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.daily-generate-form {
  display: grid;
  justify-items: end;
  gap: 6px;
  margin: 0;
}

.brief-tuning {
  position: relative;
  font-size: 13px;
  margin: 0;
}

.brief-tuning > summary {
  cursor: pointer;
  white-space: nowrap;
  list-style: none;
}

.brief-tuning > summary::-webkit-details-marker {
  display: none;
}

.brief-tuning-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  width: min(24rem, calc(100vw - 40px));
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 6px 24px #0002;
}

.brief-tuning-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
}

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

.brief-tuning-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.brief-tuning-row span,
.brief-tuning-row small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.brief-tuning-row > a {
  flex: 0 0 auto;
}

.brief-tuning-interests summary {
  cursor: pointer;
}

.brief-tuning-interests ul {
  display: grid;
  gap: 12px;
  margin: 12px 0 0;
  padding-left: 18px;
}

.brief-tuning-interests li span {
  display: block;
}

.brief-setting-target {
  scroll-margin-top: 100px;
}

.brief-setting-target:target {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.brief-preference-notice p {
  margin: 0 0 8px;
}

.brief-preference-notice .daily-generate-form {
  justify-items: start;
}

@media (max-width: 760px) {
  .daily-digest-state .daily-regenerate-icon {
    width: 32px;
  }
  .brief-tuning {
    position: static;
  }
  .brief-tuning-panel {
    left: auto;
    right: 0;
    width: min(24rem, 100%);
  }
}

@media (max-width: 390px) {
  .daily-generated-label {
    display: none;
  }
}

.brief-citation {
  white-space: nowrap;
}

.daily-digest .summary.markdown-body a.brief-summary-link {
  display: inline-block;
  padding: 2px;
  margin: 0;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.daily-digest .summary.markdown-body a[data-brief-post-id] {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 2px;
  color: var(--accent2);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.daily-digest .summary.markdown-body a[data-brief-post-id]::after {
  content: "↗";
  margin-inline-start: 3px;
  font-size: inherit;
}

.daily-digest .summary.markdown-body a.brief-summary-link,
.daily-digest .summary.markdown-body a[data-brief-post-id],
.daily-digest .summary.markdown-body a[href^="/post?"],
.daily-digest .summary.markdown-body a[href^="/daily?"],
.daily-digest .summary.markdown-body .brief-not-for-me,
.daily-digest .summary.markdown-body em:has(a[href^="/post?"]),
.daily-digest .summary.markdown-body em:has(a[href^="/daily?"]) {
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  text-underline-offset: 3px;
}

.job-progress {
  justify-content: flex-end;
  margin: 0;
  font-size: 12px;
}

.included-posts {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.included-sources {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

.included-sources > summary {
  cursor: pointer;
  font-weight: 700;
  list-style-position: inside;
}

.included-source-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.included-sources + .included-posts {
  margin-top: 12px;
}

.included-posts > summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.included-post-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.included-post-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  padding: 8px 10px;
}

.included-post-index {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.included-post-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.included-post-main a {
  color: var(--text);
  font-weight: 600;
}

.included-post-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 3px;
  font-size: 12px;
}

.included-post-links a {
  color: var(--accent);
  font-weight: 400;
}

.included-post-main span,
.included-post-external {
  color: var(--muted);
  font-size: 12px;
}

.load-more {
  margin-top: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.auto-load-idle,
.auto-load-status {
  display: none;
}

.auto-load-enabled .load-more .button-link {
  display: none;
}

.auto-load-enabled .auto-load-idle {
  display: inline;
}

.auto-load-enabled .load-more.auto-loading .auto-load-idle {
  display: none;
}

.auto-load-enabled .load-more.auto-loading .auto-load-status {
  display: inline;
}

.empty {
  padding: 28px;
}

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

.detail-topline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.detail-topline .crumb {
  flex: 0 0 auto;
  margin: 0;
}

.detail-origin-meta {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.detail-page .detail-origin-meta .source-badge {
  min-width: 0;
  max-width: min(180px, calc(100% - 64px));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-post-age {
  white-space: nowrap;
}

.detail-header {
  margin-bottom: 10px;
}

.detail-header > div {
  flex: 1 1 auto;
  min-width: 0;
}

.detail-header h1 {
  max-width: 820px;
}

.detail-header h1 a {
  color: var(--text);
}

.detail-header h1 a:hover {
  color: var(--accent);
}

.detail-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  margin: 14px 0 18px;
  padding-bottom: 0;
}

.detail-mode-tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 0 2px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.detail-mode-tab:hover,
.detail-mode-tab:focus-visible {
  color: var(--accent);
  text-decoration: none;
}

.detail-mode-tab.active {
  border-color: var(--accent);
  color: var(--accent);
}

.detail-header-scores {
  margin: 8px 0 10px;
}

.detail-other-interests {
  position: relative;
  min-width: 0;
  margin: 0;
}

.detail-other-interests > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.detail-other-interests > summary::-webkit-details-marker {
  display: none;
}

.detail-other-interests > summary::after {
  content: "\25be";
  margin-left: 6px;
}

.detail-other-interests[open] > summary::after {
  content: "\25b4";
}

.detail-other-interest-list {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  display: grid;
  gap: 4px;
  width: max-content;
  max-width: min(320px, calc(100vw - 40px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 8px 24px var(--shadow);
}

.detail-other-interest-list .interest-score-chip {
  justify-content: space-between;
  min-height: 44px;
}

.detail-other-interest-list .interest-score-chip-label {
  max-width: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

.detail-submeta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  width: 100%;
  margin-bottom: 0;
}

.detail-submeta > span {
  min-width: 0;
}

.detail-engagement {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 13px;
}

.detail-engagement > span:not(:last-child)::after {
  content: "\00b7";
  margin-left: 8px;
}

.detail-engagement a {
  overflow-wrap: anywhere;
}

.detail-submeta-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}

.share-form {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.detail-share-form {
  flex: 0 0 auto;
}

.detail-share-icon {
  display: none;
}

.share-link,
.detail-share-link {
  height: auto;
  border: 0;
  background: transparent;
  color: var(--accent);
  padding: 0;
  font-size: 13px;
}

.share-link:hover,
.detail-share-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.share-link--compact {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--muted);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 700;
}

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

.share-tooltip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  width: max-content;
  max-width: 220px;
  border: 1px solid var(--success-line);
  border-radius: 6px;
  background: var(--success-soft);
  box-shadow: 0 8px 20px var(--shadow);
  color: var(--success);
  padding: 5px 8px;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}

.share-tooltip[data-state="error"] {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}

.detail-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 8px;
  color: var(--muted);
  font-size: 13px;
}

.detail-secondary-actions {
  justify-content: flex-end;
}

.detail-actions form {
  display: inline-flex;
  margin: 0;
}

.detail-actions button {
  min-height: 30px;
  padding-left: 10px;
  padding-right: 10px;
}

.feed-card-actions.detail-feedback-actions {
  margin-left: 0;
  justify-content: flex-start;
}

.detail-feedback-actions .feedback-save-status {
  right: auto;
  left: 0;
}

.detail-feedback-actions .feedback-save-status::after {
  right: auto;
  left: 14px;
}

.detail-feedback-actions .feedback-comment-form {
  right: 0;
  left: auto;
}

.processing-button {
  gap: 8px;
}

.processing-button[aria-busy="true"] {
  cursor: progress;
  opacity: 0.85;
}

.processing-indicator {
  display: none;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: processing-spin 0.7s linear infinite;
}

.processing-button[aria-busy="true"] .processing-indicator {
  display: inline-block;
}

.processing-button[aria-busy="true"] .button-shortcut {
  display: none;
}

.button-shortcut {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

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

.detail-actions-spacer {
  flex: 1;
}

.detail-section {
  border-top: 1px solid var(--line);
  margin-top: 26px;
  padding-top: 22px;
}

.detail-section:first-of-type {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.detail-section > h2 {
  margin-bottom: 12px;
}

.detail-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 12px;
}

.detail-summary-head h2 {
  margin: 0;
}

.detail-summary-origin {
  color: var(--muted);
  font-size: 13px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.detail-feedback-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  padding-top: 12px;
  margin-top: 20px;
  border-top: 1px solid var(--line);
}

.detail-feedback-label {
  color: var(--muted);
  font-size: 13px;
}

.detail-summary {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.detail-interest-scores {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.detail-interest-note {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 13px;
}

.detail-research-panel {
  margin: 0;
  width: 100%;
  max-width: 100%;
}

.research-question {
  margin-bottom: 6px;
  color: var(--accent2);
}

.detail-research-panel > summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px 12px;
  list-style: none;
}

.detail-research-panel > summary::marker,
.detail-research-panel > summary::-webkit-details-marker {
  display: none;
}

.detail-research-panel[open] > summary {
  margin-bottom: 12px;
}

.detail-research-body {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.comment {
  padding: 16px;
}

details {
  margin-bottom: 22px;
}

.feed-extra {
  margin: 6px 0 10px;
}

.feedback-comment,
.detail-research-panel {
  margin-bottom: 0;
}

summary {
  cursor: pointer;
  font-weight: 700;
}

pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

dl {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 7px 12px;
  margin: 0;
  font-size: 13px;
}

dt {
  color: var(--muted);
  overflow-wrap: anywhere;
}

dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.audit-meta {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

.comments {
  display: grid;
  gap: 10px;
}

.detail-summary .summary {
  margin-bottom: 16px;
  max-width: 72ch;
  line-height: 1.65;
}

.compact-meta,
.summary-meta {
  color: var(--muted);
}

.summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 0;
  font-size: 13px;
}

.search-results {
  display: grid;
  gap: 10px;
}

.search-result {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  scroll-margin-top: 72px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.search-result h3 {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 1.3;
}

.search-result-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.search-result-rank {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent2-soft);
  color: var(--accent2);
  font-weight: 700;
}

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

.section-heading h2 {
  margin-bottom: 0;
}

.new-research-thread {
  margin: 0 0 14px;
  min-width: 0;
}

.new-research-thread > summary,
.new-research-thread-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 0;
}

.new-research-thread > summary > span:first-child,
.new-research-thread-heading > span:first-child {
  font-size: 19px;
  line-height: 1.25;
}

.new-research-thread > summary::marker,
.new-research-thread > summary::-webkit-details-marker {
  display: none;
}

.new-research-thread .button-link {
  height: 28px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
}

.new-research-thread[open] > summary {
  margin-bottom: 8px;
}

.new-research-thread--static .new-research-thread-heading {
  margin-bottom: 8px;
}

.research-form {
  display: grid;
  gap: 12px;
  padding: 12px 0 0;
  min-width: 0;
}

.research-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
}

.research-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--text);
  padding: 10px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.research-threads {
  display: grid;
  gap: 10px;
}

.research-thread {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.research-thread > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 8px;
}

.research-thread > summary:hover,
.research-thread > summary:focus-visible {
  background: var(--panel-soft);
}

.research-thread > summary::marker,
.research-thread > summary::-webkit-details-marker {
  display: none;
}

.research-thread-title {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  overflow-wrap: anywhere;
}

.research-thread-title::before {
  content: ">";
  display: inline-flex;
  width: 18px;
  color: var(--muted);
  font-size: 13px;
}

.research-thread[open] .research-thread-title::before {
  content: "v";
}

.research-turns {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 2px 12px 14px;
}

.research-turn {
  min-width: 0;
  border-left: 3px solid var(--accent-soft);
  padding-left: 12px;
}

.research-turn h3 {
  margin-bottom: 8px;
}

.research-answer {
  min-width: 0;
  max-width: 100%;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}

.research-answer pre,
.research-answer code {
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.research-sources {
  display: grid;
  gap: 4px;
  margin: 0 0 10px;
  padding-left: 22px;
  font-size: 14px;
}

.research-sources,
.research-sources a {
  min-width: 0;
  overflow-wrap: anywhere;
}

.tool-trace {
  margin: 10px 0 0;
}

.tool-trace pre {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--pre-bg);
  padding: 10px;
  white-space: pre-wrap;
}

.research-followup {
  display: grid;
  gap: 8px;
}

.research-followup .research-input {
  min-height: 76px;
}

.research-followup-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
}

.research-thread-delete {
  display: none;
}

.research-model {
  display: flex;
  align-items: center;
  gap: 8px;
}

.research-model select,
.research-model-select {
  width: auto;
  max-width: 16rem;
}

.research-model-select {
  margin-left: auto;
}

.research-thread-menu {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 36px;
  margin: 0;
}

.research-thread-menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  list-style: none;
}

.research-thread-menu > summary::marker,
.research-thread-menu > summary::-webkit-details-marker {
  display: none;
}

.research-thread-menu[open] > summary {
  border-color: var(--accent);
  color: var(--accent);
}

.research-thread-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 150px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 26px var(--shadow);
  padding: 8px;
}

.research-thread-menu-panel button {
  width: 100%;
  justify-content: flex-start;
  white-space: nowrap;
}

.source-material-section > details {
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px 14px;
}

.source-material-section > details[open] > summary {
  margin-bottom: 10px;
}

.audit-details {
  display: grid;
  gap: 10px;
}

.audit-details dl {
  grid-template-columns: minmax(155px, max-content) minmax(0, 1fr);
  gap: 8px 16px;
  font-size: 14px;
}

.audit-details dt {
  font-size: 13px;
}

.audit-details h2 {
  margin-bottom: 2px;
}

.comment-score {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
}

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

.config-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

/* Onboarding breadcrumb — keeps the "Step N of 3" orientation on the standalone
   interest/source assistant pages a user reaches from the /welcome wizard. */
.setup-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 13px;
}

.setup-progress a {
  font-weight: 600;
}

.setup-progress-step {
  color: var(--muted);
}

/* Starter-topic presets on the onboarding interest step. */
.starter-topics {
  display: grid;
  gap: 8px;
  margin-bottom: 4px;
}

.starter-topics-label {
  font-size: 13px;
  font-weight: 600;
}

.starter-topics .chips {
  margin-bottom: 0;
}

.starter-topic-chip {
  cursor: pointer;
  font-family: inherit;
}

.starter-topic-chip:hover {
  border-color: var(--interest-border, var(--muted));
  color: var(--text);
}

.starter-topic-chip.active {
  border-color: var(--accent, var(--link));
  background: var(--accent-soft, var(--panel-soft));
  color: var(--text);
}

.settings-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 1px;
}

/* On a phone the strip clipped its last tab ("Hi…") with nothing saying it
   scrolls, and the admin strip widened the page; wrap instead. */
@media (max-width: 560px) {
  .settings-tabs { flex-wrap: wrap; overflow-x: visible; }
}

.settings-tab {
  flex: 0 0 auto;
  min-height: 32px;
  border-radius: 999px;
  background: var(--panel-soft);
  padding: 0 14px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

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

.settings-tab.active,
.settings-tab[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.config-section {
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 18px;
}

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

.settings-history-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.settings-history-entry:first-child {
  border-top: 0;
}

.settings-history-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.settings-history-entry form {
  flex: 0 0 auto;
  margin: 0;
}

.section-title-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}

.section-title-row h2 {
  margin-bottom: 4px;
}

.interest-settings-list {
  display: grid;
  /* minmax(0, ...): an auto track takes its widest card's min-content, and a
     closed row's hidden body (the health card's action row) made every card
     408px on a 390px phone, clipping the chips. */
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.interest-settings-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 14px;
}

.interest-settings-header,
.interest-settings-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.interest-settings-footer {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: stretch;
}

.interest-settings-header h3 {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  font-size: 17px;
}

.interest-settings-header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.interest-prompt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.interest-prompt-grid-single {
  grid-template-columns: 1fr;
}

.interest-prompt-preview-card {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.interest-prompt-preview-card > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.interest-prompt-preview-card pre {
  max-height: 190px;
  overflow: auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--pre-bg);
  padding: 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.35;
}

.interest-advanced-settings {
  min-width: 0;
  width: 100%;
}

.interest-advanced-row {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(240px, 1fr);
  align-items: start;
  gap: 12px;
}

.interest-summary-style-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
}

.interest-summary-style-field select {
  width: 100%;
}

.source-toggle.interest-auto-improve-toggle {
  align-items: flex-start;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding-top: 34px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.2;
}

.interest-auto-improve-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
}

.interest-auto-improve-toggle span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.2;
}

.interest-override-field {
  margin-top: 10px;
}

.interest-generated-prompt {
  margin-top: 14px;
}

.interest-generated-when {
  font-weight: 400;
  opacity: 0.75;
}

.interest-override-field textarea {
  min-height: 190px;
  resize: vertical;
}

.linked-source-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
}

.source-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  padding: 0 9px;
  color: var(--muted);
  font-size: 12px;
}

.empty-state-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 14px;
}

.empty-state-inline p {
  margin: 0;
  color: var(--muted);
}

.welcome-header {
  max-width: 760px;
}

/* Up-front expectation: onboarding (interest -> sources -> first brief) takes a
   few minutes end to end, so set that expectation before the user starts. */
.welcome-time-note {
  margin: 10px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
}

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

.welcome-step {
  display: flex;
  min-height: 230px;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 18px;
}

.welcome-step-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.welcome-step-active .welcome-step-number {
  background: var(--accent);
  color: var(--on-accent);
}

.welcome-step-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}

.welcome-step-header h2 {
  margin: 0 0 6px;
}

.welcome-step-number {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.welcome-status {
  margin: auto 0 0;
  color: var(--muted);
  font-size: 13px;
}

.welcome-status-success {
  color: var(--success);
  font-weight: 700;
}

.welcome-build-copy {
  display: grid;
  gap: 5px;
  margin-top: auto;
}

.welcome-build-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.welcome-build-status {
  display: grid;
  gap: 10px;
}

.welcome-build-progress {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 13px;
}

.welcome-build-progress li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: center;
}

.welcome-build-progress li > span {
  display: block;
  width: 10px;
  height: 10px;
  margin-left: 2px;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 50%;
  background: var(--panel);
}

.welcome-build-progress li.is-active {
  color: var(--text);
  font-weight: 700;
}

.welcome-build-progress li.is-active > span {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
  background: var(--accent);
}

.welcome-build-progress li.is-complete {
  color: var(--success);
}

.welcome-build-progress li.is-complete > span {
  border-color: var(--success);
  background: var(--success);
}

.welcome-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.welcome-payoff {
  display: grid;
  gap: 18px;
  margin-top: 22px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--panel);
  padding: 20px;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.welcome-payoff-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.welcome-payoff-header h2 {
  margin: 2px 0 6px;
}

.welcome-payoff-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

.welcome-payoff-kicker {
  margin: 0;
  color: var(--success);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Background pass status. Muted on purpose: the feed is usable and onboarding
   is complete, so this reports, it does not ask. */
.welcome-pending-sources {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.welcome-preview-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.welcome-preview-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 14px;
}

.welcome-preview-card h3 {
  margin: 10px 0;
  font-size: 17px;
  line-height: 1.3;
}

.welcome-preview-card .summary {
  font-size: 14px;
}

.welcome-preview-card .summary > :last-child {
  margin-bottom: 0;
}

.welcome-step form {
  margin: 0;
}

.welcome-skip {
  margin-top: 14px;
}

.welcome-email {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 18px;
}

.welcome-email h2 {
  margin: 0 0 4px;
}

/* Setup from the join request: the reader's own words, then the progress. */
.welcome-auto-setup {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 18px;
}

.welcome-auto-setup h2,
.welcome-auto-setup p {
  margin: 0;
}

.welcome-request-quote {
  margin: 0;
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 12px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.welcome-request-note {
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}

.welcome-email p {
  margin: 0;
}

.welcome-email-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
}

.welcome-email-form label {
  display: flex;
  gap: 8px;
  align-items: center;
}

.welcome-skip form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (max-width: 640px) {
  .welcome-payoff-header {
    align-items: stretch;
    flex-direction: column;
  }
}

.help-section {
  display: grid;
  gap: 12px;
}

.help-section pre {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--pre-bg);
  padding: 12px;
}

.help-section code {
  border-radius: 4px;
  background: var(--code-bg);
  padding: 1px 4px;
}

.help-section pre code {
  background: transparent;
  padding: 0;
}

.help-steps {
  margin: 0;
  padding-left: 22px;
}

.help-steps li + li {
  margin-top: 8px;
}

.preference-fields {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.preference-setting-row {
  align-items: center;
  background: var(--panel-soft);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  padding: 16px;
}

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

.preference-setting-copy {
  display: grid;
  gap: 4px;
}

.preference-setting-copy strong {
  color: var(--text);
  font-size: 14px;
}

.preference-setting-copy small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.preference-fields input,
.preference-fields select {
  width: 100%;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.form-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
}

.form-grid input {
  width: 100%;
}

.json-editor,
.filter-editor {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  padding: 12px;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

.json-editor {
  min-height: 420px;
}

.common-editor {
  min-height: 220px;
}

.source-json-editor {
  min-height: 260px;
  margin-top: 10px;
}

.new-source-editor {
  min-height: 180px;
}

.filter-editor {
  min-height: 180px;
}

.filter-editor.compact {
  min-height: 110px;
}

.form-actions {
  text-align: right;
}

.assistant-form {
  display: block;
}

.assistant-steps {
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 0 0 14px;
  list-style: none;
}

.assistant-steps li {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  padding: 5px 10px;
  color: var(--muted);
  font-size: 13px;
}

.assistant-steps li.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.assistant-steps li.done {
  border-color: var(--success-line);
  background: var(--success-soft);
  color: var(--success);
}

.assistant-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

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

.assistant-editor-stack {
  display: grid;
  gap: 14px;
}

.assistant-interest-chips {
  margin-bottom: 16px;
}

.assistant-apply-interest {
  margin-top: 14px;
}

.assistant-apply-interest-chips .chip {
  cursor: pointer;
}

.assistant-apply-interest-chips input {
  width: 14px;
  height: 14px;
  margin: 0;
}

.assistant-controls label,
.assistant-prompt-label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
}

.assistant-controls input,
.assistant-controls select,
.assistant-prompt {
  width: 100%;
}

.assistant-prompt {
  min-height: 190px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  padding: 12px;
  color: var(--text);
}

.assistant-chat {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.assistant-message {
  max-width: min(760px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 10px 12px;
}

.assistant-message-user {
  justify-self: end;
  background: var(--accent-soft);
}

.assistant-message-role {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.assistant-message pre {
  margin: 0;
  white-space: pre-wrap;
  font: inherit;
  color: var(--text);
}

.assistant-chat-input {
  min-height: 86px;
}

.assistant-selected-sources {
  min-height: 96px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.assistant-selected-sources-label {
  margin-top: 14px;
}

.assistant-advanced {
  margin-top: 14px;
}

.assistant-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.assistant-start-over {
  margin-right: auto;
}

.assistant-progress {
  color: var(--muted);
  font-size: 13px;
}

.assistant-progress-block {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.assistant-progress-block h3 {
  color: var(--accent2, var(--success));
}

.assistant-progress-text {
  margin: 0;
  color: var(--muted);
}

.assistant-results {
  display: grid;
  gap: 16px;
}

.assistant-block {
  display: grid;
  gap: 10px;
}

.assistant-history ol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.assistant-history li {
  min-width: 0;
}

.assistant-history-item {
  display: grid;
  width: 100%;
  height: auto;
  min-height: 0;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px 14px;
  color: var(--text);
  text-align: left;
  white-space: normal;
}

button.assistant-history-item {
  cursor: pointer;
}

button.assistant-history-item:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.assistant-history-label {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}

.assistant-history-model {
  color: var(--accent2, var(--success));
}

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

.assistant-chat-history {
  gap: 14px;
}

.assistant-chat-turn {
  display: grid;
  gap: 8px;
}

.assistant-chat-message {
  display: grid;
  gap: 4px;
  max-width: min(760px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

.assistant-chat-message p {
  margin: 0;
  white-space: pre-wrap;
}

.assistant-chat-message-user {
  justify-self: start;
  background: var(--panel-soft);
}

.assistant-chat-message-model {
  justify-self: stretch;
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}

.assistant-chat-message-model .assistant-history-label {
  color: var(--accent2, var(--success));
}

.assistant-selected-interest {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.assistant-selected-interest h3 {
  margin: 0;
}

.assistant-interest-prompt-block {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.assistant-interest-prompt-block > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.assistant-interest-prompt-preview {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  padding: 10px 12px;
  color: var(--text);
  white-space: pre-wrap;
  font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.assistant-model-answer {
  border: 1px solid var(--accent2, var(--success-line));
  border-radius: 8px;
  background: var(--accent2-soft, var(--success-soft));
  padding: 12px;
}

.assistant-model-answer h3,
.assistant-model-answer h4 {
  margin-bottom: 4px;
  color: var(--accent2, var(--success));
}

.assistant-model-answer h4 {
  font-size: 13px;
}

.assistant-model-answer p,
.assistant-model-answer ul {
  margin-bottom: 0;
}

.assistant-block h3 {
  margin-bottom: 0;
}

.assistant-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.assistant-card {
  display: grid;
  gap: 10px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.assistant-card-muted {
  opacity: 0.78;
}

.assistant-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.assistant-card pre {
  overflow-x: auto;
  margin: 8px 0 0;
  white-space: pre-wrap;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--pre-bg);
  padding: 10px;
  color: var(--text);
  font-size: 12px;
}

.assistant-source-options {
  margin-top: 14px;
}

.assistant-source-option {
  cursor: pointer;
}

.assistant-source-option:hover {
  border-color: var(--accent);
}

.assistant-source-option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.assistant-source-option[data-selected="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
}

.assistant-source-option-new {
  border-color: var(--success-line);
  background: var(--success-soft);
}

.assistant-source-option-new[data-selected="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.assistant-source-option-header {
  display: flex;
  align-items: start;
  gap: 8px;
}

.assistant-source-option-header h4 {
  margin: 0;
  font-size: 16px;
}

.assistant-source-status {
  margin-left: auto;
  text-align: right;
  font-size: 11px;
}

.assistant-source-new-badge {
  margin-left: auto;
  font-size: 11px;
}

.assistant-source-option-header input {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin-top: 2px;
}

.assistant-source-meta,
.assistant-source-quality,
.assistant-source-url {
  color: var(--muted);
  font-size: 12px;
}

.assistant-source-url {
  overflow-wrap: anywhere;
}

.assistant-source-coverage,
.assistant-source-fit p,
.assistant-source-yield-warning {
  margin: 0;
}

.assistant-source-coverage {
  color: var(--muted);
  font-size: 13px;
}

.assistant-source-fit {
  display: grid;
  gap: 4px;
}

.assistant-source-fit strong,
.assistant-source-samples > strong,
.assistant-source-samples > .samples-toggle-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Recent-examples disclosure: a plain heading on desktop; on narrow screens it
   becomes a tap-to-expand toggle so long source cards stay scannable and the
   sticky apply bar is reachable without scrolling past every example. */
.samples-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.samples-body {
  display: grid;
  gap: 8px;
}

@media (max-width: 760px) {
  .samples-toggle-label {
    cursor: pointer;
  }

  .samples-toggle-label::after {
    content: "\25B8";
    font-size: 10px;
    transition: transform 0.15s ease;
  }

  .samples-toggle:checked ~ .samples-toggle-label::after {
    transform: rotate(90deg);
  }

  .samples-toggle:not(:checked) ~ .samples-body {
    display: none;
  }
}

.assistant-source-yield-warning {
  border-left: 3px solid var(--warn);
  background: var(--warn-soft);
  padding: 8px 10px;
  color: var(--text);
  font-size: 12px;
}

.assistant-source-samples {
  display: grid;
  gap: 8px;
}

.assistant-source-sample {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 7px 0 0;
  font-size: 12px;
}

.assistant-source-sample span,
.assistant-source-sample p {
  margin: 0;
  color: var(--muted);
}

.assistant-source-sample a {
  overflow-wrap: anywhere;
}

.assistant-source-sample time {
  flex: 0 0 auto;
  color: var(--muted);
}

.assistant-source-detail-label {
  margin: 8px 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.assistant-source-instructions summary {
  cursor: pointer;
  color: var(--link);
  font-size: 12px;
}

.assistant-debug {
  margin-top: 10px;
}

.assistant-debug summary {
  cursor: pointer;
  color: var(--link);
  font-size: 12px;
}

.assistant-debug pre {
  overflow-x: auto;
  margin: 8px 0 0;
  white-space: pre-wrap;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--pre-bg);
  padding: 10px;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.35;
}

.assistant-json-editor {
  min-height: 300px;
}

.assistant-diff-dialog {
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  padding: 0;
  box-shadow: 0 18px 48px var(--shadow);
}

.assistant-diff-dialog::backdrop {
  background: rgb(15 23 42 / 0.48);
}

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

.assistant-dialog-header h3 {
  margin: 0;
}

.assistant-diff-instruction {
  margin: 0;
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
}

.assistant-diff-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.assistant-diff-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 16px;
}

.assistant-diff-panel + .assistant-diff-panel {
  border-left: 1px solid var(--line);
}

.assistant-diff-panel-new {
  background: var(--accent2-soft, var(--success-soft));
}

.assistant-diff-panel h4 {
  margin: 0;
}

.assistant-diff-panel span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.assistant-diff-panel pre {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--pre-bg);
  padding: 10px;
  white-space: pre-wrap;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

@media (max-width: 760px) {
  .assistant-diff-grid {
    grid-template-columns: 1fr;
  }

  .assistant-diff-panel + .assistant-diff-panel {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

.save-bar {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  box-shadow: 0 8px 28px var(--shadow);
  padding: 8px 8px 8px 18px;
  font-size: 14px;
}

.save-bar .save-bar-button {
  border-color: var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.save-bar .save-bar-button:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}

.resolved-list {
  display: grid;
  gap: 10px;
}

.source-profile-list,
.profile-editor-list,
.source-editor-list {
  display: grid;
  gap: 10px;
}

.source-profile-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 240px);
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}

.source-profile-row:last-child {
  border-bottom: 0;
}

.source-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* A briefing's cited URLs are printed whole; unbroken they widened the post
   page to 524px on a phone. */
.detail-enrichment-sources {
  overflow-wrap: anywhere;
}

.profile-name {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.profile-editor {
  color: var(--muted);
  font-size: 13px;
}

.profile-editor,
.source-editor,
.new-profile,
.new-source {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.source-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

/* The left column must grow to fill the row so the Manage button (pushed with
   margin-left:auto) lands on a consistent right edge instead of gluing to the
   end of a variable-length name. */
.source-editor-main {
  flex: 1 1 auto;
  min-width: 0;
}

/* Name + health dot + any notable-status word travel together and wrap as one
   unit, so a long source name never knocks the Manage button out of place. */
.source-name-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.status-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
}

.status-dot--ok { background: var(--success); }
.status-dot--due { background: var(--warn); }
.status-dot--error { background: var(--danger); }
.status-dot--running { background: var(--accent); }
.status-dot--hidden { background: var(--muted); opacity: 0.5; }

.source-row-menu {
  position: relative;
  /* Cancel the global details bottom margin: as a flex item it inflates the
     row's cross axis and knocks sibling buttons out of alignment. */
  margin: 0 0 0 auto;
}

.source-row-menu > summary {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--muted);
  padding: 0 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  list-style: none;
}

.source-row-menu > summary::marker,
.source-row-menu > summary::-webkit-details-marker {
  display: none;
}

.source-row-menu[open] > summary {
  border-color: var(--accent);
  color: var(--accent);
}

.source-row-menu-items {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 10;
  display: grid;
  gap: 6px;
  min-width: max-content;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 8px;
  box-shadow: 0 10px 26px var(--shadow);
}

.source-row-menu-items .button-link,
.source-row-menu-items button {
  justify-content: flex-start;
  margin: 0;
  white-space: nowrap;
}

.profile-editor-summary,
.source-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.profile-editor-summary {
  justify-content: flex-start;
  cursor: pointer;
  color: var(--text);
}

.profile-editor-summary::marker,
.profile-editor-summary::-webkit-details-marker {
  display: none;
}

.profile-editor-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  transition: transform 120ms ease;
}

.profile-editor[open] .profile-editor-chevron {
  transform: rotate(90deg);
}

.profile-editor-name {
  font-weight: 700;
}

.profile-editor-body {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.profile-editor-actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.source-meta {
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.source-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.source-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.source-profile-picker {
  display: grid;
  gap: 6px;
  min-width: min(280px, 100%);
  color: var(--muted);
  font-size: 13px;
}

.source-profile-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.new-source-profile-picker {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
  margin: 10px 0 14px;
}

.new-source-profile-picker > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.prompt-improver-outputs {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.prompt-improver-outputs h3 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}

.prompt-improver-output {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.prompt-improver-output-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
}

.prompt-improver-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 700;
}

.prompt-improver-status-active {
  background: var(--success-soft);
  color: var(--success);
}

.prompt-improver-status-disabled,
.prompt-improver-status-not_generated {
  background: var(--code-bg);
  color: var(--muted);
}

/* Interests: clean rows, expand in place to the full filter + settings. */
.interest-settings-list {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
}
.interest-settings-card {
  display: block;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 0;
  gap: 0;
}
.interest-settings-card:first-child { border-top: none; }
/* Cancel the global details bottom margin: it left a 22px blank band under
   every collapsed interest row. */
.interest-row { margin: 0; }
.interest-row > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}
.interest-row > summary::-webkit-details-marker { display: none; }
.interest-row > summary::after {
  content: "⌄";
  color: var(--muted);
  display: inline-block;
  transition: transform 0.15s ease;
}
.interest-row[open] > summary::after { transform: rotate(180deg); }
@media (max-width: 560px) {
  .interest-row > summary::after { display: none; }
  /* A long name plus two or three chips does not fit one phone line: let the
     chips drop under the name instead of running off the card. */
  .interest-row > summary { padding: 13px 14px; flex-wrap: wrap; row-gap: 6px; }
  .ir-name { white-space: normal; flex-shrink: 1; min-width: 0; overflow-wrap: anywhere; }
  .ir-meta { flex-wrap: wrap; row-gap: 6px; }
  .ir-src { display: none; }
}
.interest-row[open] > summary {
  background: var(--panel-soft);
  border-bottom: 1px solid var(--line);
}
.ir-name { font-weight: 650; font-size: 15px; white-space: nowrap; flex-shrink: 0; }
.ir-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  min-width: 0;
  color: var(--muted);
  font-size: 12.5px;
}
.int-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.int-chip.tuned { background: var(--success-soft); color: var(--success); }
.int-chip.need,
.int-chip.stale { background: var(--warn-soft); color: var(--warn); }
.ir-src { white-space: nowrap; }
.interest-row-body { padding: 14px 16px 16px; display: grid; gap: 16px; }
.ir-policy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
}
@media (max-width: 560px) { .ir-policy { grid-template-columns: 1fr; gap: 14px; } }
.ir-h {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.ir-h.keep { color: var(--success); }
.ir-h.avoid { color: var(--danger); }
.ir-block ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ir-block li {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}
.ir-block li::before { content: "•"; position: absolute; left: 2px; color: var(--muted); }
.ir-block li.muted { color: var(--muted); }
.ir-block li.muted::before { content: ""; }
.ir-empty { margin: 0; color: var(--muted); font-size: 13px; }
.ir-learned {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  vertical-align: middle;
  background: var(--accent-soft, var(--warn-soft));
  color: var(--accent, var(--warn));
  cursor: help;
}
.ir-shaped { margin-top: 12px; }
.ir-shaped > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}
.ir-shaped-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.ir-shaped-list li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12.5px;
  line-height: 1.4;
  flex-wrap: wrap;
}
.ir-shaped-list .ir-fb { flex: 0 0 auto; font-size: 12px; }
.ir-shaped-list a { color: var(--link, var(--text)); }
.ir-fb-reason { color: var(--muted); font-style: italic; }
.ir-calibration { margin-top: 12px; }
.ir-calibration > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
}
.ir-calibration > summary span { margin-left: 6px; font-weight: 400; }
.ir-calibration-body {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}
.ir-calibration-headline,
.ir-calibration-stats {
  display: flex;
  gap: 8px 16px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}
.ir-score-histogram {
  display: grid;
  grid-template-columns: repeat(10, minmax(18px, 1fr));
  align-items: end;
  gap: 4px;
  height: 82px;
}
.ir-score-bucket {
  display: grid;
  grid-template-rows: 16px 48px 14px;
  align-items: end;
  text-align: center;
}
.ir-score-count,
.ir-score-label { color: var(--muted); font-size: 10px; line-height: 1; }
.ir-score-bar {
  display: block;
  width: 100%;
  height: max(2px, calc(var(--calibration-share) * 0.48));
  max-height: 48px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  opacity: 0.72;
}
.ir-generation-list { display: grid; gap: 3px; font-size: 11.5px; }
.ir-generation-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 56px 72px;
  gap: 8px;
}
.ir-generation-row span:not(:first-child) { text-align: right; }
.ir-generation-header { color: var(--muted); font-weight: 650; }
.ir-calibration-note { margin: 0; color: var(--muted); font-size: 11.5px; }
.ir-muted-topics { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.ir-muted-heading { color: var(--muted); font-size: 12px; font-weight: 700; }
.ir-muted-topics form,
.ir-muted-topic {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11.5px;
}
.ir-muted-topics button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--link, var(--accent));
  font-size: inherit;
}
.ir-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ir-field > span:first-child {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  min-width: 108px;
}
.ir-sources { align-items: flex-start; }
.ir-adv > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}
.ir-adv .assistant-prompt-label { margin-top: 10px; display: grid; gap: 5px; }
.ir-actions { display: flex; gap: 8px; align-items: center; }
.assistant-field-hint {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  margin: 3px 0 7px;
}

.prompt-improver-status-stale {
  background: var(--warn-soft);
  color: var(--warn);
}

.prompt-improver-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--muted);
  font-size: 12px;
}

.generated-prompt-editor {
  min-height: 150px;
  margin-top: 8px;
}

.generated-prompt-rationale {
  margin: 8px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
}

.profile-editor label,
.source-editor label,
.new-profile label,
.new-source label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
}

.source-editor .source-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
}

.source-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
}

.source-toggle-note {
  align-self: center;
  color: var(--muted);
  font-size: 12px;
}

.source-editor select,
.new-profile input,
.template-source-form input,
.source-search {
  min-width: 180px;
}

.new-profile {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.new-source {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.add-profile,
.add-source {
  margin-top: 12px;
  margin-bottom: 0;
}

.add-profile summary,
.add-source summary {
  display: inline-flex;
  align-items: center;
  height: 36px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.add-profile summary:hover,
.add-source summary:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}

.add-profile summary::marker,
.add-profile summary::-webkit-details-marker,
.add-source summary::marker,
.add-source summary::-webkit-details-marker {
  display: none;
}

.action-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.config-section .run-panel {
  margin-bottom: 0;
}

.settings-assistant-panel {
  display: grid;
  gap: 12px;
}

.settings-assistant-panel h3 {
  margin: 0;
  font-size: 16px;
}

.assistant-source-update + .source-editor-list {
  margin-top: 18px;
}

.settings-assistant-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1fr);
  gap: 12px;
}

.settings-assistant-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
}

.settings-assistant-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.source-picker-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 14px;
}

.source-picker-accordion {
  grid-template-columns: 1fr;
}

.source-picker {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.advanced-settings {
  color: var(--muted);
}

.advanced-settings > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
}

.advanced-settings[open] > summary {
  margin-bottom: 10px;
}

.interest-advanced-settings > summary::after {
  content: ">";
  display: inline-block;
  color: var(--muted);
  font-weight: 700;
  transition: transform 120ms ease;
}

.interest-advanced-settings[open] > summary::after {
  transform: rotate(90deg);
}

.source-picker h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.source-picker-panel {
  display: grid;
  gap: 10px;
  align-content: start;
}

.source-picker-accordion .source-picker-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.source-picker-panel > summary {
  display: flex;
  align-items: center;
  min-height: 30px;
  color: var(--text);
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  list-style-position: inside;
}

.source-picker-panel[open] > summary {
  margin-bottom: 8px;
}

.private-browser-picker {
  grid-column: 1 / -1;
}

.source-picker-panel h4 {
  margin: 0;
  font-size: 15px;
}

.source-search {
  width: 100%;
}

.catalog-source-list,
.template-source-grid {
  display: grid;
  gap: 10px;
}

.catalog-source-row,
.template-source-form {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.catalog-source-row {
  grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
  align-items: start;
}

.source-picker-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
}

/* Browse the catalog: a first-class section on the Sources tab, not a panel
   nested inside "Advanced". */
.catalog-browse {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.catalog-browse-header h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.your-sources-header {
  margin: 18px 0 10px;
}

.catalog-browse-header p {
  margin: 0;
}

.catalog-browse-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 12px 0 10px;
}

.catalog-browse-controls .source-search {
  flex: 1 1 240px;
  width: auto;
}

.catalog-category-chips {
  margin: 0;
}

.catalog-category-chips .chip {
  cursor: pointer;
}

.chip-count {
  margin-left: 5px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* The list is dozens of rows long: cap it so the rest of the tab stays
   reachable, and let the search/chips above stay put while it scrolls. */
.catalog-source-list {
  max-height: 560px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.catalog-source-main {
  min-width: 0;
}

.source-category {
  display: inline-block;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--panel-soft);
  padding: 1px 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}

.source-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 3px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.catalog-browse-count,
.catalog-browse-empty {
  margin: 0 0 8px;
}

.catalog-interest-warning {
  margin: 0;
  color: var(--danger);
  font-size: 13px;
}

@media (max-width: 640px) {
  .catalog-source-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .source-picker-actions {
    justify-items: start;
  }
}

.template-source-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
}

.template-source-form select,
.template-source-form textarea {
  width: 100%;
}

.browser-state-editor {
  min-height: 120px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--text);
  padding: 10px;
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  resize: vertical;
}

.template-source-form button {
  justify-self: start;
}

.source-health-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.source-health-stat {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.source-health-stat strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 22px;
  line-height: 1.1;
}

.source-health-stat span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.source-health-source {
  min-width: 220px;
}

.source-health-source strong {
  display: block;
}

.source-health-meta,
.source-health-error {
  color: var(--muted);
  font-size: 12px;
}

.source-health-error {
  margin-top: 5px;
  color: var(--danger);
}

.source-health-quality {
  min-width: 124px;
}

/* Text, not a bordered control. `.button-link` adds a 36px box, border and
   padding worth ~24px, which pushed the trigger past a table cell the table's
   own width budget will not grow. Every neighbouring cell is plain text or a
   plain link; this now matches, and fits. */
.source-quality-open {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  line-height: 1.3;
  font-size: 13px;
  cursor: pointer;
}

.source-quality-open .source-quality-kind {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.source-quality-kind {
  white-space: nowrap;
}

/* Only the flagged count is coloured in the table. The attributes themselves
   live in the dialog: ten numbers in a cell is noise, and `pct_stub` in
   particular must not read as an alarm -- x.com is 80% stub because tweets
   are short. */
.source-quality-alarm {
  color: var(--danger);
  /* "4 flagged" broke across two lines in the ~105px column, which reads as a
     rendering fault rather than a count. */
  white-space: nowrap;
}

.source-quality-scope {
  margin: 0 0 12px;
  color: var(--muted);
}

/* Narrower than assistant-diff-dialog's 1120px: the content is a label column
   and a number, and at full width it was ~70% empty space. */
.source-quality-dialog {
  width: min(660px, calc(100vw - 32px));
}

.source-quality-body {
  max-height: min(720px, calc(100vh - 132px));
  overflow: auto;
  padding: 16px 20px 20px;
}

.source-quality-scope {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.source-quality-section + .source-quality-section {
  margin-top: 18px;
}

.source-quality-section h4 {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* A stat grid, not a label column. Two columns of label+value left the right
   half of a 660px dialog empty; this flows 2-3 per row and fills it. */
.source-quality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px 16px;
}

.source-quality-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.source-quality-stat-label {
  color: var(--muted);
  font-size: 12px;
}

.source-quality-stat-value {
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  line-height: 1.25;
}

.source-quality-stat-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.source-quality-stat.is-risk .source-quality-stat-value {
  color: var(--danger);
}

.source-quality-subhead {
  margin: 22px 0 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.source-quality-hosts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.source-quality-hosts li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.source-quality-sep {
  color: var(--muted);
}

.source-health-flags,
.source-health-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.source-health-actions a {
  white-space: nowrap;
}

.source-health-actions form {
  margin: 0;
}

.source-health-actions button {
  height: auto;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-size: inherit;
  text-decoration: underline;
}

.source-health-actions button.danger {
  color: var(--danger);
}

.source-health-recent {
  white-space: nowrap;
}

/* As a stacked phone card the cell is ~276px; its longest line ("never
   stored a post; 58 clean fetches") ran past the card and was clipped. */
@media (max-width: 560px) {
  .source-health-recent { white-space: normal; }
}

body.source-log-dialog-open {
  overflow: hidden;
}

.source-log-dialog {
  width: min(1120px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
}

.source-log-dialog .assistant-dialog-header {
  align-items: flex-start;
}

.source-log-status {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.source-log-body {
  max-height: min(740px, calc(100vh - 132px));
  overflow: auto;
  padding: 16px;
}

.source-log-content {
  display: block;
  min-height: 420px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--code-bg);
  padding: 12px;
  color: var(--text);
  font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.source-log-line {
  display: block;
  margin: 0;
  padding: 0;
  border-radius: 2px;
}

.source-log-line-empty {
  min-height: 1.2em;
}

.source-log-line-warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.source-log-line-erro {
  background: var(--danger-soft);
  color: var(--danger);
}

.source-log-line-info,
.source-log-line-trac {
  color: var(--text);
}

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

.pipeline-grid-wide {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.pipeline-grid form {
  display: grid;
  gap: 8px;
  align-content: space-between;
  min-height: 86px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.pipeline-grid form > span,
.pipeline-grid label span {
  color: var(--muted);
  font-size: 13px;
}

.pipeline-grid label {
  display: grid;
  gap: 5px;
}

.pipeline-grid .force-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.pipeline-grid .force-toggle input {
  width: auto;
}

.pipeline-grid input {
  width: 100%;
}

.pipeline-grid select {
  width: 100%;
}

.pipeline-grid button[type="submit"] {
  justify-content: center;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.pipeline-grid button[type="submit"]:hover:not(:disabled) {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  text-decoration: none;
}

.pipeline-progress {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.pipeline-progress[hidden] {
  display: none;
}

.pipeline-progress-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

.pipeline-progress-header strong {
  color: var(--text);
}

.pipeline-progress progress {
  width: 100%;
  height: 12px;
}

.pipeline-progress button {
  justify-self: start;
}

.pipeline-timing {
  font-size: 12px;
}

.pipeline-timing[hidden],
.pipeline-counters[hidden] {
  display: none;
}

.pipeline-counters {
  display: grid;
  gap: 4px;
}

/* Stage name in its own column, so wrapped chips stay under the first chip
   instead of returning under the name. */
.pipeline-counter-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
}

.pipeline-counter-stage {
  color: var(--muted);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pipeline-counter-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.pipeline-counter {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  color: var(--muted);
  white-space: nowrap;
}

/* Fresh work reads as the baseline; everything else is re-derivation. */
.pipeline-counter.is-fresh {
  border-color: var(--accent, var(--line));
  color: var(--text);
}

.pipeline-counter b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.pipeline-result {
  display: grid;
  gap: 10px;
}

.pipeline-result[hidden] {
  display: none;
}

.pipeline-result-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
}

.pipeline-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

.pipeline-result-header strong {
  color: var(--text);
}

.pipeline-prompt-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pipeline-prompt-compare label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
}

.pipeline-result textarea {
  width: 100%;
  min-height: 180px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--text);
  padding: 10px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
}

.pipeline-result pre {
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--pre-bg);
  padding: 10px;
  white-space: pre-wrap;
}

@media (max-width: 760px) {
  .pipeline-prompt-compare {
    grid-template-columns: 1fr;
  }
}

.pipeline-progress pre {
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--pre-bg);
  padding: 10px;
  white-space: pre-wrap;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

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

.data-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.data-table tr:last-child td {
  border-bottom: 0;
}

.data-table td {
  overflow-wrap: anywhere;
}

/* The events table had this class on it and no rules anywhere, so it inherited
   bare `.data-table`: auto layout, which sizes columns from content and lets a
   long source name ("Warner Bros. Discovery Press Release Newsroom", or an
   arXiv category list) steal the width from Message, the only column anyone
   reads. Fixed layout with explicit widths puts the room where the text is. */
.events-table {
  table-layout: fixed;
  min-width: 720px;
}

/* Category is sized for the longest name the log emits
   (`canonical_duplicate_skipped`): `.data-table td` sets `overflow-wrap:
   anywhere`, and snake_case offers no break opportunity, so anything narrower
   splits a word mid-token ("body_no_match_reject / ed"). */
.events-table th:nth-child(1), .events-table td:nth-child(1) { width: 8.5rem; }
.events-table th:nth-child(2), .events-table td:nth-child(2) { width: 7rem; }
.events-table th:nth-child(3), .events-table td:nth-child(3) { width: 13rem; }
.events-table th:nth-child(4), .events-table td:nth-child(4) { width: 11rem; }

.events-table .events-time {
  white-space: nowrap;
}

.events-table .status {
  white-space: nowrap;
}

.events-table .events-when {
  display: block;
}

.events-table .events-time .subtle {
  font-size: 12px;
}

.events-table td:nth-child(3) {
  color: var(--muted);
  font-size: 13px;
}

.events-message-cell {
  min-width: 0;
}

/* Repeat count for folded runs of one message (a backend outage repeats the
   same line once per attempt). */
.events-repeat {
  background: var(--pre-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-right: 6px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* Messages are raw exception text — median 130 chars, max 647 on the live
   store — so long ones clamp to two lines and open in place. Clamping in CSS
   rather than slicing the string keeps one copy of the text and stays right at
   any column width. */
/* Flex, so the disclosure triangle sits beside the first line rather than on
   its own row above it — the clamped span is block-level and pushes the native
   ::marker off. `list-style: none` drops that native marker; the ::before
   below replaces it. */
/* The global `details` bottom margin left a blank band under every message. */
.events-message {
  margin: 0;
}

.events-message > summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  font-weight: 400;
  gap: 6px;
  list-style: none;
}

.events-message > summary::-webkit-details-marker {
  display: none;
}

.events-message > summary::before {
  color: var(--muted);
  content: "▸";
  flex: none;
  font-size: 11px;
}

.events-message[open] > summary::before {
  content: "▾";
}

.events-message > summary > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.events-message[open] > summary > span {
  display: block;
  white-space: pre-wrap;
}

/* A table cell, not a flex box: `display: flex` on the td took it out of the
   row, and the own-account row's empty cell drew its border at the wrong
   height. */
.users-table-actions {
  text-align: right;
  white-space: nowrap;
}

.users-table-actions form {
  display: inline-block;
  margin: 0 0 0 0.4rem;
}

.auth-form label.source-toggle {
  display: inline-flex;
  justify-self: start;
}

.config-section > .auth-form.compact {
  max-width: 520px;
}

.events-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 14px;
}

.events-filters select {
  width: 100%;
}

.impersonation-banner {
  align-items: center;
  background: var(--warn-soft);
  border-bottom: 1px solid var(--warn);
  color: var(--warn);
  display: flex;
  gap: 1rem;
  justify-content: center;
  padding: 0.55rem 1rem;
}

.impersonation-banner span {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
}

.impersonation-banner small {
  color: var(--muted);
}

.impersonation-banner form {
  margin: 0;
}

.impersonation-banner button {
  background: var(--warn);
  border-color: var(--warn);
  color: var(--on-accent);
  padding: 0.35rem 0.7rem;
}

.posts-table {
  width: 100%;
  table-layout: fixed;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 14px;
}

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

.posts-table th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.posts-table .num {
  text-align: right;
}

.posts-table th:nth-child(2),
.posts-table td:nth-child(2) {
  width: 15%;
}

.posts-table th:nth-child(3),
.posts-table td:nth-child(3) {
  width: 280px;
}

.posts-table th:nth-child(4),
.posts-table td:nth-child(4) {
  width: 82px;
}

/* Source takes what the fixed columns leave. Below 1024px the table is a
   stack of cards (.admin-cards), so no min-width: that only made it scroll. */
.source-health-table {
  table-layout: fixed;
}

.source-health-table th:nth-child(1),
.source-health-table td:nth-child(1) {
  width: 130px;
}

.source-health-table th:nth-child(8),
.source-health-table td:nth-child(8) {
  width: 110px;
}

.source-health-table th:nth-child(3),
.source-health-table td:nth-child(3) {
  width: 110px;
}

.source-health-table th:nth-child(4),
.source-health-table td:nth-child(4) {
  width: 120px;
}

.source-health-table th:nth-child(5),
.source-health-table td:nth-child(5) {
  width: 105px;
}

.source-health-table th:nth-child(6),
.source-health-table td:nth-child(6) {
  width: 100px;
}

.source-health-table th:nth-child(7),
.source-health-table td:nth-child(7) {
  width: 110px;
}

.source-health-table .source-health-source {
  min-width: 0;
}

.source-health-table .source-health-source strong,
.source-health-table .source-health-meta,
.source-health-table .source-health-error {
  overflow-wrap: anywhere;
}

.posts-table .status {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-table {
  table-layout: fixed;
}

.catalog-table th:nth-child(2), .catalog-table td:nth-child(2) { width: 100px; }
.catalog-table th:nth-child(3), .catalog-table td:nth-child(3) { width: 28%; }
.catalog-table th:nth-child(4), .catalog-table td:nth-child(4) { width: 56px; }
.catalog-table th:nth-child(5), .catalog-table td:nth-child(5) { width: 72px; }
.catalog-table th:nth-child(6), .catalog-table td:nth-child(6) { width: 170px; }

/* An admin reads the whole description; the two-line clamp is for the
   reader-facing catalog browser. */
.catalog-table .source-description {
  display: block;
  overflow: visible;
}

/* The closed disclosure sits on its own row under the buttons; open, it is a
   stack of labelled inputs at the column's width. */
.catalog-fetch-settings {
  flex-basis: 100%;
  margin: 0;
}

.catalog-fetch-settings > summary {
  color: var(--accent);
  cursor: pointer;
  font-weight: 400;
}

.catalog-fetch-settings form {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.catalog-fetch-settings label {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 12px;
}

.catalog-fetch-settings input {
  width: 100%;
  min-width: 0;
}

.catalog-fetch-settings p {
  margin: 0;
  font-size: 12px;
}

.interest-score-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.feed-profile-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.feed-profile-tab {
  border-radius: 6px;
  background: transparent;
}

.feed-profile-tab[aria-selected="true"] {
  border-color: var(--interest-solid);
  background: var(--interest-solid);
  color: var(--interest-on-solid);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--interest-solid) 28%, transparent);
}

.feed-profile-summary[hidden] {
  display: none;
}

.interest-score-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text);
  background: transparent;
  text-decoration: none;
  line-height: 1.15;
}

a.interest-score-chip:hover,
.feed-profile-tab:hover {
  border-color: transparent;
  background: var(--interest-bg);
  color: var(--text);
}

.interest-score-chip--selected {
  border-color: var(--interest-solid);
  background: var(--interest-solid);
  color: var(--interest-on-solid);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--interest-solid) 28%, transparent);
}

.interest-score-chip--selected .interest-score-chip-label {
  color: var(--interest-on-solid);
  font-weight: 700;
}

.interest-score-chip-label {
  min-width: 0;
  max-width: 132px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--interest-color);
}

.interest-score-chip-value {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 18px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
  color: var(--panel);
  background: var(--muted);
}

.interest-score-chip--high .interest-score-chip-value {
  background: var(--accent);
}

.interest-score-chip--feed .interest-score-chip-value {
  background: var(--accent2);
}

.interest-score-chip--summary .interest-score-chip-value {
  background: var(--warn);
}

.interest-score-chip--low .interest-score-chip-value {
  background: var(--danger);
}

.interest-score-chip--none .interest-score-chip-value {
  background: var(--muted);
}

.feed-profile-tab[aria-selected="true"]:hover,
a.interest-score-chip--selected:hover {
  border-color: var(--interest-solid);
  background: var(--interest-solid);
  color: var(--interest-on-solid);
}

.interest-score-chip--selected .interest-score-chip-value {
  color: var(--interest-solid);
  background: var(--interest-on-solid);
}

.post-audit-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.posts-table tr:last-child td {
  border-bottom: 0;
}

.post-title {
  min-width: 0;
}

.post-title a {
  overflow-wrap: anywhere;
}

.inline-action {
  margin: 0;
}

.inline-action button {
  height: 30px;
  padding: 0 10px;
}

@media (max-width: 760px) {
  .topbar,
  .page {
    padding-left: 16px;
    padding-right: 16px;
  }

  .topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
    min-height: 0;
  }

  .desktop-nav,
  .desktop-logout-form {
    display: none;
  }

  .mobile-primary-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 13px;
    flex: 1 1 auto;
    width: auto;
  }

  .mobile-primary-nav > .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
  }

  .mobile-primary-nav > .nav-link.active {
    color: var(--accent);
    box-shadow: inset 0 -2px 0 var(--accent);
  }

  .mobile-nav-menu {
    display: inline-block;
    position: relative;
    margin: 0;
  }

  /* 44px hit area on the summary; the visible pill is a compact
     pseudo-element behind the label so the nav row stays light. */
  .mobile-nav-menu > summary {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
    border: 0;
    background: transparent;
    padding: 0 12px;
    color: var(--muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    gap: 6px;
    list-style: none;
    text-align: left;
  }

  .mobile-nav-menu > summary::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 28px;
    transform: translateY(-50%);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    z-index: -1;
  }

  .mobile-nav-menu.active > summary {
    color: var(--accent);
  }

  .mobile-nav-menu.active > summary::before {
    border-color: var(--accent);
    background: var(--accent-soft);
  }

  .mobile-nav-menu > summary::marker,
  .mobile-nav-menu > summary::-webkit-details-marker {
    display: none;
  }

  .mobile-nav-chevron {
    color: currentColor;
    font-size: 13px;
    line-height: 1;
    transition: transform 120ms ease;
  }

  .mobile-nav-menu[open] .mobile-nav-chevron {
    transform: rotate(90deg);
  }

  .mobile-nav-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    z-index: 30;
    min-width: 150px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: 0 10px 26px var(--shadow);
    padding: 8px;
  }

  .mobile-nav-links {
    display: grid;
    grid-template-columns: minmax(132px, 1fr);
    gap: 8px;
  }

  .mobile-nav-links .nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    padding: 0 10px;
    font-size: 15px;
  }

  .mobile-nav-links .nav-link.active {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
  }

  .mobile-logout-form {
    margin: 8px 0 0;
  }

  .mobile-logout-form button {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  .page {
    padding-top: 10px;
    padding-bottom: 18px;
  }

  h1 {
    font-size: 28px;
  }

  h2 {
    font-size: 18px;
  }

  .feed-header,
  .detail-header,
  .config-header,
  .daily-digest-header {
    display: block;
    margin-bottom: 14px;
  }

  .feed-header {
    margin-bottom: 10px;
  }

  .feed-header > div:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .feed-header h1 {
    margin-bottom: 0;
    font-size: 26px;
  }

  .feed-header > div:first-child p {
    flex: 0 0 auto;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.2;
  }

  .daily-page-header > div:first-child {
    display: block;
  }

  .daily-page-header > div:first-child p {
    margin-top: 4px;
    white-space: normal;
  }

  .feed-page-header > div:first-child,
  .daily-page-header > div:first-child {
    display: none;
  }

  .feed-desktop-actions,
  .daily-desktop-actions {
    display: none;
  }

  .feed-mobile-actions {
    display: block;
    margin: 10px 0 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
  }

  .feed-mobile-actions > summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    padding: 0 12px;
    cursor: pointer;
    font-weight: 700;
    list-style: none;
  }

  .feed-mobile-actions > summary > span:first-child {
    min-width: max-content;
  }

  .feed-mobile-actions > summary::marker,
  .feed-mobile-actions > summary::-webkit-details-marker {
    display: none;
  }

  .feed-mobile-actions-summary {
    min-width: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .feed-mobile-actions[open] > summary {
    border-bottom: 1px solid var(--line);
  }

  .feed-mobile-actions-body {
    display: grid;
    gap: 10px;
    padding: 12px;
  }

  .feed-profile-chips {
    margin-bottom: 10px;
  }

  .feed-profile-chips .chips-group--profiles {
    gap: 6px;
    padding: 6px 8px;
  }

  .feed-profile-chips .chips-label,
  .feed-profile-chips .chip {
    min-height: 32px;
  }

  .feed-profile-chips .chip {
    padding-left: 12px;
    padding-right: 12px;
  }

  .detail-header h1 {
    font-size: 26px;
    line-height: 1.22;
    letter-spacing: -0.025em;
    margin-bottom: 10px;
    overflow-wrap: anywhere;
  }

  .detail-page .crumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .detail-origin-meta {
    gap: 8px;
    font-size: 12px;
  }

  .detail-origin-meta .source-badge {
    padding: 3px 9px;
    font-size: 12px;
  }

  .detail-topline .detail-fetch-time {
    display: none;
  }

  .detail-header-scores {
    gap: 4px 8px;
    margin: 0 0 4px;
  }

  .detail-header-scores > .interest-score-chip {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 13px;
    box-shadow: none;
    position: relative;
  }

  .detail-header-scores > .interest-score-chip::before {
    content: "";
    position: absolute;
    inset: -6px 0;
  }

  .detail-other-interests[open] {
    flex-basis: 100%;
  }

  .detail-other-interest-list {
    position: static;
    width: auto;
    max-width: 100%;
    box-shadow: none;
    margin-bottom: 8px;
  }

  .detail-mode-tabs {
    margin-top: 10px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .detail-mode-tab {
    flex: 1 0 auto;
    justify-content: center;
    min-height: 44px;
  }

  .daily-digest {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin-bottom: 14px;
  }

  .daily-digest-header {
    margin-bottom: 8px;
  }

  .daily-digest-meta {
    display: grid;
    gap: 6px;
    margin-bottom: 0;
    font-size: 13px;
  }

  .daily-digest-state {
    min-height: 30px;
  }

  .daily-digest-scan {
    line-height: 1.35;
  }

  .daily-digest-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    width: 100%;
    margin-top: 10px;
  }

  .daily-digest-actions form {
    width: 100%;
    margin: 0;
  }

  .daily-digest-actions button {
    justify-content: center;
    width: 100%;
  }

  .daily-generate-form {
    justify-items: stretch;
  }

  .job-progress {
    justify-content: flex-start;
  }

  .daily-digest .summary {
    margin-top: 0;
  }

  .daily-digest .markdown-body li + li {
    margin-top: 8px;
  }

  .included-sources,
  .included-posts {
    margin-top: 12px;
    padding-top: 10px;
  }

  .config-header-actions {
    justify-content: flex-start;
    margin-top: 12px;
  }

  .filter-form {
    margin-top: 14px;
    gap: 10px;
  }

  .filter-form label {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }

  .filter-form input,
  .filter-form select,
  .filter-form button {
    box-sizing: border-box;
    min-height: 44px;
  }

  .filter-form input,
  .filter-form select {
    width: 100%;
    min-width: 0;
  }

  .filter-form select[name="source"] {
    max-width: 100%;
  }

  .feed-header-actions {
    justify-content: flex-start;
  }

  .feed-header-actions {
    margin-top: 18px;
    width: 100%;
  }

  .feed-mobile-filter-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 0;
  }

  .feed-mobile-filter-form label {
    flex: none;
  }

  .feed-mobile-filter-form button,
  .feed-mobile-refresh-form button {
    width: 100%;
    justify-content: center;
  }

  .daily-mobile-filter-form .day-nav {
    grid-column: 1 / -1;
  }

  .daily-mobile-filter-form .day-nav .button-link {
    flex: 1 1 0;
    justify-content: center;
  }

  .feed-refresh-form button {
    justify-content: center;
  }

  button,
  .button-link {
    min-height: 44px;
  }

  button.compact,
  .button-link.compact {
    min-height: 40px;
  }

  .chip {
    min-height: 36px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .source-badge,
  .status,
  .interest-chip,
  .content-type {
    min-height: 30px;
  }

  .feed-list {
    gap: 0;
  }

  .feed-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 18px 0;
  }

  .feed-card + .feed-card {
    border-top: 1px solid var(--line);
  }

  .feed-card:hover {
    box-shadow: none;
  }

  .feed-card .summary-clamp.clamped::after {
    background: linear-gradient(to bottom, transparent, var(--bg));
  }

  .feed-card-head {
    margin-bottom: 8px;
  }

  .feed-card h2 {
    margin: 0;
    font-size: 19px;
    line-height: 1.28;
  }

  .feed-card-title-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .card-meta {
    gap: 7px 10px;
  }

  .card-meta .source-badge {
    max-width: min(100%, 220px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .feed-card .card-secondary-meta {
    margin: 0 0 8px;
  }

  .feed-profile-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 2px;
  }

  .feed-profile-tab {
    flex: 0 0 auto;
    max-width: min(240px, 82vw);
  }

  .share-link,
  .detail-share-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .icon-button {
    width: 44px;
    height: 44px;
  }

  .feedback-button {
    font-size: 18px;
  }

  .feedback-comment > summary {
    width: 44px;
    min-height: 44px;
  }

  .card-actions {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }

  .card-actions .feed-card-actions {
    width: auto;
    justify-content: flex-end;
  }

  .included-post-list li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .included-post-external {
    grid-column: 2;
  }

  .feedback-comment-form {
    width: min(100%, calc(100vw - 32px));
    right: 0;
    left: auto;
    flex-wrap: wrap;
  }

  .feedback-comment-form input[type="text"] {
    min-height: 40px;
  }

  .detail-submeta {
    display: grid;
    gap: 8px;
  }

  .detail-submeta-actions {
    margin-left: 0;
    gap: 4px;
  }

  .detail-submeta-actions .flag-button,
  .detail-submeta-actions .share-link {
    min-height: 44px;
    padding: 0 10px;
    border-color: transparent;
    background: transparent;
    font-size: 13px;
  }

  .detail-submeta-actions .flag-button--active {
    color: var(--accent);
    background: var(--accent-soft);
  }

  .detail-summary-head {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 12px;
  }

  .detail-summary .markdown-body {
    font-size: 16px;
    line-height: 1.65;
    overflow-wrap: anywhere;
  }

  .detail-summary .markdown-body h3 {
    font-size: 17px;
    line-height: 1.4;
    margin-top: 24px;
    margin-bottom: 10px;
  }

  .detail-actions {
    justify-content: flex-start;
  }

  .detail-research-panel > summary {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
  }

  .detail-research-panel > summary > span:last-child {
    margin-left: auto;
  }

  .detail-research-panel[open] > summary {
    margin-bottom: 8px;
  }

  .detail-research-body {
    gap: 10px;
  }

  .new-research-thread > summary,
  .new-research-thread-heading {
    align-items: flex-start;
    min-height: auto;
  }

  .new-research-thread > summary > span:first-child,
  .new-research-thread-heading > span:first-child {
    font-size: 17px;
  }

  .research-input {
    min-height: 84px;
  }

  .research-followup .research-input {
    min-height: 62px;
  }

  .research-threads {
    gap: 8px;
  }

  .research-thread > summary {
    flex-wrap: wrap;
    gap: 8px;
  }

  .research-thread-title {
    width: 100%;
    word-break: break-word;
  }

  .detail-actions button {
    min-height: 40px;
  }

  .search-form {
    display: grid;
    gap: 12px;
  }

  .search-controls {
    justify-content: flex-start;
    margin-top: 0;
  }

  .search-controls button {
    flex: 1 1 100%;
    justify-content: center;
  }

  .search-desktop-form {
    display: none;
  }

  .search-mobile-form {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
  }

  .search-mobile-command-row {
    display: flex;
  }

  .search-mobile-command-row button {
    width: 100%;
    justify-content: center;
  }

  .search-mobile-actions {
    margin-top: 0;
  }

  .search-mobile-actions button {
    width: 100%;
    justify-content: center;
  }

  .search-mobile-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .search-mobile-checkbox {
    grid-column: 1 / -1;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-soft);
    padding: 0 12px;
    color: var(--text);
  }

  .search-mobile-checkbox input[type="checkbox"] {
    flex: 0 0 18px;
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
  }

  .search-mobile-checkbox span {
    min-width: 0;
    font-size: 15px;
  }

  .table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .posts-table {
    display: block;
    min-width: 0;
    width: 100%;
    table-layout: auto;
    border-collapse: separate;
    font-size: 14px;
  }

  .posts-table thead {
    display: none;
  }

  .posts-table tbody {
    display: grid;
    gap: 10px;
  }

  .posts-table tr {
    display: grid;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    padding: 12px;
  }

  .posts-table th,
  .posts-table td {
    width: auto !important;
    border-bottom: 0;
    padding: 0;
  }

  .posts-table td {
    display: grid;
    /* One label width for every row: `minmax(78px, auto)` sized each cell's
       label on its own, so "LAST ACCESS" pushed its value out of line. */
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    color: var(--text);
  }

  .posts-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .posts-table td.post-title {
    display: block;
  }

  .posts-table td.post-title::before {
    display: none;
  }

  .posts-table td.post-title a {
    display: block;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
  }

  .posts-table .num {
    text-align: left;
  }

  .posts-table .status {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .source-health-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .preference-setting-row {
    align-items: stretch;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .source-profile-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .source-editor-header {
    display: grid;
  }

  .section-title-row,
  .interest-settings-header,
  .interest-settings-footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .interest-prompt-grid {
    grid-template-columns: 1fr;
  }

  .interest-advanced-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .source-toggle.interest-auto-improve-toggle {
    padding-top: 0;
  }

  .linked-source-chips {
    justify-content: flex-start;
  }

  .save-bar {
    left: 16px;
    right: 16px;
    transform: none;
    justify-content: space-between;
  }

  .source-picker-grid,
  .catalog-source-row,
  .settings-assistant-grid {
    grid-template-columns: 1fr;
  }

  .source-picker-actions {
    justify-items: start;
  }
}

/* ---- Alerts page ---- */
.banner.info {
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
}

.alerts-empty {
  margin: 4px 0 14px;
}

.alert-rules-list {
  display: grid;
  gap: 12px;
}

.alert-rule-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 14px;
}

.alert-rule-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 14px;
  flex-wrap: wrap;
}

.alert-rule-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.alert-rule-name {
  font-weight: 700;
  font-size: 16px;
  overflow-wrap: anywhere;
}

.alert-kind {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

.alert-status {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--line);
  white-space: nowrap;
}

.alert-status.on {
  border-color: var(--success-line);
  background: var(--success-soft);
  color: var(--success);
}

.alert-status.off {
  color: var(--muted);
  background: var(--panel);
}

.alert-rule-summary {
  color: var(--muted);
  font-size: 13px;
}

.alert-rule-form {
  display: grid;
  gap: 12px;
}

.alert-simple,
.alert-advanced-fields,
.alert-report-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.alert-simple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.alert-report-fields {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}

.alert-report-fields[hidden],
.alert-report-fields [hidden] {
  display: none;
}

.alert-simple label,
.alert-advanced-fields label,
.alert-report-fields label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.alert-simple label > span,
.alert-advanced-fields label > span,
.alert-report-fields label > span {
  font-size: 13px;
  color: var(--muted);
}

.alert-advanced-fields label.full,
.alert-report-fields label.full {
  grid-column: 1 / -1;
}

.alert-report-fields textarea {
  min-height: 118px;
  resize: vertical;
}

.alert-report-fields small {
  line-height: 1.35;
}

.alert-destination {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.alert-warn {
  color: var(--warn);
}

.alert-latest-report {
  margin: -2px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.alert-latest-report a {
  font-weight: 650;
}

.hint {
  color: var(--muted);
  font-weight: 400;
  opacity: 0.85;
}

.alert-advanced > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: max-content;
  cursor: pointer;
  padding: 2px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  list-style: none;
}

.alert-advanced > summary:hover {
  color: var(--accent);
}

.alert-advanced > summary::marker,
.alert-advanced > summary::-webkit-details-marker {
  display: none;
}

.alert-create > summary {
  cursor: pointer;
  width: max-content;
  list-style: none;
}

.alert-create > summary::marker,
.alert-create > summary::-webkit-details-marker {
  display: none;
}

.alert-create-title {
  display: inline;
  margin: 0;
}

.alert-create:not([open]) > summary .alert-create-title {
  color: var(--muted);
  font-size: 15px;
}

.alert-create:not([open]) > summary:hover .alert-create-title {
  color: var(--accent);
}

.alert-create[open] > summary {
  margin-bottom: 12px;
}

.alert-advanced > summary::after {
  content: "▾";
  font-size: 10px;
}

.alert-advanced[open] > summary::after {
  content: "▴";
}

.alert-advanced[open] .alert-advanced-fields {
  margin-top: 10px;
}

.alert-slack-field {
  display: grid;
  gap: 4px;
}

.alert-slack-field > span {
  font-size: 13px;
  color: var(--muted);
}

.alert-rule-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.alert-rule-actions.secondary {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.alert-save-row {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.alert-advanced-actions {
  margin-top: 12px;
}

.alert-rule-actions form {
  margin: 0;
}

.alert-actions-spacer {
  flex: 1 1 auto;
}

@media (max-width: 640px) {
  .alert-simple,
  .alert-advanced-fields,
  .alert-report-fields {
    grid-template-columns: 1fr;
  }
}

/* ---- Custom report page ---- */
.report-page-header h1 {
  margin: 3px 0;
}

.report-page {
  margin-top: 18px;
}

.report-scope {
  margin: 5px 0 0;
}

.report-request {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.report-request > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.report-request pre {
  margin: 10px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--muted);
}

/* Source assistant: onboarding keeps the results front and center; history
   and refinement live behind this disclosure. */
.assistant-fine-tune {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px 14px;
}

.assistant-fine-tune > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
}

.assistant-fine-tune[open] > summary {
  margin-bottom: 12px;
}

.assistant-fine-tune .assistant-prompt-label {
  margin-bottom: 10px;
}

/* Welcome: on small screens, completed steps compact into a single row so the
   active step is visible without scrolling. */
@media (max-width: 900px) {
  .welcome-step.welcome-step-done {
    min-height: 0;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 10px 14px;
  }

  .welcome-step-done .welcome-step-header {
    align-items: center;
  }

  .welcome-step-done .welcome-step-header h2 {
    margin: 0;
    font-size: 16px;
  }

  .welcome-step-done .welcome-step-header p.subtle {
    display: none;
  }

  .welcome-step-done .welcome-status {
    margin: 0;
  }

  .welcome-step-done .button-link,
  .welcome-step-done .button-link.primary-link {
    height: auto;
    width: auto;
    padding: 4px 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 13px;
  }
}

/* Mobile touch targets: 44px minimum for buttons and form controls, and keep
   the source-assistant apply actions reachable while scrolling long card
   lists. */
@media (max-width: 900px) {
  .button-link,
  .button-link.compact,
  .welcome-step-done .button-link,
  .welcome-step-done .button-link.primary-link {
    min-height: 44px;
    height: auto;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select {
    min-height: 44px;
  }

  .assistant-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    border-radius: 8px 8px 0 0;
    background: var(--panel);
  }
}


/* Feed cards: flag + follow sit as one group at the right edge of the meta
   row so they can never wrap apart. The buttons keep a 44px hit area but draw
   only icon/label; negative margins stop the group from inflating the row. */
.feed-card-toggles {
  display: flex;
  align-items: center;
  margin: -12px 0 -12px auto;
}

/* Desktop lays the badges out as direct meta-row items; the wrapper only
   becomes a box on mobile, where it wraps and the toggles do not. */
.feed-card-badges {
  display: contents;
}

.feed-card-meta .flag-button {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
}

.feed-card-meta .flag-button:hover,
.feed-card-meta .flag-button:focus-visible,
.feed-card-meta .flag-button--active {
  background: transparent;
  color: var(--accent);
}

/* The labeled Follow toggle needs room for bell + text; the fixed 44px
   icon-button width collapsed the bell to 0 and could clip the label. */
.feed-card-meta .flag-button--labeled {
  width: auto;
  min-width: 44px;
}

.shared-brief-cta p {
  color: var(--muted);
  max-width: 640px;
}

.near-miss-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 600;
  background: var(--warn-soft);
  color: var(--warn);
  cursor: help;
}

.removed-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 600;
  background: var(--danger-soft);
  color: var(--danger);
  cursor: help;
}

/* Not an error state: the post is fine, the summary just stands on the
   discussion rather than the article. Muted rather than red so it informs
   without shouting — ~1.6 posts a day carry it. */
.article-missing-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 600;
  background: var(--muted-soft, rgba(128, 128, 128, 0.14));
  color: var(--muted, #6b7280);
  cursor: help;
}

.refresh-history-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.refresh-history-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.refresh-history-outcome--removed { color: var(--danger); font-weight: 600; }
.refresh-history-outcome--updated { color: var(--fg); }

.refresh-history-trigger {
  border-radius: 999px;
  padding: 0 6px;
  font-size: 11px;
  background: var(--accent-soft);
  color: var(--accent);
}

.feed-engagement {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.continuity-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.continuity-chip:hover {
  text-decoration: underline;
}

/* Continuity chip with >1 related post: click the chip to pop up the full list
   of same-story posts instead of surfacing only the single best one. */
.continuity-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Override the base `details { margin-bottom: 22px }`, which otherwise
     shifts the chip up in the center-aligned meta row. */
  margin: 0;
}

.continuity-more > summary {
  cursor: pointer;
  list-style: none;
}

.continuity-more > summary::-webkit-details-marker,
.continuity-more > summary::marker {
  display: none;
}

.continuity-more > summary::after {
  content: "▾";
  margin-left: 4px;
  font-size: 9px;
}

.continuity-more[open] > summary::after {
  content: "▴";
}

.continuity-more-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 240px;
  max-width: 360px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 8px 24px var(--shadow);
  padding: 6px;
}

@media (min-width: 760px) {
  .continuity-more-list {
    min-width: 360px;
    max-width: 560px;
    padding: 10px;
  }

  .continuity-more-head {
    font-size: 12px;
  }

  .continuity-more-item {
    padding: 7px 8px;
  }

  .continuity-more-title {
    font-size: 14px;
  }
}

.continuity-more-head {
  padding: 2px 6px 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.continuity-more-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
}

.continuity-more-item:hover {
  background: var(--panel-soft);
}

.continuity-more-source {
  flex-shrink: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.continuity-more-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.continuity-more-day {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.feed-day-header {
  margin: 18px 0 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--muted);
}

.feed-day-header:first-child {
  margin-top: 0;
}

.feed-new-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.feed-new-divider::before,
.feed-new-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--accent-soft);
}

.feed-new-divider:first-child {
  margin-top: 0;
}

.track-button:hover,
.track-button:focus-visible,
.track-button--active {
  border-color: var(--accent2);
  color: var(--accent2);
}

.track-button--active {
  background: var(--accent2-soft);
}

/* The bell is an open stroke; keep it unfilled even when tracking is active. */
.track-button--active .track-icon path {
  fill: none;
}

.feed-card-meta .flag-button.track-button:hover,
.feed-card-meta .flag-button.track-button:focus-visible,
.feed-card-meta .track-button--active {
  background: transparent;
  color: var(--accent2);
}


.continuity-chip--tracked {
  background: var(--accent2-soft);
  color: var(--accent2);
  font-weight: 700;
}

/* Story chip: where this post sits in a developing story. Deliberately quieter
   than the continuity chip next to it — that one says what changed, this one
   only says how much came before. */
.story-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

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

.story-chip--main {
  font-weight: 500;
}

.story-header {
  margin-bottom: 22px;
}

.story-title {
  margin-bottom: 4px;
}

.story-thread {
  list-style: none;
  margin: 0;
  padding: 0;
}

.story-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.story-item-marker {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-item--main .story-item-marker {
  background: var(--accent2-soft);
  color: var(--accent2);
}

/* A rolled-up duplicate is part of the story and stays listed, but must not
   compete with the posts that actually said something new. */
.story-item--suppressed {
  opacity: 0.62;
}

.story-item--suppressed .story-item-marker {
  background: var(--line);
  color: var(--muted);
}

.story-item-body {
  min-width: 0;
}

.story-item-title {
  font-size: 16px;
  margin: 0 0 3px;
}

.story-item-meta {
  margin: 0;
  font-size: 13px;
}

.story-item-summary {
  margin: 6px 0 0;
  font-size: 14px;
}

.story-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.story-badge--main {
  background: var(--accent2-soft);
  color: var(--accent2);
}

.story-badge--dup {
  background: var(--line);
  color: var(--muted);
}

/* Explanatory hover tooltip for the flag/track toggles. Anchored like the
   save-status toast (above-right of the form) and suppressed while it shows. */
.flag-button[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  width: max-content;
  max-width: 250px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  box-shadow: 0 8px 20px var(--shadow);
  color: var(--text);
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

.flag-button[data-tooltip]:hover::after,
.flag-button[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.35s;
}

.post-flag-form[data-flag-busy="1"] .flag-button::after,
.post-flag-form:has(.flag-save-status:not([hidden])) .flag-button::after {
  opacity: 0;
  visibility: hidden;
}

/* Clip capture (docs/plans/clip.md) */
.clip-open-button {
  align-self: end;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 12px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.clip-open-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.clip-panel h2 {
  margin-top: 0;
}

.clip-inline-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  max-width: 560px;
}

.clip-inline-form input[type="url"] {
  flex: 1;
  min-width: 0;
}

.clip-bookmarklet {
  display: inline-block;
  border: 1px dashed var(--accent);
  border-radius: 6px;
  padding: 8px 14px;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  cursor: grab;
}

/* Flag/clip toggles sit right-aligned as one visual group. */
.feed-profile-chips .chips-group--flags {
  margin-left: auto;
}

.chip--clipped.active .chip-flag-icon circle {
  fill: currentColor;
}

/* Track icon is concentric arcs: fill only the center dot when active,
   never the open arc paths (the generic .chip--flagged.active fill would). */
.chip--tracked.active .chip-flag-icon path {
  fill: none;
}
.chip--tracked.active .chip-flag-icon circle {
  fill: currentColor;
}

.clip-modal::backdrop { background: rgba(0, 0, 0, 0.45); }

.clip-modal {
  position: fixed;
  padding: 0;
  max-height: calc(100dvh - 32px);
  width: min(680px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 16px 48px var(--shadow);
  overflow: hidden;
}

.clip-modal-close {
  min-width: 44px;
  min-height: 44px;
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 1;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}

.clip-modal-close:hover {
  color: var(--text);
}

.clip-modal-frame {
  display: block;
  width: 100%;
  height: min(460px, calc(100dvh - 34px));
  border: 0;
  background: var(--panel);
}

.clip-install-hint {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

/* Page titles are gone from Feed/Brief/Posts headers (nav already says
   where you are); filter bars sit flush left so controls align across pages
   and with the chips row below. */

/* Suggested source card (link -> source promotion).
   Rendered only when there is an offer; there is no empty state. Sits above the
   feed once, then disappears when the user decides either way. */
.suggestion-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  margin: 0 0 1.1rem;
}

.suggestion-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.suggestion-interest {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  margin-left: 0.4rem;
  text-transform: none;
  letter-spacing: 0;
}

.suggestion-host {
  margin: 0 0 0.3rem;
  font-size: 1.15rem;
  overflow-wrap: anywhere;
}

/* The host, when the heading above it is the publisher's name instead. Sits
   directly under the heading with the margin the heading gave up, so adding it
   does not move anything below. */
.suggestion-host:has(+ .suggestion-domain) {
  margin-bottom: 0.1rem;
}

.suggestion-domain {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.suggestion-observed,
.suggestion-lede {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.suggestion-metrics {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
  font-size: 0.92rem;
}

.suggestion-examples {
  margin: 0 0 0.6rem;
  padding-left: 1.1rem;
  font-size: 0.92rem;
}

.suggestion-examples li {
  margin-bottom: 0.2rem;
  overflow-wrap: anywhere;
}

/* Hanging indent: a wrapped line lines up under the text, not under the number
   (the <strong> inside rules out a grid). */
.suggestion-metrics li { margin: 0.15rem 0; padding-left: 3.4rem; text-indent: -3.4rem; }

/* The gain and the cost get equal visual weight on purpose: the best-yielding
   host measured was also the noisiest, so showing either number alone lies. */
.suggestion-metric {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 3.4rem;
  display: inline-block;
  text-indent: 0;
}

.suggestion-gain .suggestion-metric { color: var(--success); }
.suggestion-cost .suggestion-metric { color: var(--warn); }

.suggestion-caveat {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--warn);
}

.suggestion-bonus {
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
  color: var(--success);
}

.suggestion-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.suggestion-actions form { margin: 0; }

.suggestion-accept {
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  border-radius: 7px;
  padding: 0.45rem 1.1rem;
  font-size: 0.95rem;
  cursor: pointer;
}

.suggestion-accept:hover { background: var(--accent-hover); }

/* Declining is a plain button, not a hidden one: as easy to reach as accepting.
   Re-offering something someone declined is how you teach them to ignore the
   card, so the decision has to be cheap to make honestly. */
.suggestion-dismiss {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.92rem;
  padding: 0.45rem 0.2rem;
  text-decoration: underline;
  cursor: pointer;
}

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

/* Reader-stated facts (Settings -> Preferences). A short list, so it is laid
   out as rows rather than a table; the add control sits under the list because
   the cap makes "add" the rarer action once a reader has stated their setup. */
.reader-facts-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reader-fact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.reader-fact-text { font-size: 13.5px; line-height: 1.45; }
.reader-fact-add { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reader-fact-add .ir-field { flex: 1 1 320px; }
.reader-fact-add input[type="text"] { flex: 1 1 260px; }
.reader-fact-add > .subtle { flex-basis: 100%; margin: 0; font-size: 12px; }
.reader-fact-gate {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.reader-fact-gate small { line-height: 1.5; }


/* ---- Interest split ------------------------------------------------------
   The review page for a proposed split. Its own block because the page has a
   shape nothing else here has: two anchors that must be read against each
   other, so they are columns rather than a stack. */

/* The model's one-sentence reason, on the feed card. Muted and separate from
   the count above it -- the count is the claim, this is the explanation. */
.suggestion-why {
  margin: -0.2rem 0 0.6rem;
  color: var(--muted);
  font-size: 0.92rem;
}

/* `suggestion-accept` / `suggestion-dismiss` are button styles, and on this
   card they dress an <a> (Review split, Cancel) rather than a submit. Anchors
   are inline and ignore the height/padding those rules set, which is what put
   the card's actions out of line with the form button beside them. */
a.suggestion-accept,
a.suggestion-dismiss {
  display: inline-flex;
  align-items: center;
  height: 36px;
  box-sizing: border-box;
  text-decoration: none;
}

a.suggestion-dismiss { text-decoration: underline; }

/* Two offers can stack (link slot + seed slot); keep them visibly separate. */
.suggestion-card + .suggestion-card { margin-top: 0.75rem; }
.suggestion-history-link {
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
}
.suggestion-history-link a { color: var(--muted); }

/* Past suggestions (suggestion_history.html). */
.suggestion-history-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.suggestion-history-entry {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  margin: 0 0 0.75rem;
}
.suggestion-history-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
}
.suggestion-history-host { font-weight: 600; overflow-wrap: anywhere; }
.suggestion-history-meta,
.suggestion-history-outcome { margin: 0.3rem 0 0; }
.suggestion-history-numbers {
  margin: 0.4rem 0 0.5rem;
  padding-left: 1.1rem;
  font-size: 0.92rem;
}
.suggestion-history-entry form { margin: 0.4rem 0 0; }

.split-title {
  margin-bottom: 0.6rem;
  font-size: 26px;
}

.split-reason {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.98rem;
}

.split-evidence,
.split-costs {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 14px 18px;
  margin-bottom: 18px;
}

.split-evidence h2,
.split-costs h2 {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.split-count {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.split-examples {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.92rem;
}

.split-examples li {
  margin-bottom: 0.2rem;
  overflow-wrap: anywhere;
}

/* Side by side so the two DISCARD sections can be compared -- the whole point
   of the review is that each one excludes the other's subject. Stacks below
   900px, where two columns of prose are unreadable anyway. */
.split-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 14px;
  /* Each column takes its natural height. Stretching them to match left the
     shorter draft with dead space under it while the longer one was still
     clipped -- the grid equalised the boxes, not the text inside them. */
  align-items: start;
}

@media (max-width: 900px) {
  .split-columns { grid-template-columns: 1fr; }
}

.split-column {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 14px 18px;
  min-width: 0;
}

.split-column h2 {
  margin: 0 0 0.8rem;
  font-size: 1rem;
}

.split-column input[type="text"] { width: 100%; }

.field-label {
  display: block;
  margin: 0.8rem 0 0.3rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.split-column .field-label:first-of-type { margin-top: 0; }

/* The global `textarea` rule sets height:36px/min-height:88px, which collapsed
   a rows="14" anchor into a three-line box. `interest_split.js` sizes these to
   their content; this min-height is the floor it starts from and the fallback
   with JS off. */
.split-anchor {
  width: 100%;
  height: auto;
  min-height: 18rem;
  overflow: hidden;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* Sits in the slot the other column gives its name input, so the two Criteria
   boxes start on the same line. Styled as text, not a disabled input: it is not
   a field the reader is being stopped from using, it is simply not a field. */
.split-fixed-name {
  margin: 0;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 14px;
  overflow: hidden;
}

.split-fixed-hint {
  color: var(--muted);
  font-size: 0.82rem;
}

.split-added {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.split-note {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.9rem;
}

.split-warning ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

.split-warning li { margin: 0.25rem 0; }

.split-warning p { margin: 0; }

.split-warning {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-left: 3px solid var(--warn);
  background: var(--panel);
  border-radius: 0 6px 6px 0;
  color: var(--warn);
  font-size: 0.9rem;
}

.split-costs ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.94rem;
}

.split-costs li { margin: 0.25rem 0; }

.split-sources,
.split-room {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 14px 18px;
  margin-bottom: 18px;
  overflow-x: auto;
}

.split-sources h2,
.split-room h2 {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.split-sources-hint {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.split-source-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.split-source-table th,
.split-source-table td {
  padding: 0.3rem 0.5rem;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.split-source-table thead th {
  border-top: 0;
  font-size: 0.8rem;
  font-weight: normal;
  color: var(--muted);
}

.split-source-table tbody th {
  font-weight: normal;
  overflow-wrap: anywhere;
}

.split-source-share {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.split-room-options {
  margin: 0.4rem 0 0;
  padding-left: 0;
  list-style: none;
}

.split-room-options li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin: 0.35rem 0;
}

.split-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}


/* ---- "why this?" on a feed card ----------------------------------------
   The stored filter explanation, one disclosure under the card meta. Quiet by
   design: it must not compete with the summary, and it is only useful to a
   reader who is already asking the question. */
.feed-why {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
}

.feed-why-summary {
  display: inline-block;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}

.feed-why-summary::-webkit-details-marker { display: none; }
.feed-why-summary::after { content: " \25be"; }
.feed-why[open] .feed-why-summary::after { content: " \25b4"; }
.feed-why-summary:hover { color: var(--text); }

.feed-why-body {
  margin-top: 0.4rem;
  padding: 0.6rem 0.75rem;
  border-left: 2px solid var(--line);
  background: var(--panel-soft, var(--panel));
  border-radius: 0 6px 6px 0;
}

.feed-why-text {
  margin: 0 0 0.5rem;
  color: var(--text);
  line-height: 1.45;
}

.feed-why-form { margin: 0; }

/* Worded, not an icon. Next to the reason the post was kept, "this shouldn't
   be here" is an unambiguous correction; the bare thumbs-down beside it is a
   mood. */
.feed-why-wrong {
  height: auto;
  padding: 0.25rem 0.6rem;
  font-size: 0.82rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
}

.feed-why-wrong:hover {
  color: var(--text);
  border-color: var(--muted);
}


/* Drop a learned rule from an interest's generated filter. Inline with the
   rule it removes, and quiet: the common case is agreeing with what the filter
   learned, so this must not read as a call to action. */
.ir-drop { display: inline; margin-left: 0.4rem; }
.ir-confirm { display: inline; margin-left: 0.4rem; }

.ir-drop button,
.ir-confirm button {
  height: auto;
  padding: 0 0.35rem;
  font-size: 0.75rem;
  background: none;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  cursor: pointer;
}

.ir-drop button:hover { color: var(--warn); border-color: var(--warn); }
.ir-confirm button:hover { color: var(--success); border-color: var(--success); }
.ir-confirmed {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: 5px;
  background: var(--success-soft);
  color: var(--success);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}


/* "first covered about 2 months ago" — the one fact a reader needs to tell
   news from a follow-up, and the one the summary reliably will not state. */
.first-covered-chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--warn);
  color: var(--warn);
  font-size: 0.78rem;
  white-space: nowrap;
}


/* Continuity on the detail page. Wider than the card's popover because there is
   room here and the reader came looking for context. */
.detail-continuity {
  margin: 0 0 0.8rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

/* The chip doubles as the popover summary, so it needs the marker suppressed
   the same way the card's continuity chip does. */
.detail-continuity summary.first-covered-chip { cursor: pointer; list-style: none; }
.detail-continuity summary.first-covered-chip::-webkit-details-marker { display: none; }

/* Research Threads: a living synthesis reads as a compact dossier, distinct
   from the chronological feed while staying inside the existing visual system. */
.research-hero,
.research-detail-header,
.research-section-heading,
.research-snapshot-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.research-hero { margin: 4px 0 22px; }

.research-hero h1,
.research-detail-header h1 {
  margin: 2px 0 7px;
  line-height: 1.12;
}

.eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.research-lede,
.research-detail-header > div > p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
}

.research-capacity {
  display: grid;
  min-width: 112px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 12px 16px;
  text-align: center;
}

.research-capacity strong {
  color: var(--accent);
  font-size: 1.6rem;
  line-height: 1;
}

.research-capacity span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.75rem;
}

.research-create-panel,
.research-panel,
.research-snapshot,
.research-evidence-section {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 7px 24px color-mix(in srgb, var(--shadow) 42%, transparent);
}

.research-create-panel {
  padding: 20px;
  margin-bottom: 30px;
}

.research-section-heading h2,
.research-panel h2,
.research-claims h3,
.research-open-questions h3 { margin: 0; }

.research-section-heading p,
.research-panel > .subtle {
  margin: 4px 0 0;
  color: var(--muted);
}

.research-form {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.research-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
}

.research-form label small { font-weight: 400; }

.research-form input,
.research-form select,
.research-form textarea {
  width: 100%;
  color: var(--text);
  font-weight: 400;
}

.research-form-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.7fr);
  align-items: end;
  gap: 12px;
}

.research-create-form .research-form-row {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}

.research-form-row > button {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.research-list-section { margin-top: 8px; }

.research-thread-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 14px;
  margin-top: 14px;
}

.research-thread-card {
  display: flex;
  min-height: 250px;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 17px;
}

.research-thread-card.is-archived {
  min-height: 180px;
  opacity: 0.82;
}

.research-thread-card-topline,
.research-detail-kicker,
.research-evidence-meta,
.research-evidence-actions,
.research-claim-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--muted);
  font-size: 0.76rem;
}

.research-thread-card h3 {
  margin: 12px 0 5px;
  font-size: 1.08rem;
}

.research-card-objective {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 15px;
  color: var(--muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.research-card-current {
  display: grid;
  gap: 3px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: 10px 12px;
}

.research-card-current.is-empty {
  border-color: var(--line);
  background: var(--panel-soft);
}

.research-card-current span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.research-card-current strong { font-size: 0.9rem; }

.research-thread-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  color: var(--muted);
  font-size: 0.76rem;
}

.research-status { text-transform: capitalize; }

.research-status--active {
  border-color: var(--success-line);
  background: var(--success-soft);
  color: var(--success);
}

.research-status--paused {
  background: var(--warn-soft);
  color: var(--warn);
}

.research-archive { margin-top: 28px; }

.research-archive > summary,
.research-panel details > summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
}

.research-empty { margin-top: 14px; }

.research-breadcrumb {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 0.82rem;
}

.research-breadcrumb span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.research-detail-header { margin-bottom: 20px; }
.research-detail-kicker { margin-bottom: 9px; }

.research-detail-actions form {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}

.research-detail-actions button {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  white-space: nowrap;
}

.research-detail-actions .job-progress {
  max-width: 220px;
  color: var(--muted);
  font-size: 0.78rem;
}

.research-snapshot {
  overflow: hidden;
  margin: 20px 0;
}

.research-snapshot-header { padding: 22px 24px 16px; }

.research-snapshot-header h2 {
  margin: 3px 0 0;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.research-snapshot-header > span {
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.research-answer {
  border-top: 1px solid var(--line);
  padding: 16px 24px 18px;
}

.research-answer > p {
  margin: 8px 0 0;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.55;
}

.research-next-steps { padding-top: 4px; }

.research-overview h3 { margin: 0 0 6px; }

.research-unread { vertical-align: middle; }

.research-brief-updates {
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 18px 0;
  padding: 14px 18px;
}

.research-brief-updates h2 { margin: 0 0 6px; font-size: 1.05rem; }
.research-brief-updates > ul { margin: 0; padding-left: 18px; }
.research-brief-updates > ul > li { margin: 8px 0; }
.research-brief-updates > ul > li > span { display: block; color: var(--muted); }
.research-brief-updates ul ul { margin: 4px 0 0; padding-left: 18px; }

.research-changes {
  border-block: 1px solid var(--line);
  background: var(--accent-soft);
  padding: 16px 24px;
}

.research-changes h3,
.research-evidence-section h2 { margin: 0; }

.research-changes ul,
.research-open-questions ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.research-changes li { margin: 5px 0; }

.research-overview,
.research-claims,
.research-open-questions { padding: 0 24px 20px; }

.research-overview {
  padding-top: 20px;
  font-size: 1.03rem;
  line-height: 1.62;
}

.research-overview p {
  margin: 0 0 7px;
  white-space: pre-line;
}

.research-citations {
  display: inline-flex;
  gap: 4px;
  margin-left: 7px;
  vertical-align: baseline;
}

.research-citations a {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--panel);
  font-size: 0.7rem;
  font-weight: 800;
}

.research-claim-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 10px;
  margin-top: 10px;
}

.research-claim {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent2);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.research-claim--mixed,
.research-claim--uncertain { border-left-color: var(--warn); }

.research-claim--superseded {
  border-left-color: var(--muted);
  opacity: 0.78;
}

.research-claim p { margin: 8px 0; }

.research-evidence-section {
  margin: 20px 0;
  padding: 20px 24px;
}

.research-evidence-list {
  display: grid;
  gap: 0;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.research-evidence-list > li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 15px 0;
}

.research-evidence-list > li:first-child { border-top: 0; }

.research-evidence-number {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
}

.research-evidence-list h3 {
  margin: 3px 0 5px;
  font-size: 1rem;
}

.research-evidence-list p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 0.86rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.research-evidence-actions a { font-weight: 700; }

.research-detail-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0;
}

.research-panel { padding: 18px; }

.research-assessment-list,
.research-history-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.research-assessment-list li,
.research-history-list li {
  border-top: 1px solid var(--line);
  padding: 10px 0;
}

.research-assessment-list li:first-child,
.research-history-list li:first-child { border-top: 0; }

.research-assessment-list li > div,
.research-history-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.research-assessment-list p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.research-history-list li > span {
  color: var(--muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.research-history-list li.is-current a {
  color: var(--text);
  font-weight: 750;
}

.research-management { align-items: start; }
.research-lifecycle form { margin: 12px 0 0; }
.research-lifecycle p { color: var(--muted); }

@media (max-width: 760px) {
  .research-hero,
  .research-detail-header,
  .research-snapshot-header {
    display: grid;
    gap: 12px;
  }

  .research-capacity {
    grid-auto-flow: column;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: baseline;
    width: max-content;
  }

  .research-form-row,
  .research-create-form .research-form-row,
  .research-detail-columns { grid-template-columns: 1fr; }

  .research-form-row > button,
  .research-detail-actions button {
    justify-content: center;
    width: 100%;
  }

  .research-detail-actions form { display: grid; }

  .research-snapshot-header,
  .research-answer,
  .research-changes,
  .research-overview,
  .research-claims,
  .research-open-questions,
  .research-evidence-section { padding-inline: 16px; }

  .research-thread-card { min-height: 0; }
}

/* Reader controls: explicit actions and optional detail. */
.feed-mobile-toolbar { display: none; }
.feed-metadata-toggle { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; }
.feed-metadata-toggle:hover { color: var(--accent); background: transparent; }
.feed-metadata-chevron { display: inline-block; }
.feed-metadata-toggle[aria-expanded="true"] .feed-metadata-chevron { transform: rotate(180deg); }
.feed-metadata-content { flex-basis: 100%; }
.source-add-panel { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.source-add-panel > summary,
.research-create-panel > summary { cursor: pointer; font-weight: 700; font-size: 16px; min-height: 28px; }
.source-add-panel .new-source-profile-picker { margin: 16px 0; }
.source-add-choice { margin-top: 14px; }
.source-add-choice > summary,
.source-add-panel .source-picker > summary,
.research-options > summary { cursor: pointer; min-height: 32px; font-weight: 600; }
.source-add-choice > .settings-assistant-panel { margin-top: 12px; }
.research-create-panel[open] > summary { margin-bottom: 12px; }
.research-options .research-form-row { margin-top: 12px; }
.research-start-button { justify-self: start; background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.research-card-check { font-size: 13px; color: var(--muted); margin: 12px 0; }
.ask-examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; }
.ask-examples > p { flex-basis: 100%; margin: 0; }
.ask-examples button { text-align: left; white-space: normal; max-width: 100%; }
.search-header > div:first-child { display: block; }
.search-header > div:first-child p { white-space: normal; margin-top: 6px; line-height: 1.5; }
.save-bar { max-width: calc(100vw - 32px); border-radius: 16px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 760px) {
  .feed-mobile-toolbar { display: flex; align-items: start; gap: 8px; width: 100%; }
  .feed-mobile-toolbar > details { flex: 1; min-width: 0; margin: 0; }
  .feed-mobile-toolbar > .clip-open-button { min-height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; }
  .source-add-panel > summary,
  .source-add-choice > summary,
  .source-add-panel .source-picker > summary,
  .research-create-panel > summary,
  .research-options > summary { min-height: 44px; align-content: center; }
  .research-start-button { width: 100%; }
  .save-bar { width: calc(100vw - 32px); padding: 8px; gap: 8px; }
  .save-bar > [data-save-status] { flex-basis: 100%; text-align: center; }
}

.daily-generate-form--inline { display: inline-flex; align-items: center; }
.daily-regenerate-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
}
.daily-regenerate-icon:hover { color: var(--accent); background: var(--accent-soft); }
.daily-regenerate-icon .action-icon { width: 16px; height: 16px; }
.daily-regenerate-icon:disabled .action-icon { animation: processing-spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .daily-regenerate-icon:disabled .action-icon { animation: none; }
}

.daily-brief-footer { margin-top: 16px; }
@media (min-width: 761px) {
  [data-brief] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
  [data-brief] > .daily-digest-header { grid-column: 1; grid-row: 1; }
  [data-brief] > .daily-brief-footer { grid-column: 2; grid-row: 1; margin-top: 0; }
  [data-brief] > :not(.daily-digest-header):not(.daily-brief-footer) { grid-column: 1 / -1; }
}

/* Mobile reading and editing, with desktop controls preserved. */
.mobile-nav-links .mobile-following-overflow,
.source-assigned-interests { display: none; }
.source-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.source-section-heading h2 { margin: 0; }
@media (max-width: 760px) {
  .mobile-primary-nav { gap: 8px; min-width: 0; }
  .mobile-nav-menu { margin-left: auto; }
  .mobile-nav-dropdown { left: auto; right: 0; max-width: calc(100vw - 32px); }
  .mobile-primary-nav > .mobile-following-primary { gap: 3px; }
  .mobile-following-primary .nav-badge { max-width: 28px; overflow: hidden; }
  .feed-header > .archive-desktop-filters:first-child { display: none; }
  .archive-mobile-filters { margin-top: 0; }

  .daily-regenerate-icon {
    width: 44px;
    min-height: 44px;
  }

  .daily-regenerate-icon { height: 44px; }
  .feed-metadata-toggle { min-width: 44px; min-height: 44px; }

  /* Feed alignment at phone width (checked at iPhone SE 320/375). */
  .feed-mobile-actions > summary { min-height: 42px; }
  .feed-profile-chips .chips-group--flags { flex: 1 1 auto; margin-left: 0; }
  .feed-profile-chips .chips-group--flags > .chip { flex: 1 1 0; justify-content: center; }
  .feed-card-meta:has(> .feed-card-badges) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px; }
  .feed-card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
  .feed-card-badges .feed-metadata-toggle { margin-block: -6px; }
  /* Block, not inline-flex: text-overflow never draws an ellipsis on a flex container. */
  .feed-card-badges .source-badge { display: block; line-height: 30px; }
  .feed-card-meta .feed-card-toggles { margin: -7px -6px -7px 0; }
  .card-secondary-meta > .interest-score-chip:not(.interest-score-chip--selected) { padding-left: 0; }
  .entity-chip { min-height: 32px; }
  .entity-chip-follow { position: relative; min-height: 0; width: 20px; height: 20px; }
  .entity-chip-follow::before { content: ""; position: absolute; inset: -12px -10px; }

  .card-actions .feed-card-actions,
  .feedback-comment { position: static; }
  .card-actions:has(.feedback-comment[open]),
  .detail-feedback-actions:has(.feedback-comment[open]) { padding-bottom: 80px; }
  .feed-card-actions.detail-feedback-actions { position: relative; width: auto; }
  .detail-feedback-footer .detail-feedback-actions:has(.feedback-comment[open]) {
    width: 100%;
    flex-basis: 100%;
  }
  .feedback-comment-form,
  .detail-feedback-actions .feedback-comment-form {
    top: 50px;
    left: 0;
    right: 0;
    width: auto;
    flex-wrap: nowrap;
    box-shadow: none;
  }

  .source-editor { position: relative; }
  .source-editor .source-title-row { display: block; }
  /* The Manage button is absolute in the corner: the title row must be at
     least its height, or the interest line under a one-line name runs
     beneath it. A long name keeps its health dot on its line. */
  .source-editor .source-name-group { padding-right: 82px; min-height: 34px; }
  .source-editor .source-name { flex: 1 1 12ch; min-width: 0; }
  .source-editor .source-row-menu { position: static; }
  .source-editor .source-row-menu > summary { position: absolute; right: 12px; top: 12px; min-height: 32px; }
  .source-editor .source-row-menu-items { position: static; min-width: 0; width: 100%; margin: 8px 0; box-shadow: none; }
  .source-assigned-interests { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }

  .research-hero[data-returning-research] { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  [data-returning-research] .research-lede,
  [data-returning-research] .eyebrow { display: none; }
  [data-returning-research] h1 { font-size: 23px; margin: 0; }
  [data-returning-research] .research-capacity { column-gap: 4px; padding: 4px 8px; border: 0; background: transparent; white-space: nowrap; }
  [data-returning-research] .research-capacity strong { font-size: 18px; }
  .research-create-panel[data-returning-research]:not([open]) { padding: 0; margin: 0 0 12px; border: 0; box-shadow: none; background: transparent; }
}
@media (max-width: 390px) {
  .mobile-primary-nav > .mobile-following-primary { display: none; }
  .mobile-nav-links .mobile-following-overflow { display: flex; }
  .mobile-nav-menu[data-following-page="true"] > summary { color: var(--accent); }
  .mobile-nav-menu[data-following-page="true"] > summary::before { border-color: var(--accent); background: var(--accent-soft); }
}

/* On narrow phones, put compact utility buttons beside the engagement
   metadata. The top row stays focused on Back, source and age. */
@media (max-width: 375px) {
  .detail-page .detail-header h1 { font-size: 24px; }
  .detail-page .detail-submeta {
    display: flex;
    gap: 8px;
  }
  .detail-page .detail-engagement {
    flex: 1;
    font-size: 12px;
    column-gap: 8px;
  }
  .detail-engagement > span:not(:last-child)::after {
    display: none;
  }
  .detail-page .detail-submeta-actions .flag-button,
  .detail-page .detail-submeta-actions .share-link {
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }
  .detail-submeta-actions [data-flag-label],
  .detail-share-label { display: none; }
  .detail-share-icon { display: block; }
  .detail-submeta-actions .share-tooltip,
  .detail-submeta-actions .flag-save-status {
    top: calc(100% + 8px);
    bottom: auto;
  }
}

/* Shared interests (directory, publication page, publish form). */
.shared-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.shared-header { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; }
.shared-header h1 { margin: 4px 0; }
.shared-header p { margin: 4px 0; max-width: 60ch; }
.shared-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.shared-search { display: flex; gap: 8px; flex: 1 1 260px; max-width: 420px; }
.shared-search input { flex: 1; min-width: 0; }
.shared-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.shared-card { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 14px 16px; display: grid; gap: 8px; }
.shared-card h2 { margin: 0; font-size: 1.1rem; }
.shared-card p { margin: 0; }
.shared-recent { margin: 0; padding-left: 18px; color: var(--muted); font-size: 0.92rem; }
.shared-plain-list { margin: 0; padding-left: 18px; }
.shared-plain-list li { margin: 4px 0; }
.shared-unavailable li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.shared-criteria { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 0; }
.shared-publish-form { display: grid; gap: 10px; }
.shared-publish-form input[type="text"], .shared-publish-form textarea { width: 100%; box-sizing: border-box; }
.chip--unavailable { opacity: 0.55; text-decoration: line-through; }

/* ---- Phone-width review, 2026-09-30 -------------------------------------
   Measured at 375 and 320 in real Chrome against the live store. Each rule
   names the defect it fixes; everything phone-only sits in the one block. */

/* Story page: summaries render as Markdown inside a feed-style fold. The page
   background is --bg, not --panel, so the fade has to match it. */
.story-item-summary > :first-child { margin-top: 0; }
.story-item-summary > :last-child { margin-bottom: 0; }
.story-item-summary-clamp { margin-top: 6px; }
.story-item-summary-clamp.clamped::after { background: linear-gradient(to bottom, transparent, var(--bg)); }

/* Phone-only disclosure buttons (see mobile_controls.js). */
.suggestion-more,
.entity-chips-more,
.source-health-show-all { display: none; }

/* Disclosure summaries that still drew the native ▶ marker while every other
   disclosure uses a trailing ▾. */
.research-create-panel > summary,
.source-add-panel > summary { list-style: none; }
.research-create-panel > summary::-webkit-details-marker,
.source-add-panel > summary::-webkit-details-marker { display: none; }
.research-create-panel > summary::after,
.source-add-panel > summary::after { content: " \25be"; font-size: 0.8em; color: var(--muted); }
.research-create-panel[open] > summary::after,
.source-add-panel[open] > summary::after { content: " \25b4"; }

@media (max-width: 760px) {
  /* iOS Safari zooms the page on focus of any field under 16px and leaves it
     zoomed; every field here was 13-14px. !important because a dozen
     component rules set smaller sizes at higher specificity. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea { font-size: 16px !important; }

  /* "Update · follows …" popover: anchored at the chip's left edge with a
     240-360px width, it ran 16px off a 375 screen and clipped the dates. */
  .continuity-more-list {
    min-width: 0;
    width: max-content;
    max-width: calc(100vw - 64px);
  }
  /* Open, the chip takes a row of its own (as the ⋯ details do), so the list
     always starts at the content edge even when the chip sat mid-row. */
  .continuity-more[open] { flex-basis: 100%; }
  .continuity-more-source {
    flex-shrink: 1;
    min-width: 0;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Open Filters shared its row with ✂ Clip, squeezing the form and leaving
     Clip floating mid-panel; Clip is back once the panel closes. Search gets
     a full row so its placeholder is not cut. */
  .feed-mobile-toolbar:has(> details[open]) > .clip-open-button { display: none; }
  .feed-mobile-filter-form { grid-auto-flow: row dense; }
  .feed-mobile-filter-form label:has(> input[name="q"]),
  .feed-mobile-filter-form > button { grid-column: 1 / -1; }

  /* Interest chips plus Flagged/Clipped: one scrolling row instead of four
     wrapped rows ahead of the first card. The active chip is scrolled into
     view by mobile_controls.js. */
  .feed-profile-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .feed-profile-chips::-webkit-scrollbar { display: none; }
  .feed-profile-chips > .chips-group,
  .feed-profile-chips .chips-group--flags {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    max-width: none;
  }
  .feed-profile-chips .chip,
  .feed-profile-chips .chips-group--flags > .chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Suggested source folds to its measured numbers and actions; the rest is
     behind Details. */
  .suggestion-card:not(.suggestion-card--open) .suggestion-extra { display: none; }
  .suggestion-more {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    margin: -4px 0 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
  }
  .suggestion-more::after { content: " \25be"; margin-left: 4px; }
  .suggestion-more[aria-expanded="true"]::after { content: " \25b4"; }

  /* Feed card head: Follow as an icon like Flag, so a near-miss badge fits
     beside the source instead of taking its own row. aria-label carries the
     state; the active style shows it. */
  .feed-card-toggles [data-flag-label] { display: none; }
  .feed-card-toggles .flag-button--labeled {
    width: 44px;
    padding-inline: 0;
    justify-content: center;
  }

  /* Up to three entity chips per feed card; the rest behind "+N". */
  .feed-card .entity-chips:not(.entity-chips--all) > .entity-chip:nth-child(n+4) { display: none; }
  .feed-card .entity-chips:not(.entity-chips--all) > .entity-chips-more {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
  }

  /* Card-inside-card on Settings, Notifications and Admin left ~270px of a
     375 screen for content: thin the outer card, flatten the inner ones. */
  .config-section { padding: 14px 12px; }
  .preference-fields { border: 0; border-radius: 0; }
  .preference-setting-row { background: transparent; padding: 14px 0; }
  .alert-rules-list { gap: 0; }
  .alert-rule-card { border: 0; border-radius: 0; background: transparent; padding: 14px 0; }
  .alert-rule-card + .alert-rule-card { border-top: 1px solid var(--line); }

  /* The link to the original article on a post page was 15px-tall text. */
  .detail-summary-origin .feed-source-link,
  .post-links--detail .feed-source-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--panel);
    color: var(--accent);
    font-size: 14px;
    white-space: nowrap;
  }

  .detail-summary-origin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .detail-summary-origin .feed-source-link {
    min-height: 44px;
    padding: 0 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    white-space: normal;
  }

  /* Small targets: grow the hit area without moving the layout (padding
     taken back by an equal negative margin). */
  .feed-why-summary,
  .card-secondary-meta > .feed-source-link,
  .story-item-link {
    display: inline-block;
    padding: 10px 6px 10px 0;
    margin: -10px -6px -10px 0;
  }
  .feed-tag-chip {
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }
  .daily-digest .markdown-body a[href^="/post?"] {
    display: inline-block;
    padding: 8px 4px;
    margin: -8px -4px;
  }
}

/* A learned-filter update held by the impact gate for the reader to decide.
   Unlike the per-rule buttons this *is* a call to action: nothing changes
   until the reader answers. */
.ir-held {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--warn);
  border-radius: 8px;
  background: var(--warn-soft);
}
.ir-held-h { margin: 0 0 0.4rem; }
.ir-held-diff { margin: 0.3rem 0; }
.ir-held-diff ul { margin: 0.15rem 0 0; padding-left: 1.1rem; }
.ir-held-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }

/* What the daily interest-health job measured, one note per flag. Same call
   to action as a held update: nothing changes until the reader clicks. */
.ir-health-flag + .ir-health-flag {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--warn);
}
.ir-health .ir-held-actions { align-items: center; }
.ir-health .ir-field { margin: 0; }

/* Per-interest "about N a day" feed target. */
.ir-day-target { width: 4.5rem; margin: 0 0.35rem; }

/* Quiet-interest nudge (thin_interest_card.html) reuses the suggestion card;
   the accept action is a link here, so drop the underline links get. */
.thin-interest-card .suggestion-accept { text-decoration: none; display: inline-block; }

/* Weekly "Would you want these?" label ask (calibration_card.html). Rows wrap
   on a phone: the two buttons drop under the title instead of squeezing it. */
.calibration-posts { list-style: none; margin: 0.4rem 0 0.6rem; padding: 0; }
.calibration-post {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--line);
}
.calibration-post-main { flex: 1 1 18rem; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.calibration-post-main a { overflow-wrap: anywhere; }
.calibration-source { font-size: 0.85rem; color: var(--muted); }
.calibration-reason { font-size: 0.85rem; color: var(--muted); font-style: italic; }
.calibration-answer { display: flex; gap: 0.4rem; margin: 0; flex: 0 0 auto; }
.calibration-answer button {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 7px;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
}
.calibration-answer .calibration-keep:hover { border-color: var(--accent); }
.calibration-answer .calibration-skip:hover { border-color: var(--muted); }
.calibration-answered { font-size: 0.88rem; color: var(--muted); padding: 0.3rem 0; }
.calibration-done { margin: 0; color: var(--muted); }

.search-picture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 0.75rem;
}
.search-picture { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.search-picture img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 0.5rem; }
.search-picture span { font-size: 0.85rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Between the phone layout and ~1100px the desktop nav, the account email and
   Log out did not fit one row: Log out ran 145px off a 768px screen. */
@media (min-width: 761px) and (max-width: 1100px) {
  .topbar { gap: 16px; padding: 0 16px; }
  .nav { gap: 10px; }
  .nav-user { display: none; }
}

/* Admin tables carry 5-8 columns. Below 1024px they scrolled inside
   .table-wrap with whole columns cut off at its border (Quality, Limits, Flags
   and Actions at 768px), so each row becomes a labelled card: the phone layout
   of .posts-table, at the width these tables stop fitting. */
@media (max-width: 1024px) {
  .table-wrap:has(> .admin-cards) {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .admin-cards {
    display: block;
    min-width: 0;
    width: 100%;
    table-layout: auto;
    border-collapse: separate;
  }

  .admin-cards thead {
    display: none;
  }

  .admin-cards tbody {
    display: grid;
    gap: 10px;
  }

  .admin-cards tr {
    display: grid;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    padding: 12px;
  }

  .admin-cards th,
  .admin-cards td {
    width: auto !important;
    border-bottom: 0;
    padding: 0;
  }

  .admin-cards td {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    color: var(--text);
  }

  .admin-cards td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }

  /* Every element child stays in the value column. Auto-placed, a second
     child (a URL line, a second form) landed under the label, wider than it,
     and ran out of the card. Bare text runs are wrapped in one element in the
     template for the same reason. */
  .admin-cards td > * {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
  }

  .admin-cards td.source-health-source,
  .admin-cards td.catalog-source,
  .admin-cards td.users-table-primary {
    display: block;
  }

  .admin-cards td.source-health-source::before,
  .admin-cards td.catalog-source::before,
  .admin-cards td.users-table-primary::before {
    display: none;
  }

  .admin-cards td.source-health-source strong,
  .admin-cards td.catalog-source strong,
  .admin-cards td.users-table-primary {
    display: block;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
  }

  /* The two action forms sit side by side after the label. */
  .admin-cards td.users-table-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    text-align: left;
  }

  .admin-cards td.users-table-actions::before {
    flex: 0 0 100px;
  }

  .admin-cards td.users-table-actions form {
    margin: 0;
  }

  .admin-cards td.users-table-actions--empty {
    display: none !important;
  }

  .source-health-actions {
    gap: 8px;
  }

  .source-health-actions a,
  .source-health-actions button {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--panel-soft);
    padding: 0 10px;
    text-decoration: none;
  }

  /* Admin → Sources: healthy rows fold behind a button, so the page opens on
     the issues instead of 68 tall cards. */
  [data-source-health]:not(.source-health--all) .source-health-row--ok { display: none; }
  .source-health-show-all { display: block; width: 100%; margin-top: 10px; }
}