/* ==========================================================================
   Briefs — Bold & Warm Reading Experience
   ========================================================================== */

/* ---------- Briefs Index ---------- */

.briefs-container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

.briefs-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
}

.briefs-header-row h1 {
  margin-bottom: 0;
}

.briefs-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.generate-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.generate-select {
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast);
}

.generate-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-tint);
}

.briefs-empty p {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  padding: var(--space-8) 0;
}

.briefs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.brief-item {
  border-bottom: 1px solid var(--color-border);
}

.brief-item:first-child {
  border-top: 1px solid var(--color-border);
}

.brief-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) 0;
  text-decoration: none;
  color: inherit;
  gap: var(--space-4);
}

.brief-link:hover {
  text-decoration: none;
}

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

.brief-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  flex: 1;
  transition: color var(--transition-fast);
}

.brief-date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ---------- Brief Show ---------- */

.brief-container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
}

.brief-header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 2px solid var(--color-accent);
}

.brief-header .brief-title {
  font-size: var(--text-4xl);
  font-weight: 900;
  font-variation-settings: 'opsz' 48;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.brief-header .brief-date {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

.brief-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

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

.brief-feedback-link {
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
}

.brief-feedback-link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* ---------- Brief Flow Details ---------- */

.brief-flow-details {
  margin-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

.brief-flow-summary {
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  padding: var(--space-2) 0;
  user-select: none;
}

.brief-flow-summary:hover {
  color: var(--color-accent);
}

.brief-flow-content {
  margin-top: var(--space-4);
  overflow-x: auto;
}

/* ---------- Newsletter-style Brief Content ---------- */

.brief-content {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text);
}

/* Section headers */

.brief-content .section-header,
.brief-content .section-divider {
  margin-top: var(--space-10);
}

.brief-content .section-divider {
  border-top: 3px solid var(--color-accent);
  padding-top: var(--space-4);
}

.brief-content .section-divider:first-child {
  margin-top: 0;
}

.brief-content h1 {
  font-size: var(--text-3xl);
  font-weight: 900;
  font-variation-settings: 'opsz' 36;
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  padding-top: var(--space-8);
  border-top: 2px solid var(--color-accent);
  letter-spacing: -0.02em;
}

.brief-content h1:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.brief-content h2 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  font-variation-settings: 'opsz' 24;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}

.brief-content h3 {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.brief-content h4,
.brief-content h5,
.brief-content h6 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

.brief-content p {
  margin-bottom: var(--space-4);
}

.brief-content a {
  color: var(--color-accent);
  text-decoration: none;
  text-underline-offset: 0.15em;
}

.brief-content a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.brief-content ul,
.brief-content ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}

.brief-content li {
  margin-bottom: var(--space-3);
  line-height: 1.6;
}

.brief-content blockquote {
  border-left: 4px solid var(--color-accent);
  padding-left: var(--space-4);
  color: var(--color-text-secondary);
  margin: var(--space-4) 0;
  font-style: italic;
}

@media (max-width: 760px) {
  .briefs-header-row,
  .generate-form,
  .brief-link {
    flex-direction: column;
    align-items: flex-start;
  }

  .briefs-header-row {
    gap: var(--space-4);
  }

  .briefs-actions {
    width: 100%;
  }

  .generate-form,
  .generate-select,
  .generate-form .btn {
    width: 100%;
  }

  .brief-link {
    gap: var(--space-2);
  }

  .brief-date {
    white-space: normal;
  }

  .brief-header .brief-title {
    font-size: var(--text-3xl);
  }

  .brief-content {
    font-size: var(--text-sm);
  }
}

.brief-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.brief-content strong {
  font-weight: 700;
}

/* Prediction markets table */

.brief-content table[role="presentation"] {
  width: 100%;
}

.brief-content table[role="presentation"] td {
  vertical-align: top;
  padding: var(--space-3) var(--space-3) var(--space-5) 0;
}

/* ==========================================================================
   Brief Section Partials — Shared Classes
   ========================================================================== */

/* ---------- Section Dividers ---------- */

.brief-section {
  margin-top: var(--space-10);
  border-top: 3px solid var(--color-accent);
  padding-top: var(--space-4);
}

.brief-section:first-child {
  margin-top: 0;
}

.brief-section--accent {
  margin-top: var(--space-10);
  border-top: 3px solid var(--color-accent);
  padding-top: var(--space-4);
}

.brief-section--cluster {
  margin-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

/* ---------- Section Labels ---------- */

.brief-section-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-5) 0;
}

.brief-section-label--accent {
  color: var(--color-accent);
}

/* ---------- Section Headlines ---------- */

.brief-section-headline {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  font-variation-settings: 'opsz' 24;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0 0 var(--space-3) 0;
  letter-spacing: -0.01em;
}

.brief-section-headline--top {
  font-size: var(--text-2xl);
  font-weight: 800;
  font-variation-settings: 'opsz' 36;
  line-height: 1.2;
  margin: 0 0 var(--space-5) 0;
}

/* ---------- Section Body & Intro ---------- */

.brief-section-body {
  font-family: var(--font-body);
  line-height: 1.75;
  color: var(--color-text);
}

.brief-section-body p {
  margin-bottom: var(--space-4);
}

.brief-section-intro {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-3) 0;
}

.brief-section-content {
  padding: var(--space-6) 0;
}

/* ---------- Sources ---------- */

.brief-section-sources {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
}

.brief-section-sources--inline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 0;
}

.brief-source-link {
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  text-underline-offset: 0.15em;
}

.brief-source-link:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.brief-source-link--small {
  font-size: var(--text-xs);
  margin-left: var(--space-1);
}

.brief-source-link--muted {
  color: var(--color-text-muted);
  text-decoration: none;
}

.brief-source-link--muted:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.brief-source-name {
  color: var(--color-text-secondary);
}

.brief-source-name--small {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-left: var(--space-1);
}

.brief-source-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--color-border-strong);
  padding: 1px var(--space-2);
  margin-left: var(--space-1);
}

.brief-source-badge:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.brief-source-badge--muted {
  color: var(--color-text-muted);
  text-decoration: none;
}

.source-pill {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 9999px;
  white-space: nowrap;
  text-decoration: none;
  margin: 1px 2px;
  vertical-align: baseline;
}

.source-pill a {
  color: inherit;
  text-decoration: none;
}

.source-pill a:hover {
  text-decoration: underline;
}

.source-pills {
  display: inline;
  line-height: 1.8;
}

/* ---------- Story Clusters ---------- */

.brief-cluster {
  border-left: 3px solid var(--color-border-strong);
  padding-left: var(--space-4);
  margin-bottom: var(--space-2);
}

.brief-cluster--local {
  border-left-color: var(--color-logo-blue);
}

.brief-cluster--topic {
  border-left-color: var(--color-border-strong);
}

.brief-cluster-story {
  margin-bottom: var(--space-3);
  line-height: 1.6;
}

/* ---------- Ordered Lists (What to Watch) ---------- */

.brief-ordered-list {
  padding-left: var(--space-5);
  margin: 0;
}

.brief-ordered-item {
  margin-bottom: var(--space-4);
  line-height: 1.6;
  padding-left: var(--space-1);
}

/* ---------- Bullet Lists (Quick Hits) ---------- */

.brief-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.brief-bullet-item {
  margin-bottom: var(--space-3);
  padding-left: var(--space-2);
  line-height: 1.6;
}

.brief-bullet-item::before {
  content: "\2022";
  margin-right: var(--space-2);
  color: var(--color-accent);
}

/* ---------- Prediction Markets ---------- */

.brief-markets-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.brief-market-card {
  padding: var(--space-3) var(--space-3) var(--space-5) 0;
}

.brief-market-question {
  font-size: var(--text-sm);
  margin: 0 0 var(--space-1) 0;
}

.brief-market-link {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.brief-market-link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.brief-market-percentage {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 var(--space-1) 0;
  line-height: 1;
}

.brief-market-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2) 0;
}

.brief-market-commentary {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ---------- Watchlist ---------- */

.brief-watchlist-ticker {
  margin-bottom: var(--space-6);
}

.brief-watchlist-symbol {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-1) 0;
}

.brief-watchlist-headline {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3) 0;
}

.brief-watchlist-note {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

.brief-sentiment-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: var(--space-2);
}

.brief-sentiment--positive {
  background-color: var(--color-positive);
}

.brief-sentiment--negative {
  background-color: var(--color-negative);
}

.brief-sentiment--neutral {
  background-color: var(--color-neutral);
}

/* ---------- Podcast Voices ---------- */

.brief-podcast-episode {
  margin-bottom: var(--space-6);
}

.brief-podcast-name {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-1) 0;
}

.brief-podcast-link {
  color: var(--color-text);
  text-decoration: none;
}

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

.brief-podcast-title {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3) 0;
}

.brief-podcast-highlight {
  margin-bottom: var(--space-4);
}

.brief-podcast-quote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-4);
  margin: 0 0 var(--space-2) 0;
}

.brief-podcast-quote-text {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text);
  line-height: 1.5;
  margin: 0;
}

.brief-podcast-quote-attribution {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0 0;
}

.brief-podcast-timestamp {
  color: var(--color-accent);
  text-decoration: none;
}

.brief-podcast-timestamp:hover {
  text-decoration: underline;
}

.brief-podcast-analysis {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ---------- Lead Section ---------- */

.brief-section--lead {
  margin-top: var(--space-10);
  border-top: 3px solid var(--color-accent);
  padding-top: var(--space-4);
}

.brief-section-body--lead {
  font-size: var(--text-base);
  font-weight: 400;
}

/* Hide the lead headline in the web brief view — it duplicates the brief
   title shown in the page header (issue #1005). The headline remains visible
   in the email layout which uses inline styles, not this stylesheet.
   Scoped to .brief-container to avoid affecting admin compare view.
   Excluded from .headlines-only mode where the headline is needed for
   per-story expand clicks.
   Two selectors: .brief-lead-headline for new briefs, adjacent-sibling
   combinator for older briefs already stored in S3 without the new class. */
.brief-container:not(.headlines-only) .brief-content .brief-lead-headline,
.brief-container:not(.headlines-only) .brief-content .brief-section--lead + .brief-section-content > .brief-section-headline--top {
  display: none;
}

/* ---------- Briefing Section ---------- */

.brief-section--briefing {
  margin-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

/* ---------- Deep Dive Section ---------- */

.brief-section--deep-dive {
  margin-top: var(--space-10);
  border-top: 3px solid var(--color-accent);
  padding-top: var(--space-4);
}

.brief-section-body--deep-dive {
  line-height: 1.85;
}

.brief-deep-dive-key-points {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
}

.brief-deep-dive-key-points-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3) 0;
}

.brief-deep-dive-key-points-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.brief-deep-dive-key-point {
  margin-bottom: var(--space-2);
  padding-left: var(--space-4);
  line-height: 1.6;
  color: var(--color-text);
  position: relative;
}

.brief-deep-dive-key-point::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

/* ---------- Company Spotlight ---------- */

.brief-section--company-spotlight {
  margin-top: var(--space-10);
  border-top: 3px solid var(--color-accent);
  padding-top: var(--space-4);
}

.brief-spotlight-header {
  margin-bottom: var(--space-4);
}

.brief-spotlight-company {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-text);
  margin: 0 0 var(--space-1) 0;
}

.brief-spotlight-ticker {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-left: var(--space-2);
}

.brief-spotlight-sentiment {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-4) 0;
}

/* ---------- Market Pulse ---------- */

.brief-section--market-pulse {
  margin-top: var(--space-10);
  border-top: 3px solid var(--color-accent);
  padding-top: var(--space-4);
}

.brief-market-pulse-tickers {
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}

/* ---------- Podcast Voices ---------- */

.brief-section--podcast-voices {
  margin-top: var(--space-10);
  border-top: 3px solid var(--color-accent);
  padding-top: var(--space-4);
}

/* ---------- RSS Picks ---------- */

.brief-section--rss-picks {
  margin-top: var(--space-10);
  border-top: 3px solid var(--color-accent);
  padding-top: var(--space-4);
}

.brief-rss-pick {
  margin-bottom: var(--space-5);
}

.brief-rss-pick-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-1) 0;
  line-height: 1.4;
}

.brief-rss-pick-link {
  color: var(--color-text);
  text-decoration: none;
}

.brief-rss-pick-link:hover {
  color: var(--color-accent);
}

.brief-rss-pick-source {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2) 0;
}

.brief-rss-pick-summary {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text);
  margin: 0 0 var(--space-2) 0;
}

.brief-rss-pick-why {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ---------- Desk Roundup ---------- */

.brief-section--desk-roundup {
  margin-top: var(--space-10);
  border-top: 3px solid var(--color-accent);
  padding-top: var(--space-4);
}

.brief-desk {
  margin-bottom: var(--space-6);
}

.brief-desk-name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-3) 0;
}

.brief-desk-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.brief-desk-item {
  margin-bottom: var(--space-2);
  padding-left: var(--space-2);
  line-height: 1.6;
}

/* ---------- Contrarian ---------- */

.brief-section--contrarian {
  margin-top: var(--space-10);
  border-top: 3px solid var(--color-accent);
  padding-top: var(--space-4);
}

.brief-contrarian-consensus {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
}

.brief-contrarian-dissent {
  margin-bottom: var(--space-4);
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-accent);
}

.brief-contrarian-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1) 0;
}

.brief-contrarian-dissent .brief-contrarian-label {
  color: var(--color-accent);
}

.brief-contrarian-text {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
}

/* ---------- Looking Ahead ---------- */

.brief-section--looking-ahead {
  margin-top: var(--space-10);
  border-top: 3px solid var(--color-accent);
  padding-top: var(--space-4);
}

/* ---------- Sign Off Feedback ---------- */

.brief-sign-off-feedback {
  margin-top: var(--space-6);
  padding: var(--space-6);
  background-color: var(--color-bg-alt);
  border-top: 3px solid var(--color-accent);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ---------- Sign Off ---------- */

.brief-sign-off {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
}

.brief-sign-off-text {
  font-style: italic;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.brief-sign-off-author {
  font-style: italic;
  color: var(--color-text-secondary);
  margin: 0;
}

/* ---------- Pipeline Footer ---------- */

.brief-pipeline-footer {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.brief-pipeline-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

.brief-pipeline-link {
  color: var(--color-text-muted);
  text-decoration: underline;
}

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

/* ---------- Brief Feedback ---------- */

.brief-feedback {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--color-accent);
}

.brief-feedback-heading {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.brief-feedback-group {
  margin-bottom: var(--space-5);
}

.brief-feedback-prompt {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  font-weight: 500;
}

.brief-feedback-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.brief-feedback-tag-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.brief-feedback-tag-name {
  color: var(--color-text);
}

.feedback-question-card {
  margin-bottom: var(--space-3);
}

.feedback-question-text {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.feedback-options {
  margin-top: var(--space-1);
}

.feedback-option {
  color: var(--color-accent);
  text-decoration: none;
  font-size: var(--text-sm);
}

.feedback-option:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.feedback-option--compact {
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
}

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

.brief-feedback a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
  .briefs-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .generate-form {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .brief-link {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .brief-header .brief-title {
    font-size: var(--text-3xl);
  }

  .brief-content h1 {
    font-size: var(--text-2xl);
  }

  .brief-content h2 {
    font-size: var(--text-xl);
  }

  .brief-content table[role="presentation"] td {
    display: block;
    width: 100% !important;
    padding-right: 0;
  }

  .brief-markets-grid {
    grid-template-columns: 1fr;
  }

  .brief-section-headline--top {
    font-size: var(--text-xl);
  }
}

/* ---------- Reading Pane (slide-in overlay) ---------- */

.reading-pane-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 199;
  cursor: pointer;
}

.reading-pane-backdrop-visible {
  display: block;
}

.reading-pane {
  position: fixed;
  top: 0;
  right: 0;
  width: 50vw;
  max-width: 720px;
  height: 100vh;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.reading-pane-open {
  transform: translateX(0);
}

.reading-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  flex-shrink: 0;
}

.reading-pane-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  margin-right: var(--space-2);
}

.reading-pane-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.reading-pane-external {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-1);
  line-height: 1;
}

.reading-pane-external:hover {
  color: var(--color-accent);
}

.reading-pane-close {
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  line-height: 1;
}

.reading-pane-close:hover {
  color: var(--color-negative);
}

.reading-pane-iframe {
  flex: 1;
  width: 100%;
  border: none;
  background: white;
}

/* When pane is open, allow brief to scroll independently */
body.reading-pane-active {
  overflow: auto;
}

/* Keyboard shortcut: Escape to close is handled by Stimulus */

@media (max-width: 768px) {
  .reading-pane {
    width: 100vw;
    max-width: none;
  }
}

/* ==========================================================================
   Shared Brief — Teaser Gate & Public View
   ========================================================================== */

.shared-brief-creator {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.shared-brief-subscribe {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--color-accent);
  text-align: center;
}

.shared-brief-subscribe p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ---------- Teaser Headlines ---------- */

.teaser-section-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.teaser-headline-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8) 0;
}

.teaser-headline-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.teaser-headline-item:first-child {
  border-top: 1px solid var(--color-border);
}

.teaser-headline-text {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}

.teaser-headline-summary {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ---------- Teaser First Story ---------- */

.teaser-first-story {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text);
}

.teaser-first-story p {
  margin: 0;
}

/* ---------- Teaser Gate ---------- */

.teaser-gate {
  margin-top: var(--space-8);
  padding: var(--space-8) var(--space-6);
  background: linear-gradient(to bottom, var(--color-bg-alt), var(--color-surface));
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--color-accent);
  text-align: center;
}

.teaser-gate-heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.teaser-gate-text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto var(--space-6);
}

.teaser-gate-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.teaser-gate-cta {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-accent);
  color: #fff;
  font-weight: 700;
  font-size: var(--text-base);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.teaser-gate-cta:hover {
  background-color: var(--color-accent-hover);
  text-decoration: none;
  color: #fff;
}

.teaser-gate-login {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.teaser-gate-login a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
}

.teaser-gate-login a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Dark mode — defeat inline styles on shared brief section partials
   ==========================================================================
   The partials under app/views/briefs/sections/ are rendered into BOTH the
   HTML brief emails (which require inline styles) and the on-web brief view.
   Those inline styles hardcode light-theme colors like #2d2620 (warm brown)
   and #6b6158 (secondary brown), which override our CSS custom properties
   in dark mode and leave unreadable brown text on a dark background
   (issue #938). !important is required here to defeat inline styles; these
   rules are narrowly scoped to .brief-container in dark mode only, so they
   cannot leak into emails or light-mode rendering.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  /* --- Borders --- */
  .brief-container .brief-section[style],
  .brief-container .brief-section-content[style],
  .brief-container .brief-cluster[style],
  .brief-container .brief-section-sources[style] {
    border-color: var(--color-border) !important;
  }

  /* Accent-bordered sections (lead, top story, etc.) */
  .brief-container .brief-section--lead[style],
  .brief-container .brief-section--cluster[style] {
    border-top-color: var(--color-border) !important;
  }

  /* --- Primary text (dark brown #2d2620 -> light) --- */
  .brief-container .brief-section-headline,
  .brief-container .brief-section-headline--top,
  .brief-container .brief-section-body,
  .brief-container .brief-section-body--lead,
  .brief-container .brief-section-body--deep-dive,
  .brief-container .brief-section-body p,
  .brief-container .brief-cluster-story,
  .brief-container .brief-cluster-story strong,
  .brief-container .brief-ordered-list,
  .brief-container .brief-ordered-list li,
  .brief-container .brief-bullet-list,
  .brief-container .brief-bullet-list li,
  .brief-container .brief-contrarian-text,
  .brief-container .brief-history-description,
  .brief-container .brief-sign-off-text,
  .brief-container .brief-feedback-heading,
  .brief-container .brief-podcast-name,
  .brief-container .brief-podcast-name a,
  .brief-container .brief-podcast-link,
  .brief-container .brief-podcast-summary,
  .brief-container .brief-podcast-quote-text,
  .brief-container .brief-deep-dive-key-point,
  .brief-container .brief-desk-name,
  .brief-container .brief-desk-item,
  .brief-container .brief-rss-pick-title,
  .brief-container .brief-rss-pick-link,
  .brief-container .brief-rss-pick-summary,
  .brief-container .brief-watchlist-symbol,
  .brief-container .brief-spotlight-company,
  .brief-container .brief-feedback-tag-name,
  .brief-container .brief-lead-headline,
  .brief-container .brief-market-question,
  .brief-container .brief-market-question a {
    color: var(--color-text) !important;
  }

  /* --- Secondary text (brown #6b6158 -> muted light) --- */
  .brief-container .brief-section-label,
  .brief-container .brief-section-intro,
  .brief-container .brief-section-sources,
  .brief-container .brief-cluster-story .source-pills,
  .brief-container .brief-sign-off-author,
  .brief-container .brief-podcast-title,
  .brief-container .brief-podcast-analysis,
  .brief-container .brief-deep-dive-key-points-label,
  .brief-container .brief-rss-pick-why,
  .brief-container .brief-watchlist-headline,
  .brief-container .brief-watchlist-note,
  .brief-container .feedback-question-text,
  .brief-container .brief-spotlight-ticker,
  .brief-container .brief-spotlight-sentiment,
  .brief-container .brief-market-commentary,
  .brief-container .brief-feedback-prompt {
    color: var(--color-text-secondary) !important;
  }

  /* --- Muted text (gray #9a918a -> dark-mode muted) --- */
  .brief-container .brief-pipeline-meta,
  .brief-container .brief-pipeline-link,
  .brief-container .brief-podcast-date,
  .brief-container .brief-podcast-quote-attribution,
  .brief-container .brief-rss-pick-source,
  .brief-container .brief-contrarian-label,
  .brief-container .item-feedback-email-link {
    color: var(--color-text-muted) !important;
  }

  /* --- Accent text --- */
  .brief-container .brief-section-label--accent,
  .brief-container .feedback-option,
  .brief-container .feedback-option--compact,
  .brief-container .brief-podcast-timestamp {
    color: var(--color-accent) !important;
  }

  /* --- Backgrounds (light #f3f0eb -> dark surface) --- */
  .brief-container .brief-contrarian-consensus[style],
  .brief-container .brief-deep-dive-key-points[style],
  .brief-container .brief-sign-off-feedback[style],
  .brief-container .brief-recent-changes[style] {
    background-color: var(--color-surface) !important;
  }

  /* --- Recent changes (elements only have inline styles) --- */
  .brief-container .brief-recent-changes p {
    color: var(--color-text) !important;
  }
}

/* ==========================================================================
   Condense to headlines (issue #933)
   ==========================================================================
   The "Condense to headlines" toggle at the top of a brief hides story
   bodies / prose / summaries while keeping the section labels, headlines,
   and cluster story titles visible. This gives users a scannable headline
   index for days when they're hunting for a specific story rather than
   reading the whole brief.

   The Stimulus controller applies `.headlines-only` to `.brief-container`
   instantly on click; the server-side default comes from the persisted
   `preferences.brief_headlines_only` boolean. Because most section
   partials inline their layout styles, we use `!important` to defeat
   those rules — scope is narrow enough that leakage is impossible.
   ========================================================================== */

/* Toggle button + form — a warm-paper pill-style control */
.brief-headlines-toggle-form {
  margin-top: var(--space-3);
}

.brief-headlines-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 9999px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast);
}

.brief-headlines-toggle:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.brief-headlines-toggle:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-tint);
}

.brief-headlines-toggle[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.brief-headlines-toggle[aria-pressed="true"]:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #fff;
}

.brief-headlines-toggle-icon {
  font-size: 1rem;
  line-height: 1;
}

/* Hide story body content when headlines-only is active.
   Keep: .brief-section-label (eyebrow), .brief-section-headline (section title),
         .brief-cluster-story strong (story headline within a cluster). */
.brief-container.headlines-only .brief-section-body,
.brief-container.headlines-only .brief-section-body--lead,
.brief-container.headlines-only .brief-section-body--deep-dive,
.brief-container.headlines-only .brief-section-intro,
.brief-container.headlines-only .brief-section-sources,
.brief-container.headlines-only .brief-section-sources--inline,
.brief-container.headlines-only .brief-deep-dive-key-points,
.brief-container.headlines-only .source-pills {
  display: none !important;
}

/* Inside a story cluster, show the headline (<strong>) but hide the
   em-dash summary body. We keep the <p> itself because it carries the
   cluster layout (border, padding). We strip the summary text by hiding
   the text node via a generated layout: show the strong, suppress the
   rest by collapsing line-height / font-size on the p's direct text. */
.brief-container.headlines-only .brief-cluster-story {
  font-size: 0 !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
}

.brief-container.headlines-only .brief-cluster-story strong {
  font-size: var(--text-base) !important;
  line-height: 1.4 !important;
  display: inline;
}

.brief-container.headlines-only .brief-cluster-story br,
.brief-container.headlines-only .brief-cluster-story .source-pills {
  display: none !important;
}

/* Feedback links inside sections are pure noise in headlines mode */
.brief-container.headlines-only .section-feedback-link {
  display: none !important;
}

/* Tighten the vertical rhythm so the headline list scans fast */
.brief-container.headlines-only .brief-section,
.brief-container.headlines-only .brief-section-content {
  margin-top: 16px !important;
  padding-top: 8px !important;
  padding-bottom: 0 !important;
}

.brief-container.headlines-only .brief-section-headline,
.brief-container.headlines-only .brief-section-headline--top {
  margin: 0 0 4px 0 !important;
}

/* ==========================================================================
   Per-story click-to-expand (issue #961, follow-up to #933)
   ==========================================================================
   In headlines-only mode, clicking an individual headline expands JUST that
   one story's body. The headline_expand Stimulus controller wraps each
   section headline + its body siblings in a `.brief-story-wrapper` div, and
   marks each cluster story <p> with `.brief-story-cluster-item`. Toggling
   `.expanded` on either reveals the body content for that story only.
   ========================================================================== */

/* Per-story override: when a wrapper has `.expanded`, reveal its body
   elements even though the container is in headlines-only mode. The
   selector list mirrors the hide list above. */
.brief-container.headlines-only .brief-story-wrapper.expanded .brief-section-body,
.brief-container.headlines-only .brief-story-wrapper.expanded .brief-section-body--lead,
.brief-container.headlines-only .brief-story-wrapper.expanded .brief-section-body--deep-dive,
.brief-container.headlines-only .brief-story-wrapper.expanded .brief-section-intro,
.brief-container.headlines-only .brief-story-wrapper.expanded .brief-deep-dive-key-points {
  display: block !important;
}

.brief-container.headlines-only .brief-story-wrapper.expanded .brief-section-sources,
.brief-container.headlines-only .brief-story-wrapper.expanded .brief-section-sources--inline,
.brief-container.headlines-only .brief-story-wrapper.expanded .source-pills,
.brief-container.headlines-only .brief-story-wrapper.expanded .section-feedback-link {
  display: block !important;
}

/* Cluster wrapper inside an expanded section headline (story_cluster /
   briefing / topic_cluster sections): show the cluster body. Individual
   cluster stories inside it remain in collapsed (font-size: 0) form unless
   the user also expands them — but the section-level expand reveals the
   intro + cluster framing, so the user can see the full list. To make the
   section expand also fully reveal its child cluster stories, we cascade
   the expand to them as well. */
.brief-container.headlines-only .brief-story-wrapper.expanded .brief-cluster {
  font-size: revert !important;
  line-height: revert !important;
}

.brief-container.headlines-only .brief-story-wrapper.expanded .brief-cluster-story {
  font-size: var(--text-base) !important;
  line-height: 1.6 !important;
}

.brief-container.headlines-only .brief-story-wrapper.expanded .brief-cluster-story br,
.brief-container.headlines-only .brief-story-wrapper.expanded .brief-cluster-story .source-pills {
  display: revert !important;
}

/* Per-cluster-story override: when a single .brief-cluster-story has
   `.expanded`, reveal its em-dash summary text by undoing the font-size: 0
   trick from PR #956. */
.brief-container.headlines-only .brief-cluster-story.expanded {
  font-size: var(--text-base) !important;
  line-height: 1.6 !important;
}

.brief-container.headlines-only .brief-cluster-story.expanded br,
.brief-container.headlines-only .brief-cluster-story.expanded .source-pills {
  display: revert !important;
}

/* Visual affordance: clickable headlines get a pointer cursor and a subtle
   hover tint so users know they can interact. Only in headlines-only mode. */
.brief-container.headlines-only .brief-story-wrapper > .brief-section-headline,
.brief-container.headlines-only .brief-cluster-story {
  cursor: pointer;
  border-radius: 4px;
  padding: 4px 8px !important;
  margin-left: -8px !important;
  margin-right: -8px !important;
  transition: background-color 120ms ease;
}

.brief-container.headlines-only .brief-story-wrapper > .brief-section-headline:hover,
.brief-container.headlines-only .brief-story-wrapper > .brief-section-headline:focus-visible,
.brief-container.headlines-only .brief-cluster-story:hover,
.brief-container.headlines-only .brief-cluster-story:focus-visible {
  background-color: var(--color-accent-tint);
  outline: none;
}

/* Expanded story gets a subtle left border + tint so users can pick out
   which stories they've opened in a long headline list. */
.brief-container.headlines-only .brief-story-wrapper.expanded {
  border-left: 3px solid var(--color-accent);
  padding-left: 12px;
  margin-left: -15px;
  background-color: rgba(245, 235, 232, 0.4);
  border-radius: 4px;
}

.brief-container.headlines-only .brief-cluster-story.expanded {
  border-left: 3px solid var(--color-accent);
  padding-left: 12px !important;
  background-color: rgba(245, 235, 232, 0.4);
}