/* ============================================================================
   enhancements.css — Visual polish layer (mobile-first, desktop-friendly)
   ----------------------------------------------------------------------------
   This file ONLY contains overrides on top of styles.css. It is intentionally
   self-contained and additive so the entire visual refresh can be reverted by
   removing the single <link rel="stylesheet" href="enhancements.css"> line in
   index.html — no edits to the base stylesheet are involved.

   Each section is independent; delete a section to drop just that tweak.
   All colors go through the existing CSS variables so dark mode keeps working.
   ============================================================================ */


/* ── 1. Feedback widget: mid-right vertical bar → bottom-right pill ──────────
   The old vertical "FEEDBACK" tab floated over the right edge of article cards
   and overlapped content on phones. A compact bottom-right pill stays clear of
   the feed (back-to-top lives bottom-left, so no collision) and reads as a
   modern floating action. */
#feedback-tab {
  top: auto;
  bottom: 1.25rem;
  right: 1.25rem;
  transform: none;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  opacity: 1;
  box-shadow: 0 6px 18px rgba(102, 126, 234, 0.42);
}

#feedback-tab::before {
  content: "💬";
  font-size: 0.95rem;
  line-height: 1;
}

/* Panel now slides up from the bottom-right, anchored to the pill, instead of
   sweeping in from the vertical centre of the screen. */
#feedback-panel {
  top: auto;
  bottom: 1.25rem;
  right: 1.25rem;
  border-radius: 14px;
  transform: translateY(calc(100% + 2.5rem));
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

#feedback-panel.open {
  transform: translateY(0);
}

@media (max-width: 575.98px) {
  /* On small phones, drop the word and show just the chat glyph so the pill
     never crowds the feed. */
  #feedback-tab span { display: none; }
  #feedback-tab { padding: 0.6rem; }
  #feedback-tab::before { font-size: 1.1rem; }
}


/* ── 2. Floating article plates ─────────────────────────────────────────────
   Every feed object — article card, ad slot, loading skeleton — sits on its
   own raised, rounded plate over a tinted page instead of a flat divided
   list. Deleting this section falls back to the base list/grid look. */
:root {
  --plate-radius: 14px;
  /* Deepen the page tint a notch so white plates visibly float above it. */
  --bg-page: #eef1f5;
}
html.dark {
  --bg-page: #0c0c0e;
}

.feed-item-avatar {
  width: 34px;
  height: 34px;
  font-size: 0.75rem;
  box-shadow: inset 0 0 0 1px var(--border-light);
}

/* Plate chrome — all viewport sizes. */
.feed-item,
.feed-ad-slot,
.skeleton-row {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--plate-radius, 14px);
  padding: 1rem;
  box-shadow: 0 1px 2px var(--shadow-sm), 0 6px 18px rgba(15, 23, 42, 0.05);
}
/* The base list look strips the last divider; plates keep all four edges. */
.feed-item:last-child,
.feed-ad-slot:last-of-type {
  border: 1px solid var(--border-light);
}
html.dark .feed-item,
html.dark .feed-ad-slot,
html.dark .skeleton-row {
  /* Drop shadows are invisible on a near-black page — the lighter surface
     plus border carries the elevation in dark mode. */
  box-shadow: none;
}

/* Phones: stack the plates with breathing room between them. (At ≥576px the
   base stylesheet already lays articles/social out as a 2-column grid whose
   gap provides the spacing.) */
@media (max-width: 575.98px) {
  #articles-container,
  #social-container,
  #world-container {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }
  .feed-item {
    gap: 12px;
  }
  .feed-item:active {
    transform: scale(0.98);
  }
}

/* The World tab stays a single column at every size — give it the same
   spacing the grids get from their gap. */
@media (min-width: 576px) {
  #world-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}

/* Tactile feedback: press squashes on touch, hover lifts on pointer. */
.feed-item {
  transition: transform 150ms ease, box-shadow 180ms ease,
              border-color 180ms ease, background 150ms ease;
}
@media (min-width: 576px) {
  .feed-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px var(--shadow-sm);
    border-color: var(--border-color);
  }
}

/* Meta row: consistent muted weight, dots a hair lighter. */
.feed-item-meta {
  row-gap: 2px;
}
.feed-item-meta .dot {
  opacity: 0.35;
}

/* Category chip: subtler, pill-consistent with the rest of the UI. */
.feed-item-category {
  border: 1px solid var(--border-light);
  background: transparent;
}


/* ── 3. Featured card ───────────────────────────────────────────────────────
   Give the promoted rail a stronger "front page" presence. */
.featured-card {
  border-radius: var(--plate-radius, 14px);
  box-shadow: 0 1px 2px var(--shadow-sm), 0 6px 18px rgba(15, 23, 42, 0.05);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
html.dark .featured-card {
  box-shadow: none;
}
.featured-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--shadow-md);
}
.featured-label {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.35rem;
}


/* ── 4. Main tabs: hover pill + smoother active underline ────────────────────*/
.main-tabs .nav-link {
  border-radius: 0.5rem 0.5rem 0 0;
}
.main-tabs .nav-link:hover {
  background: var(--bg-surface-hover);
  border-color: transparent;
}
.main-tabs .nav-link.active:hover {
  background: transparent;
}


/* ── 5. Sort toggle (Recent / Trending): match the pill language ────────────
   Only the roomy (compact-feed-header OFF) layout gives the toggle its own
   row and needs the bottom gap; in the compact layout it sits inline on the
   freshness row, so the row's own margin handles the spacing. */
.feed-header-roomy .feed-sort-toggle {
  margin-bottom: 0.75rem;
}


/* ── 6. Empty / loading states: centred card with a friendly glyph ──────────
   The glyph is scoped to the top-level feed containers so it doesn't show up
   in the small "Loading..." placeholders inside the Visuals cards. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 2.5rem 1rem;
  font-size: 0.9rem;
}
#articles-container > .empty-state::before,
#social-container > .empty-state::before,
#world-container > .empty-state::before {
  content: "📰";
  font-size: 1.6rem;
  opacity: 0.7;
}


/* ── 7. Footer: a little more separation from the feed ──────────────────────*/
footer#about {
  margin-top: 2.5rem;
}


/* ── 8. Mobile ergonomics ────────────────────────────────────────────────────
   Phone-specific fixes for the things that make a mobile web app feel "off":
   inputs that zoom the page on focus, tap targets under 40px, and rows of
   uneven height from unclamped summaries. */
body {
  /* Custom :active states supply press feedback; the grey iOS/Android tap
     flash on every card made the feed feel like a plain document. */
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 575.98px) {
  /* iOS Safari zooms the whole page when focusing an input rendered under
     16px — the single most jarring mobile-feel bug. */
  #chat-input {
    font-size: 16px;
  }

  /* Headlines are the product on a news feed — give them a full 1rem and let
     summaries clamp to two tidy lines so every row has the same rhythm. */
  .feed-item-title {
    font-size: 1rem;
    line-height: 1.35;
  }
  .feed-item-summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Comfortable thumb targets for the controls used most on phones. */
  .feed-sort-toggle .sort-btn {
    min-height: 40px;
    padding: 0.45rem 1.1rem;
  }
  .pg-btn {
    min-height: 40px;
    min-width: 40px;
  }
  .era-chip {
    min-height: 36px;
  }
}

/* Floating controls clear the home-indicator strip on notched phones.
   env() resolves to 0 everywhere else, so this is a no-op on desktop. */
#back-to-top {
  bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}
#feedback-tab,
#feedback-panel {
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
}


/* ── 9. Frosted sticky header ────────────────────────────────────────────────
   The opaque white sticky block read as a heavy slab over the feed. A subtle
   translucent blur keeps the header present but lets content glide beneath
   it — the standard look of native mobile news apps. Falls back to the solid
   header on browsers without backdrop-filter/color-mix support. */
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) and
          (background: color-mix(in srgb, red 50%, transparent)) {
  header.site-header {
    background: color-mix(in srgb, var(--bg-surface) 86%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  header.site-header .navbar,
  header.site-header .chat-bar,
  header.site-header .main-tabs-bar {
    background: transparent !important;
  }
}


/* ── 10. Article panel: native-feeling reader on phones ─────────────────────
   Contain the scroll so reaching the end of an article doesn't chain-scroll
   the feed behind it, and bump body copy to a phone-comfortable size. */
.article-panel,
.history-panel {
  overscroll-behavior-y: contain;
}

@media (max-width: 575.98px) {
  .panel-body {
    font-size: 1rem;
    line-height: 1.7;
  }
  .panel-title {
    font-size: 1.5rem;
  }
}


/* ── 11. Plate cohesion across tabs ─────────────────────────────────────────
   The Visuals, History and timeline cards adopt the same radius and soft
   resting shadow as the feed plates so every tab speaks one visual language. */
.vis-card,
.timeline-card,
.history-article-card {
  border-radius: var(--plate-radius, 14px);
  border-color: var(--border-light);
  box-shadow: 0 1px 2px var(--shadow-sm), 0 6px 18px rgba(15, 23, 42, 0.05);
}
html.dark .vis-card,
html.dark .timeline-card,
html.dark .history-article-card {
  box-shadow: none;
}


/* ── 12b. Mobile nav dropdown (hamburger menu) ───────────────────────────────
   Bootstrap's default collapse renders the Visuals/About links as bare,
   unstyled text stacked under the navbar — no affordance that it's a menu,
   no tap-sized rows. Give it a proper mobile-menu treatment: a divider under
   the navbar, full-width rows with generous tap targets, and a pressed/hover
   state so it reads as an actual menu instead of leftover text. */
.navbar-collapse {
  border-top: 1px solid var(--border-light);
  margin-top: 0.25rem;
}

.navbar-nav .nav-item {
  border-bottom: 1px solid var(--border-light);
}

.navbar-nav .nav-item:last-child {
  border-bottom: none;
}

.navbar-nav .nav-link {
  padding: 0.85rem 0.25rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 150ms ease, background 150ms ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:active {
  color: var(--accent);
  background: var(--bg-surface-hover);
}

@media (min-width: 576px) {
  /* Above the mobile breakpoint the collapse never shows (navbar-expand-sm),
     so none of the stacked-menu chrome should apply to the inline links. */
  .navbar-collapse {
    border-top: none;
    margin-top: 0;
  }
  .navbar-nav .nav-item {
    border-bottom: none;
  }
  .navbar-nav .nav-link {
    min-height: auto;
    padding: 0.5rem 1rem;
  }
}


/* ── 12. Respect reduced-motion preferences ─────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  .feed-item,
  .featured-card,
  .article-panel,
  .article-panel-backdrop,
  #feedback-panel,
  .bottom-nav-item,
  .skeleton::after {
    animation: none !important;
    transition: none !important;
  }
  .feed-item:hover,
  .feed-item:active,
  .featured-card:hover,
  .bottom-nav-item:active {
    /* !important: section 13 sits later in the file, so its :active scale
       would otherwise out-cascade this at equal specificity. */
    transform: none !important;
  }
}


/* ── 13. Phone bottom app bar ────────────────────────────────────────────────
   On phones the main tab row moves from under the sticky header to a fixed
   bottom navigation bar — the pattern every native news app uses. Tabs land
   in thumb reach, the header gets one bar shorter (more feed on screen), and
   the app stops reading as "a website squeezed onto a phone". The markup
   lives in index.html; setupBottomNav() in script.js proxies taps to the real
   Bootstrap tab buttons. Delete this section (and the <nav class="bottom-nav">
   block) to fall back to the top tab row everywhere. */

/* Hidden by default — the top tab row serves tablets and desktops. */
.bottom-nav { display: none; }

@media (max-width: 575.98px) {
  .main-tabs-bar { display: none; }

  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: stretch;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -2px 12px var(--shadow-sm);
    /* Clear the home-indicator strip on notched phones. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Frosted, like the sticky header, where the browser supports it. */
  @supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) and
            (background: color-mix(in srgb, red 50%, transparent)) {
    .bottom-nav {
      background: color-mix(in srgb, var(--bg-surface) 88%, transparent);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }
  }

  .bottom-nav-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    /* Tight horizontal padding so all seven tabs share the bar evenly. */
    padding: 8px 1px 7px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 150ms ease, transform 120ms ease;
  }
  /* Narrow phones: shrink the labels a touch so 7 items never clip or wrap. */
  @media (max-width: 360px) {
    .bottom-nav-item { font-size: 0.58rem; letter-spacing: 0; }
  }

  .bottom-nav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .bottom-nav-item svg { flex-shrink: 0; }
  .bottom-nav-item:active { transform: scale(0.92); }
  .bottom-nav-item.active { color: var(--accent); }

  /* The page bottom (footer) and the floating controls clear the bar. */
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
  #back-to-top {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  #feedback-tab,
  #feedback-panel {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  /* The closed panel hides by translating below the viewport (section 1).
     With the higher bottom anchor the old 2.5rem margin no longer clears the
     screen edge, so push it further; #feedback-panel.open (section 1) still
     out-specifies this and brings it back up. */
  #feedback-panel {
    transform: translateY(calc(100% + 7rem));
  }
  .a2hs-banner {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  /* Slimmer top chrome — with the tabs gone the header is just the brand
     row (+ optional chat/announcement bars), so trim its padding too. */
  .site-header .navbar {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
}

/* ============================================================================
   Ethiopia at a Glance — country fact cards (Visual tab)
   ---------------------------------------------------------------------------
   A responsive grid of provenance-first fact cards: big number, optional
   sparkline showing trend direction, and a source line. The whole card is a
   link to the cited source so a reader can always check the number.
   ========================================================================== */
.glance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
}
.glance-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 0.9rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--plate-radius, 14px);
  box-shadow: 0 1px 2px var(--shadow-sm), 0 6px 18px rgba(15, 23, 42, 0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.glance-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 2px 4px var(--shadow-sm), 0 10px 26px rgba(15, 23, 42, 0.09);
  color: inherit;
}
.glance-card-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.2rem;
}
.glance-icon { font-size: 1rem; line-height: 1; }
.glance-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.glance-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary, inherit);
}
.glance-unit {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 0.3rem;
}
.glance-spark { width: 100%; height: 30px; display: block; }
.glance-spark polyline { stroke: var(--accent); }
.glance-spark circle { fill: var(--accent); }
.glance-note {
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--text-secondary);
}
.glance-source {
  margin-top: auto;
  font-size: 0.68rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.glance-asof { opacity: 0.75; }
.glance-arrow { margin-left: auto; opacity: 0.6; }

@media (max-width: 575.98px) {
  .glance-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; }
  .glance-value { font-size: 1.3rem; }
}

/* ============================================================================
   Regions of Ethiopia — interactive schematic tile map (Visual tab)
   ---------------------------------------------------------------------------
   A cartogram: equal tiles placed on a north→south / west→east grid by
   approximate relative location (NOT a boundary map). Each tile is a button
   that opens a region profile in the shared slide-in panel.
   ========================================================================== */
.regions-map {
  display: grid;
  grid-template-columns: repeat(var(--rmap-cols, 5), 1fr);
  grid-auto-rows: 1fr;
  gap: 0.4rem;
  max-width: 640px;
  aspect-ratio: var(--rmap-cols, 5) / var(--rmap-rows, 5);
}
.region-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.3rem;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: color-mix(in srgb, var(--region-color, var(--accent)) 16%, var(--bg-surface));
  border-left: 3px solid var(--region-color, var(--accent));
  color: var(--text-primary, inherit);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  min-height: 44px;
  overflow: hidden;
}
.region-tile:hover,
.region-tile:focus-visible {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--region-color, var(--accent)) 30%, var(--bg-surface));
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
  outline: none;
}
.region-tile--city { border-style: dashed; }
.region-tile-name {
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.1;
}
.regions-source {
  font-size: 0.7rem;
  margin-top: 0.6rem;
  max-width: 640px;
}
.regions-source a { color: var(--accent); }

/* Region profile panel (reuses .article-panel chrome) */
.region-panel-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0 0.75rem;
}
.region-swatch {
  width: 14px;
  height: 34px;
  border-radius: 4px;
  background: var(--region-color, var(--accent));
  flex: 0 0 auto;
}
.region-type {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.region-desc {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}
.region-facts {
  display: grid;
  gap: 0.5rem;
}
.region-fact {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-light);
}
.region-fact-label { color: var(--text-muted); font-size: 0.85rem; }
.region-fact-value { font-weight: 600; text-align: right; }

@media (max-width: 575.98px) {
  .region-tile-name { font-size: 0.6rem; }
  .regions-map { gap: 0.3rem; }
}

/* ============================================================================
   Daily AI Brief — "Ethiopia in 60 seconds" (top of Articles tab)
   ---------------------------------------------------------------------------
   A prominent, gradient-accented card of cited bullets. Collapsible (state
   remembered in localStorage). Citation chips link to the original reporting.
   ========================================================================== */
.daily-brief {
  display: block;
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--accent);
  border-radius: var(--plate-radius, 14px);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 8%, var(--bg-surface)),
      var(--bg-surface));
  box-shadow: 0 1px 2px var(--shadow-sm), 0 6px 18px rgba(15, 23, 42, 0.05);
}
html.dark .daily-brief { box-shadow: none; }
.brief-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.brief-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 1rem;
}
.brief-flag { font-size: 1.1rem; line-height: 1; }
.brief-head-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.brief-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}
.brief-toggle {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  border-radius: 6px;
}
.brief-toggle:hover { background: var(--bg-surface-hover); }
.brief-body { margin-top: 0.6rem; }
.brief-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.brief-bullet {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.45;
}
.brief-bullet::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.brief-cites {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.brief-cite {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface-hover);
  border: 1px solid var(--border-light);
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.brief-cite:hover { border-color: var(--accent); color: var(--accent); }
.brief-disclaimer {
  margin: 0.75rem 0 0;
  font-size: 0.7rem;
  color: var(--text-muted);
}