/**
 * Editorial home — Phase 7a styles.
 *
 * Scoped under [data-redesign] [data-edition] so the legacy home is
 * untouched. Single column, max 720px, body 17px / line-height 1.65,
 * Manrope at editorial scale (no new font for Phase 7a per
 * docs/architecture/HOME_EDITORIAL_REDESIGN.md §6).
 */

[data-redesign] [data-edition] {
  --rd-edition-max: 720px;
  --rd-edition-body-size: 17px;
  --rd-edition-body-leading: 1.65;
  --rd-edition-rule: rgba(21, 20, 15, 0.10);
  --rd-edition-rule-strong: rgba(21, 20, 15, 0.16);
}

[data-redesign] [data-edition] {
  width: 100%;
  overflow-x: hidden;
}

[data-redesign] [data-edition] .rd-edition-root {
  max-width: var(--rd-edition-max);
  width: 100%;
  margin: 0 auto;
  padding: 24px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  font-size: var(--rd-edition-body-size);
  line-height: var(--rd-edition-body-leading);
  color: var(--rd-ink);
  overflow-x: hidden;
}

/* Embedded composer (UniversalComposer) shouldn't grow past the
   editorial column on narrow widths.  Phase 7a defensive cap. */
[data-redesign] [data-edition] .rd-edition-root > * {
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 480px) {
  [data-redesign] [data-edition] .rd-edition-root {
    padding: 16px 16px 64px;
    gap: 28px;
  }
}

[data-redesign] [data-edition] .rd-edition-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

[data-redesign] [data-edition] .rd-edition-section + .rd-edition-section {
  border-top: 1px solid var(--rd-edition-rule);
  padding-top: 32px;
}

[data-redesign] [data-edition] .rd-edition-section__eyebrow {
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--rd-ink-soft);
  margin: 0;
}

[data-redesign] [data-edition] .rd-edition-section__h2 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.22;
  color: var(--rd-ink-strong);
  margin: 0;
}

[data-redesign] [data-edition] .rd-edition-prose {
  font-size: var(--rd-edition-body-size);
  line-height: var(--rd-edition-body-leading);
  color: var(--rd-ink);
}

[data-redesign] [data-edition] .rd-edition-prose p { margin: 0 0 14px; }
[data-redesign] [data-edition] .rd-edition-prose p:last-child { margin-bottom: 0; }
[data-redesign] [data-edition] .rd-edition-prose strong { font-weight: 600; color: var(--rd-ink-strong); }
[data-redesign] [data-edition] .rd-edition-prose em { font-style: italic; }

[data-redesign] [data-edition] .rd-edition-meta {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--rd-ink-mute);
}

[data-redesign] [data-edition] .rd-edition-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--rd-accent-tint);
  color: var(--rd-accent-strong);
  letter-spacing: 0.04em;
}

/* ─── Dot grid (the visual signature) ───────────────────────────── */
[data-redesign] [data-edition] .rd-dot-grid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

[data-redesign] [data-edition] .rd-dot-grid__strip {
  display: inline-flex;
  gap: 4px;
}

[data-redesign] [data-edition] .rd-dot-grid__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--rd-line-strong);
  display: inline-block;
  border: 1px solid transparent;
}

[data-redesign] [data-edition] .rd-dot-grid__dot--filled {
  background: var(--rd-accent);
  border-color: var(--rd-accent-strong);
}

[data-redesign] [data-edition] .rd-dot-grid__caption {
  font-family: ui-monospace, "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 11px;
  color: var(--rd-ink-soft);
  letter-spacing: 0.02em;
}

/* ─── Hypothesis block ─────────────────────────────────────────── */
[data-redesign] [data-edition] .rd-edition-hypothesis {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rd-edition-rule);
}

[data-redesign] [data-edition] .rd-edition-hypothesis:last-child {
  border-bottom: none;
}

[data-redesign] [data-edition] .rd-edition-hypothesis__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

[data-redesign] [data-edition] .rd-edition-hypothesis__label {
  font-family: ui-monospace, "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rd-accent-strong);
}

[data-redesign] [data-edition] .rd-edition-hypothesis__title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--rd-ink-strong);
  margin: 0;
}

[data-redesign] [data-edition] .rd-edition-hypothesis__claim {
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  color: var(--rd-ink);
}

[data-redesign] [data-edition] .rd-edition-hypothesis__falsify {
  font-size: 13.5px;
  font-style: italic;
  color: var(--rd-ink-mute);
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--rd-line);
}

[data-redesign] [data-edition] .rd-edition-hypothesis__tally {
  font-family: ui-monospace, "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 11.5px;
  color: var(--rd-ink-soft);
  letter-spacing: 0.02em;
}

/* ─── Forecast row ─────────────────────────────────────────────── */
[data-redesign] [data-edition] .rd-edition-forecast {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rd-edition-rule);
}

[data-redesign] [data-edition] .rd-edition-forecast:last-child {
  border-bottom: none;
}

[data-redesign] [data-edition] .rd-edition-forecast__claim {
  font-size: 16px;
  font-weight: 500;
  color: var(--rd-ink-strong);
  margin: 0;
  line-height: 1.45;
}

[data-redesign] [data-edition] .rd-edition-forecast__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

[data-redesign] [data-edition] .rd-edition-forecast__prob {
  font-size: 22px;
  font-weight: 700;
  color: var(--rd-ink-strong);
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}

/* ─── Scoreboard table ─────────────────────────────────────────── */
[data-redesign] [data-edition] .rd-edition-scoreboard {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

[data-redesign] [data-edition] .rd-edition-scoreboard__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rd-edition-rule);
}

[data-redesign] [data-edition] .rd-edition-scoreboard__row:first-child {
  border-top: 1px solid var(--rd-edition-rule-strong);
}

[data-redesign] [data-edition] .rd-edition-scoreboard__row:last-child {
  border-bottom: 1px solid var(--rd-edition-rule-strong);
}

[data-redesign] [data-edition] .rd-edition-scoreboard__label {
  font-size: 13px;
  color: var(--rd-ink-mute);
  font-weight: 500;
}

[data-redesign] [data-edition] .rd-edition-scoreboard__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--rd-ink-strong);
  font-variant-numeric: tabular-nums;
}

[data-redesign] [data-edition] .rd-edition-scoreboard__delta {
  font-family: ui-monospace, "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

[data-redesign] [data-edition] .rd-edition-scoreboard__delta--up { color: var(--rd-green); }
[data-redesign] [data-edition] .rd-edition-scoreboard__delta--down { color: var(--rd-red); }
[data-redesign] [data-edition] .rd-edition-scoreboard__delta--flat { color: var(--rd-ink-soft); }

/* ─── Capabilities map ─────────────────────────────────────────── */
[data-redesign] [data-edition] .rd-edition-capability-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  align-items: center;
  padding: 8px 0;
}

@media (max-width: 480px) {
  [data-redesign] [data-edition] .rd-edition-capability-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

[data-redesign] [data-edition] .rd-edition-capability-row__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--rd-ink-strong);
}

[data-redesign] [data-edition] .rd-edition-capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

[data-redesign] [data-edition] .rd-edition-capability-card {
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--rd-paper-warm);
}

[data-redesign] [data-edition] .rd-edition-capability-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--rd-ink-strong);
}

[data-redesign] [data-edition] .rd-edition-capability-card__level {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--rd-ink-mute);
  font-weight: 500;
}

/* ─── Operations accordion ─────────────────────────────────────── */
[data-redesign] [data-edition] .rd-edition-ops-details {
  margin-top: 8px;
  border-top: 1px solid var(--rd-edition-rule);
  padding-top: 16px;
}

[data-redesign] [data-edition] .rd-edition-ops-details > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rd-ink-mute);
  padding: 6px 0;
  list-style: none;
}

[data-redesign] [data-edition] .rd-edition-ops-details > summary::-webkit-details-marker {
  display: none;
}

[data-redesign] [data-edition] .rd-edition-ops-details > summary::before {
  content: "▸ ";
  display: inline-block;
  margin-right: 6px;
  transition: transform 200ms ease;
}

[data-redesign] [data-edition] .rd-edition-ops-details[open] > summary::before {
  transform: rotate(90deg);
}

[data-redesign] [data-edition] .rd-edition-ops-details .rd-ops {
  margin-top: 12px;
}

/* ─── Footnotes ───────────────────────────────────────────────── */
[data-redesign] [data-edition] .rd-edition-footnotes {
  font-size: 13px;
  line-height: 1.55;
  color: var(--rd-ink-mute);
}

[data-redesign] [data-edition] .rd-edition-footnotes ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: footnote;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-redesign] [data-edition] .rd-edition-footnotes li {
  counter-increment: footnote;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  padding-left: 0;
}

[data-redesign] [data-edition] .rd-edition-footnotes li::before {
  content: counter(footnote) ".";
  font-family: ui-monospace, "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 11.5px;
  color: var(--rd-ink-soft);
  text-align: right;
  font-weight: 600;
}

[data-redesign] [data-edition] .rd-edition-footnotes a {
  color: var(--rd-accent-strong);
  text-decoration: none;
  border-bottom: 1px dotted var(--rd-accent-soft);
}

[data-redesign] [data-edition] .rd-edition-footnotes a:hover,
[data-redesign] [data-edition] .rd-edition-footnotes a:focus-visible {
  border-bottom-style: solid;
  outline: none;
}

[data-redesign] [data-edition] sup.rd-edition-footnote-ref {
  font-size: 0.75em;
  vertical-align: super;
  margin-left: 1px;
}

[data-redesign] [data-edition] sup.rd-edition-footnote-ref a {
  color: var(--rd-accent-strong);
  text-decoration: none;
  font-weight: 600;
  padding: 0 2px;
}

/* ─── Empty state ─────────────────────────────────────────────── */
[data-redesign] [data-edition] .rd-edition-empty {
  font-size: 14px;
  color: var(--rd-ink-mute);
  font-style: italic;
  padding: 12px 0;
}

/* ─── Skeleton ────────────────────────────────────────────────── */
[data-redesign] [data-edition] .rd-edition-skeleton {
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--rd-line) 0%,
    var(--rd-line-faint) 50%,
    var(--rd-line) 100%
  );
  background-size: 200% 100%;
  animation: rd-edition-shimmer 1.4s ease-in-out infinite;
  margin-bottom: 8px;
}

@keyframes rd-edition-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ─── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-redesign] [data-edition] .rd-edition-skeleton {
    animation: none;
    background: var(--rd-line);
  }
  [data-redesign] [data-edition] .rd-edition-ops-details > summary::before {
    transition: none;
  }
}

/* ─── Focus visible ────────────────────────────────────────────── */
[data-redesign] [data-edition] a:focus-visible,
[data-redesign] [data-edition] summary:focus-visible,
[data-redesign] [data-edition] button:focus-visible {
  outline: 2px solid var(--rd-accent-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Phase 7b: Edition TOC (right-rail scroll-spy) ─────────────── */
/* Hidden on mobile + medium desktops (single column rules); shown
   on >=1440px as a fixed rail that doesn't overlap the 720px article
   column inside the app shell.
   Math: the raw viewport formula is not sufficient because the
   article is centered inside the app content pane after the left
   chrome. The 1440px breakpoint keeps the rail hidden until there is
   real clearance.  Hot-fix 2026-05-11: was 1024, which caused
   14-52px overlap on viewports 1024-1180px. Follow-up: the app shell
   shifts the article right, so 1200px still overlapped in production. */
[data-redesign] [data-edition] .rd-edition-toc {
  display: none;
}

/* Production shell guard: the app chrome shifts the article column right, so
   the rail remains hidden until 1440px and then uses a wider right offset. */

@media (min-width: 1440px) {
  [data-redesign] [data-edition] .rd-edition-toc {
    display: block;
    position: fixed;
    top: 96px;
    right: 24px;
    width: 180px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    border-left: 1px solid var(--rd-edition-rule);
    padding: 8px 0 8px 16px;
    z-index: 5;
    /* The center column is centered by `margin: 0 auto` on .rd-edition-root
       so this fixed rail sits independently. */
  }
}

@media (min-width: 1440px) {
  [data-redesign] [data-edition] .rd-edition-toc {
    /* On wide viewports, push the rail farther from the column. */
    right: max(24px, calc((100vw - 720px) / 2 - 360px));
  }
}

[data-redesign] [data-edition] .rd-edition-toc__eyebrow {
  font-size: 10px;
  font-family: ui-monospace, "JetBrains Mono", "Roboto Mono", monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rd-ink-soft);
  margin: 0 0 8px;
  font-weight: 600;
}

[data-redesign] [data-edition] .rd-edition-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-redesign] [data-edition] .rd-edition-toc__item {
  margin: 0;
  padding: 0;
}

[data-redesign] [data-edition] .rd-edition-toc__link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  padding: 4px 0;
  font-family: ui-monospace, "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--rd-ink-soft);
  border-radius: 3px;
  transition: color 120ms ease;
}

[data-redesign] [data-edition] .rd-edition-toc__link:hover {
  color: var(--rd-ink-strong);
}

[data-redesign] [data-edition] .rd-edition-toc__link--active {
  color: var(--rd-accent-strong, #d97757);
  font-weight: 700;
}

[data-redesign] [data-edition] .rd-edition-toc__num {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: inherit;
  min-width: 22px;
  display: inline-block;
}

[data-redesign] [data-edition] .rd-edition-toc__label {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  font-weight: 600;
}

/* ─── Phase 7c: Format strip ───────────────────────────────────── */
[data-redesign] [data-edition] .rd-edition-format-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--rd-edition-rule);
  margin-bottom: 4px;
  font-family: ui-monospace, "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

[data-redesign] [data-edition] .rd-edition-format-strip__caption {
  color: var(--rd-ink-soft);
  font-weight: 500;
}

[data-redesign] [data-edition] .rd-edition-format-strip__sep {
  color: var(--rd-ink-soft);
  opacity: 0.6;
}

[data-redesign] [data-edition] .rd-edition-format-strip__btn {
  background: transparent;
  border: none;
  color: var(--rd-accent-strong, #d97757);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

[data-redesign] [data-edition] .rd-edition-format-strip__btn:hover {
  color: var(--rd-accent-strong, #d97757);
  text-decoration-thickness: 2px;
}

/* ─── Phase 7c: Switch to classic link in editorial header ─────── */
[data-redesign] [data-edition] .rd-edition-switch:hover {
  color: var(--rd-ink-strong);
}

@media (prefers-reduced-motion: reduce) {
  [data-redesign] [data-edition] .rd-edition-toc__link {
    transition: none;
  }
}

/* ─── P0 #3: EditionSelector responsive chip text ─────────────── */
[data-redesign] [data-edition] [data-edition-selector] .rd-edition-chip__short {
  display: none;
}
@media (max-width: 480px) {
  [data-redesign] [data-edition] [data-edition-selector] .rd-edition-chip__full {
    display: none;
  }
  [data-redesign] [data-edition] [data-edition-selector] .rd-edition-chip__short {
    display: inline;
  }
}

/* ─── IndexedDB SWR cache notice (Phase: editorial-home SWR) ────
 *
 * Renders only when at least one editorial section is hydrated from
 * the local IDB cache and Convex has not yet revalidated.  The chip
 * is informational (role="status", aria-live="polite") — NOT an
 * alert.  Hidden as soon as live data swaps in.
 *
 * Per `.claude/rules/reexamine_a11y.md`: reduced motion drops the
 * accent background so the chip stays visible without animation.
 */
[data-redesign] [data-edition] .rd-cache-notice {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--rd-ink-mute);
  background: rgba(217, 119, 87, 0.08);
  border-left: 2px solid var(--rd-accent, #d97757);
  padding: 6px 10px;
  margin: 0 0 8px;
  border-radius: 0 3px 3px 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-redesign] [data-edition] .rd-cache-notice {
    background: transparent;
  }
}

/* ─── Offline banner (Phase: editorial-home SWR + offline) ──────
 *
 * Renders when the browser reports offline OR the Convex websocket
 * has dropped.  Cached editorial data is still usable, so the tone
 * is amber (warning), not red (error).
 *
 * Per `.claude/rules/reexamine_a11y.md`:
 *  - role="status" + aria-live="polite" — don't interrupt
 *  - Color is paired with the literal text "You're offline" /
 *    "Reconnecting" so color-blind users get the signal too
 *  - Reduced motion: drop the tinted background to keep contrast
 *    without animation
 */
[data-redesign] [data-edition] .rd-offline-banner {
  font-size: 12px;
  line-height: 1.45;
  color: var(--rd-ink-mute);
  background: rgba(245, 158, 11, 0.08);
  border-left: 2px solid rgba(245, 158, 11, 0.5);
  padding: 8px 12px;
  margin: 0 0 12px;
  border-radius: 0 3px 3px 0;
}

[data-redesign] [data-edition] .rd-offline-banner strong {
  color: var(--rd-ink-strong);
  font-weight: 600;
}

[data-redesign] [data-edition] .rd-coordinator-trace {
  border-top: 1px solid var(--rd-edition-rule);
  border-bottom: 1px solid var(--rd-edition-rule);
  padding: 10px 0;
  margin: 0 0 12px;
}

[data-redesign] [data-edition] .rd-coordinator-trace__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

[data-redesign] [data-edition] .rd-coordinator-trace__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 6px;
}

[data-redesign] [data-edition] .rd-coordinator-trace__cell {
  min-height: 34px;
  border: 1px solid var(--rd-edition-rule);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 11.5px;
  color: var(--rd-ink-mute);
  background: var(--rd-surface, transparent);
}

[data-redesign] [data-edition] .rd-coordinator-trace__cell strong {
  color: var(--rd-ink-strong);
  font-weight: 700;
}

[data-redesign] [data-edition] .rd-coordinator-trace__cell[data-status="loading"] {
  opacity: 0.72;
}

[data-redesign] [data-edition] .rd-coordinator-trace__cell[data-status="empty"] {
  border-style: dashed;
}

@media (prefers-reduced-motion: reduce) {
  [data-redesign] [data-edition] .rd-offline-banner {
    background: transparent;
    transition: none;
  }
}
