/* Brieflings — Components
 * Each component grouped with its variants and states.
 * Visual treatment: see docs/company/design-language.md
 * Tokens: see docs/company/design-tokens.md and css/tokens.css
 */

/* ==========================================================================
   Layout & shell
   ========================================================================== */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-5);
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  background: color-mix(in oklab, var(--bg-page) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--border-subtle);
}

.app-header__nav {
  display: none;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 768px) {
  .app-header__nav {
    display: flex;
  }
}

/* Right-side actions zone — sits opposite the brand. Holds the
 * theme toggle plus either Log in + Sign up (unauthed) or the avatar
 * dropdown (authed). Always visible, including on mobile. */
.app-header__actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

@media (min-width: 768px) {
  .app-header__actions {
    gap: var(--space-4);
  }
}

.app-header__nav-link {
  font-family: var(--font-body-sans);
  font-size: var(--text-base);
  color: var(--text-muted);
  font-weight: 400;
  transition: color var(--duration-quick) var(--easing-default);
}

.app-header__nav-link:hover {
  color: var(--text-body);
}

.app-header__nav-link.is-active {
  color: var(--text-body);
  font-weight: 600;
}

/* Brand wordmark
 * Editorial-publication mark: all caps, heavy weight, letterspaced.
 * Controlled imperfection comes from Fraunces' WONK variable axis
 * rather than a CSS hack — the typeface itself carries the character.
 */
.brand {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-body);
  display: inline-block;
  font-variation-settings: 'opsz' 32, 'WONK' 1;
}

.brand em {
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  font-variation-settings: 'opsz' 14, 'WONK' 0;
  margin-inline-start: var(--space-1);
}

/* Avatar */
.avatar {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  background: var(--accent-weekly-bg);
  color: var(--text-body);
  display: grid;
  place-items: center;
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

/* Back link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
  transition: color var(--duration-quick) var(--easing-default);
}

.back-link:hover {
  color: var(--text-body);
}

/* ==========================================================================
   Containers
   ========================================================================== */

.container-content {
  max-inline-size: var(--container-content);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container-reading {
  max-inline-size: var(--container-reading);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* ==========================================================================
   Typography blocks
   ========================================================================== */

/* Display headline — used in covers, page titles */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-body);
  font-variation-settings: 'opsz' 72;
}

.display--page {
  font-size: var(--text-3xl);
}

@media (min-width: 768px) {
  .display--page {
    font-size: var(--text-4xl);
  }
}

.display--hero {
  font-size: var(--text-4xl);
  font-variation-settings: 'opsz' 144;
}

@media (min-width: 768px) {
  .display--hero {
    font-size: var(--text-5xl);
  }
}

@media (min-width: 1024px) {
  .display--hero {
    font-size: var(--text-6xl);
  }
}

/* Drop indent — used for cover headlines */
.drop-indent {
  margin-inline-start: var(--space-5);
}

@media (min-width: 768px) {
  .drop-indent {
    margin-inline-start: var(--space-7);
  }
}

/* Standfirst */
.standfirst {
  font-family: var(--font-body-serif);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  font-weight: 400;
  max-inline-size: 50ch;
}

/* Pull quote */
.pull-quote {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--text-body);
  font-weight: 400;
  margin-block: var(--space-5);
  max-inline-size: 36ch;
}

@media (min-width: 1024px) {
  .pull-quote {
    margin-inline-start: -32px;
  }
}

/* Eyebrow */
.eyebrow {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  line-height: var(--leading-normal);
}

.eyebrow__sep {
  color: var(--text-faint);
}

.eyebrow__sep::before {
  content: '·';
  margin-inline-end: var(--space-2);
}

/* Sign-off block */
.sign-off {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-8) var(--space-7);
}

.sign-off::before,
.sign-off::after {
  content: '';
  flex: 1;
  border-block-start: 1px solid var(--border-subtle);
}

.sign-off__text {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}

/* Ornament variant — same hairline rule structure but with a small
 * decorative glyph in the middle instead of italic text. Used to open
 * an editorial empty-state block. */
.sign-off--ornament {
  margin-block: var(--space-6) var(--space-7);
}

.sign-off__glyph {
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: 1;
  color: var(--text-faint);
  white-space: nowrap;
}

/* Soft variant — tighter surrounding margins for use inside other
 * containers (e.g. the editorial empty state) where the standard
 * sign-off margins would be excessive. */
.sign-off--soft {
  margin-block: var(--space-7) var(--space-3);
}

/* Section opener */
.section-opener {
  margin-block: var(--space-7) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.section-opener__line {
  flex: 0 0 40%;
  border-block-start: 1px solid var(--border-subtle);
}

.section-opener__label {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  text-transform: uppercase;
  /* Controlled imperfection — label sits slightly below the hairline */
  transform: translateY(2px);
}

/* ==========================================================================
   Brief card
   ========================================================================== */

.brief-card {
  display: block;
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--duration-quick) var(--easing-default),
    box-shadow var(--duration-quick) var(--easing-default);
}

.brief-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

/* Cadence accent strip */
.brief-card::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background: var(--accent-strip, var(--accent-weekly));
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
}

@media (min-width: 1024px) {
  .brief-card::before {
    inset-inline-start: -16px;
    border-radius: var(--radius-pill);
  }
}

.brief-card[data-cadence='daily'] {
  --accent-strip: var(--accent-daily);
}

.brief-card[data-cadence='weekly'] {
  --accent-strip: var(--accent-weekly);
}

.brief-card[data-cadence='monthly'] {
  --accent-strip: var(--accent-monthly);
}

/* Read state has no per-card visual penalty — the "since you last
 * visited" divider in the feed is the only chronological signal.
 * Caught-up should feel like a finished stack of issues, not a
 * depleted one. */
.brief-card.is-read {
  /* intentionally empty — kept as a hook for future state styling */
}

.brief-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin-block: var(--space-3);
  color: var(--text-body);
  font-variation-settings: 'opsz' 36;
}

.brief-card__preview {
  font-family: var(--font-body-sans);
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.brief-card__meta {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
  margin-block-start: var(--space-4);
  text-transform: uppercase;
}

/* ==========================================================================
   Greeting (front-page header)
   ========================================================================== */

.greeting {
  margin-block: var(--space-7) var(--space-6);
  padding-inline-start: var(--space-3);
}

/* Editorial drop-indent on tablet+ — same value as `.drop-indent` so the
 * greeting reads as a deliberate signature rather than misalignment with
 * the cards underneath. */
@media (min-width: 768px) {
  .greeting {
    padding-inline-start: var(--space-7);
  }
}

.greeting__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-body);
  margin-block-end: var(--space-2);
  font-variation-settings: 'opsz' 96;
}

@media (min-width: 768px) {
  .greeting__title {
    font-size: var(--text-4xl);
  }
}

.greeting__subtitle {
  font-family: var(--font-body-serif);
  font-size: var(--text-md);
  color: var(--text-muted);
  font-style: italic;
}

/* ==========================================================================
   Brief feed (list of brief cards)
   ========================================================================== */

.brief-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-block: var(--space-6) var(--space-9);
}

.brief-feed__divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-3);
}

.brief-feed__divider::before,
.brief-feed__divider::after {
  content: '';
  flex: 1;
  border-block-start: 1px dashed var(--border-subtle);
}

.brief-feed__divider-label {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
  text-transform: uppercase;
}

/* ==========================================================================
   Cover (brief detail hero)
   ========================================================================== */

.cover {
  position: relative;
  padding: var(--space-7) var(--space-5);
  margin-inline: calc(var(--space-5) * -1);
  background:
    radial-gradient(ellipse at 80% 0%, var(--cover-tint, var(--accent-weekly-bg)) 0%, transparent 60%),
    linear-gradient(135deg, var(--cover-tint-2, var(--accent-weekly-bg)) 0%, var(--bg-page) 70%);
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 768px) {
  .cover {
    padding: var(--space-9) var(--space-7) var(--space-8);
    border-radius: var(--radius-xl);
    margin-inline: calc(var(--space-7) * -1);
  }
}

@media (min-width: 1024px) {
  .cover {
    /* Asymmetric breakout — bleeds right past column */
    margin-inline-end: -120px;
    padding-inline-end: var(--space-9);
  }
}

.cover[data-cadence='daily'] {
  --cover-tint: var(--accent-daily-bg);
  --cover-tint-2: color-mix(in oklab, var(--accent-daily) 35%, transparent);
}

.cover[data-cadence='weekly'] {
  --cover-tint: var(--accent-weekly-bg);
  --cover-tint-2: color-mix(in oklab, var(--accent-weekly) 35%, transparent);
}

.cover[data-cadence='monthly'] {
  --cover-tint: var(--accent-monthly-bg);
  --cover-tint-2: color-mix(in oklab, var(--accent-monthly) 35%, transparent);
}

/* Abstract shape behind type */
.cover__shape {
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -10%;
  inline-size: 60%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle, var(--cover-tint-2) 0%, transparent 70%);
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
  filter: blur(40px);
  opacity: 0.7;
  z-index: -1;
  pointer-events: none;
}

.cover__eyebrow {
  margin-block-end: var(--space-5);
}

.cover__headline {
  margin-block-end: var(--space-5);
}

.cover__standfirst {
  margin-block: var(--space-5);
}

.cover__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
  flex-wrap: wrap;
}

/* ==========================================================================
   Reaction button & reactions row
   ========================================================================== */

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

.reaction-button {
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--bg-card) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  transition:
    background var(--duration-quick) var(--easing-default),
    color var(--duration-quick) var(--easing-default),
    transform var(--duration-quick) var(--easing-default),
    box-shadow var(--duration-quick) var(--easing-default);
}

.reaction-button:hover {
  background: var(--bg-card);
  color: var(--text-body);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.reaction-button.is-active {
  background: var(--accent-bg, var(--accent-weekly-bg));
  color: var(--accent-color, var(--accent-weekly));
  border-color: transparent;
}

.reaction-button[data-cadence='daily'].is-active {
  --accent-bg: var(--accent-daily-bg);
  --accent-color: var(--accent-daily);
}

.reaction-button[data-cadence='weekly'].is-active {
  --accent-bg: var(--accent-weekly-bg);
  --accent-color: var(--accent-weekly);
}

.reaction-button[data-cadence='monthly'].is-active {
  --accent-bg: var(--accent-monthly-bg);
  --accent-color: var(--accent-monthly);
}

.reaction-button svg {
  inline-size: 20px;
  block-size: 20px;
  stroke-width: 1.5;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   Bookmark button

   A standalone toggle on a finding — "save this to finish reading later".
   Shares the round icon-button shape of .reaction-button, but is its own
   component: it carries a single binary state (.is-bookmarked) and is used
   without a cadence accent, since bookmarks are a cross-topic surface.
   ========================================================================== */

.bookmark-button {
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--bg-card) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  transition:
    background var(--duration-quick) var(--easing-default),
    color var(--duration-quick) var(--easing-default),
    transform var(--duration-quick) var(--easing-default),
    box-shadow var(--duration-quick) var(--easing-default);
}

.bookmark-button:hover {
  background: var(--bg-card);
  color: var(--text-body);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.bookmark-button.is-bookmarked {
  background: var(--accent-weekly-bg);
  color: var(--accent-weekly);
  border-color: transparent;
}

.bookmark-button svg {
  inline-size: 20px;
  block-size: 20px;
  stroke-width: 1.5;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bookmark-button.is-bookmarked svg {
  fill: currentColor;
}

/* ==========================================================================
   Source pill & sources row
   ========================================================================== */

.sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.source-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: color-mix(in oklab, var(--bg-card) 70%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  color: var(--text-body);
  transition:
    background var(--duration-quick) var(--easing-default),
    box-shadow var(--duration-quick) var(--easing-default);
  max-inline-size: 240px;
}

.source-pill:hover {
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.source-pill__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   Cadence pill / review tag
   ========================================================================== */

.cadence-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: var(--cadence-pill-bg, var(--accent-weekly-bg));
  color: var(--text-body);
}

.cadence-pill[data-cadence='daily'] {
  --cadence-pill-bg: var(--accent-daily-bg);
}

.cadence-pill[data-cadence='weekly'] {
  --cadence-pill-bg: var(--accent-weekly-bg);
}

.cadence-pill[data-cadence='monthly'] {
  --cadence-pill-bg: var(--accent-monthly-bg);
}

.review-tag {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-body);
  font-weight: 600;
  padding: 1px var(--space-2);
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  opacity: 0.7;
}

/* ==========================================================================
   Finding card (in-brief, full body variant)
   ========================================================================== */

.finding-card {
  position: relative;
  padding-inline-start: var(--space-5);
  margin-block: var(--space-6);
  border-inline-start: 3px solid var(--accent-strip, var(--accent-weekly));
}

.finding-card[data-cadence='daily'] {
  --accent-strip: var(--accent-daily);
}

.finding-card[data-cadence='weekly'] {
  --accent-strip: var(--accent-weekly);
}

.finding-card[data-cadence='monthly'] {
  --accent-strip: var(--accent-monthly);
}

.finding-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin-block-end: var(--space-3);
  color: var(--text-body);
  font-variation-settings: 'opsz' 30;
}

.finding-card__body {
  font-family: var(--font-body-serif);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  margin-block-end: var(--space-4);
}

.finding-card__sources {
  margin-block: var(--space-4);
}

.finding-card__actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-block-start: var(--space-4);
  flex-wrap: wrap;
}

/* ==========================================================================
   Compact item
   ========================================================================== */

.compact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block: var(--space-5);
}

.compact-item {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  font-family: var(--font-body-serif);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.compact-item::before {
  content: '·';
  color: var(--text-faint);
  flex-shrink: 0;
  font-size: var(--text-xl);
  line-height: 1;
}

.compact-item__title {
  color: var(--text-body);
  font-weight: 500;
}

.compact-item__source {
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--text-base);
  margin-inline-start: var(--space-2);
}

/* ==========================================================================
   Brief navigation (prev / next)
   ========================================================================== */

.brief-nav {
  display: flex;
  justify-content: space-between;
  margin-block: var(--space-7) var(--space-9);
}

.brief-nav__link {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--duration-quick) var(--easing-default);
}

.brief-nav__link:hover {
  color: var(--text-body);
}

/* ==========================================================================
   Stylebook chrome (only used in stylebook index/reference pages)
   ========================================================================== */

.stylebook-shell {
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
}

.stylebook-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--border-subtle);
  background: color-mix(in oklab, var(--bg-page) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
}

.stylebook-header__nav {
  display: flex;
  gap: var(--space-4);
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
  align-items: center;
}

.stylebook-header__nav a {
  transition: color var(--duration-quick) var(--easing-default);
}

.stylebook-header__nav a:hover {
  color: var(--text-body);
}

.theme-toggle {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  transition:
    color var(--duration-quick) var(--easing-default),
    border-color var(--duration-quick) var(--easing-default);
}

.theme-toggle:hover {
  color: var(--text-body);
  border-color: var(--text-muted);
}

/* Stylebook index */
.stylebook-index {
  max-inline-size: var(--container-content);
  margin-inline: auto;
  padding: var(--space-8) var(--space-5) var(--space-9);
}

.stylebook-index h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 600;
  margin-block-end: var(--space-3);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: 'opsz' 144;
}

.stylebook-index__lede {
  font-family: var(--font-body-serif);
  font-size: var(--text-md);
  font-style: italic;
  color: var(--text-muted);
  margin-block-end: var(--space-7);
  max-inline-size: 50ch;
  line-height: var(--leading-relaxed);
}

.stylebook-index__group {
  margin-block: var(--space-7);
}

.stylebook-index__group-title {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-block-end: var(--space-2);
}

.stylebook-index__list {
  display: flex;
  flex-direction: column;
}

.stylebook-index__list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-4) 0;
  border-block-end: 1px solid var(--border-subtle);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-body);
  font-variation-settings: 'opsz' 36;
  transition: padding-inline-start var(--duration-standard) var(--easing-default);
}

.stylebook-index__list a:hover {
  padding-inline-start: var(--space-3);
}

.stylebook-index__list a span {
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: 400;
  font-style: italic;
}

/* Reference pages — token / typography */
.reference {
  max-inline-size: var(--container-content);
  margin-inline: auto;
  padding: var(--space-8) var(--space-5) var(--space-9);
}

.reference h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  margin-block-end: var(--space-2);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: 'opsz' 96;
}

.reference > p {
  font-family: var(--font-body-serif);
  font-size: var(--text-md);
  color: var(--text-muted);
  font-style: italic;
  margin-block-end: var(--space-7);
}

.reference__section {
  margin-block: var(--space-7);
}

.reference__section-title {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-block-end: var(--space-4);
}

/* Swatch grid (color tokens) */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-4);
}

.swatch {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-family: var(--font-body-sans);
  background: var(--bg-card);
}

.swatch__sample {
  block-size: 80px;
  background: var(--swatch-color);
}

.swatch__meta {
  padding: var(--space-3);
}

.swatch__name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-body);
}

.swatch__value {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-block-start: var(--space-1);
  font-feature-settings: 'tnum';
}

/* Spacing scale strip */
.scale-strip {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  margin-block: var(--space-4);
}

.scale-strip__step {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.scale-strip__bar {
  inline-size: var(--bar-size);
  block-size: var(--bar-size);
  background: var(--accent-weekly-bg);
  border-radius: var(--radius-sm);
}

/* Type role samples */
.type-sample {
  padding-block: var(--space-5);
  border-block-end: 1px solid var(--border-subtle);
}

.type-sample__label {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-block-end: var(--space-2);
}

.type-sample__demo {
  color: var(--text-body);
}

.type-sample__demo--display-hero {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: 'opsz' 144;
}

.type-sample__demo--display-page {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: 'opsz' 96;
}

.type-sample__demo--display-card {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  font-variation-settings: 'opsz' 36;
}

.type-sample__demo--standfirst {
  font-family: var(--font-body-serif);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

.type-sample__demo--pull-quote {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.type-sample__demo--body {
  font-family: var(--font-body-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.type-sample__demo--eyebrow {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ==========================================================================
   App shell extras (used in apps/web — header dropdown, mobile tab bar)
   ========================================================================== */

/* Account menu (avatar dropdown) and public menu (hamburger) — both
 * use the same <details>/<summary> shell so they share the marker-hiding
 * rules and the sheet positioning. The summary's display comes from
 * the class on it (e.g. .avatar's `display: grid` for the avatar,
 * .theme-icon-button for the hamburger). */
.account-menu,
.public-menu {
  position: relative;
}

.account-menu summary,
.public-menu summary {
  list-style: none;
  cursor: pointer;
}

.account-menu summary::-webkit-details-marker,
.public-menu summary::-webkit-details-marker {
  display: none;
}

.account-menu summary::marker,
.public-menu summary::marker {
  content: '';
}

.account-menu__sheet {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  min-inline-size: 200px;
  padding: var(--space-2);
  z-index: 20;
  display: flex;
  flex-direction: column;
}

.account-menu__link {
  display: block;
  inline-size: 100%;
  text-align: start;
  padding: var(--space-3);
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  color: var(--text-body);
  border-radius: var(--radius-sm);
  transition: background var(--duration-quick) var(--easing-default);
}

.account-menu__link:hover {
  background: var(--accent-weekly-bg);
  color: var(--text-body);
}

.account-menu__link--destructive {
  color: var(--color-error);
}

.account-menu form {
  margin: 0;
}

/* Public-menu (hamburger) sheet — same shape as the account-menu
 * sheet so the dropdown shell is consistent across both states. */
.public-menu__sheet {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  min-inline-size: 180px;
  padding: var(--space-2);
  z-index: 20;
  display: flex;
  flex-direction: column;
}

.public-menu__link {
  display: block;
  inline-size: 100%;
  text-align: start;
  padding: var(--space-3);
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  color: var(--text-body);
  border-radius: var(--radius-sm);
  transition: background var(--duration-quick) var(--easing-default);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.public-menu__link:hover {
  background: var(--accent-weekly-bg);
}

.public-menu__link--primary {
  font-weight: 600;
}

/* Bottom tab bar (mobile only) */
.bottom-tab-bar {
  display: flex;
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  background: color-mix(in oklab, var(--bg-page) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block-start: 1px solid var(--border-subtle);
  z-index: 10;
}

@media (min-width: 768px) {
  .bottom-tab-bar {
    display: none;
  }
}

.bottom-tab-bar__link {
  flex: 1;
  text-align: center;
  padding: var(--space-3) var(--space-2);
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--duration-quick) var(--easing-default);
}

.bottom-tab-bar__link.is-active {
  color: var(--text-body);
}

/* Body padding when bottom tab bar is present */
body:has(.bottom-tab-bar) {
  padding-block-end: 64px;
}

@media (min-width: 768px) {
  body:has(.bottom-tab-bar) {
    padding-block-end: 0;
  }
}

/* Marketing-only anchor links — hide on mobile. The default
 * .app-header__nav already drops the whole nav under 768px (mobile
 * uses the bottom tab bar instead), but we keep this rule so the
 * class is honest about its mobile behavior even if the nav-level
 * hiding ever changes. */
.app-header__nav-link--anchor {
  display: none;
}

@media (min-width: 768px) {
  .app-header__nav-link--anchor {
    display: inline-flex;
  }
}

/* Mobile: collapse the inline action buttons into the dropdown menus.
 * The theme toggle, Log in, and Sign up all live inside .account-menu
 * (authed) or .public-menu (unauthed) on small screens so the header
 * stays uncluttered. The dropdown summaries — avatar and hamburger
 * — are kept visible. */
@media (max-width: 767.98px) {
  .app-header__actions > .theme-icon-button,
  .app-header__actions > .app-header__nav-link {
    display: none;
  }
}

/* Tablet+: the inline actions are visible, so the mobile-only
 * hamburger menu and the in-dropdown Theme line both collapse to
 * avoid duplication. */
@media (min-width: 768px) {
  .public-menu,
  .account-menu__link--theme {
    display: none;
  }
}

/* Icon-only theme toggle. Lives in the actions zone (both authed
 * and unauthed). Two SVGs render in the DOM; CSS toggles which is
 * visible based on the active theme — moon means click → dark,
 * sun means click → light. */
.theme-icon-button {
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    color var(--duration-quick) var(--easing-default),
    border-color var(--duration-quick) var(--easing-default),
    background var(--duration-quick) var(--easing-default);
}

.theme-icon-button:hover {
  color: var(--text-body);
  border-color: var(--text-muted);
  background: var(--bg-card);
}

.theme-icon-button svg {
  inline-size: 18px;
  block-size: 18px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linejoin: round;
}

/* Default: moon visible (click goes to dark). */
.theme-icon-button .icon-sun {
  display: none;
}

.theme-icon-button .icon-moon {
  display: block;
}

/* Dark active via system preference (and not overridden to light). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-icon-button .icon-sun {
    display: block;
  }

  :root:not([data-theme='light']) .theme-icon-button .icon-moon {
    display: none;
  }
}

/* Dark active via explicit manual override. */
[data-theme='dark'] .theme-icon-button .icon-sun {
  display: block;
}

[data-theme='dark'] .theme-icon-button .icon-moon {
  display: none;
}

.app-header__nav-link--cta {
  background: var(--text-body);
  color: var(--bg-page);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-weight: 500;
  transition: opacity var(--duration-quick) var(--easing-default);
}

.app-header__nav-link--cta:hover {
  color: var(--bg-page);
  opacity: 0.85;
}

/* ==========================================================================
   Buttons & form controls
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body-sans);
  font-size: var(--text-base);
  font-weight: 500;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background var(--duration-quick) var(--easing-default),
    color var(--duration-quick) var(--easing-default),
    transform var(--duration-quick) var(--easing-default),
    box-shadow var(--duration-quick) var(--easing-default);
  border: 1px solid transparent;
  text-decoration: none;
}

.button--primary {
  background: var(--text-body);
  color: var(--bg-page);
}

.button--primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.button--secondary {
  background: transparent;
  color: var(--text-body);
  border-color: var(--border-subtle);
}

.button--secondary:hover {
  border-color: var(--text-muted);
  background: var(--bg-card);
}

.button--ghost {
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
}

.button--ghost:hover {
  color: var(--text-body);
}

.button--destructive {
  background: transparent;
  color: var(--color-error);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-3);
}

.button-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-block-start: var(--space-5);
  flex-wrap: wrap;
}

.button-row--end {
  justify-content: flex-end;
}

/* Form fields */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block: var(--space-5);
}

.form-label {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.form-input,
.form-textarea,
.form-select {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body-sans);
  font-size: var(--text-md);
  background: var(--bg-card);
  color: var(--text-body);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: border-color var(--duration-quick) var(--easing-default);
  /* Without these, flex-item min-inline-size: auto + the input's
   * intrinsic size="20" width forces the form (and its containing
   * card) wider than narrow viewports, overflowing horizontally.
   * Letting the input shrink to its container is the fix. */
  inline-size: 100%;
  min-inline-size: 0;
}

.form-input--large {
  font-family: var(--font-body-sans);
  font-size: var(--text-lg);
  font-weight: 500;
  padding: var(--space-4) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  /* Stronger affordance than the default field — the most important
     input on the page deserves a visible container without reading
     as a display title. */
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--text-muted);
}

.form-input--large:focus {
  border-color: var(--text-body);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--text-body) 8%, transparent);
}

/* All input placeholders render in italic + faint so hint text is
   unmistakable. The italic flag also makes example strings
   ("e.g. \"EU AI regulation\"") read as examples, not as user content
   that was already typed. */
.form-input::placeholder,
.form-input--large::placeholder,
.form-textarea::placeholder {
  font-style: italic;
  color: var(--text-faint);
}

.form-textarea {
  font-family: var(--font-body-serif);
  line-height: var(--leading-relaxed);
  resize: vertical;
  min-block-size: 96px;
}

.form-helper {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.form-error {
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  color: var(--color-error);
  margin-block-start: var(--space-2);
}

/* Radio + checkbox groups */
.radio-group,
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.radio-option,
.checkbox-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body-sans);
  font-size: var(--text-md);
  cursor: pointer;
}

.radio-option input,
.checkbox-option input {
  accent-color: var(--text-body);
  inline-size: 18px;
  block-size: 18px;
}

.radio-option__hint,
.checkbox-option__hint {
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--text-sm);
}

.radio-option:has(input:disabled),
.checkbox-option:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   Settings card / settings groups
   ========================================================================== */

.settings-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  margin-block: var(--space-5);
}

.settings-card[data-cadence='daily'] {
  background: color-mix(in oklab, var(--bg-card) 95%, var(--accent-daily) 5%);
}

.settings-card[data-cadence='weekly'] {
  background: color-mix(in oklab, var(--bg-card) 95%, var(--accent-weekly) 5%);
}

.settings-card[data-cadence='monthly'] {
  background: color-mix(in oklab, var(--bg-card) 95%, var(--accent-monthly) 5%);
}

.settings-card__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.settings-card__group + .settings-card__group {
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--border-subtle);
}

.settings-card__group-label {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-block-end: var(--space-2);
}

/* Status pill */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  background: var(--accent-weekly-bg);
  color: var(--text-body);
}

.status-pill--paused {
  background: var(--bg-card);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

/* ==========================================================================
   Modal — native <dialog>, opened via showModal()
   ========================================================================== */

.modal {
  margin: auto;
  inline-size: 100%;
  max-inline-size: 420px;
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  background: var(--bg-card);
  color: var(--text-body);
  box-shadow: var(--shadow-modal);
}

.modal::backdrop {
  background: color-mix(in oklab, var(--bg-page) 60%, #000);
}

.modal__eyebrow {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-block-end: var(--space-2);
}

.modal__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-block-end: var(--space-3);
}

.modal__body {
  font-family: var(--font-body-serif);
  font-style: italic;
  color: var(--text-muted);
  margin-block-end: var(--space-5);
}

.modal__actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  justify-content: flex-end;
}

/* ==========================================================================
   Topic card
   ========================================================================== */

.topic-card {
  display: block;
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  box-shadow: var(--shadow-card);
  transition:
    transform var(--duration-quick) var(--easing-default),
    box-shadow var(--duration-quick) var(--easing-default);
}

.topic-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.topic-card::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background: var(--accent-strip, var(--accent-weekly));
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
}

@media (min-width: 1024px) {
  .topic-card::before {
    inset-inline-start: -16px;
    border-radius: var(--radius-pill);
  }
}

.topic-card[data-cadence='daily'] {
  --accent-strip: var(--accent-daily);
}

.topic-card[data-cadence='weekly'] {
  --accent-strip: var(--accent-weekly);
}

.topic-card[data-cadence='monthly'] {
  --accent-strip: var(--accent-monthly);
}

.topic-card.is-paused {
  opacity: 0.55;
}

.topic-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin-block: var(--space-2);
  font-variation-settings: 'opsz' 36;
}

.topic-card__description {
  font-family: var(--font-body-serif);
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
  margin-block-end: var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.topic-card__meta {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--text-faint);
  text-transform: uppercase;
}

/* ==========================================================================
   Page header (used on /topics, /bookmarks, /settings)
   ========================================================================== */

.page-header {
  margin-block: var(--space-7) var(--space-6);
  padding-inline-start: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Editorial drop-indent on tablet+ — same value as `.drop-indent` and
 * `.greeting` so page titles read as a deliberate signature rather than
 * misalignment with the content underneath. */
@media (min-width: 768px) {
  .page-header {
    padding-inline-start: var(--space-7);
  }
}

.page-header__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: 'opsz' 96;
}

@media (min-width: 768px) {
  .page-header__title {
    font-size: var(--text-4xl);
  }
}

.page-header__subtitle {
  font-family: var(--font-body-serif);
  font-size: var(--text-md);
  font-style: italic;
  color: var(--text-muted);
  margin-block-start: var(--space-2);
}

/* "Next brief lands …" line under a topic title. */
.page-header__arrival {
  font-family: var(--font-body-serif);
  font-size: var(--text-md);
  font-style: italic;
  color: var(--text-muted);
  margin-block-start: var(--space-4);
}

.page-header__actions {
  display: flex;
  gap: var(--space-3);
}

/* ==========================================================================
   Tab nav (typographic divider style)
   ========================================================================== */

.tab-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-6);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--border-subtle);
}

.tab-nav__separator {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-faint);
}

.tab-nav__link {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--text-muted);
  transition: color var(--duration-quick) var(--easing-default);
}

.tab-nav__link.is-active {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 700;
  color: var(--text-body);
  font-variation-settings: 'opsz' 24;
}

.tab-nav__link:hover {
  color: var(--text-body);
}

/* ==========================================================================
   Empty state
   ========================================================================== */

.empty-state {
  text-align: center;
  padding: var(--space-9) var(--space-5);
  margin-block: var(--space-7);
}

.empty-state__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--text-muted);
  margin-block-end: var(--space-3);
  font-variation-settings: 'opsz' 72;
}

.empty-state__body {
  font-family: var(--font-body-serif);
  font-size: var(--text-md);
  color: var(--text-muted);
  font-style: italic;
  max-inline-size: 40ch;
  margin-inline: auto;
  margin-block-end: var(--space-5);
}

.empty-state__panel {
  max-inline-size: 480px;
  margin-inline: auto;
  block-size: 200px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse at 30% 20%, var(--accent-weekly-bg) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, var(--accent-daily-bg) 0%, transparent 60%),
    var(--bg-card);
  filter: blur(0.5px);
}

/* --- Editorial variant --------------------------------------------------
 * Used on /feed when there are no briefs yet. Drops the gradient slab in
 * favour of a typeset editorial note: ornament rule on top, display title
 * + italic standfirst in the middle, sign-off rule on bottom. The sign-off
 * components below (`.sign-off--ornament`, `.sign-off--soft`) carry the
 * rules; this modifier just tightens the surrounding rhythm. */
.empty-state--editorial {
  padding-block: var(--space-7);
}

.empty-state--editorial .empty-state__title {
  color: var(--text-body);
  font-size: var(--text-3xl);
  margin-block: var(--space-2) var(--space-4);
}

@media (min-width: 768px) {
  .empty-state--editorial .empty-state__title {
    font-size: var(--text-4xl);
  }
}

.empty-state--editorial .empty-state__body {
  line-height: var(--leading-relaxed);
  margin-block-end: 0;
}

.empty-state--editorial .empty-state__body strong {
  font-style: normal;
  font-weight: 500;
  color: var(--text-body);
}

.empty-state__cta {
  margin-block-start: var(--space-6);
}

/* ==========================================================================
   Auth (login / signup)
   ========================================================================== */

.auth-page {
  min-block-size: 100vh;
  display: grid;
  place-items: center;
  /* Mobile: tight horizontal frame so the card sits well within
   * narrow viewports. Tablet+ restores the original generous gutter. */
  padding: var(--space-6) var(--space-4);
  background:
    radial-gradient(ellipse at 20% 0%, var(--accent-weekly-bg) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, var(--accent-daily-bg) 0%, transparent 50%),
    var(--bg-page);
}

@media (min-width: 768px) {
  .auth-page {
    padding: var(--space-7) var(--space-5);
  }
}

.auth-card {
  max-inline-size: var(--container-narrow);
  inline-size: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  /* Mobile: tighter inner padding so the form has room to breathe
   * inside the card. Tablet+ restores the editorial padding. */
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-card-hover);
}

@media (min-width: 768px) {
  .auth-card {
    padding: var(--space-7) var(--space-6);
  }
}

.auth-card__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  margin-block-end: var(--space-2);
  font-variation-settings: 'opsz' 72;
}

.auth-card__lede {
  font-family: var(--font-body-serif);
  font-size: var(--text-md);
  color: var(--text-muted);
  font-style: italic;
  margin-block-end: var(--space-6);
}

.auth-card__alt {
  margin-block-start: var(--space-5);
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

.auth-card__alt a {
  color: var(--text-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-card__error {
  background: color-mix(in oklab, var(--color-error) 10%, transparent);
  color: var(--color-error);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  margin-block-end: var(--space-5);
}

/* ==========================================================================
   Marketing (landing)
   ========================================================================== */

.marketing-hero {
  position: relative;
  /* Mobile: tighter top + bottom padding so the dictionary entry
   * surfaces above the fold. Tablet+ restores the original
   * generous editorial breathing room. */
  padding: var(--space-6) var(--space-5) var(--space-7);
  overflow: hidden;
  isolation: isolate;
}

@media (min-width: 768px) {
  .marketing-hero {
    padding: var(--space-9) var(--space-5) var(--space-10);
  }
}

.marketing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 0%, var(--accent-weekly-bg) 0%, transparent 60%),
    radial-gradient(ellipse at 0% 70%, var(--accent-daily-bg) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 100%, var(--accent-monthly-bg) 0%, transparent 50%);
  z-index: -1;
  filter: blur(8px);
}

.marketing-hero__content {
  max-inline-size: var(--container-reading);
  margin-inline: auto;
}

.marketing-hero__eyebrow {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block-end: var(--space-4);
}

.marketing-hero__headline {
  font-family: var(--font-display);
  /* Mobile: text-4xl keeps the hero feeling commanding without forcing
   * 5+ line wraps that push the lede below the fold. The three-tier
   * ramp below restores the original scale on tablet and desktop. */
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-block-end: var(--space-5);
  font-variation-settings: 'opsz' 144;
  margin-inline-start: var(--space-3);
}

@media (min-width: 768px) {
  .marketing-hero__headline {
    font-size: var(--text-5xl);
    margin-inline-start: var(--space-7);
  }
}

@media (min-width: 1024px) {
  .marketing-hero__headline {
    font-size: var(--text-6xl);
  }
}

.marketing-hero__lede {
  font-family: var(--font-body-serif);
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  max-inline-size: 50ch;
  margin-block-end: var(--space-6);
}

/* Dictionary-entry variant of the hero lede. Reframes the product
 * description as a definition: bold display headword, IPA pronunciation,
 * italic part-of-speech marker, definition body, italic usage note. */
.marketing-hero__lede--entry {
  max-inline-size: 56ch;
}

.marketing-hero__lede .entry__headword {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  color: var(--text-body);
  font-variation-settings: 'opsz' 32;
  margin-inline-end: var(--space-1);
}

.marketing-hero__lede .entry__pronunciation {
  font-family: var(--font-body-serif);
  font-style: normal;
  color: var(--text-muted);
  font-size: 0.9em;
  margin-inline-end: var(--space-2);
}

.marketing-hero__lede .entry__pos {
  font-family: var(--font-body-serif);
  font-style: italic;
  color: var(--text-muted);
  margin-inline-end: var(--space-2);
}

.marketing-hero__lede .entry__usage {
  font-family: var(--font-body-serif);
  font-style: italic;
  color: var(--text-muted);
}

.marketing-section {
  padding: var(--space-9) var(--space-5);
  max-inline-size: var(--container-reading);
  margin-inline: auto;
}

.marketing-section__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  margin-block-end: var(--space-7);
  font-variation-settings: 'opsz' 96;
}

.step-list {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .step-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step-block {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  isolation: isolate;
}

.step-block::before {
  content: '';
  position: absolute;
  inset-block-start: -50%;
  inset-inline-end: -30%;
  inline-size: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--step-tint, var(--accent-weekly-bg)) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(20px);
  opacity: 0.7;
  z-index: -1;
}

.step-block:nth-child(1) {
  --step-tint: var(--accent-daily-bg);
}

.step-block:nth-child(2) {
  --step-tint: var(--accent-weekly-bg);
}

.step-block:nth-child(3) {
  --step-tint: var(--accent-monthly-bg);
}

.step-block__number {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-block-end: var(--space-3);
}

.step-block__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  margin-block-end: var(--space-3);
  font-variation-settings: 'opsz' 30;
}

.step-block__body {
  font-family: var(--font-body-serif);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

/* Principles — editorial-grade Features section. Lead pull-quote
 * highlights the most distinctive trait; remaining traits sit in a
 * typographic grid with italic Fraunces letter marks tinted by
 * cadence. No card chrome — the typography does the visual work. */
.principles__lead {
  margin-block: var(--space-7) var(--space-8);
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--accent-weekly);
  max-inline-size: 64ch;
}

.principles__lead-text {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

@media (min-width: 768px) {
  .principles__lead-text {
    font-size: var(--text-2xl);
  }
}

.principles__lead-byline {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block-start: var(--space-4);
}

.principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) var(--space-6);
  padding-block-start: var(--space-7);
  border-block-start: 1px solid var(--border-subtle);
}

@media (min-width: 768px) {
  .principles {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-7);
    row-gap: var(--space-7);
  }
}

@media (min-width: 1024px) {
  .principles {
    grid-template-columns: repeat(3, 1fr);
  }
}

.principle {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  align-items: baseline;
}

.principle__mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: 1;
  color: var(--principle-mark-color, var(--text-faint));
  font-variation-settings: 'opsz' 96;
  /* Reserve a consistent gutter so the title column starts at the
   * same x across all rows regardless of which letter is in the mark. */
  min-inline-size: 32px;
}

.principle[data-cadence='daily'] {
  --principle-mark-color: var(--accent-daily);
}

.principle[data-cadence='weekly'] {
  --principle-mark-color: var(--accent-weekly);
}

.principle[data-cadence='monthly'] {
  --principle-mark-color: var(--accent-monthly);
}

.principle__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin-block-end: var(--space-2);
  color: var(--text-body);
  font-variation-settings: 'opsz' 30;
}

.principle__body {
  font-family: var(--font-body-serif);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
}

/* Closing invitation. Reads as an editor's note rather than a CTA
 * card — cadence-tinted gradient backdrop with a soft abstract shape,
 * display headline, italic body, and an optional sign-off line below
 * the buttons mirroring the brief sign-off pattern. */
.cta-block {
  position: relative;
  padding: var(--space-8) var(--space-6);
  background:
    radial-gradient(ellipse at 75% 0%, var(--accent-weekly-bg) 0%, transparent 60%),
    radial-gradient(ellipse at 10% 100%, var(--accent-daily-bg) 0%, transparent 55%),
    var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  text-align: center;
  margin-inline: auto;
  max-inline-size: var(--container-content);
  isolation: isolate;
  overflow: hidden;
}

@media (min-width: 768px) {
  .cta-block {
    padding: var(--space-9) var(--space-7);
  }
}

.cta-block::before {
  content: '';
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -15%;
  inline-size: 60%;
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    color-mix(in oklab, var(--accent-weekly) 30%, transparent) 0%,
    transparent 70%
  );
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
  filter: blur(40px);
  opacity: 0.7;
  z-index: -1;
  pointer-events: none;
}

.cta-block__eyebrow {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block-end: var(--space-4);
}

.cta-block__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin-block-end: var(--space-4);
  font-variation-settings: 'opsz' 144;
  max-inline-size: 24ch;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .cta-block__title {
    font-size: var(--text-5xl);
  }
}

.cta-block__body {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  margin-block-end: var(--space-6);
  max-inline-size: 50ch;
  margin-inline: auto;
}

/* Italic sign-off line — mirrors the brief detail page's closing
 * gesture so the marketing close feels like the same product voice.
 * Optional: only rendered on the landing page's closing block. */
.cta-block__signoff {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--text-muted);
  margin-block-start: var(--space-6);
}

/* Tight top padding on the closing-letter section — the brief feed
 * above already provides visual closure, so the default var(--space-9)
 * lead-in leaves an awkward gap. */
.marketing-section--cta {
  padding-block-start: var(--space-7);
}

.testimonials {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .testimonials {
    grid-template-columns: repeat(3, 1fr);
  }
}

.testimonial {
  padding: var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.testimonial__quote {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  margin-block-end: var(--space-4);
}

.testimonial__attribution {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.marketing-footer {
  padding: var(--space-7) var(--space-5);
  border-block-start: 1px solid var(--border-subtle);
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
  display: flex;
  justify-content: center;
  gap: var(--space-5);
}

.marketing-footer a:hover {
  color: var(--text-body);
}

/* Marketing section eyebrow — small caps label that sits above each
 * section title. Frames the section as part of a numbered structure
 * rather than a free-floating block. */
.marketing-section__eyebrow {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block-end: var(--space-3);
}

/* Standfirst — italic serif sentence that sits between a section
 * title and its body. Pull the title closer when one follows. */
.marketing-section__title:has(+ .marketing-section__standfirst) {
  margin-block-end: var(--space-3);
}

.marketing-section__standfirst {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  max-inline-size: 55ch;
  margin-block-end: var(--space-6);
}

/* Wider marketing section — used by /pricing where three cards need
 * more inline space than the reading-width default. */
.marketing-section--wide {
  max-inline-size: var(--container-wide);
}

/* "How it works" — editorial process layout. Each row pairs a large
 * Roman numeral and an editorial title/body with a small visual demo
 * of the corresponding product surface. */
.process {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--border-subtle);
}

.process-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  align-items: start;
}

.process-row + .process-row {
  padding-block-start: var(--space-8);
  border-block-start: 1px solid var(--border-subtle);
}

@media (min-width: 768px) {
  .process-row {
    grid-template-columns: minmax(72px, auto) minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: center;
  }
}

.process-row__numeral {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-style: italic;
  font-weight: 400;
  color: var(--text-faint);
  line-height: 1;
  font-variation-settings: 'opsz' 144;
}

@media (min-width: 768px) {
  .process-row__numeral {
    font-size: var(--text-6xl);
  }
}

.process-row__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin-block-end: var(--space-3);
  font-variation-settings: 'opsz' 36;
}

.process-row__body {
  font-family: var(--font-body-serif);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-muted);
  max-inline-size: 50ch;
}

.process-row__demo {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

@media (min-width: 768px) {
  .process-row__demo {
    justify-content: flex-end;
  }
}

.process-row__demo-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  inline-size: 100%;
  max-inline-size: 280px;
}

/* Topic chip — single-line pill, cadence-tinted border, used in the
 * /how-it-works demo. Editorial cousin of the brief-card eyebrow. */
.topic-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-body);
  inline-size: fit-content;
}

.topic-chip em {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: lowercase;
}

.topic-chip[data-cadence='daily'] {
  border-color: color-mix(in oklab, var(--accent-daily) 70%, var(--border-subtle));
}

.topic-chip[data-cadence='weekly'] {
  border-color: color-mix(in oklab, var(--accent-weekly) 70%, var(--border-subtle));
}

.topic-chip[data-cadence='monthly'] {
  border-color: color-mix(in oklab, var(--accent-monthly) 70%, var(--border-subtle));
}

/* Demo brief card — compact variant for the III. process row. */
.brief-card--demo {
  cursor: default;
  inline-size: 100%;
}

.brief-card--demo:hover {
  transform: none;
  box-shadow: var(--shadow-card);
}

/* Demo section-opener — keeps the partial hairline but pulls the
 * margins in so it sits comfortably inside the demo column. */
.section-opener--demo {
  margin-block: 0;
}

.section-opener--demo .section-opener__line {
  flex-basis: 24px;
  flex-grow: 0;
}

/* Page-level marketing hero — used on /pricing. Smaller padding and
 * a tighter headline than the landing hero. */
.marketing-hero--page {
  padding: var(--space-8) var(--space-5) var(--space-6);
}

.marketing-hero--page::before {
  background:
    radial-gradient(ellipse at 80% 0%, var(--accent-weekly-bg) 0%, transparent 50%);
}

.marketing-hero__headline--page {
  font-size: var(--text-4xl);
  margin-inline-start: 0;
}

@media (min-width: 768px) {
  .marketing-hero__headline--page {
    font-size: var(--text-5xl);
  }
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-block-start: var(--space-6);
  align-items: stretch;
}

@media (min-width: 900px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  isolation: isolate;
  overflow: hidden;
}

/* Cadence-tinted glow in the top corner — same atmosphere as the
 * cover/step-block patterns, kept very soft on the non-featured cards. */
.pricing-card::before {
  content: '';
  position: absolute;
  inset-block-start: -30%;
  inset-inline-end: -20%;
  inline-size: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--pricing-tint, var(--accent-weekly-bg)) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(30px);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}

.pricing-card[data-cadence='daily'] {
  --pricing-tint: var(--accent-daily-bg);
}

.pricing-card[data-cadence='weekly'] {
  --pricing-tint: var(--accent-weekly-bg);
}

.pricing-card[data-cadence='monthly'] {
  --pricing-tint: var(--accent-monthly-bg);
}

/* Featured card — middle plan. Bigger atmosphere, slight elevation
 * on desktop so it visibly anchors the trio. */
.pricing-card--featured::before {
  opacity: 1;
  inline-size: 90%;
  inset-block-start: -40%;
}

.pricing-card--featured {
  box-shadow: var(--shadow-card-hover);
  border-color: transparent;
}

@media (min-width: 900px) {
  .pricing-card--featured {
    transform: translateY(-12px);
  }
}

.pricing-card__tag {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-body);
  padding: 2px var(--space-3);
  background: color-mix(in oklab, var(--bg-card) 80%, transparent);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
}

.pricing-card__head {
  margin-block-end: var(--space-4);
}

.pricing-card__plan {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  font-variation-settings: 'opsz' 96;
  margin-block-end: var(--space-3);
}

.pricing-card__positioning {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: var(--leading-snug);
  max-inline-size: 32ch;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-block: var(--space-5);
  margin-block-end: var(--space-5);
  border-block-start: 1px solid var(--border-subtle);
  border-block-end: 1px solid var(--border-subtle);
}

.pricing-card__price-amount {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  font-variation-settings: 'opsz' 144;
}

.pricing-card__price-period {
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.pricing-card__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
  flex: 1;
}

.pricing-card__feature {
  font-family: var(--font-body-serif);
  font-size: var(--text-base);
  color: var(--text-body);
  line-height: var(--leading-snug);
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
}

.pricing-card__feature::before {
  content: '·';
  color: var(--text-faint);
  font-size: var(--text-xl);
  line-height: 1;
  flex-shrink: 0;
}

.pricing-card__cta {
  align-self: stretch;
  justify-content: center;
}

.pricing-fine-print {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--text-muted);
  text-align: center;
  margin-block-start: var(--space-7);
  max-inline-size: 60ch;
  margin-inline: auto;
  line-height: var(--leading-relaxed);
}

/* ==========================================================================
   Chat — full-viewport, two-zone (sidebar + reading column)
   ========================================================================== */

/* Outer page: fills the viewport beneath the app header (and above the
   mobile bottom tab bar). The document does NOT scroll — only .chat-log
   does — which keeps the header pinned and the input always reachable.

   Sizing strategy: body becomes a flex column at the chat surface; the
   header is auto-height, chat-page takes the rest. No magic constants. */
body:has(.chat-page) {
  block-size: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The chat-page lives inside <main> in the app shell. <main>'s default
   display:block doesn't propagate the flex sizing chain, so the inner
   chat-log can't be height-constrained and never scrolls. Make <main>
   a flex column so chat-page's flex:1 / min-block-size:0 actually
   fills the remaining viewport. */
body:has(.chat-page) > main {
  flex: 1;
  min-block-size: 0;
  display: flex;
  flex-direction: column;
}

.chat-page {
  flex: 1;
  min-block-size: 0;
  display: grid;
  /* minmax(0, 1fr) is critical — without the explicit 0 minimum, the
     1fr column defaults to min-content, so a long unbreakable word in
     a message (or a long placeholder) expands the column past the
     viewport and the whole pane clips on the right. */
  grid-template-columns: minmax(0, 1fr);
  inline-size: 100%;
  background: var(--bg-page);
  position: relative;
  overflow: hidden;
}

@media (min-width: 768px) {
  .chat-page {
    grid-template-columns: 300px minmax(0, 1fr);
  }
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */

.chat-sidebar {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  min-inline-size: 0;
  border-inline-end: 1px solid var(--border-subtle);
  /* Calm rail: a slight warm-card tint over the page substrate so the
     sidebar reads as a distinct surface without competing with the
     pane. The chat-page is full-bleed so this surface runs all the way
     to the viewport edge — no abrupt cut. */
  background: color-mix(in oklab, var(--bg-card) 30%, var(--bg-page) 70%);
  position: relative;
}

.chat-sidebar::before {
  /* Soft ambient warmth in the upper-right corner, fades smoothly into
     the rail. No hard edges anywhere. */
  content: '';
  position: absolute;
  inset-block-start: -10%;
  inset-inline-start: -10%;
  inline-size: 120%;
  block-size: 50%;
  background: radial-gradient(
    ellipse at 50% 0%,
    color-mix(in oklab, var(--accent-weekly-bg) 70%, transparent) 0%,
    transparent 70%
  );
  filter: blur(20px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

.chat-sidebar > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  /* Mobile: sidebar lives inside the drawer overlay (anchored to the
     chat-page since it's position:relative and clips overflow). */
  .chat-sidebar {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: min(320px, 86vw);
    z-index: 30;
    border-inline-end: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-modal);
    transform: translateX(-100%);
    transition: transform var(--duration-standard) var(--easing-default);
  }
  .chat-page.is-drawer-open .chat-sidebar {
    transform: translateX(0);
  }
}

.chat-sidebar__header {
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.chat-sidebar__title {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}

/* "+ New conversation" — soft tactile button, reads as a button without
   shouting. Borders + subtle gradient lift it off the page. */
.chat-new-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-body);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition:
    transform var(--duration-quick) var(--easing-default),
    box-shadow var(--duration-quick) var(--easing-default),
    border-color var(--duration-quick) var(--easing-default);
}

.chat-new-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--text-muted);
}

.chat-new-button__plus {
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  background: var(--text-body);
  color: var(--bg-page);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
}

.chat-sidebar__list {
  flex: 1;
  list-style: none;
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-5);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-sidebar__group-label {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  padding: var(--space-4) var(--space-3) var(--space-2);
}

/* Conversation row — a soft tactile pill that highlights when active */
.chat-conv {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--duration-quick) var(--easing-default);
}

.chat-conv:hover {
  background: color-mix(in oklab, var(--bg-card) 70%, transparent);
}

.chat-conv.is-active {
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.chat-conv__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.chat-conv__title {
  flex: 1;
  font-family: var(--font-body-sans);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

.chat-conv__time {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  color: var(--text-faint);
  flex-shrink: 0;
}

.chat-conv__preview {
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.chat-conv__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-block-start: var(--space-1);
  padding: 1px var(--space-2);
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  background: color-mix(in oklab, var(--text-body) 6%, transparent);
  align-self: flex-start;
}

.chat-conv__chip[data-cadence='daily'] {
  background: var(--accent-daily-bg);
  color: color-mix(in oklab, var(--text-body) 80%, var(--accent-daily) 20%);
}
.chat-conv__chip[data-cadence='weekly'] {
  background: var(--accent-weekly-bg);
  color: color-mix(in oklab, var(--text-body) 80%, var(--accent-weekly) 20%);
}
.chat-conv__chip[data-cadence='monthly'] {
  background: var(--accent-monthly-bg);
  color: color-mix(in oklab, var(--text-body) 80%, var(--accent-monthly) 20%);
}
.chat-conv__chip--editor {
  background: color-mix(in oklab, var(--accent-monthly) 18%, transparent);
  color: color-mix(in oklab, var(--text-body) 80%, var(--accent-monthly) 20%);
}

.chat-conv__unread {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--text-body);
  flex-shrink: 0;
  align-self: center;
}

.chat-conv__more {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--space-2);
  transform: translateY(-50%);
  inline-size: 28px;
  block-size: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  background: transparent;
  opacity: 0;
  transition: opacity var(--duration-quick) var(--easing-default), background var(--duration-quick) var(--easing-default);
  cursor: pointer;
}

.chat-conv:hover .chat-conv__more,
.chat-conv:focus-within .chat-conv__more,
.chat-conv.is-active .chat-conv__more {
  opacity: 1;
}

.chat-conv__more:hover {
  background: color-mix(in oklab, var(--text-body) 8%, transparent);
  color: var(--text-body);
}

.chat-conv__more svg {
  inline-size: 16px;
  block-size: 16px;
  stroke: currentColor;
  fill: currentColor;
}

.chat-sidebar__empty {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: var(--space-5) var(--space-4);
  text-align: center;
}

/* Drawer scrim (mobile only) */
.chat-drawer-scrim {
  display: none;
}

@media (max-width: 767px) {
  .chat-page.is-drawer-open .chat-drawer-scrim {
    display: block;
    position: absolute;
    inset: 0;
    background: color-mix(in oklab, var(--text-body) 30%, transparent);
    backdrop-filter: blur(2px);
    z-index: 25;
  }
}

/* ── Pane (right side: header + log + input) ──────────────────────────── */

.chat-pane {
  display: flex;
  flex-direction: column;
  min-block-size: 0;
  min-inline-size: 0;
  background: var(--bg-page);
}

.chat-pane__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--border-subtle);
  background: color-mix(in oklab, var(--bg-page) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 767px) {
  .chat-pane__header {
    padding: var(--space-3) var(--space-3);
    gap: var(--space-2);
  }
}

.chat-pane__hamburger {
  display: none;
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-body);
  border: 1px solid transparent;
  cursor: pointer;
  place-items: center;
}

.chat-pane__hamburger svg {
  inline-size: 20px;
  block-size: 20px;
}

.chat-pane__hamburger:hover {
  background: color-mix(in oklab, var(--text-body) 6%, transparent);
}

@media (max-width: 767px) {
  .chat-pane__hamburger { display: grid; }
}

.chat-pane__titles {
  flex: 1;
  min-inline-size: 0;
}

.chat-pane__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-body);
  margin: 0;
  font-variation-settings: 'opsz' 24;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 768px) {
  .chat-pane__title {
    font-size: var(--text-xl);
    font-variation-settings: 'opsz' 30;
  }
}

.chat-pane__subtitle {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-block-start: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-pane__subtitle a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--text-faint);
}

.chat-pane__subtitle a:hover {
  color: var(--text-body);
  text-decoration-color: var(--text-body);
}

/* Per-conversation model picker on the chat header */
.chat-model-picker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.chat-model-picker__label {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.chat-model-picker__select {
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  color: var(--text-body);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 4px var(--space-2);
  cursor: pointer;
  transition: border-color var(--duration-quick) var(--easing-default);
}

.chat-model-picker__select:hover {
  border-color: color-mix(in oklab, var(--text-body) 24%, transparent);
}

@media (max-width: 767px) {
  .chat-model-picker__label { display: none; }
}

/* Action menu (kebab) on the chat header */
.chat-pane__menu {
  position: relative;
}

.chat-pane__menu-button {
  inline-size: 36px;
  block-size: 36px;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--duration-quick) var(--easing-default), color var(--duration-quick) var(--easing-default);
}

.chat-pane__menu-button:hover {
  background: color-mix(in oklab, var(--text-body) 6%, transparent);
  color: var(--text-body);
}

.chat-pane__menu-button svg {
  inline-size: 18px;
  block-size: 18px;
}

.chat-pane__menu-sheet {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-end: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  min-inline-size: 200px;
  padding: var(--space-2);
  z-index: 20;
  display: flex;
  flex-direction: column;
}

.chat-pane__menu-link {
  display: block;
  text-align: start;
  padding: var(--space-3);
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  color: var(--text-body);
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background var(--duration-quick) var(--easing-default);
  width: 100%;
}

.chat-pane__menu-link:hover {
  background: color-mix(in oklab, var(--text-body) 6%, transparent);
}

.chat-pane__menu-link--destructive {
  color: var(--color-error);
}

/* ── Log ──────────────────────────────────────────────────────────────── */

.chat-log {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  padding-block: var(--space-6) var(--space-7);
  scroll-behavior: smooth;
}

.chat-log__inner {
  max-inline-size: var(--container-reading);
  margin-inline: auto;
  padding-inline: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* User message — bubble (right-aligned), tactile and warm */
.chat-message--user {
  align-self: flex-end;
  max-inline-size: 80%;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-sm);
  font-family: var(--font-body-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  box-shadow: var(--shadow-card);
  /* Break long URLs / unbreakable words so they can't expand the
     column past the viewport on mobile. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.chat-message--user .chat-message__time {
  display: block;
  margin-block-start: var(--space-2);
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  color: var(--text-faint);
  text-align: end;
}

/* User message — pending/optimistic state */
.chat-message--user.is-pending {
  opacity: 0.55;
}

/* Editor reply — editorial, no bubble. Reads like a short brief. */
.chat-message--editor {
  align-self: stretch;
  font-family: var(--font-body-serif);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.chat-message__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.chat-message--editor p {
  margin: 0;
}

.chat-message--editor strong { font-weight: 600; }
.chat-message--editor em { font-style: italic; }

.chat-message--editor a {
  color: var(--text-body);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--text-faint);
}

.chat-message--editor a:hover {
  text-decoration-color: var(--text-body);
}

/* Lists — tighter than reading-prose lists; markers in muted faint */
.chat-message--editor ul,
.chat-message--editor ol {
  margin: 0;
  padding-inline-start: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.chat-message--editor ul li::marker { color: var(--text-faint); }
.chat-message--editor ol li::marker { color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* Inline code + fenced blocks */
.chat-message--editor code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: color-mix(in oklab, var(--text-body) 6%, transparent);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

.chat-message--editor pre {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: color-mix(in oklab, var(--text-body) 5%, transparent);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.chat-message--editor pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* Blockquote — quiet left rule, no theatre */
.chat-message--editor blockquote {
  margin: 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--border-subtle);
  color: var(--text-muted);
  font-style: italic;
}

/* Headings within editor replies — discourage huge ones via styling */
.chat-message--editor h1,
.chat-message--editor h2,
.chat-message--editor h3,
.chat-message--editor h4,
.chat-message--editor h5,
.chat-message--editor h6 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  margin: 0;
  font-variation-settings: 'opsz' 24;
  letter-spacing: var(--tracking-tight);
}

/* Tables (markdown produces them via plugin extensions; default
   commonmark doesn't, but cheap to support if added later) */
.chat-message--editor table {
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin: 0;
}

.chat-message--editor th,
.chat-message--editor td {
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--border-subtle);
  text-align: start;
}

/* Sign-off line for editor messages */
.chat-message__sign {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-block-start: var(--space-2);
}

.chat-message__sign::before {
  content: '—';
  color: var(--text-faint);
}

/* Inline tool confirmation inside an editor message
   (e.g. "I created a topic 'Quantum computing'") */
.chat-message__confirmation {
  padding: var(--space-3) var(--space-4);
  background: color-mix(in oklab, var(--accent-weekly-bg) 60%, transparent);
  border-inline-start: 2px solid var(--accent-weekly);
  border-radius: var(--radius-sm);
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  color: var(--text-body);
  font-style: normal;
}

/* ── Propose-and-confirm card (guardrails T4/T5) ───────────────────
   Shown inside an editor chat message when the agent stages a
   high-impact change — create / change / pause a topic, update the
   profile. The change waits on the user's Confirm click, closing the
   confused-deputy risk. See docs/company/projects/guardrails.md. */
.chat-proposal {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--bg-card-elevated);
  border: 1px solid var(--border-subtle);
  border-inline-start: 3px solid var(--color-warning);
  border-radius: var(--radius-sm);
  font-family: var(--font-body-sans);
}
.chat-proposal__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.chat-proposal__icon {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--color-warning);
}
.chat-proposal__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.chat-proposal__summary {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: var(--text-body);
}
.chat-proposal__detail {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}
.chat-proposal__detail li {
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.chat-proposal__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.chat-proposal__btn {
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--duration-quick) var(--easing-default),
              border-color var(--duration-quick) var(--easing-default);
}
.chat-proposal__btn--confirm {
  background: var(--text-body);
  color: var(--bg-card);
}
.chat-proposal__btn--confirm:hover {
  background: color-mix(in oklab, var(--text-body) 85%, var(--color-warning));
}
.chat-proposal__btn--dismiss {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border-subtle);
}
.chat-proposal__btn--dismiss:hover {
  background: var(--bg-page);
}
.chat-proposal__settled {
  display: none;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  align-items: baseline;
  gap: var(--space-2);
}
.chat-proposal__settled-mark {
  font-weight: 700;
}
.chat-proposal[data-state="confirmed"] .chat-proposal__actions,
.chat-proposal[data-state="dismissed"] .chat-proposal__actions {
  display: none;
}
.chat-proposal[data-state="confirmed"] .chat-proposal__settled,
.chat-proposal[data-state="dismissed"] .chat-proposal__settled {
  display: flex;
}
.chat-proposal[data-state="confirmed"] {
  border-inline-start-color: var(--color-success);
  background: color-mix(in oklab, var(--color-success) 7%, var(--bg-card));
}
.chat-proposal[data-state="confirmed"] .chat-proposal__settled {
  color: color-mix(in oklab, var(--color-success) 70%, var(--text-body));
}
.chat-proposal[data-state="dismissed"] {
  border-inline-start-color: var(--border-subtle);
  background: var(--bg-page);
  opacity: 0.85;
}
.chat-proposal[data-state="dismissed"] .chat-proposal__summary {
  color: var(--text-muted);
}
.chat-proposal[data-state="dismissed"] .chat-proposal__settled {
  color: var(--text-muted);
}
.chat-proposal[data-state="dismissed"] .chat-proposal__head {
  display: none;
}

/* Typing / "writing" indicator */
.chat-typing {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}

.chat-typing__dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.chat-typing__dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.4;
  animation: chat-typing-bounce 1.2s infinite ease-in-out;
}

.chat-typing__dot:nth-child(2) { animation-delay: 0.15s; }
.chat-typing__dot:nth-child(3) { animation-delay: 0.30s; }

@keyframes chat-typing-bounce {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .chat-typing__dot { animation: none; opacity: 0.7; }
}

/* Date divider in the log */
.chat-divider {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-block: var(--space-3);
}

.chat-divider::before,
.chat-divider::after {
  content: '';
  flex: 1;
  border-block-start: 1px dashed var(--border-subtle);
}

/* ── Input zone ───────────────────────────────────────────────────────── */

.chat-input-zone {
  flex-shrink: 0;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-block-start: 1px solid var(--border-subtle);
  background: color-mix(in oklab, var(--bg-page) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 767px) {
  .chat-input-zone {
    padding: var(--space-3) var(--space-3) var(--space-4);
  }
}

/* The form is just a flex row holding the input box and the send
   button as siblings. The chrome (border, radius, shadow) lives on
   .chat-input__inner so the send circle sits OUTSIDE the rectangle.
   align-items: flex-end keeps the send anchored to the bottom-right
   when the input grows multi-line. */
.chat-input {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  max-inline-size: var(--container-reading);
  margin-inline: auto;
}

/* The actual input box. Fixed-pixel radius (radius-lg = 20px) means
   the box keeps the same corners regardless of how tall it grows —
   it reads as "a chat composer that's expanding" instead of an
   ever-elongating pill. */
.chat-input__inner {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-card);
  transition:
    border-color var(--duration-quick) var(--easing-default),
    box-shadow var(--duration-quick) var(--easing-default);
}

.chat-input__inner:focus-within {
  border-color: var(--text-muted);
  box-shadow: var(--shadow-card-hover);
}

.chat-input__field {
  flex: 1;
  inline-size: 100%;
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-body-sans);
  /* Slightly smaller than message body — chat input doesn't need
     reading-pace type. */
  font-size: var(--text-base);
  color: var(--text-body);
  resize: none;
  min-block-size: 22px;
  max-block-size: 200px;
  line-height: 1.5;
  outline: none;
  /* Hide the scrollbar by default — a long placeholder that wraps
     on mobile would otherwise trigger a tiny native scrollbar inside
     the input. JS toggles overflow-y back to auto only when actual
     typed content exceeds max-block-size. */
  overflow-y: hidden;
}

.chat-input__field::placeholder {
  color: var(--text-faint);
  font-style: italic;
}

/* Send button — circular, nestled inside the pill. Switches between a
   "ready" state (dark fill, full contrast) and a "resting" state (light
   surface, muted) based on whether the textarea has content, so it
   reads as inactive when there's nothing to send. */
.chat-input__send {
  position: relative;
  flex-shrink: 0;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: var(--text-body);
  color: var(--bg-page);
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--duration-quick) var(--easing-default),
    background var(--duration-quick) var(--easing-default),
    color var(--duration-quick) var(--easing-default),
    box-shadow var(--duration-quick) var(--easing-default),
    opacity var(--duration-quick) var(--easing-default);
}

.chat-input__send:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Resting state: textarea is empty (placeholder visible). The button
   recedes to a soft surface so it doesn't shout for attention. The
   :has() climbs out of the inner wrapper to reach the send sibling. */
.chat-input:has(.chat-input__field:placeholder-shown) .chat-input__send {
  background: color-mix(in oklab, var(--text-body) 12%, var(--bg-card) 88%);
  color: var(--text-faint);
  cursor: default;
}

.chat-input:has(.chat-input__field:placeholder-shown) .chat-input__send:hover {
  transform: none;
  box-shadow: none;
}

.chat-input__send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.chat-input__send svg {
  position: relative;
  z-index: 1;
  inline-size: 18px;
  block-size: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Gradient flash on press — immediate tactile feedback */
.chat-input__send::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from 220deg,
    var(--accent-daily) 0%,
    var(--accent-weekly) 35%,
    var(--accent-monthly) 65%,
    var(--accent-daily) 100%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transform: scale(0.4);
}

.chat-input__send:active:not(:disabled) {
  transform: translateY(0) scale(0.96);
}

/* The flash is JS-triggered (chat.js toggles .is-flashing on submit)
   rather than tied to :active — :active only holds while the mouse
   button is down, so a normal sub-100ms click would cut the
   animation off mid-way. Class-based ensures the full 600ms plays
   regardless of how long the user held the button. */
.chat-input__send.is-flashing::before {
  animation: chat-send-flash 600ms ease-out;
}

@keyframes chat-send-flash {
  0% { opacity: 1; transform: scale(0.4); }
  100% { opacity: 0; transform: scale(2); }
}

@media (prefers-reduced-motion: reduce) {
  .chat-input__send::before { animation: none !important; }
  .chat-input__send:active:not(:disabled) { transform: none; }
}

.chat-input__hint {
  max-inline-size: var(--container-reading);
  margin: var(--space-2) auto 0;
  padding-inline: var(--space-3);
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  color: var(--text-faint);
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

@media (max-width: 767px) {
  .chat-input__hint-keyboard { display: none; }
  .chat-input__hint { justify-content: flex-end; }
}

/* ── Inline upgrade card ──────────────────────────────────────────────── */
/* Anchored to the assistant message whose editor would have used web
   tools but couldn't on this plan. System voice (not the editor); near-
   footnote visual weight. All colors come from semantic tokens so the
   card adapts to the active theme — no hardcoded brights. Suppressed
   once the user has CHAT_WEB_TOOLS. */

.chat-upgrade-card {
  align-self: stretch;
  margin-block: var(--space-1) var(--space-3);
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  color: var(--text-faint);
  line-height: 1.5;
}

.chat-upgrade-card__lede {
  flex: 1;
  min-inline-size: 0;
}

.chat-upgrade-card__action {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  border-block-end: 1px dotted currentColor;
  white-space: nowrap;
  transition: color 120ms ease;
}

.chat-upgrade-card__action:hover,
.chat-upgrade-card__action:focus-visible {
  color: var(--text-body);
}

/* ── Chat fair-use notice ─────────────────────────────────────────────────
   Calm system note shown in place of an editor reply when a chat turn is
   blocked by the hidden fair-use cap. Same footnote weight as the upgrade
   card — informational, never an alarm. All colors from semantic tokens. */

.chat-fairuse-notice {
  align-self: stretch;
  margin-block: var(--space-1) var(--space-3);
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  color: var(--text-faint);
  line-height: 1.5;
}

.chat-fairuse-notice__lede {
  display: block;
  min-inline-size: 0;
}

/* ── Empty state ──────────────────────────────────────────────────────── */

.chat-empty {
  align-self: stretch;
  text-align: center;
  padding: var(--space-9) var(--space-5) var(--space-7);
}

.chat-empty__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text-muted);
  margin-block-end: var(--space-3);
  font-variation-settings: 'opsz' 72;
  line-height: var(--leading-snug);
  max-inline-size: 22ch;
  margin-inline: auto;
}

.chat-empty__body {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--text-muted);
  max-inline-size: 36ch;
  margin-inline: auto;
  margin-block-end: var(--space-5);
}

.chat-empty__panel {
  margin: var(--space-6) auto 0;
  inline-size: 100%;
  max-inline-size: 480px;
  block-size: 160px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse at 25% 20%, var(--accent-weekly-bg) 0%, transparent 60%),
    radial-gradient(ellipse at 75% 80%, var(--accent-daily-bg) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, var(--accent-monthly-bg) 0%, transparent 70%),
    var(--bg-card);
  filter: blur(1px);
}

.chat-empty__suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
}

.chat-empty__suggestion {
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  color: var(--text-body);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--duration-quick) var(--easing-default), transform var(--duration-quick) var(--easing-default);
}

.chat-empty__suggestion:hover {
  border-color: var(--text-muted);
  transform: translateY(-1px);
}

/* ── Brief-link strip (top of pane when chat is about a brief) ───────── */

.chat-brief-link {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-5);
  background: color-mix(in oklab, var(--bg-card) 60%, transparent);
  border-block-end: 1px solid var(--border-subtle);
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  overflow: hidden;
}

@media (max-width: 767px) {
  .chat-brief-link {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
    font-size: var(--text-xs);
  }
}

.chat-brief-link__label {
  flex-shrink: 0;
}

.chat-brief-link__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-body);
  text-decoration: none;
  font-weight: 500;
  flex: 1;
  min-inline-size: 0;
}

.chat-brief-link__link:hover .chat-brief-link__title {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.chat-brief-link__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-inline-size: 0;
}

.chat-brief-link__arrow {
  inline-size: 14px;
  block-size: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ==========================================================================
   Brief CTA — replaces the embedded chat at the bottom of a brief
   ========================================================================== */

/* Designed to recede beneath the findings, not compete with them.
   No card fill, no shadow — just a hairline frame, a barely-there
   ambient gradient corner, and editorial typography. */
.brief-cta {
  position: relative;
  margin-block: var(--space-7) var(--space-9);
  padding: var(--space-6) var(--space-5);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
  text-align: start;
}

.brief-cta::before {
  content: '';
  position: absolute;
  inset-block-start: -60%;
  inset-inline-end: -30%;
  inline-size: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--cta-tint, var(--accent-weekly-bg)) 0%, transparent 65%);
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.45;
  z-index: -1;
  pointer-events: none;
}

.brief-cta[data-cadence='daily'] { --cta-tint: var(--accent-daily-bg); }
.brief-cta[data-cadence='weekly'] { --cta-tint: var(--accent-weekly-bg); }
.brief-cta[data-cadence='monthly'] { --cta-tint: var(--accent-monthly-bg); }

.brief-cta__eyebrow {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block-end: var(--space-3);
}

.brief-cta__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin-block-end: var(--space-3);
  font-variation-settings: 'opsz' 30;
  max-inline-size: 36ch;
  color: var(--text-body);
}

.brief-cta__lede {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--text-muted);
  margin-block-end: var(--space-5);
  max-inline-size: 52ch;
  line-height: var(--leading-relaxed);
}

/* Outlined / secondary — quiet enough not to outshine the findings */
.brief-cta__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: transparent;
  color: var(--text-body);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  font-family: var(--font-body-sans);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition:
    border-color var(--duration-quick) var(--easing-default),
    background var(--duration-quick) var(--easing-default),
    transform var(--duration-quick) var(--easing-default);
}

.brief-cta__action:hover {
  transform: translateY(-1px);
  border-color: var(--text-muted);
  background: color-mix(in oklab, var(--bg-card) 60%, transparent);
}

.brief-cta__action svg {
  inline-size: 16px;
  block-size: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   Mocked-feature flag
   ========================================================================== */

.mocked-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-2);
  background: color-mix(in oklab, var(--color-warning) 15%, transparent);
  color: var(--color-warning);
  border-radius: var(--radius-pill);
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ==========================================================================
   Topic-creation credit-cost forecast — informative, non-blocking (§6l)
   ========================================================================== */

.cost-forecast {
  margin-block: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

/* Over the monthly allowance — a warm tint, never an alarm red. */
.cost-forecast--over {
  background: var(--accent-daily-bg);
  border-color: transparent;
}

.cost-forecast__body {
  margin: 0;
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

.cost-forecast__body strong {
  color: var(--text-body);
  font-weight: 600;
}

/* ==========================================================================
   Credit meter — the single monitoring-credits meter, on /settings (§6h)
   ========================================================================== */

.credit-meter {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.credit-meter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.credit-meter__label {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.credit-meter__count {
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  color: var(--text-faint);
  white-space: nowrap;
}

.credit-meter__count strong {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-body);
}

.credit-meter__track {
  block-size: 8px;
  background: var(--bg-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.credit-meter__fill {
  block-size: 100%;
  background: var(--color-success);
  border-radius: var(--radius-pill);
  transition: inline-size var(--duration-standard) var(--easing-default);
}

.credit-meter--over .credit-meter__fill {
  background: var(--color-warning);
}

.credit-meter__note {
  margin: 0;
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

/* Over budget — a warm callout, never an alarm red. */
.credit-meter__note--warn {
  color: var(--text-body);
  background: var(--accent-daily-bg);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
}

.credit-meter__note a {
  color: var(--text-body);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* A scheduled plan change — a quiet line under a hairline. */
.credit-meter__pending {
  margin: 0;
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--border-subtle);
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ==========================================================================
   Nav unread badge
   ========================================================================== */

/* (chat sidebar / brief CTA styles moved into the Chat block above) */


.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-inline-start: 6px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-pill);
  background: var(--color-accent, var(--color-text));
  color: var(--color-background, white);
  vertical-align: middle;
}


/* ============================================================================
 * Bell icon — header dropdown for notifications
 * ========================================================================== */

.bell {
  position: relative;
}

.bell summary {
  list-style: none;
  cursor: pointer;
}

.bell summary::-webkit-details-marker { display: none; }
.bell summary::marker { content: ''; }

.bell__trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-2);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-body);
  border: 1px solid transparent;
  transition: background var(--duration-quick) var(--easing-default);
}

.bell__trigger:hover {
  background: var(--accent-weekly-bg);
}

.bell__icon {
  inline-size: 20px;
  block-size: 20px;
}

.bell__sheet {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-end: 0;
  inline-size: 360px;
  max-inline-size: calc(100vw - var(--space-5));
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  z-index: 20;
  overflow: hidden;
}

.bell-panel__loading,
.bell-panel__empty {
  padding: var(--space-5);
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

.bell-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-block-size: 60vh;
  overflow-y: auto;
}

.bell-panel__item {
  border-block-end: 1px solid var(--border-subtle);
}

.bell-panel__item:last-child {
  border-block-end: 0;
}

.bell-panel__item.is-read .bell-panel__row {
  opacity: 0.7;
}

.bell-panel__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  inline-size: 100%;
  padding: var(--space-3) var(--space-4);
  background: transparent;
  border: 0;
  text-align: start;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-body);
}

.bell-panel__row:hover {
  background: var(--accent-weekly-bg);
}

.bell-panel__row-title {
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
}

.bell-panel__row-body {
  font-family: var(--font-body-serif);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.45;
}

.bell-panel__row-time {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  color: var(--text-faint);
  margin-block-start: var(--space-1);
}

.bell-panel__footer {
  padding: var(--space-3) var(--space-4);
  border-block-start: 1px solid var(--border-subtle);
  text-align: center;
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
}

.bell-panel__footer a {
  color: var(--text-body);
  font-weight: 500;
}

.nav-badge--bell {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-end: -2px;
  background: var(--color-error, #b05d5d);
  color: var(--bg-card);
  min-inline-size: 16px;
  block-size: 16px;
  font-size: 10px;
}

/* ============================================================================
 * Inbox — /notifications
 * ========================================================================== */

.inbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.inbox-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.inbox-row.is-unread {
  border-inline-start: 3px solid var(--accent-weekly);
}

.inbox-row.is-read {
  opacity: 0.75;
}

.inbox-row__main {
  flex: 1;
  margin: 0;
}

.inbox-row__button {
  display: block;
  inline-size: 100%;
  background: transparent;
  border: 0;
  padding: var(--space-4) var(--space-5);
  text-align: start;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-body);
}

.inbox-row__button:hover {
  background: var(--accent-weekly-bg);
}

.inbox-row__title {
  font-family: var(--font-body-sans);
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 var(--space-1) 0;
}

.inbox-row__body {
  font-family: var(--font-body-serif);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 var(--space-2) 0;
}

.inbox-row__meta {
  margin: 0;
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  color: var(--text-faint);
}

.inbox-row__dismiss {
  margin: 0;
  display: flex;
  align-items: stretch;
}

.inbox-row__dismiss-button {
  padding: 0 var(--space-4);
  background: transparent;
  border: 0;
  border-inline-start: 1px solid var(--border-subtle);
  cursor: pointer;
  font-size: var(--text-xl);
  color: var(--text-faint);
  transition: color var(--duration-quick) var(--easing-default);
}

.inbox-row__dismiss-button:hover {
  color: var(--color-error);
}


/* ─────────────────────────────────────────────────────────────────
   Onboarding — /welcome/*

   The components below are used only on the /welcome flow + the
   regular Add Topic form. Ported from stylebook/css/components.css.
   The stylebook-only `.stylebook-onboarding__*` annotation classes
   are deliberately not ported — they have no use outside the
   stylebook page.
   ───────────────────────────────────────────────────────────────── */

/* Page background — shared with auth pages so signup → /welcome feels
   continuous (same warm cream + cadence-pastel gradient). */
.onboarding-page {
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-7) var(--space-5) var(--space-9);
  background:
    radial-gradient(ellipse at 20% 0%, var(--accent-weekly-bg) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, var(--accent-daily-bg) 0%, transparent 50%),
    var(--bg-page);
}

.onboarding-header {
  inline-size: 100%;
  max-inline-size: var(--container-content);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-block-end: var(--space-7);
}

.onboarding-step-indicator {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.onboarding-step {
  inline-size: 100%;
  max-inline-size: var(--container-step);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.onboarding-step__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: 'opsz' 96;
  margin: 0;
}

.onboarding-step__lede {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-inline-size: 44ch;
}

/* The action stack — primary CTA on top, skip text button below.
   Stacking (not side-by-side) so the user reads the primary first,
   never sees "skip" as a competing equal option. */
.onboarding-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

.onboarding-actions .button--primary,
.onboarding-actions .button--secondary {
  inline-size: 100%;
  padding-block: var(--space-3);
  font-size: var(--text-md);
}

.onboarding-actions__skip {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  cursor: pointer;
  padding-block: var(--space-2);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-subtle);
  transition: color var(--duration-quick) var(--easing-default);
}

.onboarding-actions__skip:hover {
  color: var(--text-body);
  text-decoration-color: currentColor;
}

/* The detected-timezone chip — used on step 1 of onboarding. Read-only
   by default, click "change" to expand the inline <select> next to it. */
.tz-chip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in oklab, var(--accent-weekly-bg) 60%, transparent);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
}

.tz-chip__label {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.tz-chip__value {
  color: var(--text-body);
  font-weight: 500;
  flex: 1 1 auto;
}

.tz-chip__change {
  background: transparent;
  border: 0;
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--border-subtle);
}

.tz-chip__change:hover {
  color: var(--text-body);
}

/* Expanded variant — the read-only chip swaps for an inline select. */
.tz-chip--expanded {
  background: var(--bg-card);
  border-color: var(--text-muted);
}

.tz-chip__select {
  flex: 1 1 auto;
  min-inline-size: 220px;
  font-family: var(--font-body-sans);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-card);
  color: var(--text-body);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

/* Tier-locked radio row — used on step 2 (delivery window for free users).
   The radio input is replaced by a "Premium" pill; the row stays in the
   document flow so the layout doesn't shift between free and premium. */
.radio-option--locked {
  opacity: 0.85;
  cursor: default;
}

.radio-option--locked .radio-option__hint {
  display: block;
  margin-inline-start: auto;
}

.radio-option__lock-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-3);
  background: color-mix(in oklab, var(--accent-monthly) 30%, transparent);
  color: var(--text-body);
  border-radius: var(--radius-pill);
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.radio-option__lock-pill::before {
  content: '';
  inline-size: 10px;
  block-size: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V8a4 4 0 0 1 8 0v3'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V8a4 4 0 0 1 8 0v3'/></svg>") center / contain no-repeat;
}

.radio-option__upgrade-link {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  color: var(--text-body);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--text-faint);
}

.radio-option__upgrade-link:hover {
  text-decoration-color: currentColor;
}

/* Tier-helper row — sits under step 2's form, before the actions stack.
   Reads as a hairline + small-caps eyebrow + inline link. */
.tier-helper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-subtle);
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.tier-helper__link {
  margin-inline-start: auto;
  color: var(--text-body);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Summary card row — step 3's one-bullet recap of each topic + the
   Tracking-so-far panel on step 2B. Cadence-coloured left edge. */
.summary-bullet {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding-block: var(--space-3);
}

.summary-bullet[data-cadence='daily']::before {
  background: var(--accent-daily);
}

.summary-bullet[data-cadence='weekly']::before {
  background: var(--accent-weekly);
}

.summary-bullet[data-cadence='monthly']::before {
  background: var(--accent-monthly);
}

.summary-bullet::before {
  content: '';
  inline-size: 3px;
  align-self: stretch;
  border-radius: 2px;
  flex: 0 0 auto;
}

.summary-bullet__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.summary-bullet__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-body);
  margin: 0;
  font-variation-settings: 'opsz' 36;
}

.summary-bullet__meta {
  font-family: var(--font-body-sans);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Day-of-week pill row — used for weekly-cadence topics. Single-letter
   buttons in a horizontal radio group. Selected pill fills with the
   cadence accent. The seventh letter (Sunday) repeats S; position is
   the disambiguator, which is fine for the known week sequence. */
.day-pill-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.day-pill {
  inline-size: 36px;
  block-size: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-body);
  font-family: var(--font-body-sans);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition:
    background var(--duration-quick) var(--easing-default),
    border-color var(--duration-quick) var(--easing-default);
}

.day-pill:hover {
  border-color: var(--text-muted);
}

.day-pill input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.day-pill:has(input:checked),
.day-pill.is-active {
  background: var(--accent-weekly);
  border-color: var(--accent-weekly);
  color: var(--text-body);
  font-weight: 600;
}

.day-pill:has(input:checked)[data-cadence='daily'],
.day-pill.is-active[data-cadence='daily'] {
  background: var(--accent-daily);
  border-color: var(--accent-daily);
}

.day-pill:has(input:checked)[data-cadence='monthly'],
.day-pill.is-active[data-cadence='monthly'] {
  background: var(--accent-monthly);
  border-color: var(--accent-monthly);
}

/* Editorial inset — body-serif italic note that sits between the
   Tracking-so-far panel and the empty form on step 2B. Used to
   illustrate the spread-across-the-week multi-topic pattern. */
.editorial-inset {
  font-family: var(--font-body-serif);
  font-style: italic;
  font-size: var(--text-md);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
  max-inline-size: 52ch;
  padding-inline: var(--space-4);
  border-inline-start: 2px solid var(--accent-weekly);
  margin-block: var(--space-2);
}

.editorial-inset strong {
  color: var(--text-body);
  font-style: normal;
  font-weight: 600;
}