/* Derek Premium UI pass (design-ref/premium-ui/SPEC.md, 2026-10-30). Loads after app.css.
   Material split (SPEC §4): Liquid Glass on fixed chrome only (sidebar, Beams rail, topbar, mobile
   tab bar, Billing hero + checkout) and .glass-strong on popovers / menus. Everything that scrolls
   (mention + opportunity cards, KPIs, plan options, invoice rows, tables) stays solid.
   Blur budget: max 3 blurred layers per view.
     Mentions      sidebar + Beams + topbar = 3. Opening any .glass-strong pop drops the Beams blur.
     Opportunities sidebar + topbar = 2 (+ Filters pop = 3).
     Billing       sidebar + hero + checkout = 3; the topbar is solid (.topbar-solid). Opening a menu
                   drops the checkout panel blur.
     < 1024px      tab bar + topbar (+ Billing hero + checkout, topbar solid) ≤ 3.
   The fallbacks (no backdrop-filter, prefers-reduced-transparency, low-end mobile) live in
   tokens.css and use !important so these page rules can't out-rank them. */

/* ---------- canvas ---------- */
body { font-size: var(--t-body); line-height: 1.5; }
/* Gold beam glow on the canvas behind the glass, never inside a glass fill (SPEC §4.6). Dark only.
   Full-viewport wash (mock 02-mentions-feed): warm gold from the top-left lantern across the top and
   down the left gutter, so the 8px gutters read gold-tinted and the translucent sidebar / Beams glass
   blurs warmth instead of flat abyss. Gold + a faint cool teal corner only; no purple / aurora. */
.app-glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
  background: linear-gradient(160deg, rgba(245, 193, 74, 0.07) 0%, rgba(245, 193, 74, 0.02) 45%, transparent 70%);
}
.app-glow::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 65% at 4% -8%, rgba(245, 193, 74, 0.36), rgba(245, 193, 74, 0.13) 40%, transparent 74%),
    radial-gradient(ellipse 70% 32% at 50% -12%, rgba(245, 193, 74, 0.12), transparent 72%),
    radial-gradient(ellipse 40% 55% at -6% 100%, rgba(245, 193, 74, 0.12), transparent 70%);
}
.app-glow::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 45% 50% at 104% 106%, rgba(74, 112, 136, 0.12), transparent 70%);
}
[data-theme="light"] .app-glow { display: none; }
.app, .app.with-beams { position: relative; z-index: 1; background: none; }
html { font-size: 15px; }

/* ---------- shell: inset floating panels (Derek review, mock .app / .glass-panel) ----------
   ≥1024px: sidebar, Beams rail and main sit 8px off the window edge and 8px apart, 16px radius,
   .glass border + highlight and a soft layered shadow, so the canvas glow shows in the gutters and
   through the glass. The app is one viewport tall and .main scrolls inside its panel: the sticky
   glass topbar stays clipped to the panel's rounded top. Main is a translucent solid (no blur), so
   the budget stays sidebar + Beams + topbar = 3. Under 1024px the tab bar layout below takes over. */
:root { --gutter: 8px; --panel-r: 16px; --panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 12px 40px rgba(0, 0, 0, 0.35); }
[data-theme="light"] { --panel-shadow: 0 1px 2px rgba(0, 26, 46, 0.06), 0 10px 30px rgba(0, 26, 46, 0.08); }
@media (min-width: 1024px) {
  .app, .app.with-beams {
    height: 100vh; height: 100dvh; min-height: 0; overflow: hidden;
    padding: var(--gutter); gap: var(--gutter);
  }
  .rail, .beam-rail, .main { height: calc(100vh - 2 * var(--gutter)); height: calc(100dvh - 2 * var(--gutter)); min-height: 0; }
  .rail.glass, .beam-rail.glass {
    position: relative; top: auto; z-index: 30;
    border: 1px solid var(--glass-border); border-radius: var(--panel-r);
    box-shadow: var(--glass-highlight), var(--panel-shadow);
  }
  .beam-rail.glass { overflow-y: auto; scrollbar-width: none; }
  .main {
    position: relative; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    border: 1px solid var(--glass-border); border-radius: var(--panel-r);
    background: rgba(6, 22, 38, 0.55); box-shadow: var(--glass-highlight), var(--panel-shadow);
    scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
  }
  [data-theme="light"] .main { background: rgba(255, 255, 255, 0.55); border-color: var(--line); }
}
/* Panel glass: a lighter fill than --glass-bg in dark so the gold canvas wash reads through the blur
   (app.css's opaque rail / .app gradients are already off: .app background none above). Light keeps
   --glass-bg, and tokens.css still forces the solid navy rail + every !important fallback. */
:root { --glass-panel-bg: rgba(10, 34, 56, 0.46); }
[data-theme="light"] { --glass-panel-bg: var(--glass-bg); }
.rail.glass, .beam-rail.glass { background: var(--glass-panel-bg); }
.beam-group { text-transform: uppercase; letter-spacing: .08em; font-size: var(--text-label); font-weight: 600; color: var(--mist); }
/* Active Beam: soft fill + the 3px gold marker (the sidebar's active pip is the other lantern). */
.beam { position: relative; }
.beam[aria-current="page"] { background: rgba(247, 244, 238, 0.07); color: var(--foam); box-shadow: inset 3px 0 0 var(--beam); }
.saved-view { display: flex; align-items: center; gap: 2px; }
.saved-view > a { flex: 1; min-width: 0; }
.saved-view-x { width: 28px; height: 28px; flex: none; border: 0; border-radius: var(--r-sm); background: none; color: var(--mist); cursor: pointer; }
.saved-view-x:hover { color: var(--foam); background: var(--navy-hover); }

/* Rail groups (FIX-LIST §0): quiet section eyebrows, 8px between groups, 4px between rows. Mist-2 is
   a dark token in light theme and the rail stays navy there, so light takes the rail's own white.
   The groups scroll on short screens so the plan card, Settings and Collapse stay put; the 64px rail
   stays overflow-visible for its tooltips. */
.rail-group { gap: 4px; }
.rail-groups { min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.rail-eyebrow { padding: 4px 12px 0; font-size: var(--text-label); line-height: 16px; font-weight: 600; letter-spacing: .08em; color: var(--mist-2); }
[data-theme="light"] .rail-eyebrow { color: rgba(255, 255, 255, 0.6); }
html.rail-collapsed .rail-groups { overflow: visible; }
html.rail-collapsed .rail-eyebrow { display: none; }

/* Nav sub rows (Alerts › Brand Shield, Spikes): labeled sidebar only. A sub page keeps the parent
   lit (aria-current="true") so the highlight always matches the page title. */
.rail-item[aria-current="true"] { color: var(--white); background: var(--rail-active); }
.rail-item[aria-current="true"] svg { color: var(--beam); }
.rail-item[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--beam); }
.rail-sub { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 2px 18px; }
.rail-sub-item {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: var(--r-md);
  color: rgba(255, 255, 255, 0.72); font-size: var(--text-xs); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.rail-sub-item svg { width: 14px; height: 14px; flex: none; }
.rail-sub-item:hover { color: var(--white); background: rgba(247, 244, 238, 0.06); }
.rail-sub-item[aria-current="page"] { color: var(--white); background: rgba(247, 244, 238, 0.07); }
html.rail-collapsed .rail-sub { display: none; }
/* Coming soon row: not a link, so no hover. The rail stays navy in light theme, so the ink is fixed.
   No icon: the 220px rail has no room for it beside the badge. */
.rail-soon, .rail-soon:hover { padding-right: 4px; color: rgba(255, 255, 255, 0.55); background: none; cursor: default; }
.rail-soon > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rail-soon .sample-pill { flex: none; height: 16px; margin-left: auto; padding: 0 4px; background: rgba(247, 244, 238, 0.08); border-color: rgba(247, 244, 238, 0.18); color: rgba(255, 255, 255, 0.6); font-size: var(--text-micro); font-weight: 500; }
.rail-soon .sample-pill::before { content: none; }

/* ---------- topbar (sticky .glass, 56px; no gradient) ---------- */
.topbar { z-index: 20; top: 0; }
.topbar.glass { border: 0; border-bottom: 1px solid var(--glass-border); }
.topbar.topbar-solid { background: var(--glass-fallback); -webkit-backdrop-filter: none; backdrop-filter: none; }
[data-theme="light"] .topbar.topbar-solid { background: var(--surface); }
.topbar .title-block { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 0 1 auto; }
.topbar h1 { font-size: var(--text-lg); line-height: 24px; }
.topbar .search input { border-radius: var(--r-pill); background: rgba(0, 12, 24, 0.35); }
[data-theme="light"] .topbar .search input { background: var(--surface); }

/* ---------- menus + popovers (.glass-strong) ---------- */
.account .menu.glass-strong, .menu.pop.glass-strong, .filters-pop.glass-strong, .you-menu.glass-strong {
  background: var(--glass-bg-strong); border: 1px solid var(--line-strong); box-shadow: var(--shadow-float);
}
.account .menu.glass-strong { border-radius: 14px; }
.pop-anchor { position: relative; }
.pop-anchor > summary { list-style: none; cursor: pointer; }
.pop-anchor > summary::-webkit-details-marker { display: none; }
.chip-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: rgba(247, 244, 238, 0.04);
  color: var(--foam); font-size: var(--text-sm); font-weight: 600; white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.chip-btn svg { width: 16px; height: 16px; flex: none; }
.chip-btn:hover { background: rgba(247, 244, 238, 0.08); }
.chip-btn.on { border-color: var(--line-strong); background: var(--seg-on); }
[data-theme="light"] .chip-btn { color: var(--ink); background: var(--surface); }
.filters-pop, .menu.pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  border-radius: 16px; padding: 14px 16px;
}
.filters-pop { width: min(560px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: 12px; }
.filters-pop .filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.filters-pop .filter-row > .label {
  flex-basis: 100%; font-size: var(--text-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--foam-80);
}
.filters-pop .chip { height: 30px; padding: 0 12px; color: var(--foam-90); border-color: var(--line-strong); }
.filters-pop .chip[aria-current="true"] { border-color: var(--line-strong); background: var(--seg-on); color: var(--foam); }
[data-theme="light"] .filters-pop .chip { color: var(--ink); }
.pop-foot { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.pop-foot .grow { flex: 1; }
.pop-foot .clear { color: var(--foam-80); font-size: var(--text-sm); text-decoration: none; padding: 6px 4px; }
.pop-foot .clear:hover { color: var(--foam); text-decoration: underline; }
.menu.pop { min-width: 240px; display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.menu.pop a { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: var(--r-sm); text-decoration: none; color: var(--foam-90); font-size: var(--text-sm); }
.menu.pop a:hover { background: var(--navy-hover); color: var(--foam); }
.menu.pop a[aria-current="page"] { background: rgba(247, 244, 238, 0.07); color: var(--foam); }
.menu.pop a .count { margin-left: auto; color: var(--foam-80); }
.menu.pop .pop-h { padding: 8px 10px 4px; font-size: var(--text-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--foam-80); }
[data-theme="light"] .menu.pop a, [data-theme="light"] .pop-foot .clear, [data-theme="light"] .menu.pop a .count { color: var(--ink); }

/* Blur cap: an open .glass-strong pop is a 4th layer on Mentions / Billing, so the Beams rail and the
   checkout panel go solid while it is open (html.pop-open from nav-shell.js covers no-:has browsers). */
html.pop-open .beam-rail.glass, html.pop-open .checkout-panel.glass,
html:has(details[open] > .glass-strong) .beam-rail.glass,
html:has(details[open] > .glass-strong) .checkout-panel.glass {
  -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-fallback);
}

/* ---------- Mentions ---------- */
.feed-controls.feed-bar { margin-bottom: 10px; }
.feed-controls.feed-tools { gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.feed-tools .grow { flex: 1; }
.feed-tools .seg { border-radius: var(--r-pill); }
/* Toolbar stays out of the quotes' way: controls are quiet until touched. */
.feed-tools .chip-btn { border-color: var(--line); background: none; color: var(--ink); font-weight: 500; }
.feed-tools .chip-btn:hover { border-color: var(--line-strong); }
.feed-tools .chip-btn.on { border-color: var(--line-strong); background: var(--seg-on); }
.feed-actions .btn, .feed-actions .btn.text { border-color: transparent; background: none; color: var(--foam-85); font-weight: 500; }
.feed-actions .btn:hover, .feed-actions .btn.text:hover { color: var(--foam); background: var(--navy-hover); }
.active-filters { gap: 6px; margin: -4px 0 14px; }
.active-filters .chip a { text-decoration: none; color: var(--mist); margin-left: 2px; }
.active-filters .chip a:hover { color: var(--foam); }
/* Solid cards, never blurred. Quotes never flex-shrink away (SPEC §5): body 15px / 1.5, 2 lines, "more" for the rest. */
.mention {
  background: var(--card-solid); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-card); padding: 16px 20px; flex: 0 0 auto; gap: 8px;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.mention > * { flex: none; }
.mention .snip { font-size: var(--t-body-lg); line-height: 1.5; color: var(--foam-90); flex: none; -webkit-line-clamp: 2; }
.mention .title { font-size: var(--t-body); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.snip-wrap { position: relative; }
.snip-more { position: absolute; right: 0; bottom: 0; padding: 0 0 0 10px; border: 0; background: var(--card-solid); box-shadow: -10px 0 8px var(--card-solid); color: var(--mist); font: inherit; font-size: var(--text-sm); line-height: 24px; cursor: pointer; }
.snip-more:hover { color: var(--foam); text-decoration: underline; }
.snip:empty + .snip-more { position: static; box-shadow: none; padding: 0; }
.mention.snip-open .title, .mention.snip-open .snip { display: block; }
.mention.snip-open .snip-more { position: static; padding: 0; box-shadow: none; }
.mention .r1 .who { font-size: var(--text-md); font-weight: 600; color: var(--foam-85); }
.mention .meta-line, .mention .meta-line .when, .day-head .date, .day-head .n { color: var(--foam-85); }
[data-theme="light"] .mention { background: var(--card-solid); }
[data-theme="light"] .mention .snip { color: var(--ink); }

/* Sentiment: one compact row (count · mix bar · Positive / Neutral / Negative) + one meta line (.feed-summary). */
.sent-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 4px; min-height: 36px; }
.sent-row .sr-count { font-size: var(--t-body); color: var(--foam-85); }
.sent-row .sr-count strong { color: var(--foam); font-weight: 600; }
.sent-row .sr-count a { color: var(--foam-80); }
.sent-row .sc-bar { flex: 1 1 120px; max-width: 320px; min-width: 120px; height: 6px; border: 0; background: rgba(247, 244, 238, 0.08); }
.sent-row .sr-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sent-row .sr-chips { color: var(--mist); font-size: var(--text-xs); }
.sent-row .sr-link { color: var(--mist); text-decoration: none; }
.sent-row .sr-link:hover { color: var(--foam); }
.sent-row .sr-link[aria-current="true"] { color: var(--foam); font-weight: 600; }
.feed-summary { display: none; }
.sent-row { margin: 0 0 16px; }
.snapshot-updated[data-source-freshness] { display: none; }
.feed-older { margin: 0 0 16px; font-size: var(--text-sm); color: var(--mist); }
.load-more { text-align: center; margin: 20px 0; }
.list-end { text-align: center; margin: 20px 0; }
.snapshot-updated { margin: 4px 0 0; }
[data-theme="light"] .sent-row .sr-count strong, [data-theme="light"] .sent-row .sr-count a, [data-theme="light"] .sent-row .sr-link:hover, [data-theme="light"] .sent-row .sr-link[aria-current="true"] { color: var(--ink); }
[data-theme="light"] .sent-row .sc-bar { background: var(--line); }

/* Card row: chips left; overflow menu (⋯) + one right-aligned Open button. */
.mention .meta-line .actions { gap: 6px; flex: none; }
.mention .open-btn { height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); font-weight: 600; white-space: nowrap; }
.mention .more, .page-more { position: relative; }
.mention .more-btn, .page-more .more-btn { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 10px; color: var(--foam-80); }
.mention .more-btn svg, .page-more .more-btn svg { width: 18px; height: 18px; }
.mention .more[open] > .more-btn, .page-more[open] > .more-btn { background: var(--navy-hover); color: var(--foam); }
.page-more-menu.menu.pop { left: auto; right: 0; min-width: 180px; }
.page-more-menu .btn { justify-content: flex-start; border-color: transparent; background: none; font-weight: 400; }
.mention:has(details[open]) { position: relative; z-index: 5; }
/* Sentiment: the quiet label is the menu. Same hover / focus reveal as the row's actions. */
.sent-change > summary { display: inline-flex; align-items: center; gap: 8px; }
.sent-change-hint { font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--mist); text-decoration: underline; text-underline-offset: 2px; }
.sent-change > summary:hover .sent-change-hint { color: var(--foam); }
.sent-menu.menu.pop { display: flex; flex-direction: row; gap: 6px; width: max-content; padding: 8px; }
.sent-menu .btn { width: auto; white-space: nowrap; }
.sent-menu .btn[aria-pressed="true"] { border-color: var(--line-strong); background: var(--seg-on); color: var(--foam); }
[data-theme="light"] .sent-menu .btn[aria-pressed="true"] { color: var(--ink); }
/* Row actions show on hover or keyboard focus. Touch and phone widths keep them visible. */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .mention .meta-line .actions, .sent-change-hint { opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
  .mention:hover .meta-line .actions, .mention:focus-within .meta-line .actions, .mention:has(details[open]) .meta-line .actions,
  .mention:hover .sent-change-hint, .mention:focus-within .sent-change-hint, .mention:has(details[open]) .sent-change-hint { opacity: 1; }
  .mention .open-btn, .mention .more-btn { height: 28px; }
  .mention .more-btn { width: 28px; }
}
/* Wide enough that "Mark as", "Follow up" and "Irrelevant" never truncate. */
.more-menu.menu.pop { left: auto; right: 0; width: 320px; max-width: calc(100vw - 32px); max-height: min(70vh, 520px); overflow-y: auto; padding: 6px 12px 12px; gap: 4px; }
.more-menu .pop-h { display: flex; align-items: baseline; gap: 8px; padding: 10px 0 2px; white-space: nowrap; }
.more-menu .more-note { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mist); overflow: hidden; text-overflow: ellipsis; }
.more-menu .more-pad { margin: 0; }
.more-menu .more-picks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.more-menu .more-picks .btn { white-space: nowrap; flex: none; }
.more-menu .more-picks .btn[aria-pressed="true"] { border-color: var(--line-strong); background: var(--seg-on); color: var(--foam); }
.more-menu .more-tags { display: flex; gap: 6px; margin: 4px 0 2px; }
.more-menu .more-tags .input { flex: 1; min-width: 0; height: 30px; }
[data-theme="light"] .more-menu .more-picks .btn[aria-pressed="true"] { color: var(--ink); }
[data-theme="light"] .mention .more-btn, [data-theme="light"] .mention .more[open] > .more-btn { color: var(--ink); }
/* Beams counts + chevron were white-on-Foam in light. */
[data-theme="light"] .beam .count, [data-theme="light"] .beam-toggle { color: var(--mist); }

/* Share of voice timeline (moved off the Mentions day groups). */
.sov-timeline .tl-day + .tl-day { margin-top: 14px; }
.sov-timeline .day-head { margin-bottom: 6px; }
.sov-timeline .day-head h3 { margin: 0; font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sov-timeline .daystrip { background: var(--card-solid-2); }

/* Verify note is info, not a lantern: teal edge instead of the old gold fallback. */

/* ---------- Opportunity Sniper ---------- */
/* Default card: the quiet surface. List rows (.mention, .opportunity, .review-item) stay on
   --card-solid; a view's lead tile takes --card-solid-2. */
.card, .kpi { background: var(--surface); }
/* A card inside a card is an inset wash, never a second border. */
.card .card:not(.kpi) { border-color: transparent; background: var(--navy-wash); box-shadow: none; }
.card .sniper-item.is-new { box-shadow: inset 3px 0 0 var(--mist); }
.kpi { border-radius: 16px; box-shadow: var(--shadow-card); }
/* KPI band (Tracking, Share of voice, Citation queue, shared dashboard): one lead number on a raised
   fill, the rest bare stats split by hairlines. The band never sits in a second bordered box. */
.kpi-band { display: grid; grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr)); align-items: stretch; }
.kpi-band > .kpi { min-height: 0; padding: 4px 20px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.kpi-band > .kpi + .kpi + .kpi { border-left: 1px solid var(--line); }
.kpi-band > .kpi:first-child, .kpi-row > .kpi:first-child { padding: 20px 24px; border: 0; border-radius: 12px; background: var(--card-solid-2); box-shadow: var(--shadow-card); }
.kpi-band > .kpi:first-child .metric, .kpi-row > .kpi:first-child .metric { font-size: var(--metric-hero); line-height: var(--lh-metric-hero); font-weight: 700; letter-spacing: -0.04em; }
/* The siblings stay a size down but read a step firmer, under the lead's 700. */
.kpi-band > .kpi:not(:first-child) .metric { font-weight: 650; }
/* No value yet: a dash that size would read as a bar. */
.kpi-band > .kpi:first-child .metric .em-dash, .kpi-row > .kpi:first-child .metric .em-dash { font-size: var(--metric); }
[data-theme="light"] .kpi-band > .kpi:first-child, [data-theme="light"] .kpi-row > .kpi:first-child { background: var(--card-solid); }
[data-theme="light"] .card .kpi-band > .kpi:first-child { background: var(--foam); box-shadow: none; }
@media (max-width: 1000px) {
  .kpi-band { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-4); }
  .kpi-band > .kpi:first-child { grid-column: 1 / -1; }
  .kpi-band > .kpi:nth-child(2) { padding-left: 0; }
}
@media (max-width: 760px) {
  .kpi-band { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .kpi-band > .kpi { padding: var(--space-3) 0; }
  .kpi-band > .kpi + .kpi + .kpi { border-left: 0; border-top: 1px solid var(--line); }
  .kpi-band > .kpi:first-child { padding: var(--space-4); }
}
.op-filterbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--space-3); }
.op-filterbar .grow { flex: 1; }
.op-filterbar .op-active { margin: 0; color: var(--foam-80); }
.op-filterbar .op-active strong { color: var(--foam); font-weight: 600; }
.op-filterbar .op-results { margin: 0; padding: 0; border: 0; }
.op-filterbar .filters-pop.op-filters { margin: 0; }
[data-theme="light"] .op-filterbar .op-active, [data-theme="light"] .op-filterbar .op-active strong { color: var(--ink); }
.opportunity { background: var(--card-solid); border-radius: 16px; box-shadow: none; padding: 20px 24px; transition: border-color var(--dur-1) var(--ease-out); }
.opportunity:hover { border-color: var(--line-strong); }
/* Each lead reads by its score: a big tabular numeral, with source and type as quiet tags. Real status chips keep their tone. */
.opportunity .op-head { align-items: center; }
.opportunity .op-head .chip:not(.op-score, .pos, .neg, .neu, .warn) { border-color: transparent; background: var(--navy-wash); color: var(--mist); }
.chip.op-score { align-items: baseline; gap: 2px; height: auto; margin-left: auto; padding: 0; border: 0; background: none; color: var(--mist); }
.op-band { margin-right: 6px; color: var(--mist); font-size: var(--text-xs); font-weight: 600; }
.opportunity .op-score strong { color: var(--ink); font-size: var(--metric); line-height: var(--lh-metric); font-weight: 700; letter-spacing: -0.02em; }
.opportunity .op-title { font-size: var(--t-body-lg); line-height: 1.55; }
.opportunity .op-excerpt { font-size: var(--text-md); line-height: 1.55; color: var(--foam-80); }
.op-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
/* One closed disclosure per card for the drafts (Help answer · Message to mods · Brand mention, or
   the suggested reply), so a thread reads as title + excerpt + actions until someone opens it. */
.op-drafts { margin: 8px 0 0; border-top: 1px solid var(--line); padding-top: 10px; }
.op-drafts > summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; color: var(--foam-90); list-style-position: inside; }
.op-drafts > summary .muted { font-weight: 500; }
.op-drafts[open] > summary { margin-bottom: 8px; }
.op-drafts .reply-draft { margin: 0; }
[data-theme="light"] .op-drafts > summary { color: var(--ink); }
/* Layout: queue column + ~300px Brief rail (mock 04). */
@media (min-width: 1101px) { .op-layout { grid-template-columns: minmax(0, 1fr) 300px; } }
.op-main > .page-head { margin-bottom: var(--space-4); }
.op-aside { top: calc(var(--topbar) + var(--space-4)); }
/* Brief rail hugs its content: no stretch to the queue height. */
.op-brief { align-self: start; }
/* Brief · top 3 (shared .looks markup): stacked mini cards; the page itself is the "Open Opportunities" link. */
.op-brief .looks { display: flex; flex-direction: column; gap: 8px; }
/* Tracking: the workspace name and the Mentions number lead; the brand line and its actions support them. */
.tracking-page .page-title { margin-bottom: 8px; font-size: 44px; line-height: 50px; font-weight: 700; letter-spacing: -0.03em; }
.brand-card > .card-head { margin-bottom: var(--space-5); }
.brand-card > .card-head h2 { font-size: var(--text-2xl); line-height: 28px; letter-spacing: -0.015em; }
.brand-card > .card-head .chip { border-color: transparent; background: var(--navy-wash); }
.brand-card > .card-head .btn ~ .btn { border-color: transparent; background: none; color: var(--mist); }
.brand-card > .card-head .btn ~ .btn:hover { color: var(--ink); background: var(--navy-hover); }
.card.plan-usage { background: none; }
.op-brief .look { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--navy-wash); }
.op-brief .look .src { order: 2; font-size: var(--text-xs); color: var(--mist); }
.op-brief .look .txt { font-size: var(--text-md); line-height: 1.45; color: var(--foam-90); overflow-wrap: anywhere; }
.op-brief .look .txt .chip { display: flex; width: max-content; max-width: 100%; margin: 0 0 6px; }
.op-brief .look .meta { margin-top: 6px; font-size: var(--text-xs); color: var(--foam-80); }
.op-brief .looks + p { display: none; }
[data-theme="light"] .op-brief .look .txt, [data-theme="light"] .op-brief .look .meta { color: var(--ink); }
.op-paro { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--foam-80); }
.op-paro img { flex: none; }
[data-theme="light"] .opportunity .op-excerpt, [data-theme="light"] .op-paro { color: var(--ink); }

/* ---------- Billing ---------- */
.billing-page { display: flex; flex-direction: column; gap: 0; }
.billing-flash { margin-bottom: var(--space-4); }
.billing-flash.is-error, .billing-msg.is-error { border-color: rgba(196, 91, 74, 0.55); color: var(--foam); background: var(--neg-soft); }
.billing-status { margin: 0 0 12px; font-size: var(--text-sm); color: var(--mist); }
.billing-status[hidden] { display: none; }
.billing-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: var(--space-4); align-items: stretch; }
.billing-hero, .checkout-panel { border-radius: 20px; overflow: hidden; position: relative; min-width: 0; }
.checkout-panel h2, .plan-option h3, .section-head h2 { min-width: 0; overflow-wrap: anywhere; }
.checkout-panel { grid-column: 2; grid-row: 1; }
.hero-scrim { padding: 24px 28px; height: 100%; }
.billing-hero .eyebrow { font-size: var(--text-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--foam-80); }
/* The plan and its price are this page's headline; the plan cards below stay a size down. */
.hero-lead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 16px; margin: 6px 0 8px; }
.hero-plan { min-width: 0; margin: 0; font-size: 34px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; color: var(--foam); overflow-wrap: break-word; }
.hero-lead:has(.hero-price) .hero-plan { font-size: 64px; line-height: 68px; font-weight: 700; letter-spacing: -0.03em; }
.hero-price { margin: 0; font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -0.02em; color: var(--foam); font-variant-numeric: tabular-nums; }
.hero-price small { margin-left: 2px; font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; color: var(--mist); }
.hero-copy { margin: 0 0 18px; max-width: 60ch; font-size: var(--t-body); line-height: 1.55; color: var(--foam-90); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
.hero-facts > div { min-width: 0; }
.hero-facts dt { font-size: var(--text-sm); color: var(--foam-80); }
.hero-facts dd { margin: 2px 0 0; font-size: var(--t-body-lg); font-weight: 600; color: var(--foam); overflow-wrap: anywhere; }
.checkout-panel h2 { margin: 0 0 8px; font-size: var(--text-lg); line-height: 26px; font-weight: 600; color: var(--foam); }
.checkout-copy { margin: 0 0 16px; font-size: var(--t-body); line-height: 1.55; color: var(--foam-90); }
.checkout-note { margin: 0; font-size: var(--text-sm); color: var(--foam-80); }
/* Under the hero in the top grid: opening it grows its own row, so hero and checkout panel stay level. */
.billing-cancel { grid-column: 1; }
details.billing-cancel { margin-top: -8px; }
.billing-cancel > summary { width: max-content; height: 32px; padding: 0; list-style: none; color: var(--mist); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; cursor: pointer; }
.billing-cancel > summary::-webkit-details-marker { display: none; }
.billing-cancel form { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 8px 0 0; }
.hero-usage { margin-top: 14px; }
.usage-bar { height: 6px; border-radius: var(--r-pill); background: rgba(247, 244, 238, 0.10); overflow: hidden; }
.usage-bar span { display: block; height: 100%; border-radius: inherit; background: var(--foam-80); }
.usage-note { margin: 0; font-size: var(--text-sm); color: var(--mist); }
.section-head { display: flex; align-items: center; gap: 12px; margin: var(--space-6) 0 var(--space-4); }
.section-head h2 { margin: 0; font-size: var(--text-lg); line-height: 24px; font-weight: 600; color: var(--foam); }
.section-head .grow { flex: 1; }
#plans-form { margin: 0; }
/* Four plan cards (Spark / Beam / Beacon / Lighthouse): 4 across on wide desktop, 2×2 below 1280px,
   one column on phones (760px rule below). */
.plan-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.plan-option {
  display: flex; flex-direction: column; gap: 10px; padding: var(--space-5);
  border: 1px solid var(--line); border-radius: 16px;
}
.plan-option.is-current { border-color: var(--line-strong); }
/* One plan leads: the one with the gold button, else the current plan when nothing is on offer. */
.plan-option:has(.plan-cta.primary), .plan-options:not(:has(.plan-cta.primary)) .plan-option.is-current { background: var(--card-solid-2); border-color: var(--line-strong); box-shadow: var(--shadow-card); }
[data-theme="light"] .plan-option:has(.plan-cta.primary), [data-theme="light"] .plan-options:not(:has(.plan-cta.primary)) .plan-option.is-current { background: var(--card-solid); }
.plan-option h3 { margin: 0; font-size: var(--text-lg); line-height: 24px; font-weight: 600; color: var(--foam); }
.plan-price { font-size: var(--metric); line-height: var(--lh-metric); font-weight: 600; color: var(--foam); }
.plan-price small { font-size: var(--text-sm); font-weight: 500; color: var(--mist); }
/* Monthly / Annual (views/billing.ts): the .seg control with buttons; navy pressed state, never gold.
   #plans-form[data-interval] picks which card price shows; no JS leaves the monthly one. */
.plans-head { flex-wrap: wrap; row-gap: var(--space-2); }
.interval-save { font-size: var(--text-xs); color: var(--mist); }
.interval-switch button {
  height: 28px; padding: 0 var(--space-3); display: inline-flex; align-items: center;
  border: 0; border-radius: 7px; background: none; cursor: pointer;
  font: inherit; font-size: var(--text-xs); font-weight: 500; color: var(--mist);
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.interval-switch button:hover { color: var(--ink); }
.interval-switch button:focus-visible { outline: 2px solid var(--beam); outline-offset: 2px; }
.interval-switch [aria-pressed="true"] { background: var(--seg-on); color: var(--foam); box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
[data-theme="light"] .interval-switch [aria-pressed="true"] { background: var(--surface); color: var(--navy); }
#plans-form[data-interval="year"] .plan-price[data-per="month"],
#plans-form:not([data-interval="year"]) .plan-price[data-per="year"] { display: none; }
@media (prefers-reduced-motion: reduce) { .interval-switch button { transition: none; } }
.plan-ai { margin: 0; font-size: var(--t-body-lg); line-height: 1.4; font-weight: 600; color: var(--foam); }
.plan-option ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--text-md); color: var(--foam-90); }
.plan-option li { display: flex; align-items: baseline; gap: 10px; }
.plan-option li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--foam-80); flex: none; transform: translateY(-2px); }
.plan-option .plan-cta { margin-top: auto; width: 100%; height: 44px; }
.plan-note { margin: auto 0 0; font-size: var(--text-sm); color: var(--mist); }
.plan-foot { margin: 12px 0 0; color: var(--mist); }
.invoices { width: 100%; }
.invoice-list { padding: 0; overflow: hidden; border-radius: 16px; }
.invoice-list.table-wrap { overflow-x: auto; }
.invoice-list table.t th { background: var(--surface); text-transform: uppercase; letter-spacing: .06em; font-size: var(--text-label); color: var(--foam-80); padding: 14px 20px; }
.invoice-list table.t td { padding: 14px 20px; }
.invoice-list code { font-family: var(--font-code); font-size: var(--text-sm); }
.invoice-end { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px 0 0; color: var(--mist); font-size: var(--text-sm); }
.invoice-empty { display: flex; align-items: center; gap: 14px; padding: 18px 20px; color: var(--foam-80); }
.invoice-empty p { margin: 0; }
.link-beam { color: var(--foam); font-size: var(--text-sm); font-weight: 600; text-underline-offset: 3px; }
.billing-flash .link-beam { font-size: inherit; }
[data-theme="light"] .hero-plan, [data-theme="light"] .hero-price, [data-theme="light"] .hero-facts dd, [data-theme="light"] .checkout-panel h2,
[data-theme="light"] .section-head h2, [data-theme="light"] .plan-option h3,
[data-theme="light"] .plan-price, [data-theme="light"] .plan-ai, [data-theme="light"] .link-beam { color: var(--ink); }
[data-theme="light"] .hero-copy, [data-theme="light"] .checkout-copy, [data-theme="light"] .plan-option ul,
[data-theme="light"] .billing-hero .eyebrow, [data-theme="light"] .hero-facts dt, [data-theme="light"] .checkout-note { color: var(--ink); }
[data-theme="light"] .usage-bar span, [data-theme="light"] .plan-option li::before { background: var(--navy); }
[data-theme="light"] .usage-bar { background: var(--line-strong); }
@media (max-width: 1279px) {
  .plan-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .billing-top { grid-template-columns: minmax(0, 1fr); }
  .checkout-panel { grid-column: auto; grid-row: auto; }
}
@media (max-width: 760px) {
  .plan-options { grid-template-columns: minmax(0, 1fr); }
  .hero-scrim { padding: 18px 18px 20px; }
  .tracking-page .page-title { font-size: 34px; line-height: 40px; }
  .hero-lead:has(.hero-price) .hero-plan { font-size: 48px; line-height: 52px; }
  .hero-price { font-size: 32px; line-height: 36px; }
  .invoice-list table.t th, .invoice-list table.t td { padding: 10px 12px; white-space: nowrap; }
  .invoice-list code { display: block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
  .billing-cancel > summary { height: 44px; }
  .billing-cancel .btn.sm { height: 44px; }
  .interval-switch button { height: 36px; }
}

/* ---------- other screens: tokens + chrome (Needs review, Brand profile, Alerts, AI visibility) ---------- */
.card { border-radius: 16px; }
.review-item, .sniper-item { background: var(--card-solid); }
.ri-body, .sd-excerpt { font-size: var(--t-body-lg); line-height: 1.55; }
/* Needs review (FIX-LIST P1-9): the Mentions row in a quieter key. One column, quiet stats strip and
   text tabs; meta, Why unsure and done chips in mist; solid gold only on the row up next. */
.review-page { width: 100%; max-width: 760px; margin-inline: auto; }
.review-page.stack { gap: var(--space-3); }
.review-kpis { margin: 0; }
.review-kpis .chunk { align-self: center; margin: -4px 0; }
.ri-foot::before { content: "·"; margin-right: 6px; }
.review-page .seg { padding: 0; gap: 18px; background: none; border: 0; border-radius: 0; }
.review-page .seg a { height: 32px; padding: 0 2px; border-radius: 0; font-weight: 500; }
.review-page .seg [aria-current="true"] { background: none; color: var(--ink); box-shadow: inset 0 -2px 0 var(--mist); }
.review-list { gap: 10px; }
.review-item { gap: 6px; padding: 14px 18px; border-color: var(--line); box-shadow: var(--shadow-card); }
.review-item:hover { border-color: var(--line-strong); }
.ri-meta { gap: 8px; }
.ri-meta .grow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.ri-who { max-width: 100%; font-size: var(--text-md); font-weight: 600; }
.ri-sub { color: var(--mist); font-size: var(--text-sm); }
.ri-title { font-size: var(--t-body); line-height: 1.45; }
.review-item .ri-body { font-size: var(--t-body); line-height: 1.5; color: var(--foam-90); }
.review-item .ri-why { padding: 0; border: 0; border-radius: 0; background: none; color: var(--mist); font-size: var(--text-sm); line-height: 1.45; gap: 2px 8px; }
.ri-why-k { color: var(--mist); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: var(--text-sm); }
.ri-actions { margin-top: 6px; }
.ri-actions .input { min-height: 36px; height: 36px; font-size: var(--text-sm); }
.ri-buttons .btn { height: 36px; padding: 0 14px; }
.ri-done .chip { padding: 0; border: 0; background: none; font-weight: 600; }
[data-theme="light"] .review-item .ri-body { color: var(--ink); }
@media (max-width: 760px) {
  .review-page { max-width: none; }
  .review-page .seg { gap: 14px; overflow-y: hidden; }
  .ri-foot { display: none; }
  .ops-item .chunk { display: none; }
  .ri-actions .input { min-height: 44px; height: 44px; }
  .ri-buttons .btn { height: 44px; }
}
/* Instrument Serif: rare heroes only (empty-state title, first-run and onboarding headlines, Morning Brief). */
.score-num { letter-spacing: -0.03em; }
.empty h2 { font-family: var(--font-serif); font-weight: 400; font-size: var(--metric); line-height: 34px; letter-spacing: 0; }
.brief-title, .brief-report h2.report-title { font-weight: 400; letter-spacing: 0; }

/* ---------- mobile tab bar (< 1024px): Mentions / Alerts / Opps / You ---------- */
.tabbar { display: none; }
@media (max-width: 1023px) {
  .app, .app.with-beams { display: block; padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .rail, .beam-rail, .app.with-beams .beam-rail { display: none; }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: stretch; gap: 4px;
    height: calc(64px + env(safe-area-inset-bottom)); padding: 6px 8px env(safe-area-inset-bottom);
    border: 0; border-top: 1px solid var(--glass-border); border-radius: 0;
  }
  .tabbar .tab {
    flex: 1 1 0; min-width: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border-radius: 12px; color: var(--foam-80); text-decoration: none; font-size: var(--text-label); line-height: 14px; font-weight: 600;
    list-style: none; cursor: pointer; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  }
  .tabbar .tab::-webkit-details-marker { display: none; }
  .tabbar .tab { position: relative; }
  .tabbar .tab .nav-count { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--neg); color: var(--white); font-size: var(--text-micro); line-height: 16px; text-align: center; }
  .tabbar .tab svg { width: 22px; height: 22px; }
  .tabbar .tab[aria-current="page"] { color: var(--foam); font-weight: 700; }
  .tabbar .tab[aria-current="page"]::before { content: ""; position: absolute; top: -6px; left: 50%; width: 22px; height: 3px; border-radius: 0 0 2px 2px; background: var(--beam); transform: translateX(-50%); }
  .tabbar .tab[aria-current="page"] svg { color: var(--beam); }
  .tab-you { flex: 1 1 0; display: flex; position: relative; }
  .tab-you > summary { width: 100%; }
  .you-menu { position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 220px; max-height: calc(100dvh - 96px - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; padding: 8px; border-radius: 14px; display: flex; flex-direction: column; gap: 2px; }
  .you-menu a, .you-menu button {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px;
    border: 0; background: none; text-decoration: none; color: var(--foam-90); font-size: var(--text-md); text-align: left; width: 100%; cursor: pointer;
  }
  .you-menu a svg { width: 18px; height: 18px; }
  .you-menu a[aria-current="page"] { background: rgba(247, 244, 238, 0.08); color: var(--foam); }
  .you-menu form { margin: 0; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
  [data-theme="light"] .tabbar .tab, [data-theme="light"] .you-menu a, [data-theme="light"] .you-menu button { color: var(--ink); }
  .topbar .brief-time { display: none; }
}
@media (max-width: 760px) {
  /* Phone top bar: the title keeps its width and search takes what is left. */
  .topbar .spacer { display: none; }
  .topbar .title-block { flex: none; max-width: 55%; }
  .topbar h1 { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .topbar .search { flex: 1 1 0; }
  /* Phone: View · Filters · Latest | Urgent; Export / Brand brief live on desktop. Pops span the row. */
  .feed-controls.feed-tools { position: relative; gap: 6px; max-width: 100%; box-sizing: border-box; }
  .feed-tools .grow { display: none; }
  /* ⋯ keeps Export CSV / Brand brief reachable on phone */
  .feed-tools .feed-actions { display: flex; flex: none; }
  .feed-tools .chip-btn { padding: 0 10px; flex: none; }
  /* Top/Newest: own full-width row (never shares with Relevant/Filters), hairline, inside 16px margin at 390/360 */
  .feed-tools .seg[aria-label="Sort"] {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: transparent;
    box-shadow: none;
  }
  .feed-tools .seg[aria-label="Sort"] a { padding: 0 12px; flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center; }
  .feed-tools .seg[aria-label="Sort"]:focus,
  .feed-tools .seg[aria-label="Sort"] a:focus { outline: none; }
  .feed-tools .seg[aria-label="Sort"]:focus-visible,
  .feed-tools .seg[aria-label="Sort"] a:focus-visible { outline: 2px solid var(--beam); outline-offset: 2px; }
  /* Coach tip must not paint a thick ring on the toggle (banner tip is separate). */
  .feed-tools .seg[aria-label="Sort"][data-coach-on] { outline: none; }
  .feed-tools .pop-anchor, .op-filterbar .pop-anchor { position: static; }
  .op-filterbar { position: relative; }
  .feed-tools .filters-pop, .feed-tools .menu.pop, .op-filterbar .filters-pop { left: 0; right: 0; width: auto; }
  .filters-pop .filter-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filters-pop .filter-row > .label { flex-basis: auto; flex: none; }
  .mention { padding: 14px 16px; border-radius: 14px; }
    .day-head h2, .day-head .n { flex: none; white-space: nowrap; }
  .day-head .date { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Mobile Mentions (mock 02-mentions-mobile): one stats line ("23 relevant of 46 · 3 need review" + Positive / Neutral /
     Negative), no bar, no second meta line. The ⋯ menu opens as a sheet above the tab bar. */
  .sent-row { gap: 10px; }
  .sent-row .sc-bar, .feed-summary { display: none; }
  .sent-row + .feed-summary + *, .sent-row { margin-bottom: 12px; }
  .sent-change > summary { min-height: 44px; }
  .more-menu.menu.pop, .sent-menu.menu.pop { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(72px + env(safe-area-inset-bottom)); width: auto; max-width: none; max-height: 60vh; }
}

/* The fixed tab bar pads .app, so a full-height pane would leave a band of scroll under it. */
@media (max-width: 1023px) {
  .main { min-height: calc(100dvh - 72px - env(safe-area-inset-bottom)); }
}

/* ---------- motion: 200–300ms ease-out, opacity + short travel only ---------- */
details[open] > .pop, details[open] > .menu, details[open] > .filters-pop { animation: pop-in var(--dur-2) var(--ease-out); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.btn, .beam, .rail-item, .chip-link { transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  details[open] > .pop, details[open] > .menu, details[open] > .filters-pop { animation: none; }
  .btn, .beam, .rail-item, .chip-link, .chip-btn, .mention, .opportunity, .tabbar .tab, .mention .meta-line .actions, .sent-change-hint, .protect-advanced > summary::before { transition: none; }
}

/* ---------- AppNoticeStack (FIX-LIST P0-5): one quiet line under the top bar ----------
   Verify-email + newest unread alert. No wash, no chip: a small tone dot and mist text links.
   Dismiss hides it for the session (public/alerts.js); a newer alert brings it back. */
.notice-stack { display: flex; align-items: center; gap: 16px; min-height: 36px; margin: 8px var(--space-5) 0; padding: 0 4px 0 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-raised); color: var(--mist); font-size: var(--text-xs); line-height: 18px; }
.notice-stack[hidden], html.notices-dismissed .notice-stack { display: none; }
.ns-item { display: flex; align-items: center; gap: 10px; min-width: 0; flex: none; }
.ns-item[hidden] { display: none; }
.ns-item form { display: contents; }
.ns-item .t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-alert { flex: 1; }
.ns-item + .ns-alert { padding-left: 16px; border-left: 1px solid var(--line); }
.ns-kind { color: var(--ink); font-weight: 600; }
.ns-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--neg); }
.ns-dot.warn { background: var(--beam); }
.ns-link { flex: none; display: inline-flex; align-items: center; padding: 0; border: 0; background: none; color: var(--mist); font: inherit; white-space: nowrap; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.ns-link:hover { color: var(--ink); }
.ns-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--mist); cursor: pointer; }
.ns-x:hover { color: var(--ink); background: var(--line); }
.ns-x svg { width: 14px; height: 14px; }
@media (max-width: 1023px) {
  .notice-stack { flex-wrap: wrap; gap: 0 12px; margin: 6px 16px 0; padding: 4px 2px 4px 12px; }
  .ns-item { flex: 1 1 calc(100% - 44px); min-height: 28px; }
  .ns-item + .ns-alert { padding-left: 0; border-left: 0; }
  /* Keep close X last in DOM order with margin-left:auto — same right edge as desktop (no order:-1). */
  .ns-x { margin-left: auto; }
  .ns-link { min-height: 28px; }
}

/* ---------- Rail fit (QA-AFTER §0): every Compare row shows at 1440x900 under the plan card and the
   Settings group. Rows drop from 40px to 34px; shorter windows tighten again and the groups scroll. */
html:not(.rail-collapsed) .rail { padding-top: 16px; }
html:not(.rail-collapsed) .rail-mark { margin-bottom: 12px; }
.rail-groups { flex: 0 1 auto; }
.rail-group { gap: 1px; }
.rail-group + .rail-group { margin-top: 6px; }
.rail-group-bottom { margin-top: 6px; }
.rail-eyebrow { padding-top: 2px; }
.rail-item, .rail-toggle { height: 34px; }
.rail-sub-item { min-height: 26px; }
.rail-spacer { min-height: 8px; }
.rail-toggle { margin-top: 2px; }
.rail-plan { padding: 8px 12px; }
.rail-upgrade { margin-top: 4px; }
@media (max-height: 820px) and (min-width: 1024px) {
  .rail-item, .rail-toggle { height: 30px; }
  .rail-sub-item { height: 24px; min-height: 24px; }
  .rail-plan .bar { margin-top: 4px; }
  .rail-upgrade { margin-top: 2px; }
}
html.rail-collapsed .rail-item, html.rail-collapsed .rail-toggle { height: 40px; }

/* ---------- Mentions calm (QA-AFTER top 3): sentiment is mist text, Top ranks are quiet marks, the
   feed gets air, and a filter row keeps a few chips with the rest behind +N. */
.sent-quiet { display: inline-flex; align-items: center; gap: 4px; color: var(--mist); font-size: var(--text-xs); line-height: var(--lh-xs); }
.sent-quiet svg { width: 13px; height: 13px; flex: none; }
.mention .rank { flex: none; color: var(--mist); font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em; }
.feed { gap: 20px; }
.day { gap: 16px; }
.day + .day { margin-top: 36px; }
.sr-chips .chip.chip-link { height: auto; padding: 2px 4px; border-color: transparent; background: none; color: var(--mist); font-size: var(--text-xs); box-shadow: none; }
.sr-chips .chip.chip-link .dot { display: none; }
.sr-chips .chip.chip-link .count { color: inherit; }
.sr-chips .chip.chip-link:hover { color: var(--ink); background: none; }
.sr-chips .chip.chip-link[aria-current="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.filters-pop .filter-row { gap: 6px; }
.more-chips > summary { list-style: none; cursor: pointer; color: var(--mist); }
.more-chips > summary::-webkit-details-marker { display: none; }
.more-chips[open], .more-chips[open] > .more-chips-body { display: contents; }
.more-chips[open] > summary { display: none; }
.more-chips[hidden] { display: none; }

/* ---------- Opportunities (QA-AFTER top 4): Threads | Drafts tabs, a quiet stats strip instead of the
   KPI wall, and the next draft as the page's one primary action. */
.op-tabs { margin: 4px 0 12px; }
.op-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; margin: 0 0 16px; padding: 0 2px 12px; border-bottom: 1px solid var(--line); }
.ops-item { display: inline-flex; align-items: baseline; gap: 6px; color: var(--mist); font-size: var(--text-xs); line-height: var(--lh-xs); text-decoration: none; white-space: nowrap; }
.ops-item .metric { color: var(--ink); font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.ops-item .metric small { color: var(--mist); font-size: var(--text-xs); font-weight: 400; }
a.ops-item:hover { color: var(--ink); }
.op-draft-line { margin: 0 0 var(--space-3); }
.draft-hero { margin-bottom: var(--space-5); padding: var(--space-6); background: var(--card-solid-2); border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.dh-eyebrow { margin: 0 0 8px; color: var(--mist-2); font-size: var(--text-label); line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
[data-theme="light"] .dh-eyebrow { color: var(--mist); }
.dh-title { margin: 0 0 4px; font-size: var(--text-2xl); line-height: 28px; font-weight: 650; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.dh-reply { margin: 14px 0 12px; padding: 12px 16px; border-left: 3px solid var(--line-strong); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--surface-raised); color: var(--ink); font-size: var(--t-body-lg); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.dh-why { margin: 16px 0 0; }
.draft-variants { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--space-4); margin: var(--space-3) 0; }
.draft-variant { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-raised); transition: border-color var(--dur-1) var(--ease-out); }
.draft-variant:has(input:checked) { border-color: var(--line-strong); }
.dv-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.dv-pick { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
strong.dv-pick { cursor: default; }
.dv-text, textarea.input.dv-text { flex: 1; width: 100%; height: auto; min-height: 144px; field-sizing: content; padding: 8px 12px; font-size: var(--text-md); line-height: 1.5; resize: vertical; overflow-wrap: anywhere; }
.dv-foot { display: flex; justify-content: flex-end; }
.draft-hero .dv-text { font-size: var(--t-body-lg); }
.dh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.draft-hero .dh-actions .btn.primary { height: 44px; padding: 0 28px; font-size: var(--text-md); font-weight: 600; }
.dh-foot { margin: 12px 0 0; }
.draft-list { margin-top: 20px; }
.dl-head { margin: 0 0 8px; color: var(--mist); font-size: var(--text-xs); line-height: var(--lh-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.draft-row { padding: 10px 2px; border-top: 1px solid var(--line); }
.draft-row > summary { display: flex; align-items: baseline; gap: 12px; cursor: pointer; list-style: none; }
.draft-row > summary::-webkit-details-marker { display: none; }
.dr-title { flex: 1; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: var(--text-sm); }
.draft-row[open] .dr-title { display: block; -webkit-line-clamp: unset; line-clamp: unset; }
.draft-row > summary .xs { flex: none; }
.draft-row[open] > p { margin-top: 8px; }
details.op-brief, details.op-how, details.plan-usage { width: 100%; box-sizing: border-box; }
details.op-brief > summary, details.op-how > summary, details.plan-usage > summary { cursor: pointer; list-style: none; margin-bottom: 0; }
details.op-brief > summary::-webkit-details-marker, details.op-how > summary::-webkit-details-marker, details.plan-usage > summary::-webkit-details-marker { display: none; }
details.op-brief > summary > svg, details.op-how > summary > svg, details.plan-usage > summary > svg { width: 16px; height: 16px; flex: none; color: var(--mist); transition: transform var(--dur-1) var(--ease-out); }
details.op-brief[open] > summary, details.op-how[open] > summary, details.plan-usage[open] > summary { margin-bottom: 12px; }
details.op-brief[open] > summary > svg, details.op-how[open] > summary > svg, details.plan-usage[open] > summary > svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { details.op-brief > summary > svg, details.op-how > summary > svg, details.plan-usage > summary > svg { transition: none; } }

/* Mentions reads in one calm column (Octolens bar). */
.page.feed-page { width: 100%; max-width: calc(760px + 2 * var(--space-5)); margin-inline: auto; }
.feed-page .first-run { max-width: none; }
/* Nothing to count yet: Paro speaks instead of a row of zeros. */
.feed-page:has(> .is-paro) .sent-row, .feed-page:has(> .is-paro) .feed-summary { display: none; }
.feed-page:has(> .first-run) > .is-paro { min-height: 0; }
/* Phone, checklist above an empty feed: the rows drop to their labels and Paro steps down, so the empty
   state's line and action land above the tab bar. */
@media (max-width: 760px) {
  .page.feed-page { padding-left: 16px; padding-right: 16px; }
  .feed-page:has(> .is-paro) .first-run { margin-bottom: var(--space-3); }
  .feed-page:has(> .is-paro) .first-run-helper { display: none; }
  .feed-page:has(> .first-run) > .is-paro { padding: var(--space-2) 16px var(--space-4); }
  .feed-page:has(> .first-run) > .is-paro .chunk { width: 72px; height: 72px; margin-bottom: 0; }
}

/* Brief: the section a person acts on leads, by size, not by a box. */
.brief-lead .sec-t { margin-bottom: 4px; color: var(--ink); font-size: var(--text-lg); line-height: 24px; letter-spacing: -0.01em; text-transform: none; }
.brief-lead .look { font-size: var(--t-body); }

/* Brief reads like a page: a wider editorial column (FIX-LIST P1-1). */
.page.brief-page { width: 100%; max-width: calc(960px + 2 * var(--space-5)); margin-inline: auto; }

/* Settings: one calm column of quiet rows; each section opens in place (FIX-LIST P1-4). */
.page.settings-page { width: 100%; max-width: calc(760px + 2 * var(--space-5)); margin-inline: auto; }
/* The "Workspace" eyebrow is this page's headline. */
.settings-list { border-bottom: 1px solid var(--line); }
.settings-sec { border-top: 1px solid var(--line); scroll-margin-top: var(--space-5); }
.settings-sec > summary { display: flex; align-items: center; gap: 12px; min-height: 56px; cursor: pointer; list-style: none; }
.settings-sec > summary::-webkit-details-marker { display: none; }
.settings-sec > summary > h2 { flex: none; margin: 0; color: var(--ink); font-size: var(--t-body); line-height: 24px; font-weight: 600; }
.settings-sec > summary > .chip { flex: none; }
.settings-sec > summary:hover > svg { color: var(--ink); }
.settings-hint { flex: 1; min-width: 0; overflow: hidden; color: var(--mist); font-size: var(--text-xs); line-height: var(--lh-xs); text-overflow: ellipsis; white-space: nowrap; }
.settings-sec > summary > svg { width: 16px; height: 16px; flex: none; color: var(--mist); transition: transform var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.settings-sec[open] > summary > svg { transform: rotate(180deg); }
.settings-body { padding: 0 0 var(--space-6); }
.settings-body span.field { display: block; font-size: var(--text-sm); font-weight: 500; }
.settings-body .stack > .btn { align-self: flex-start; }
.settings-body .empty-hint { margin: var(--space-4) auto; }
.settings-body tr.is-soon strong { color: var(--mist); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .settings-sec > summary > svg { transition: none; } }

/* AI visibility (C-TILEWALL): one 760px column, one hero score, ranked engine rows. Gold stays on the score bar and Run check. */
.page:has(> .ai-page) { padding: 0; }
.ai-page { max-width: min(760px, 100%); margin-inline: auto; padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.ai-page > * { margin-block: 0; min-width: 0; }
.ai-page > .alert { margin: 0; }
.ai-page .page-head { position: relative; gap: var(--space-3); margin: 0; }
.ai-head .grow { flex: 1 1 100%; }
.ai-head > .day-picker { position: absolute; top: 0; right: 0; }
.ai-head .lede { font-size: var(--text-md); line-height: 1.5; }
.ai-how > summary { width: max-content; cursor: pointer; font-size: var(--text-xs); color: var(--mist); }
.ai-how > summary:hover { color: var(--ink); }
.ai-how .ai-cadence { margin: 6px 0 0; }
.ai-page .ai-run { padding: 10px 16px; background: none; box-shadow: none; }
.ai-run .kpi-prog .f { background: var(--ink); }

.ai-hero { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px 32px; }
.ai-hero .label { display: block; font-size: var(--text-sm); color: var(--mist); }
.ai-hero .metric { display: block; font-size: 48px; line-height: 56px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ai-hero .metric small { margin-left: 2px; font-size: var(--text-lg); font-weight: 500; letter-spacing: 0; color: var(--mist); }
.ai-hero .kpi-prog { margin: 6px 0 8px; }
.ai-hero .kpi-prog .f { background: var(--beam); }
/* Gold once: with a Run check on the page, the button is the lantern and the bar stays ink. */
.ai-page:has(.btn.primary) .ai-hero .kpi-prog .f { background: var(--ink); }
.ai-hero-score .metric { font-size: var(--metric-hero); line-height: var(--lh-metric-hero); font-weight: 700; letter-spacing: -0.03em; }
.ai-hero-side { align-self: end; }
.ai-hero-side .metric { font-size: var(--metric); line-height: var(--lh-metric); }
.ai-hero .foot { display: block; font-size: var(--text-xs); line-height: 18px; color: var(--mist); }
.ai-hero .wow { display: inline; height: auto; padding: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; font-weight: 400; }
.ai-hero-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; font-size: var(--text-xs); line-height: 18px; color: var(--mist); }
.ai-hero-meta .dot { width: 3px; height: 3px; margin: 0 6px; border-radius: 50%; background: var(--mist); }
.ai-hero.is-empty { display: block; text-align: center; }
.ai-hero.is-empty .empty-hint.is-paro { min-height: 0; margin: 8px auto 0; padding: 0 16px; }
.ai-hero > .empty-hint, .ai-hero.is-empty .empty-hint { grid-column: 1 / -1; }
.ai-page .empty-hint { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 420px; margin: 16px auto 8px; padding: 0 16px; text-align: center; }
.ai-page .empty-hint-icon { color: var(--mist-2); }
.ai-page .empty-hint-text { margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--mist); }
.ai-page .empty-hint-action { font-size: var(--text-sm); color: var(--ink); text-decoration: none; }
.ai-page .empty-hint-action:hover { text-decoration: underline; text-underline-offset: 2px; }

.ai-rank { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ai-rank-row { border-bottom: 1px solid var(--line); }
.ai-rank-line { display: grid; grid-template-columns: 20px 164px 72px 92px minmax(0, 1fr) 14px; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; font-size: var(--text-sm); color: var(--mist); }
summary.ai-rank-line { cursor: pointer; list-style: none; }
summary.ai-rank-line::-webkit-details-marker { display: none; }
summary.ai-rank-line:hover { background: var(--surface-2); }
.ai-rank-line .rk { color: var(--mist-2); font-size: var(--text-xs); text-align: right; }
.ai-rank-line .name { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-rank-line .name .glyph { width: 24px; height: 24px; flex: none; }
.ai-rank-line .st { white-space: nowrap; }
.ai-rank-line .pos { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ai-rank-line .src { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-rank-line .chev { display: grid; place-items: center; color: var(--mist-2); transition: transform 120ms ease; }
.ai-rank-line .chev svg { width: 14px; height: 14px; }
.ai-rank-row details[open] .chev { transform: rotate(90deg); }
.ai-rank-row.coming-soon { opacity: .5; }
.ai-rank-row.coming-soon .name { color: var(--mist); }
.ai-rank-panel { padding: 4px 0 16px 32px; font-size: var(--text-xs); line-height: 20px; color: var(--mist); }
.ai-rank-panel p { margin: 0; }
.ai-rank-panel .spark { display: block; margin: 8px 0 4px; }
.ai-rank-prompts { list-style: none; margin: 8px 0 0; padding: 0; }
.ai-rank-prompts li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 4px 0; }
.ai-rank-prompts li > span:last-child { color: var(--ink); }

.ai-page .coverage-note { margin-top: -12px; }
.ai-page .card.ai-sec { background: none; box-shadow: none; }
.ai-page .bar-row .fill.own { background: var(--ink); box-shadow: none; }
.ai-page .cov.full .b i.on { background: var(--ink); }
.ai-page .t .btn.text { padding: 0; height: auto; font-weight: 500; }
.ai-page .t .btn.text:hover { text-decoration: underline; text-underline-offset: 2px; }
.ai-page .t th, .ai-page .t td { padding-block: 8px; }
/* Prompts table fits the 760px column: headers and prompts wrap, nothing scrolls sideways. */
table.t.ai-prompts-t th, table.t.ai-prompts-t td { padding-inline: 6px; }
table.t.ai-prompts-t th { white-space: normal; }
table.t.ai-prompts-t th:first-child, table.t.ai-prompts-t td:first-child { padding-left: 0; }
table.t.ai-prompts-t th:last-child, table.t.ai-prompts-t td:last-child { padding-right: 0; }
table.t.ai-prompts-t th:first-child { width: 60%; }
.ai-prompts-t th .sample-pill.coming-soon { display: flex; width: fit-content; margin-left: 0; padding: 0 5px; font-size: var(--text-micro); }
.ai-prompts-t th .sample-pill.coming-soon::before { content: none; }
.ai-prompts-t .pq { display: flex; min-width: 0; }
.ai-prompts-t .pq > span { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.ai-prompts-t td.sm { overflow-wrap: anywhere; }
/* Compare pages: the comparison leads; managing it sits back on the page. */
.compare-page > [data-radar-compare] { background: var(--card-solid); }
.compare-page > [data-radar-manage], .compare-page > [data-radar-presets] { background: none; }
.page-skeleton[data-sk-kind="ai"] { max-width: 760px; margin-inline: auto; padding: 32px; }
@media (prefers-reduced-motion: reduce) { .ai-rank-line .chev { transition: none; } }
/* 7-day trend: a tile per Manila day. A day with no score keeps a word or a dash, never a 0. */
.ai-trend { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ai-trend-day > * { display: flex; flex-direction: column; gap: var(--space-1); height: 100%; min-height: 96px; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--r-md); color: inherit; text-decoration: none; }
.ai-trend-day a:hover { border-color: var(--line-strong); }
.ai-trend-day a[aria-current] { border-color: var(--ink); }
.ai-trend-day .d, .ai-trend-day .f { font-size: var(--text-xs); line-height: 18px; color: var(--mist); }
.ai-trend-day .v { font-size: var(--metric); line-height: var(--lh-metric); font-weight: 600; color: var(--ink); }
.ai-trend-day .v.em-dash { color: var(--mist); }
.ai-trend-day .v.text { font-size: var(--text-sm); line-height: 20px; font-weight: 500; }
/* Evidence: one stored answer, open in place under its table row. */
.ai-ev-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 24px; color: inherit; text-decoration: none; }
.ai-ev-link:hover .num, .ai-ev-link:hover .ai-failed { text-decoration: underline; text-underline-offset: 2px; }
.ai-ev-link:hover .dot-no { border-color: var(--ink); }
.ai-ev-link[aria-current] { box-shadow: 0 0 0 2px var(--line-strong); border-radius: var(--r-sm); }
/* Words, not a dot, so it can't read as missing. Two lines in the table: three on a row must leave the prompt its width. */
.ai-failed { display: inline-block; max-width: 48px; font-size: var(--text-xs); line-height: 16px; font-weight: 500; color: var(--ink); white-space: normal; }
table.t.ai-prompts-t td:first-child { min-width: 180px; }
[data-ai-prompts] .card-head > div { flex: 1 1 200px; min-width: 0; }
[data-ai-prompt-filter] { flex: none; }
[data-ai-prompt-filter] a { white-space: nowrap; }
table.t.ai-prompts-t tr.ai-ev-row > td { height: auto; padding: var(--space-2) 0 var(--space-4); white-space: normal; }
.ai-ev { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-align: left; }
.ai-ev-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ai-ev-close { margin-left: auto; }
.ai-ev .label { display: block; font-size: var(--text-xs); color: var(--mist); }
.ai-ev-prompt { margin: var(--space-3) 0; font-size: var(--text-sm); color: var(--ink); }
.ai-ev-answer { max-height: 360px; overflow-y: auto; font-size: var(--t-body); line-height: 24px; color: var(--ink); overflow-wrap: anywhere; }
.ai-ev-answer > :first-child { margin-top: 0; }
.ai-ev-answer > :last-child { margin-bottom: 0; }
.ai-ev-answer p, .ai-ev-answer ul, .ai-ev-answer ol { margin: 0 0 var(--space-3); }
.ai-ev-answer ul, .ai-ev-answer ol { padding-left: var(--space-5); }
.ai-ev-answer li { margin-top: var(--space-1); }
.ai-ev-answer li > ul, .ai-ev-answer li > ol { margin-bottom: 0; }
.ai-ev-answer h2, .ai-ev-answer h3 { margin: var(--space-5) 0 var(--space-2); font-family: var(--font-ui); font-weight: 600; color: var(--ink); }
.ai-ev-answer h2 { font-size: var(--text-lg); line-height: 24px; }
.ai-ev-answer h3 { font-size: var(--t-body); line-height: 24px; }
.ai-ev-answer strong { font-weight: 600; }
.ai-ev .ai-ev-answer a { text-decoration: underline; text-underline-offset: 2px; }
.ai-ev .ai-ev-answer a:hover { color: var(--mist); }
.ai-ev-sources { margin: var(--space-3) 0 var(--space-1); }
.ai-ev-cites { margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); line-height: 20px; overflow-wrap: anywhere; }
.ai-hero.is-failed { grid-template-columns: minmax(0, 1fr); }
.ai-hero.is-failed .metric { font-size: var(--metric-lead); line-height: var(--lh-metric-lead); }
@media (max-width: 760px) {
  .ai-trend { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ai-trend-day > * { padding: var(--space-2); min-height: 88px; }
  table.t.ai-prompts-t tr.ai-ev-row > td { padding: var(--space-2) 0; }
  .ai-failed { max-width: none; }
  .ai-ev { padding: var(--space-3); }
  .ai-page { padding: var(--space-4) var(--space-3) var(--space-5); }
  .ai-head > .day-picker { position: static; }
  .ai-hero { grid-template-columns: minmax(0, 1fr); }
  .ai-hero-score .metric { font-size: var(--metric-lead); line-height: var(--lh-metric-lead); }
  .ai-rank-line { grid-template-columns: 20px minmax(0, 1fr) auto 14px; gap: 4px 10px; }
  .ai-rank-line .pos { grid-column: 2; grid-row: 2; }
  .ai-rank-line .src { grid-column: 3 / 5; grid-row: 2; text-align: right; }
  .ai-rank-line .pos:empty, .ai-rank-line .src:empty { display: none; }
  .ai-rank-panel { padding-left: 0; }
  /* Stacks like .radar-t. float, not flex: engine cells hold a dot and a #n that must stay together. */
  .ai-prompts-t, .ai-prompts-t tbody, .ai-prompts-t tr, .ai-prompts-t td { display: block; width: 100%; }
  .ai-prompts-t thead { display: none; }
  .ai-prompts-t tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  .ai-prompts-t tbody tr:last-child { border-bottom: 0; }
  table.t.ai-prompts-t td { height: auto; padding: 4px 0; border: 0; }
  table.t.ai-prompts-t td[data-label] { text-align: right; }
  .ai-prompts-t td[data-label]::before { content: attr(data-label); float: left; margin-right: 12px; color: var(--mist); font-size: var(--text-xs); text-align: left; }
  .ai-prompts-t td:first-child { font-weight: 500; }
  .ai-prompts-t .pq > span { display: block; }
  .ai-prompts-t .sr-only { left: 0; } /* Otherwise it sits past the right-aligned value and adds 1px of scroll. */
}


/* Derek YC demo: compact source family chips — gold fill on navy when selected */
/* One row at every width. "+N" stays outside .fam-wrap; public/fam-chips.js folds chips that don't fit.
   No .fam-fade gutter (Derek 08:00) — last chip sits next to +N with the normal row gap only. */
.source-families { display: flex; flex-wrap: nowrap; gap: var(--space-1); align-items: center; margin: 8px 0 16px; }
/* An open +N lays its chips out in the row, so they need somewhere to go. */
.source-families:has(.more-chips[open]) { flex-wrap: wrap; }
.source-families .more-chips[open]::details-content { display: contents; }
.fam-wrap { position: relative; display: flex; align-items: stretch; flex: 0 1 auto; min-width: 0; }
.fam-scroll {
  display: flex; flex: 0 1 auto; min-width: 0; gap: 6px; align-items: center;
  padding: 2px;
  overflow-x: hidden;
}
/* Fade element kept in markup for fam-chips.js compat; always display:none (no blank gutter). */
.fam-fade {
  /* Derek 08:00: never reserve a fade gutter between last chip and +N.
     Fade removed entirely — chips abut +N with the normal row gap only. */
  display: none !important;
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 0; flex: none; pointer-events: none;
}
.fam-fade[hidden] { display: none !important; }
/* Active All (gold) stays fully visible on the left; fade never paints over it. */
.fam-scroll .chip.fam[data-fam="all"].is-on,
.fam-scroll .chip.fam[data-fam="all"][aria-current="true"] { position: relative; z-index: 1; }
@media (max-width: 480px) {
  .fam-scroll [data-fam="all"] { order: -2; }
  .fam-scroll [data-fam="ai"] { order: -1; }
}
.source-families .chip, .source-families .more-chips { flex: none; white-space: nowrap; }
.source-families .more-chips > summary.chip { height: 32px; padding: 0 10px; }
.source-families .chip.fam { height: 32px; padding: 0 10px; gap: 4px; border: 1px solid var(--line-strong); background: transparent; color: var(--foam-90); font-weight: 500; }
.source-families .chip.fam svg { width: 16px; height: 16px; opacity: 0.7; }
.source-families .chip.fam[aria-current="true"],
.source-families .chip.fam.is-on {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}
.source-families .chip.fam[aria-current="true"] svg,
.source-families .chip.fam.is-on svg { opacity: 1; color: var(--navy); }
.source-families .chip.fam .count { font-variant-numeric: tabular-nums; opacity: 0.85; }


/* AI engine answer cards — quote block + engine name */
.mention.is-ai-engine { border-left: 3px solid var(--gold); }
.mention.is-ai-engine .ai-quote {
  margin: 8px 0 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--navy) 92%, var(--gold));
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  color: var(--foam);
}
.mention.is-ai-engine .ai-quote .ai-q { font-weight: 600; margin: 0 0 8px; color: var(--foam); }
.mention.is-ai-engine .ai-quote .snip { margin: 0; opacity: 0.95; }
.mention.is-ai-engine .ai-engine {
  margin-top: 12px;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  font-variant-ligatures: none;
  font-feature-settings: "calt" 0, "liga" 0;
}


/* Source glyphs: monochrome 16px, cream @70; gold when chip active. Full-color logos only in mention source tags. */
.mention .r1 .glyph,
.mention .r1 .glyph svg,
.filter-row .chip .glyph,
.filter-row .chip .glyph svg,
.source-families .chip .glyph,
.source-families .chip .glyph svg {
  width: 16px; height: 16px; flex: none;
  color: color-mix(in srgb, var(--foam) 70%, transparent);
  opacity: 0.7;
}
.chip[aria-current="true"] .glyph,
.chip.is-on .glyph,
.chip[aria-current="true"] .glyph svg,
.chip.is-on .glyph svg {
  color: var(--gold);
  opacity: 1;
}
.source-families .chip.fam[aria-current="true"] .glyph,
.source-families .chip.fam.is-on .glyph { color: var(--navy); opacity: 1; }
.mention .plat-tag, .mention .source-tag {
  /* color logos only here if present */
}


/* Derek final polish: AI engines label (capital I ≠ l), quiet source links, AI markdown */
.source-families .chip.fam {
  letter-spacing: 0.015em;
  font-variant-ligatures: none;
}
.source-families .chip.fam .label-ai,
.chip .label-ai {
  letter-spacing: 0.055em;
  font-feature-settings: "calt" 0, "liga" 0;
  font-variant-ligatures: none;
}
a.quiet-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  transition: border-color var(--dur-1, 120ms) ease;
}
a.quiet-link:hover {
  border-bottom-color: color-mix(in srgb, currentColor 70%, transparent);
}
.mention a.title.quiet-link,
.mention a.snip-link.quiet-link {
  border-bottom: 0;
  text-decoration: none;
}
.mention a.title.quiet-link:hover,
.mention a.snip-link.quiet-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mention.is-ai-engine a.ai-q.quiet-link,
.mention.is-ai-engine a.ai-md-link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-bottom: 0;
}
.mention.is-ai-engine a.ai-q.quiet-link { font-weight: 600; margin: 0 0 8px; }
.mention.is-ai-engine .ai-md {
  margin: 0;
  font-size: inherit;
  line-height: 1.5;
}
.mention.is-ai-engine .ai-md p { margin: 0 0 0.55em; }
.mention.is-ai-engine .ai-md p:last-child { margin-bottom: 0; }
.mention.is-ai-engine .ai-md strong { font-weight: 650; color: var(--gold); }
.mention.is-ai-engine .ai-engine .quiet-link {
  color: var(--foam-80);
  border-bottom-color: color-mix(in srgb, var(--foam) 30%, transparent);
}
.brief-lead .look a.quiet-link,
.looks .look a.quiet-link {
  color: inherit;
}


/* When an alert owns the notice banner, the sort tip becomes a quiet inline hint under the toggle. */
.feed-tools .seg[aria-label="Sort"][data-coach-inline] {
  position: relative;
  margin-bottom: 14px;
}
.feed-tools .seg[aria-label="Sort"][data-coach-inline]::after {
  content: attr(data-coach-inline);
  position: absolute; left: 0; top: calc(100% + 4px);
  max-width: min(360px, calc(100vw - 32px));
  font-size: var(--text-xs); line-height: 16px; color: var(--mist);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}