/* === Reset & Base === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-primary: #1e2d44;
  --color-primary-dark: #0f1a2e;
  --color-primary-light: #3a4a63;
  --color-bg: #ffffff;
  --color-bg-light: #f7f8fa;
  --color-bg-muted: #f0f4f8;
  --color-text: #2d3748;
  --color-text-muted: #718096;
  --color-text-light: #a0aec0;
  --color-border: #e2e8f0;
  --color-border-light: #f0f0f0;
  --color-accent: #e8ecf5;
  --color-danger: #e53e3e;
  --color-success: #38a169;
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* General Sans — humanist sans for display roles (section titles,
     brand wordmark, topic banner). Loaded from Fontshare (see
     index.html) as discrete weights (300..700). For sub-step
     weight needs (between 500 and 600, etc.) we use a small
     text-shadow trick on the specific selector — see the
     .news-card-title and section-title comments. */
  --font-display: 'General Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --max-width: 1440px;
  --header-height: 60px;
}

body {
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  /* Suppress the iOS double-tap-to-zoom delay on interactive
     elements site-wide. Pinch-zoom still works (we don't set
     user-scalable=no on the viewport), but accidental zoom on
     repeated quick taps in topic pickers / chip strips is gone. */
  touch-action: manipulation;
  /* Disable iOS tap highlight (the grey/blue flash that lingers
     on tapped links and carries over to the next page when the
     same x/y is hit). */
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

/* Underline on hover only on hover-capable pointers. On touch
   devices the brief :hover state from a tap was leaving links
   underlined on the next page (carryover-click). */
@media (hover: hover) and (pointer: fine) {
  a:hover {
    text-decoration: underline;
  }
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#content {
  flex: 1;
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 2rem;
}

/* Match the main nav's 899.98px padding breakpoint (.sticky-hero-inner
   drops to 1rem there) so the content column's left edge stays aligned
   with the nav. Previously content switched at 800px, leaving an
   ~16px misalignment in the 800–900px range. */
@media (max-width: 899.98px) {
  #content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* === Header === */
#site-header {
  background: var(--color-primary);
  color: white;
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
  text-decoration: none;
  flex-shrink: 0;
}

.header-logo:hover {
  text-decoration: none;
}

.header-logo-img {
  width: 32px;
  height: 32px;
}

.header-title {
  font-size: 1.2rem;
  font-weight: 700;
}

.header-prompt-btn {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.15s;
  flex-shrink: 0;
}

.header-prompt-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  text-decoration: none;
}

.header-prompt-btn.active {
  background: rgba(255, 255, 255, 0.3);
}

/* === Hero (homepage only, desktop) === */
#hero {
  background: linear-gradient(180deg, var(--color-bg-light) 0%, var(--color-bg) 100%);
  border-bottom: 1px solid rgba(30, 45, 68, 0.08);
}

#hero:empty {
  display: none;
}

/* On home, ensure content can always be scrolled past the hero so that
   tab-switching while in the sticky-revealed state stays revealed
   (otherwise, a short tab's content would let the browser clamp the
   scroll back down below the threshold). */
body.home-mode #content {
  min-height: 100vh;
}

/* Hidden on mobile — mobile home goes straight into sticky nav + subnav */
@media (max-width: 640px) {
  #hero {
    display: none;
  }
}

/* ====================================================================
   Sticky main nav (dark navy). Behavior:
   - Home: hidden on load, slides in past 180px scroll
   - Other pages: always visible from page load
   ==================================================================== */
#site-header.is-sticky-hero {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--color-primary-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

#site-header.is-sticky-hero.is-revealed {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Content padding when fixed headers are always visible (non-home pages).
   Main nav: 56px desktop / 100px mobile.
   Subnav (when present): ~62px desktop / ~62px mobile (incl. top padding).
   Add breathing room beneath the final fixed band. */
body.sticky-always #content {
  padding-top: calc(64px + 2rem);
}

body.sticky-always.has-subnav #content {
  padding-top: calc(64px + var(--subnav-height, 66px) + 1.75rem);
}

/* Custom-search pages have no subnav — sit content just below the
   main nav with a small gap (not the subnav-sized reservation that
   left a weird void above the title). The in-page sticky bar pins to
   the nav as the user scrolls. */
body.custom-mode.sticky-always #content {
  padding-top: calc(64px + 0.85rem);
}


@media (max-width: 640px) {
  body.sticky-always #content {
    padding-top: calc(64px + 1.5rem);
  }

  body.sticky-always.has-subnav #content {
    padding-top: calc(64px + var(--subnav-height, 66px) + 1rem);
  }

  body.custom-mode.sticky-always #content {
    padding-top: calc(64px + 1rem);
  }
}

/* Nav band: 56px desktop. Controls at 30px so they sit comfortably inside
   the band with 13px of breathing room above and below. Logo 30px matches. */
.sticky-hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 64px;
}
/* At tabbed-nav widths (≤899px) the subnav drops to 1rem horizontal
   padding to give the title + chips more room. Main nav matches so
   the two bands' left edges align — otherwise the subnav title was
   sitting 16px further left than the main nav brand, looking like
   a layout error. */
@media (max-width: 899.98px) {
  .sticky-hero-inner {
    padding: 0 1rem;
  }
}
/* Title + tagline share line-height so their text baselines land
   at the same y inside the flex row. Mismatched line-heights here
   center the line BOXES but offset the actual letterforms inside
   them, reading as a few-pixel vertical drift. */
.sticky-title, .sticky-tagline {
  line-height: 1.3;
}

.sticky-brand {
  display: inline-flex;
  align-items: center;
  color: white;
  text-decoration: none;
  flex-shrink: 0;
}

.sticky-brand:hover {
  text-decoration: none;
}

.sticky-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: white;
  letter-spacing: -0.028em;
}

.sticky-tagline {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
}

/* Search + CTA always right-aligned as a group. Natural-width
   (flex: 0 0 auto) so the tagline in the middle can claim the
   leftover space via its own flex: 1 — otherwise actions and
   tagline split the middle 50/50 and leave a visible gap between
   the brand and the actions group. */
.sticky-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
  margin-left: auto;
}

/* Search Topics + Prompt Builder share the same white-pill CTA
   style and sit side-by-side on the right of the dark nav. The
   search button (.sticky-search .search-bar) is a click-through
   trigger that opens the full-screen search overlay; the Prompt
   Builder is an anchor. Both render as identical pills with a
   leading icon and a label. */
.sticky-search { flex: 0 0 auto; min-width: 0; }
.sticky-search .search-bar-wrapper {
  padding: 0;
  flex: 0 0 auto;
  width: auto;
}
/* Pill chips on the dark nav — toned down from stark white to a
   soft cool-slate (#dde3ec). Reads as a quiet utility chip rather
   than a high-contrast CTA, so the nav has less visual shouting.
   Hover lifts to brighter slate, keeping a subtle response without
   going full white. */
.sticky-search .search-bar {
  height: 34px;
  padding: 0 0.95rem;
  background: #dde3ec;
  color: #1e2d44;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.005em;
  white-space: nowrap;
  flex-shrink: 0;
  gap: 0.4rem;
  transition: background 0.14s, color 0.14s, border-color 0.14s, transform 0.08s;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
}
.sticky-search .search-bar-icon {
  color: #2c4467 !important;
  flex-shrink: 0;
}
.sticky-search .search-bar:hover,
.sticky-search .search-bar:focus-visible {
  background: #ecf0f6;
  border-color: #ecf0f6;
  color: #0f1a2e;
}
.sticky-search .search-bar:hover .search-bar-icon,
.sticky-search .search-bar:focus-visible .search-bar-icon {
  color: #0f1a2e !important;
}
.sticky-search .search-bar:active { transform: translateY(1px); }

/* Prompt Builder CTA — twin of the Search Topics pill above. */
.sticky-cta {
  height: 34px;
  padding: 0 0.95rem;
  background: #dde3ec;
  color: #1e2d44;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  gap: 0.4rem;
  transition: background 0.14s, color 0.14s, border-color 0.14s, transform 0.08s;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

.sticky-cta:hover {
  background: #ecf0f6;
  border-color: #ecf0f6;
  color: #0f1a2e;
  text-decoration: none;
}
.sticky-cta:active { transform: translateY(1px); }

.sticky-cta-sparkle {
  flex-shrink: 0;
  opacity: 0.9;
}

/* Settings gear — sits next to the Prompt Builder pill in the
   main nav. Visible at every viewport so users always have a
   one-tap path to their preferences. */
.sticky-settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.14s, color 0.14s, border-color 0.14s, transform 0.06s;
}
.sticky-settings:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
}
.sticky-settings:active { transform: translateY(1px); }
.sticky-settings svg { display: block; }

@media (max-width: 640px) {
  .sticky-settings { width: 32px; height: 32px; }
}
@media (max-width: 400px) {
  .sticky-settings { width: 30px; height: 30px; }
}

/* Home shortcut — sits to the right of the gear in the main nav.
   Same color treatment as the gear (dark nav button) but stays
   visible at every viewport width so users always have a one-tap
   path back to the homepage. */
.sticky-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  transition: background 0.14s, color 0.14s, border-color 0.14s, transform 0.06s;
}
.sticky-home:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
  text-decoration: none;
}
.sticky-home:active { transform: translateY(1px); }
.sticky-home svg { display: block; }

@media (max-width: 640px) {
  .sticky-home { width: 32px; height: 32px; }
}
@media (max-width: 400px) {
  .sticky-home { width: 30px; height: 30px; }
}

/* Search pill — opens the Topics modal with input focused. Mirrors
   the Choose Topics pill's white-on-navy treatment so the two
   read as a paired set (browse vs. search), with the icon cluster
   (Home · Settings) sitting separately to the right. On mobile
   the "Search" text label hides so only the magnify icon remains;
   the button shrinks to match the surrounding icon chips. */
.sticky-search-pill .search-bar-search-variant {
  /* Inherits .search-bar / .is-compact base — only the mobile
     icon-only behavior is custom to this variant. */
}
@media (max-width: 640px) {
  .sticky-search-pill .search-bar-label { display: none; }
  .sticky-search-pill .search-bar-search-variant {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
}
@media (max-width: 400px) {
  .sticky-search-pill .search-bar-search-variant {
    width: 30px;
    height: 30px;
  }
}

/* Navmenu Settings button — sits in the footer row alongside
   About / Terms / GitHub, with a leading gear icon. */
.navmenu-link-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.navmenu-link-button:hover { color: var(--color-primary); }
/* === Hamburger Menu ====================================================
   The hamburger lives permanently in the main nav, immediately to the
   left of the brand title. There is no subnav hamburger and no site
   logo image — the menu trigger is the only "pre-title" element. */
.nav-hamburger {
  display: flex;
  width: 22px;
  height: 22px;
  padding: 3px 1px;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 0.12s;
}
.nav-hamburger:hover { opacity: 1; }
.nav-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: white;
  border-radius: 1px;
}
body.hide-cta .sticky-cta { display: none !important; }

/* Slide-out nav menu */
.navmenu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.navmenu-overlay.is-open { opacity: 1; pointer-events: auto; }

.navmenu-panel {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 320px;
  max-width: 85vw;
  background: var(--color-bg);
  z-index: 501;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.navmenu-panel.is-open { transform: translateX(0); }

/* Scrollable middle section — featured topics list flexes to fill the
   remaining height between the fixed top (head/search/prompt) and the
   sticky bottom (View All + footer links), and scrolls when overflowing. */
.navmenu-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: -webkit-mask-image 0.18s, mask-image 0.18s;
}
/* When the topic list overflows below the visible area, fade the
   bottom-most ~50px of the scroll viewport. Hints that more topics
   exist; disappears once the user has scrolled to the very last
   topic so the final entry stays fully readable. */
.navmenu-scroll.has-overflow-bottom {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 56px), rgba(0, 0, 0, 0.2) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 56px), rgba(0, 0, 0, 0.2) 100%);
}

/* Sticky bottom group — About / Terms / GitHub links. Pinned to the
   bottom of the drawer regardless of featured-topics list length, with
   a discreet light-grey backdrop and a top border for clean separation
   from the scrollable list above. */
.navmenu-footer-sticky {
  flex-shrink: 0;
  background: var(--color-bg-light);
  border-top: 1px solid var(--color-border);
  padding: 0.7rem 1rem;
  position: relative;
}

.navmenu-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.1rem 1.1rem 1rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.navmenu-brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  min-width: 0;
  flex: 1 1 auto;
}
.navmenu-brand:hover { text-decoration: none; }
.navmenu-logo {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.navmenu-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: -0.025em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  height: 34px;
}
/* Menu head buttons share the same shape, size, and quiet ghost
   styling so they read as a matched pair flanking the brand title.
   The Close (left) carries a muted icon to read as a "dismiss"
   utility; the Home (right) carries a primary-tinted icon to read
   as a quiet "navigate" action — color-only differentiation
   instead of a heavy filled chip. */
.navmenu-close,
.navmenu-home {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-light, #f3f5f9);
  border: 1px solid #e6e8ec;
  border-radius: 9px;
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
  transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.06s;
}
/* Home + Settings sit together at the right edge of the menu head,
   with a tighter gap between them than the head's overall gap so
   they read as a paired action cluster. margin-left: auto pushes
   the cluster against the right edge regardless of brand width. */
.navmenu-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}
.navmenu-close { color: var(--color-text-muted, #6b7280); }
.navmenu-home  { color: #2c4467; }
.navmenu-close:hover {
  background: #eef2f7;
  border-color: #c8d3e3;
  color: var(--color-text, #1e2d44);
}
.navmenu-home:hover {
  background: #ebf2fb;
  border-color: #95a8c5;
  color: #1f3251;
  text-decoration: none;
}
.navmenu-close:active,
.navmenu-home:active { transform: translateY(1px); }
.navmenu-close svg,
.navmenu-home svg { display: block; }

.navmenu-search {
  padding: 1.1rem 1.25rem 0.85rem;
}
.navmenu-search .search-bar {
  width: 100%;
  height: 42px;
  padding: 0 0.95rem;
  font-size: 0.85rem;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-muted);
  border-radius: 7px;
  font-weight: var(--font-weight-regular);
  gap: 0.55rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s;
}
.navmenu-search .search-bar:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-light);
}
.navmenu-search .search-bar-icon { color: var(--color-text-muted); opacity: 0.7; }

/* Quick-jump links between the search bar and the Featured Topics
   list. Text-only — not buttons — so the visual weight stays on
   the search bar above and the topic list below. Stacked one per
   row, left-aligned with the rest of the menu padding. */
.navmenu-quicklinks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.4rem 1.25rem 0.5rem;
  align-items: stretch;
}
/* CTA-style menu link — bordered pill that reads as a clear action,
   with a leading subject icon and a trailing arrow indicating
   navigation. Used for "Prompt Builder" and "View All Topics" in
   the expanded menu. Both buttons share the same dimensions: same
   height, same padding, full container width. */
.navmenu-cta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  padding: 0.5rem 0.75rem;
  background: var(--color-bg);
  border: 1.5px solid #e1e6ef;
  border-radius: 10px;
  font-family: var(--font-family);
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  color: #1e2d44;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  letter-spacing: -0.003em;
  transition: border-color 0.14s, background 0.14s, color 0.14s, transform 0.06s;
}
.navmenu-cta-icon {
  flex-shrink: 0;
  color: #2c4467;
  display: inline-flex;
  width: 18px;
  height: 18px;
}
.navmenu-cta-icon svg { width: 100%; height: 100%; display: block; }
.navmenu-cta-label {
  flex: 1;
  min-width: 0;
}
.navmenu-cta-arrow {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.14s, color 0.14s;
}
@media (hover: hover) {
  .navmenu-cta:hover {
    border-color: #95a8c5;
    background: #f5f8fd;
    color: var(--color-primary-dark);
  }
  .navmenu-cta:hover .navmenu-cta-arrow {
    color: var(--color-primary);
    transform: translateX(2px);
  }
}
.navmenu-cta:active { transform: translateY(1px); }
.navmenu-footer-links {
  display: flex;
  gap: 0.3rem;
  padding: 0;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.navmenu-footer-sticky .navmenu-footer-links .navmenu-link {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-muted);
  font-size: 0.74rem;
  padding: 0.35rem 0.4rem;
  gap: 0.3rem;
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  white-space: nowrap;
}
.navmenu-footer-sticky .navmenu-footer-links .navmenu-link:hover {
  background: #fff;
  border-color: var(--color-border);
  color: var(--color-text);
}
.navmenu-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  font-size: 0.82rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s;
}
.navmenu-link:hover { border-color: var(--color-primary); background: var(--color-bg-light); text-decoration: none; }
.navmenu-featured-label {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1rem 1.25rem 0.35rem;
}
/* Sticky inside the scroll container: keeps "Featured Topics" pinned
   to the top of the scrollable region while the list scrolls beneath
   it. A subtle gradient below softens content that scrolls past. */
.navmenu-scroll > .navmenu-featured-label {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-bg);
}
.navmenu-scroll > .navmenu-featured-label::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 14px;
  background: linear-gradient(to bottom, var(--color-bg) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.navmenu-topics {
  display: flex;
  flex-direction: column;
  padding: 0 0.5rem;
}
.navmenu-topic-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.1s;
}
.navmenu-topic-link:hover { background: var(--color-bg-light); text-decoration: none; }
.navmenu-topic-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-primary, #385c95);
}
.navmenu-topic-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.sticky-cta:active {
  background: rgba(255, 255, 255, 0.18);
  color: white;
}

/* ====================================================================
   Sticky sub-nav (topic + custom pages only)
   Sits directly below the main nav as a second fixed band.
   Contains the topic title + tabs.
   ==================================================================== */
#sub-header.is-subnav {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 99;
  /* Unified subnav surface: the title row and the related-topics
     chip strip share this same fill, so the two read as one
     cohesive identity band. A single bordering/shadow at the
     bottom is the only hard separator between the subnav and
     the body content below it. */
  background: #f3f4f6;
  border-bottom: 1px solid #cdd2d9;
  box-shadow: 0 2px 8px rgba(15, 26, 46, 0.06);
}

/* === Home subnav (desktop) ===
   Lives in document flow below the hero so it's visible by default.
   Becomes sticky once scrolled past, then transitions from top: 0 to
   top: 56px when the main sticky nav reveals. */

/* Apply the same inner topic-banner overrides as the fixed subnav.
   Horizontal padding matches main nav + topic-layout at every
   breakpoint so all three left edges line up. */
#sub-header.is-home-subnav .topic-banner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 2rem 0.95rem;
  border-bottom: none;
  display: flex;
  align-items: center;
  min-height: 56px;
}

#sub-header.is-home-subnav .topic-banner-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
}
#sub-header.is-home-subnav .topic-banner-titlegroup {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

#sub-header.is-home-subnav .topic-banner-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.026em;
  font-weight: 300;
}

#sub-header.is-home-subnav .topic-banner-accent {
  height: 26px;
  width: 3.5px;
}

#sub-header.is-home-subnav .topic-banner-tabs {
  gap: 1.25rem;
  align-items: center;
}

#sub-header.is-home-subnav .topic-banner-tabs .tab-pill {
  font-size: 0.85rem;
  padding: 0.4rem 0 0.4rem;
}

#sub-header.is-subnav .topic-banner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem 2rem 0.95rem;
  border-bottom: none;
  display: flex;
  align-items: center;
  min-height: 56px;
  overflow: hidden;
}

.subnav-search-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

#sub-header.is-subnav .topic-banner-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex: 1;
  min-width: 0;
}
#sub-header.is-subnav .topic-banner-titlegroup {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

#sub-header.is-subnav .topic-banner-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.026em;
  font-weight: 300;
}

/* Custom-search title: small uppercase "SEARCH" tag inline with the
   query term, both vertically centered with the search icon to its
   left. Reads as one cohesive label-value pair instead of a
   stacked two-line block. */
.topic-banner-title.topic-banner-title-search {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  line-height: 1.15;
  flex-wrap: nowrap;
}
.topic-banner-title-prefix {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--color-text-muted);
  flex-shrink: 0;
  line-height: 1;
  padding: 0.18rem 0.5rem;
  background: rgba(15, 26, 46, 0.06);
  border-radius: 999px;
}
.topic-banner-title-term {
  font-family: var(--font-display);
  font-weight: 700;
  color: #1e2d44;
  font-size: 1.4rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  letter-spacing: -0.024em;
  line-height: 1.15;
}
@media (max-width: 899.98px) {
  .topic-banner-title-term { font-size: 1.05rem; }
  .topic-banner-title-prefix { font-size: 0.62rem; padding: 0.14rem 0.4rem; }
  .topic-banner-title.topic-banner-title-search { gap: 0.5rem; }
}

#sub-header.is-subnav .topic-banner-accent {
  height: 26px;
  width: 3.5px;
}

/* === Custom-search subnav — editable search field display ========
   Compact field display: magnify icon, SEARCH eyebrow, the term,
   Edit chip. Sized to match the rest of the subnav heights, not
   to dominate it. Click anywhere reopens the Topics modal
   pre-filled with the current term. */
.custom-search-banner .topic-banner-row {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.custom-search-display {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 560px;
  padding: 0.38rem 0.45rem 0.38rem 0.65rem;
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  cursor: text;
  font-family: var(--font-family);
  text-align: left;
  transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
  color: #1e2d44;
}
.custom-search-display:hover,
.custom-search-display:focus-visible {
  border-color: #2c4467;
  box-shadow: 0 1px 6px rgba(28, 58, 107, 0.06);
  outline: none;
}
.custom-search-display-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2c4467;
  flex-shrink: 0;
}
.custom-search-display-icon svg { width: 14px; height: 14px; }
.custom-search-display-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7c8696;
  flex-shrink: 0;
  padding-right: 0.45rem;
  border-right: 1px solid #e2e6ee;
}
.custom-search-display-term {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #0f1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-search-display-edit {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.22rem 0.5rem;
  background: #f3f5f9;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #2c4467;
  flex-shrink: 0;
  transition: background 0.14s, color 0.14s;
}
.custom-search-display-edit svg { width: 11px; height: 11px; }
.custom-search-display:hover .custom-search-display-edit {
  background: #e6ecf5;
  color: #1c3a6b;
}
@media (max-width: 640px) {
  .custom-search-display { gap: 0.45rem; padding: 0.32rem 0.4rem 0.32rem 0.55rem; }
  .custom-search-display-label { display: none; }
  .custom-search-display-term { font-size: 0.88rem; }
  .custom-search-display-edit span { display: none; }
  .custom-search-display-edit { padding: 0.3rem; }
}

/* === Topic Intelligence accordions ================================
   Sectioned, collapsible UI for the Topic Intelligence panel.
   Each <details> is a section (Web Sources / Discover / Learn /
   Analyze / More) with an icon, label, descriptive blurb, and
   chevron. Open state expands the body containing the list of
   items below — Web Sources rows are external links, AI action
   rows are buttons that toggle into multi-select. */
.ti-accordions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
}
.ti-accordion {
  --ti-accent: #5d6b7e;
  background: #ffffff;
  border: 1px solid #e2e6ee;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.ti-accordion[open] {
  border-color: color-mix(in srgb, var(--ti-accent) 38%, #e2e6ee);
  box-shadow: 0 2px 10px rgba(15, 26, 46, 0.04);
}
/* Two-row grid: row 1 has icon + section title + chev all in
   line; row 2 puts the blurb in the title column so the
   description wraps under the title text (not under the icon).
   Icon and title share the same baseline row — no more icon
   floating mid-summary. */
.ti-accordion-summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.4rem;
  row-gap: 0.35rem;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.14s;
}
.ti-accordion-summary::-webkit-details-marker { display: none; }
.ti-accordion-summary:hover {
  background: color-mix(in srgb, var(--ti-accent) 4%, #ffffff);
}
.ti-accordion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--ti-accent);
  flex-shrink: 0;
  grid-column: 1;
  grid-row: 1;
  /* Optical nudge: Title-Case glyphs sit slightly high in their line
     box, so a geometrically-centered icon reads as floating. Drop the
     icon 1px to align with the title's visual center. */
  transform: translateY(1px);
}
.ti-accordion-icon svg { width: 19px; height: 19px; stroke-width: 2; }
.ti-accordion-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: #0f1a2e;
  grid-column: 2;
  grid-row: 1;
}
/* Blurb spans the full card width — left-aligned to the icon
   column, not indented under the title. */
.ti-accordion-blurb {
  font-size: 0.74rem;
  line-height: 1.35;
  color: #8390a3;
  font-weight: 400;
  grid-column: 1 / -1;
  grid-row: 2;
}
/* Chev spans both grid rows so it vertically centers across the
   whole summary (icon+title row + blurb row), not just the title
   row. No background — just the glyph in muted grey, picking up
   the section accent on hover and when expanded. */
.ti-accordion-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a0b3;
  transition: transform 0.2s ease, color 0.14s;
  flex-shrink: 0;
  grid-column: 3;
  grid-row: 1 / -1;
}
.ti-accordion-chev svg { width: 20px; height: 20px; }
.ti-accordion-summary:hover .ti-accordion-chev { color: var(--ti-accent); }
.ti-accordion[open] .ti-accordion-chev { color: var(--ti-accent); }
.ti-accordion[open] .ti-accordion-chev {
  transform: rotate(180deg);
  color: var(--ti-accent);
}
.ti-accordion-body {
  padding: 0.4rem 0.55rem 0.7rem;
  border-top: 1px solid color-mix(in srgb, var(--ti-accent) 16%, #eef0f5);
  background: color-mix(in srgb, var(--ti-accent) 2.5%, #ffffff);
}

.ti-item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.ti-item-row { margin: 0; padding: 0; min-width: 0; }
.ti-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  padding: 0.4rem 0.6rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  text-align: left;
  font-family: var(--font-family);
  color: var(--color-text);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.14s, border-color 0.14s;
}
.ti-item:hover {
  background: #ffffff;
  border-color: color-mix(in srgb, var(--ti-accent) 24%, #e2e6ee);
  text-decoration: none;
}
.ti-item-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}
.ti-item-name {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  color: #1a2235;
  line-height: 1.25;
}
.ti-item-desc {
  font-size: 0.72rem;
  line-height: 1.35;
  color: #7d8696;
  font-weight: 400;
}
/* Web Source link rows — no marker slot, title + desc stack. */
.ti-item-link {
  flex-direction: column;
  gap: 0.1rem;
}
.ti-item-link .ti-item-name { font-size: 0.84rem; }

/* AI shortcut row marker — compact checkbox that fills in on select. */
.ti-item-marker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1.5px solid #c5cdd9;
  background: #ffffff;
  flex-shrink: 0;
  margin-top: 0.12rem;
  transition: background 0.14s, border-color 0.14s;
}
.ti-item-marker-check {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 9px;
  height: 9px;
  color: #ffffff;
  opacity: 0;
  transition: opacity 0.12s;
}
.ti-item-shortcut.is-multi-selected .ti-item-marker {
  background: var(--ti-accent);
  border-color: var(--ti-accent);
}
.ti-item-shortcut.is-multi-selected .ti-item-marker-check { opacity: 1; }
.ti-item-shortcut.is-multi-selected {
  background: color-mix(in srgb, var(--ti-accent) 7%, #ffffff);
  border-color: color-mix(in srgb, var(--ti-accent) 35%, #e2e6ee);
}

@media (max-width: 640px) {
  .ti-accordion-summary { padding: 0.65rem 0.8rem; column-gap: 0.4rem; row-gap: 0.3rem; }
  .ti-accordion-icon { width: 20px; height: 20px; }
  .ti-accordion-icon svg { width: 19px; height: 19px; }
  .ti-accordion-title { font-size: 0.9rem; }
  .ti-accordion-blurb { font-size: 0.72rem; }
  .ti-accordion-body { padding: 0.35rem 0.45rem 0.65rem; }
  .ti-item { padding: 0.4rem 0.55rem; }
  .ti-item-name { font-size: 0.82rem; }
  .ti-item-desc { font-size: 0.7rem; }
}

/* === Custom-search page in-page header =============================
   Replaces the subnav entirely on custom-search pages. The header
   sits at the top of the topic-layout with a title + intro
   sentence, then a search bar that becomes sticky as the user
   scrolls — keeps search reachable without permanently consuming
   the fixed-nav vertical space. */
.topic-layout.is-custom {
  /* Override the app-mode grid constraints — custom pages need to
     scroll the whole page so position: sticky works on the search
     bar. Resets max-height + overflow that app-mode applies to
     the layout panel. */
  height: auto;
  max-height: none;
  overflow: visible;
  display: block;
  padding-bottom: 4rem;
}
/* Custom page sections don't need internal scroll — the page
   itself scrolls. Drop the flex:1 + overflow-y:auto that the
   shortcuts wrap uses on topic pages. */
.topic-layout.is-custom > .layout-section,
.topic-layout.is-custom .shortcuts-scroll-wrap {
  flex: none;
  min-height: 0;
  overflow: visible;
  display: block;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
}
.topic-layout.is-custom .shortcuts-sidebar {
  height: auto;
  overflow: visible;
}
/* At rest: a tight stacked header — page title + intro. It scrolls
   away; the sticky block below (search bar + Topic Intelligence /
   Covering context) pins under the nav and collapses to a compact
   subnav, all transitioning together. */
.custom-search-head {
  margin: 0 0 0.5rem;
}
.custom-search-page-title {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: #0f1a2e;
}
.custom-search-page-intro {
  margin: 0;
  max-width: 640px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #4a5568;
  font-weight: 400;
}
/* The whole block (search bar + TI/covering) is one sticky unit so
   they pin and re-format together. At rest it's flat on the page; once
   pinned it becomes a full-bleed tinted bar (edge to edge under the
   nav) with a clear shadow so it reads as a distinct subnav, not a
   white box lost in white content.
   --bleed = distance from the content column to the viewport edge, so
   negative margins of that size make the bar span full width while the
   matching padding keeps the inner content aligned to the page. */
.custom-search-sticky {
  --bleed: max(32px, calc((100vw - 1440px) / 2 + 32px));
  position: sticky;
  top: 64px;
  z-index: 20;
  background: transparent;
  margin: 0 0 1.25rem;
  border-bottom: 1px solid transparent;
  transition: background-color 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.custom-search-sticky.is-stuck {
  margin-left: calc(-1 * var(--bleed));
  margin-right: calc(-1 * var(--bleed));
  padding: 0.2rem var(--bleed) 0.7rem;
  background: #eef1f6;
  border-bottom-color: #ccd3df;
  box-shadow: 0 8px 18px -5px rgba(15, 26, 46, 0.18);
}
/* Content column gutter is 16px at <=899.98px (matches #content padding). */
@media (max-width: 899.98px) {
  .custom-search-sticky { --bleed: 16px; }
}
.custom-search-page-bar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem 0 0.45rem;
}
.custom-search-bar-title {
  display: none;
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #0f1a2e;
  white-space: nowrap;
}
.custom-search-sticky.is-stuck .custom-search-bar-title { display: block; }
.custom-search-page-bar-input {
  flex: 1 1 auto;
  min-width: 0;
}
/* Topic Intelligence — title with a hairline separator beneath it,
   sitting directly above the accordions (matches the topic-page TI
   header treatment). */
.custom-ti-header {
  padding: 0.55rem 0 0.7rem;
  border-bottom: 1px solid #d6dae2;
}
.custom-ti-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.15;
  color: #1c3a6b;
}
/* Stuck: TI line shrinks; the block's own bottom border + shadow is the
   separator, so drop the header's own bottom border and add a subtle
   top divider from the search row. */
.custom-search-sticky.is-stuck .custom-ti-header {
  padding: 0.5rem 0 0.1rem;
  border-bottom: none;
  border-top: 1px solid #d8dee8;
}
.custom-search-sticky.is-stuck .custom-ti-title { font-size: 0.95rem; }
@media (max-width: 899.98px) {
  .custom-search-page-title { font-size: 1.2rem; }
  .custom-search-page-intro { font-size: 0.9rem; }
  .custom-search-bar-title { font-size: 1rem; }
  .custom-ti-title { font-size: 1.1rem; }
  /* Stuck on mobile: page title wraps above the input in the bar. */
  .custom-search-sticky.is-stuck .custom-search-page-bar {
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
  }
  .custom-search-sticky.is-stuck .custom-search-bar-title { flex-basis: 100%; }
  .custom-search-sticky.is-stuck .custom-search-page-bar-input { flex-basis: 100%; }
}

/* === Custom-search subnav: live search input + autocomplete drop ===
   Replaces the read-only "display" pill with a real <input> that
   updates the page in place as the user types. Dropdown anchors
   to the input and lists matching topics + an "Add as custom
   topic" CTA. */
.custom-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 640px;
  padding: 0.4rem 0.5rem 0.4rem 0.7rem;
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.custom-search-input-wrap:focus-within {
  border-color: #2c4467;
  box-shadow: 0 1px 8px rgba(28, 58, 107, 0.1);
}
.custom-search-input-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2c4467;
  flex-shrink: 0;
}
.custom-search-input-icon svg { width: 15px; height: 15px; }
.custom-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #0f1a2e;
  padding: 0.2rem 0;
}
.custom-search-input::placeholder { color: #94a0b3; font-weight: 500; }
.custom-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #6c7589;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.14s, color 0.14s;
}
.custom-search-clear:hover { background: #eef1f6; color: #1c3a6b; }

/* Dropdown panel — anchors absolutely below the input wrap, no
   gap so the connected look reads as one component. Floats above
   the page content on a small shadow. */
.custom-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  background: #ffffff;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 26, 46, 0.12);
  padding: 0.4rem;
  max-height: 360px;
  overflow-y: auto;
}
.custom-search-dropdown[hidden] { display: none; }
.custom-search-result {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  cursor: pointer;
  border-radius: 6px;
  color: var(--color-text);
  transition: background 0.1s;
}
.custom-search-result:hover,
.custom-search-result.is-highlighted {
  background: #f3f5f9;
}
.custom-search-result-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f1a2e;
}
.custom-search-result-name strong {
  background: rgba(255, 213, 96, 0.55);
  color: #0f1a2e;
  font-weight: 700;
  padding: 0.05em 0.15em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.custom-search-result-parent {
  font-size: 0.74rem;
  color: var(--color-text-light);
  flex-shrink: 0;
}
.custom-search-result-arrow {
  color: var(--color-text-light);
  opacity: 0.5;
  flex-shrink: 0;
}
.custom-search-empty {
  padding: 0.7rem 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  text-align: center;
}
.custom-search-custom-cta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  margin-top: 0.35rem;
  border-top: 1px solid #e6e9f0;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.14s;
}
.custom-search-custom-cta:hover { background: rgba(74, 124, 201, 0.08); }
.custom-search-custom-badge {
  background: var(--color-primary);
  color: white;
  font-size: 1rem;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.custom-search-custom-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}
.custom-search-custom-action {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0.9;
}
.custom-search-custom-term {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .custom-search-input-wrap { padding: 0.35rem 0.45rem 0.35rem 0.6rem; max-width: none; }
  .custom-search-input { font-size: 0.95rem; }
  .custom-search-dropdown { padding: 0.3rem; }
  .custom-search-result-name { font-size: 0.92rem; }
}

#sub-header.is-subnav .topic-banner-tabs {
  gap: 1.25rem;
  align-items: center;
}


/* Mobile-only sections (Related/Featured Topics card panels) — visible
   only when active on mobile via tab. Hidden entirely on desktop. */
@media (min-width: 1024px) {
  .is-mobile-only { display: none !important; }
}

#sub-header.is-subnav .topic-banner-tabs .tab-pill {
  font-size: 0.85rem;
  padding: 0.4rem 0 0.4rem;
}

/* Below the desktop breakpoint the tabs are the primary nav in the
   subnav row — the title group wraps to its own row above the tabs
   (forced via flex-basis: 100% elsewhere). Row-gap controls the gap
   between the title row and the tab row; keep it tight so the
   subnav reads as one cohesive band rather than two stacked
   strips. */
@media (max-width: 899.98px) {
  #sub-header.is-subnav .topic-banner-row,
  #sub-header.is-home-subnav .topic-banner-row {
    flex-wrap: wrap;
    gap: 0.7rem 0.85rem;
    align-items: center;
  }
  #sub-header.is-subnav .topic-banner-tabs,
  #sub-header.is-home-subnav .topic-banner-tabs {
    gap: 0.9rem;
    align-items: center;
  }
}

/* Tabbed-nav viewports (≤899.98px) all share the same compact
   subnav size — the smaller variant the desktop-sidebar layout
   never sees. Title font down ~1rem, icon kept punchy, padding
   tightened, title group and icon vertically centered. */
@media (max-width: 899.98px) {
  #sub-header.is-subnav {
    top: 64px;
  }
  #sub-header.is-subnav .topic-banner {
    padding: 1rem 1rem 0.95rem;
    min-height: 54px;
  }
  #sub-header.is-home-subnav .topic-banner {
    padding: 1rem 1rem 0.95rem;
  }
  #sub-header.is-subnav .topic-banner-titleinner .topic-banner-title,
  #sub-header.is-home-subnav .topic-banner-titleinner .topic-banner-title {
    font-size: 1.3rem;
    line-height: 1.1;
    font-weight: 600;
  }
  #sub-header.is-subnav .topic-banner-icon,
  #sub-header.is-home-subnav .topic-banner-icon {
    width: 24px;
    height: 24px;
  }
  #sub-header.is-subnav .topic-banner-titleinner,
  #sub-header.is-home-subnav .topic-banner-titleinner {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    line-height: 1;
  }
}

/* Extra-small screens: shrink title further for long names. */
@media (max-width: 400px) {
  #sub-header.is-subnav .topic-banner-titleinner .topic-banner-title,
  #sub-header.is-home-subnav .topic-banner-titleinner .topic-banner-title {
    font-size: 1.2rem;
  }
  #sub-header.is-subnav .topic-banner-icon,
  #sub-header.is-home-subnav .topic-banner-icon {
    width: 22px;
    height: 22px;
  }
  #sub-header.is-subnav .topic-banner-titleinner,
  #sub-header.is-home-subnav .topic-banner-titleinner {
    gap: 0.5rem;
  }
}

/* Title scale-down last-resort tier: applied by JS only when the
   title genuinely wraps even with the always-"News" short tab.
   Conservative shrink — a small step down, not a big one. */
body.subnav-title-shrunk #sub-header.is-subnav .topic-banner-titleinner .topic-banner-title,
body.subnav-title-shrunk #sub-header.is-home-subnav .topic-banner-titleinner .topic-banner-title {
  font-size: 1.15rem;
}
body.subnav-title-shrunk #sub-header.is-subnav .topic-banner-icon,
body.subnav-title-shrunk #sub-header.is-home-subnav .topic-banner-icon {
  width: 24px;
  height: 24px;
}
body.subnav-title-shrunk #sub-header.is-subnav .topic-banner-titleinner,
body.subnav-title-shrunk #sub-header.is-home-subnav .topic-banner-titleinner {
  gap: 0.5rem;
}
/* Tier 2 — very long titles like "Defense, Security, Foreign
   Policy" that wrap even at the tier-1 shrunk size. Drop another
   step so they fit on a single line. */
body.subnav-title-shrunk-2 #sub-header.is-subnav .topic-banner-titleinner .topic-banner-title,
body.subnav-title-shrunk-2 #sub-header.is-home-subnav .topic-banner-titleinner .topic-banner-title {
  font-size: 0.95rem;
}
body.subnav-title-shrunk-2 #sub-header.is-subnav .topic-banner-icon,
body.subnav-title-shrunk-2 #sub-header.is-home-subnav .topic-banner-icon {
  width: 20px;
  height: 20px;
}
body.subnav-title-shrunk-2 #sub-header.is-subnav .topic-banner-titleinner,
body.subnav-title-shrunk-2 #sub-header.is-home-subnav .topic-banner-titleinner {
  gap: 0.4rem;
}

/* Default: show full CTA text, hide short */
.sticky-cta-short { display: none; }
.sticky-cta-full { display: inline; }

/* Mobile: single row (brand + search + CTA all fit together).
   padding-left kept at 1rem so it lines up with the subnav and
   topic-layout's mobile padding (alignment grid). */
@media (max-width: 640px) {
  /* Keep the mobile nav at the same min-height as desktop (64px)
     and the brand at its full size — only paddings/gaps tighten. */
  .sticky-hero-inner {
    flex-wrap: nowrap;
    padding: 0.9rem 1rem;
    gap: 0.75rem;
    min-height: 64px;
  }

  .sticky-brand {
    gap: 0.45rem;
  }

  .sticky-tagline {
    display: none;
  }

  .sticky-actions {
    margin-left: auto;
    gap: 0.55rem;
  }

  /* On mobile, swap the search bar to its short "Search Topics"
     label. Prompt Builder keeps its full label until the ≤520px
     threshold below. */
  .sticky-search .search-bar-label-full { display: none !important; }
  .sticky-search .search-bar-label-short {
    display: inline !important;
    white-space: nowrap;
  }
}

/* Prompt Builder pill + Settings gear hide as soon as the nav
   loses its middle tagline (≤899.98px). With the tagline gone the
   nav is "left-aligned" and we keep it lean — Search Topics and
   the Home shortcut stay visible; Prompt Builder + Settings are
   still reachable via the navmenu hamburger. */
@media (max-width: 899.98px) {
  .sticky-cta,
  .sticky-settings { display: none !important; }
}

/* By default (non-mobile), show the full label and hide the short one */
.search-bar-label-short { display: none; }
.search-bar-label-full { display: inline; }

/* H2 condensed hero — ~25% shorter than original */
.hero-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.75rem 1rem 1.5rem;
  text-align: center;
}

.hero-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
  color: var(--color-primary);
  text-decoration: none;
}

.hero-brand:hover {
  text-decoration: none;
}

.hero-brand-logo {
  width: 34px;
  height: 34px;
}

.hero-brand-title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  margin: 0;
  line-height: 1;
}

/* T2: bigger, bolder tagline */
.hero-tagline {
  font-size: 1.05rem;
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 0.95rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.hero-search-wrap {
  max-width: 440px;
  margin: 0 auto;
}

/* Search trigger inside the hero — H2 proportions */
.hero-search-wrap .search-bar {
  padding: 0.6rem 0.9rem;
  font-size: 0.88rem;
  border-width: 2px;
}

.hero-chips {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0.6rem auto 0;
  max-width: 440px;
}

.hero-chip-label {
  font-size: 0.72rem;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--font-weight-semibold);
  margin-right: 0.15rem;
}

.hero-chip {
  font-size: 0.78rem;
  background: var(--color-bg);
  color: var(--color-text);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  border: 1px solid var(--color-border);
}

.hero-chip:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  text-decoration: none;
}

/* B4: lead-in copy + bold navy underlined link */
.hero-build-callout {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
  margin: 1.1rem 0 0;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

.hero-build-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.35rem;
  color: #4a6bbf;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: color 0.15s;
}

.hero-build-link:hover {
  color: #2e4a9f;
}

.hero-build-link:hover .hero-build-arrow {
  transform: translateX(2px);
}

.hero-build-arrow {
  line-height: 1;
  font-weight: var(--font-weight-medium);
  transition: transform 0.15s;
}

@media (max-width: 768px) {
  .hero-inner {
    padding: 2rem 1rem 1.75rem;
  }

  .hero-brand {
    gap: 0.55rem;
    margin-bottom: 0.7rem;
  }

  .hero-brand-logo {
    width: 36px;
    height: 36px;
  }

  .hero-brand-title {
    font-size: 1.55rem;
  }

  .hero-tagline {
    font-size: 0.88rem;
    margin-bottom: 0.95rem;
  }

  .hero-chips {
    gap: 0.3rem;
    margin-top: 0.65rem;
  }

  .hero-chip,
  .hero-chip-label {
    font-size: 0.72rem;
  }

  .hero-chip {
    padding: 0.2rem 0.65rem;
  }

  .hero-build-callout {
    font-size: 0.78rem;
    margin-top: 0.75rem;
  }

}

/* === Hero C: logo+title inline, search center, CTA right ======== */
@media (min-width: 900px) {
  .hero-C {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    text-align: left;
  }
  .hero-C .hero-brand {
    margin-bottom: 0;
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }
  .hero-C .hero-brand-logo { width: 32px; height: 32px; }
  .hero-C .hero-brand-title { font-size: 1.3rem; }
  .hero-C .hero-tagline {
    font-size: 0.82rem;
    margin: 0;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Search + CTA grouped right */
  .hero-C .hero-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
  }
  .hero-C .hero-search-wrap {
    margin: 0;
    max-width: none;
  }
  .hero-C .hero-search-wrap,
  .hero-C .hero-search-wrap .search-bar-wrapper {
    width: auto;
    flex: none;
  }
  .hero-C .hero-search-wrap .search-bar {
    width: auto;
    height: 34px;
    padding: 0 0.85rem;
    font-size: 0.84rem;
    border-width: 1.5px;
    border-radius: 6px;
  }
  .hero-C .hero-search-wrap .search-bar-icon {
    color: inherit;
  }
  .hero-C .hero-build-link {
    font-size: 0.84rem;
    height: 34px;
    padding: 0 0.85rem;
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color 0.12s, color 0.12s;
  }
  .hero-C .hero-build-link:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
}


/* Drop the tagline at a wider breakpoint so the search bar isn't
   forced to compete with it for horizontal space. Search bar keeps
   its default 320px cap at every width above the mobile breakpoint
   — the freed-up tagline space goes back to the layout's natural
   flex distribution rather than being claimed by the search bar.
   The brand separator hides alongside the tagline so a lone vertical
   bar doesn't dangle. */
/* Hide tagline below 1180px — between the brand on the left and
   the search + CTA + settings + home cluster on the right, the
   tagline only has enough room to read cleanly on roomy desktop
   widths. Below that it gets squeezed/truncated, so just drop it. */
@media (max-width: 1180px) {
  .sticky-tagline { display: none !important; }
  .sticky-brand::after { display: none !important; }
}

/* Mobile: hero-C reverts to centered stacked layout */
@media (max-width: 899.98px) {
  .hero-C {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.75rem 1rem 1.5rem;
    text-align: center;
    display: block;
  }
  .hero-C .hero-tagline { display: block; }
  .hero-C .hero-actions {
    display: block;
    margin: 0;
  }
  .hero-C .hero-build-link {
    display: inline-flex;
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: #4a6bbf;
    border: none;
    padding: 0;
    height: auto;
    background: none;
  }
}

/* === Tabs === */
.tabs-row {
  display: flex;
  gap: 0.5rem;
}

.tab-pill {
  padding: 0.45rem 0 0.45rem;
  font-size: 0.9rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.tab-pill:hover {
  color: var(--color-text);
  text-decoration: none;
}

.tab-pill.active {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* Desktop / non-tabular: tabs are plain jump links — no active
   styling at all (no underline, no bold, no color shift). */
@media (min-width: 900px) {
  #sub-header .tab-pill.active {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-medium);
    border-bottom-color: transparent;
  }
  #sub-header .tab-pill:hover {
    color: var(--color-primary);
    background: transparent;
    border-bottom-color: var(--color-primary);
  }
}

/* Tabular nav (mobile): underline + bold + primary color on active
   tab — critical visual cue since sections aren't scrollable. */
@media (max-width: 899.98px) {
  .tab-pill.active {
    border-bottom-color: var(--color-primary);
  }
}


/* === Section Headers === */
.section-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}

.section-header h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  letter-spacing: -0.012em;
  line-height: 1;
}

.section-icon {
  font-size: 1.1rem;
  opacity: 0.8;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 640px) {
  .section-header h2 {
    font-size: 1rem;
  }
  .section-icon {
    font-size: 0.95rem;
  }
}

/* === News Feed === */
.newsfeed-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.newsfeed-scroll-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  position: relative;
  padding-bottom: max(3rem, calc(env(safe-area-inset-bottom, 0px) + 2rem));
}

/* News Feed title — sticky to the top of the scroll wrap so iframe
   content visibly scrolls behind it. No accent bar — weight + the
   thin separator rule below carry the section-title presence. */
.newsfeed-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.15;
  font-weight: 600;
  /* Section title sits in branded navy so the eye separates app
     chrome ("News Feed") from editorial content (story titles in
     off-black). Pushed bluer than the previous #1e2d44 so the
     blueness reads on a casual look, not just on inspection. */
  color: #1c3a6b;
  letter-spacing: -0.024em;
  margin: 0;
  /* Vertically center the title inside a fixed-height row. Matches
     the Topic Intelligence panel header (also min-height: 2.56rem +
     align-items: center) so the two titles sit on the same baseline
     across columns. The bottom border serves as the visual rule. */
  padding: 0;
  min-height: 2.56rem;
  border-bottom: 1px solid #d6dae2;
  background: var(--color-bg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.newsfeed-title::before { display: none; }
@media (max-width: 640px) {
  .newsfeed-title { font-size: 1.15rem; }
}

/* === Multi-Select toggle ===
   Right-aligned on the same row as the section subtext. Reads as a
   real control — labelled, sized for tap targets — but stays quieter
   than the section title. */
.multi-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.2rem 0.1rem;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-family);
  font-size: 0.92rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.005em;
  cursor: pointer;
  min-width: 0;
  max-width: 100%;
  flex-shrink: 0;
  transition: color 0.14s;
}
.multi-toggle:hover { color: var(--color-text); }
.multi-toggle[aria-checked="true"] { color: var(--color-text); }
.multi-toggle-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.multi-toggle-switch {
  width: 38px;
  height: 22px;
  background: #d8dde6;
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s;
}
.multi-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s;
}
.multi-toggle[aria-checked="true"] .multi-toggle-switch {
  background: #16a34a;
}
.multi-toggle[aria-checked="true"] .multi-toggle-knob {
  transform: translateX(16px);
}
/* Mobile: smaller label + switch — matches the discreet treatment we
   were using before but with the new "Multi-select" label. */
@media (max-width: 640px) {
  .multi-toggle {
    font-size: 0.85rem;
    gap: 0.5rem;
    color: var(--color-text-muted);
  }
  .multi-toggle-switch { width: 34px; height: 20px; }
  .multi-toggle-knob { width: 16px; height: 16px; }
  .multi-toggle[aria-checked="true"] .multi-toggle-knob { transform: translateX(14px); }
}

/* === Multi-select check bubble on each shortcut === */
/* The check span sits in markup always; CSS only shows it when the
   card is in multi-select mode. Match the prompt-generator picker
   style (green when selected, white check, centered). */
.sidebar-shortcut-multi-check {
  display: none;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 1.75px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  color: transparent;
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.shortcuts-sidebar.is-multi-select .sidebar-shortcut-multi-check {
  display: inline-flex;
}
.shortcuts-sidebar.is-multi-select .sidebar-shortcut.is-multi-selected
  .sidebar-shortcut-multi-check {
  background: #22c55e;
  border-color: #22c55e;
  color: white;
}
.shortcuts-sidebar.is-multi-select .sidebar-shortcut .sidebar-shortcut-chev {
  display: none;
}
.shortcuts-sidebar.is-multi-select .sidebar-shortcut.is-multi-selected {
  background: var(--color-bg-light);
}

.shortcuts-list-wrap { position: relative; }

/* === Scroll-fade indicators (shared by shortcuts list + news feed) ===
   Sits absolute over the scroll region, hidden by default. Visible
   only when there's hidden content in that direction. The chevron
   bobs gently to signal "more here, scroll." Reduced-motion users
   get the fade without the animation. */
.scroll-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  z-index: 2;
}
.scroll-fade-top {
  top: 0;
  background: linear-gradient(to bottom, var(--color-bg) 30%, rgba(255, 255, 255, 0));
}
.scroll-fade-bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--color-bg) 30%, rgba(255, 255, 255, 0));
}
.scroll-fade-chev {
  display: inline-flex;
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  animation: scroll-fade-bob 2s ease-in-out infinite;
}
.scroll-fade-top .scroll-fade-chev { animation-name: scroll-fade-bob-up; }

@keyframes scroll-fade-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}
@keyframes scroll-fade-bob-up {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-fade-chev { animation: none; }
}

/* Show overlays only when there's hidden content in that direction. */
.shortcuts-list-wrap.has-overflow-top .scroll-fade-top { opacity: 1; }
.shortcuts-list-wrap.has-overflow-bottom .scroll-fade-bottom { opacity: 1; }

/* === Submit selected prompts button === */
/* === Multi-select floating action bar ================================
   Sits at the bottom of the .shortcuts-sidebar card as a sticky pill
   that slides in once any AI shortcut is selected. Single-row layout:
   "N selected" on the left, [Select all] [Clear] in the middle, green
   [Submit] pill on the right. The scroll wrap reserves bottom padding
   when this bar is visible so the last shortcut row stays reachable
   above the floating bar.

   Visibility is class-driven (.is-visible) instead of the [hidden]
   attribute so we can transition in/out. JS toggles .is-visible
   alongside aria-hidden. */
/* === Prompt Submission floating panel ============================
   Sections (top → bottom):
     1. Title + count
     2. Send-to model picker
     3. Preview / Direct Submit buttons (equal-weight pair)
     4. Utility links (Select all · Clear)
   Each separated by a hairline, with consistent inset padding.

   Positioning: at desktop sidebar widths the panel is absolute-
   positioned inside the .shortcuts-sidebar card (anchored to the
   card's bottom). At mobile/tabular widths the card's exact height
   isn't reliable, so we switch to position: fixed against the
   viewport — guarantees the panel is fully visible regardless of
   parent layout quirks. */
.shortcuts-multi-submit-wrap {
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.7rem;
  z-index: 6;
  margin: 0;
  padding: 0;
  background: #ffffff;
  border: 1px solid #e2e6ee;
  border-radius: 12px;
  /* Soft, on-brand float — lighter than before so it reads as part of
     the TI panel system rather than a heavy popup bolted on top. */
  box-shadow:
    0 1px 2px rgba(15, 26, 46, 0.04),
    0 6px 16px rgba(15, 26, 46, 0.08),
    0 16px 32px rgba(15, 26, 46, 0.10);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
/* Soft fade gradient sitting just above the modal — bleeds the
   panel tint up into transparent so content that scrolls toward
   the modal visually softens as it approaches, rather than
   abruptly disappearing under the modal's top edge. */
.shortcuts-multi-submit-wrap::before {
  content: '';
  position: absolute;
  left: -0.7rem;
  right: -0.7rem;
  bottom: 100%;
  height: 2.4rem;
  background: linear-gradient(to top, #f5f7fb 35%, rgba(245, 247, 251, 0));
  pointer-events: none;
}
.shortcuts-multi-submit-wrap[hidden] {
  display: flex !important;
}
.shortcuts-multi-submit-wrap.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.shortcuts-sidebar:has(.shortcuts-multi-submit-wrap.is-visible) .shortcuts-scroll-wrap {
  padding-bottom: 16rem;
}

/* Mobile / tabular shortcut view — anchor to viewport. */
@media (max-width: 899.98px) {
  .shortcuts-multi-submit-wrap {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: max(1rem, calc(env(safe-area-inset-bottom, 0px) + 0.6rem));
    z-index: 60;
    box-shadow: 0 10px 28px rgba(15, 26, 46, 0.14), 0 1px 2px rgba(15, 26, 46, 0.06);
  }
}

/* Custom-search page scrolls the whole window (not app-mode), so the
   in-panel absolute position left the bar stranded at the bottom of a
   tall page instead of pinned. Fix it to the viewport as a centered
   floating action bar so it stays put while scrolling the shortcuts. */
body.custom-mode .shortcuts-multi-submit-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 1.25rem;
  width: min(560px, calc(100vw - 2rem));
  margin-left: auto;
  margin-right: auto;
  z-index: 60;
  box-shadow: 0 10px 28px rgba(15, 26, 46, 0.14), 0 1px 2px rgba(15, 26, 46, 0.06);
}
/* The panel-tint fade above the bar only makes sense for the in-panel
   absolute placement; drop it for the centered floating bar. */
body.custom-mode .shortcuts-multi-submit-wrap::before { display: none; }

/* Section dividers — hairline matching the accordion body borders. */
.shortcuts-multi-submit-wrap > * + * {
  border-top: 1px solid #eef0f5;
}

/* 1. Title row — selection count on the left, utility actions
   (Select all / Clear) on the right. Refined typography: the
   number reads as a quiet status (not a big numeric headline),
   and "selected" stays lowercase like a natural-language label
   instead of an uppercase letter-spaced shout. */
.multi-controls-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem 0.45rem;
}
.shortcuts-multi-count {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--font-family);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: #1e2d44;
  white-space: nowrap;
}
.shortcuts-multi-count strong {
  color: #1c3a6b;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: -0.012em;
}
.shortcuts-multi-count-label {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--color-text-muted);
}

/* 2. Send-to model row */
.multi-controls-model-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.5rem 0.8rem;
}
.multi-controls-model-label {
  font-family: var(--font-family);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: -0.005em;
  flex-shrink: 0;
}
.multi-controls-model-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.5rem 0.8rem;
  background: #f6f8fb;
  border: 1px solid #e2e6ee;
  border-radius: 10px;
  color: #0f1a2e;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, box-shadow 0.14s;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
.multi-controls-model-btn .multi-controls-model-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multi-controls-model-btn:hover {
  background: #eef2f7;
  border-color: #cfd6e2;
}
.multi-controls-model-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(28, 58, 107, 0.18);
  border-color: #1c3a6b;
}
.multi-controls-model-caret {
  opacity: 0.7;
  flex-shrink: 0;
  transition: transform 0.14s;
}
.multi-controls-model-btn[aria-expanded="true"] .multi-controls-model-caret {
  transform: rotate(180deg);
}
.multi-controls-model-menu {
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: calc(100% + 4px);
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--color-bg);
  border: 1px solid #d6dae2;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 26, 46, 0.18);
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.multi-controls-model-menu[hidden] { display: none; }
.multi-controls-model-option {
  display: block;
  width: 100%;
  padding: 0.45rem 0.65rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  text-align: left;
  font-family: var(--font-family);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.multi-controls-model-option:hover {
  background: #eef2f7;
  color: #1c3a6b;
}

/* 3. Preview + Direct Submit row — refined to feel like a pair of
   real buttons (subtle shadow on the primary CTA, hairline border
   on the secondary). */
.multi-controls-buttons {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 0.5rem;
  padding: 0.55rem 0.8rem 0.7rem;
}
.shortcuts-multi-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.6rem 0.95rem;
  background: #ffffff;
  color: #1c3a6b;
  border: 1px solid #d4dae5;
  border-radius: 10px;
  font-family: var(--font-family);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.008em;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s, opacity 0.14s, transform 0.06s, box-shadow 0.14s;
  white-space: nowrap;
}
.shortcuts-multi-preview:hover:not(:disabled) {
  background: #f6f8fb;
  border-color: #b9c2d4;
  color: #15294d;
  box-shadow: 0 1px 2px rgba(15, 26, 46, 0.04);
}
.shortcuts-multi-preview:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(28, 58, 107, 0.18);
}
.shortcuts-multi-preview:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.shortcuts-multi-preview:active:not(:disabled) { transform: translateY(1px); }

.shortcuts-multi-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 0.95rem;
  background: #eaecf1;
  color: #9aa3b2;
  border: 1px solid #e2e6ee;
  border-radius: 10px;
  font-family: var(--font-family);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.008em;
  cursor: not-allowed;
  transition: background 0.14s, color 0.14s, transform 0.06s, box-shadow 0.14s;
  white-space: nowrap;
}
.shortcuts-multi-submit svg {
  flex-shrink: 0;
  transition: transform 0.14s;
}
/* Active CTA — brand navy, matching the Topic Intelligence title color,
   so the action panel reads as part of the same system (was green). */
.shortcuts-multi-submit.is-active {
  background: linear-gradient(180deg, #2a4f8c 0%, #1c3a6b 100%);
  color: #ffffff;
  border-color: #15294d;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 1px 2px rgba(15, 26, 46, 0.20),
    0 5px 14px rgba(28, 58, 107, 0.30);
  cursor: pointer;
}
.shortcuts-multi-submit.is-active:hover {
  background: linear-gradient(180deg, #244680 0%, #16305c 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 2px 5px rgba(15, 26, 46, 0.22),
    0 7px 18px rgba(28, 58, 107, 0.36);
}
.shortcuts-multi-submit.is-active:hover svg {
  transform: translateX(2px);
}
.shortcuts-multi-submit.is-active:active { transform: translateY(1px); }

/* Utility links — right-aligned inside the header row. */
.multi-controls-utils {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.shortcuts-multi-select-all,
.shortcuts-multi-clear {
  display: inline-flex;
  padding: 0.2rem 0.1rem;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--color-text-muted);
  font-family: var(--font-family);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color 0.12s;
  white-space: nowrap;
}
.shortcuts-multi-select-all:hover:not(:disabled) {
  color: #1c3a6b;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.shortcuts-multi-clear:hover:not(:disabled) {
  color: #b91c1c;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.shortcuts-multi-select-all:disabled,
.shortcuts-multi-clear:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.multi-controls-util-divider {
  color: #d6dae2;
  font-size: 0.9rem;
  user-select: none;
  pointer-events: none;
}

/* Section header — make sure flex children can shrink so the toggle
   doesn't push the card past the viewport on narrow screens. */
.sidebar-card-header { min-width: 0; }
.sidebar-card-header > * { min-width: 0; }
.sidebar-card-header .sidebar-card-title { flex: 0 1 auto; max-width: none; }
/* Multi-toggle: small label, right-aligned, on the same line as the
   "Shortcuts" title. */
.sidebar-card-header .multi-toggle {
  margin-left: auto;
  margin-right: 0;
  align-self: center;
  flex-shrink: 0;
  font-size: 0.84rem;
  gap: 0.45rem;
}
.sidebar-card-header .multi-toggle .multi-toggle-switch {
  width: 34px;
  height: 20px;
}
.sidebar-card-header .multi-toggle .multi-toggle-knob {
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
}
.sidebar-card-header .multi-toggle[aria-checked="true"] .multi-toggle-knob {
  transform: translateX(14px);
}
@media (max-width: 640px) {
  .sidebar-card-header .multi-toggle { font-size: 0.88rem; gap: 0.45rem; }
}
/* Drop "Shortcuts" from the Multiselect label only at the smallest
   widths where the full label can't share a row with the subtext. */
@media (max-width: 420px) {
  .multi-toggle-label-full { display: none; }
  .multi-toggle-label-short { display: inline; }
}


/* Prevent horizontal overflow on any screen */
html, body, #app {
  overflow-x: clip;
  max-width: 100%;
}

/* === Custom-search feed CTAs — full-width rows like shortcuts ==== */
.custom-feeds-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.custom-feed-cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.95rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
}

.custom-feed-cta:hover {
  background: var(--color-accent);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.custom-feed-cta:active { transform: translateY(1px); }

.custom-feed-cta-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
}

.custom-feed-cta-name {
  flex: 1;
  font-weight: var(--font-weight-semibold);
  font-size: 0.95rem;
}

.custom-feed-cta-arrow {
  color: var(--color-text-light);
  font-size: 1rem;
  transition: color 0.15s, transform 0.15s;
}

.custom-feed-cta:hover .custom-feed-cta-arrow {
  color: var(--color-primary);
  transform: translate(2px, -2px);
}

.newsfeed-placeholder {
  background: var(--color-bg-light);
  border-radius: 8px;
  padding: 3rem;
  text-align: center;
  color: var(--color-text-muted);
  min-height: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === API-driven news list =========================================
   Vertical scannable list (not a card grid). Each item: bold
   headline, two-line description, then a meta row with a pill-
   styled source label and a relative time. Hairline separators
   between items + a subtle on-hover tint with a sliding accent
   bar give clear hover/focus affordance without underlining any
   text. Lives inside .newsfeed-scroll-wrap. */
.news-list {
  display: flex;
  flex-direction: column;
  /* No top padding — the first story's hover background meets
     the .newsfeed-title separator cleanly. The vertical room
     each row needs to feel breathing-room-y comes from the
     .news-card-link padding, not from list-level padding. */
  padding: 0 0 1rem;
  margin: 0;
}
.news-card {
  position: relative;
  border-bottom: 1px solid #eef0f3;
  transition: background-color 0.16s;
}
/* No top border on the first item — the newsfeed-title separator
   (desktop) or the body-tabs underline (mobile) is already the
   visual boundary above the list. */
@media (hover: hover) {
  /* Hover affordance is a single, subtle tonal shift — no accent
     bar, no chrome. The cursor + the tinted row are enough
     signal that the row is clickable. */
  .news-card:hover { background: rgba(15, 26, 46, 0.022); }
}
.news-card:has(.news-card-link:focus-visible) {
  background: rgba(15, 26, 46, 0.022);
}
.news-card-link {
  display: block;
  /* Slightly taller rows (1.2rem vertical) so each story has
     real breathing room — also helps the first story not feel
     cramped against the section separator line above it.
     Modest horizontal inset (0.75rem) for the rhythm we
     settled on. Hover bg lives on the parent .news-card so it
     extends edge-to-edge in the column regardless of this
     link-level padding. */
  padding: 1.2rem 0.75rem;
  color: inherit;
  text-decoration: none;
}
.news-card-link:hover,
.news-card-link:focus,
.news-card-link:focus-visible {
  text-decoration: none;
  color: inherit;
  outline: none;
}
/* Title — dominant element, never underlined regardless of
   hover/focus state on the anchor. Semibold (600) keeps it
   prominent without the punchy heaviness of full bold (700). */
.news-card-title {
  font-family: var(--font-display);
  font-size: 1.07rem;
  /* True medium weight (500) with a 0.15px currentColor
     text-shadow — the smallest visible glyph-edge thickening
     trick we use anywhere. Adds a hair of body to story
     headlines without crossing into the "feels bold" zone. */
  font-weight: 500;
  text-shadow: 0 0 0.15px currentColor;
  -webkit-font-smoothing: antialiased;
  line-height: 1.25;
  letter-spacing: -0.02em;
  /* Off-black (slight warm-blue tint) for content headlines —
     differentiates story titles from the UI's slate-blue
     section titles ("News Feed", "Shortcuts"). Editorial feel:
     content reads like newsprint, chrome stays branded. */
  color: #101418;
  margin: 0;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-desc {
  margin: 0.4rem 0 0;
  font-family: var(--font-family);
  font-size: 0.88rem;
  line-height: 1.5;
  color: #54627a;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.7rem 0 0;
  font-family: var(--font-family);
  font-size: 0.76rem;
  color: #8492a6;
}
/* Source label — almost-imperceptible chip. Just enough fill to
   read as a deliberate badge instead of running text, but quiet
   enough that the headline always wins the eye. */
.news-card-source {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.5rem;
  background: #f4f6f9;
  color: #6c7a91;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.4;
  text-transform: lowercase;
  white-space: nowrap;
}
.news-card-meta-sep { display: none; }
.news-card-time {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.015em;
}

.news-loading,
.news-empty,
.news-error {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.95rem;
}
.news-error { color: #b04e1d; }

/* Tablet + mobile (under the body-tabs threshold): the news
   section is full-bleed via #section-newsfeed's negative side
   margins, so story content needs its own horizontal inset to
   keep from kissing the viewport edges. Scoped at ≤899.98px
   to match the body-tabs visibility window. */
@media (max-width: 899.98px) {
  .news-list { padding: 0 0 1rem; }
  .news-card-link { padding: 1.05rem 1.5rem; }
  .news-card-title { font-size: 1.05rem; }
  .news-card-desc { font-size: 0.88rem; }
}

/* === AI Shortcuts === */
.shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.shortcut-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
  font-size: 0.85rem;
  font-family: var(--font-family);
  color: var(--color-text);
}

.shortcut-card:hover {
  background: var(--color-bg-light);
  border-color: var(--color-primary-light);
}
.shortcut-card:focus {
  outline: none;
}

.shortcut-icon {
  font-size: 1rem;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.shortcut-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.shortcut-name {
  font-weight: 500;
}

.shortcuts-section-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin: 1rem 0 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

@media (max-width: 768px) {
  .shortcuts-grid {
    grid-template-columns: 1fr;
  }
}

/* === Search Bar === */
.search-bar-wrapper {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.65rem 0.95rem;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  transition: border-color 0.15s;
}

.search-bar:hover,
.search-bar:focus-visible {
  border-color: var(--color-primary);
  outline: none;
}

/* === Search Overlay (SR2 — full-screen takeover) === */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 26, 46, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 1rem 1rem;
  animation: search-overlay-in 0.1s ease-out;
}

@keyframes search-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.search-overlay-card {
  background: var(--color-bg);
  border-radius: 14px;
  width: 100%;
  max-width: 720px;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(15, 26, 46, 0.28);
  display: flex;
  flex-direction: column;
  animation: search-card-in 0.12s ease-out;
  color: var(--color-text);
  text-align: left;
}

.search-modal-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.15rem 0.9rem;
  border-bottom: 1px solid #eef0f4;
  flex-shrink: 0;
}
.search-modal-head-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e2d44;
  letter-spacing: -0.018em;
}
/* Modal close button matches the expanded navmenu close — same
   34x34 ghost chip with a muted X icon on the LEFT of the title. */
.search-modal-head .search-overlay-close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-light, #f3f5f9);
  border: 1px solid #e6e8ec;
  border-radius: 9px;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--color-text-muted, #6b7280);
  padding: 0;
  font-size: inherit;
  line-height: 1;
  transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.06s;
}
.search-modal-head .search-overlay-close:hover {
  background: #eef2f7;
  border-color: #c8d3e3;
  color: var(--color-text, #1e2d44);
}
.search-modal-head .search-overlay-close:active { transform: translateY(1px); }
.search-modal-head .search-overlay-close svg { display: block; }

.search-modal-section {
  padding: 1.1rem 1.15rem 0.4rem;
}
.search-modal-section + .search-modal-section {
  padding-top: 0.6rem;
}
.search-modal-eyebrow {
  display: block;
  font-family: var(--font-family);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  text-transform: none;
  color: #3a4a64;
  margin-bottom: 0.55rem;
}

/* Browse grid — single column of large topic cards at every width.
   The earlier 2-column desktop variant felt clunky (12 stubby cards
   tiled), and a single column scrolls predictably with the scroll-fade
   indicators below. Each card is a self-contained accordion: head row
   + (when expanded) expansion. */
.search-modal-topic-grid {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0 0 0.6rem;
}

.topic-card {
  background: var(--color-bg);
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.topic-card.is-expanded {
  border-color: #c8d3e3;
  box-shadow: 0 2px 10px rgba(15, 26, 46, 0.06);
}
.topic-card-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family);
  color: #1e2d44;
  transition: background 0.12s, color 0.12s;
}
.topic-card-head:hover {
  background: #f5f7fb;
}
.topic-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: #2c4467;
}
.topic-card-icon svg { width: 22px; height: 22px; display: block; }
.topic-card-name {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topic-card-caret {
  flex-shrink: 0;
  color: #9aa3b3;
  transition: transform 0.18s, color 0.14s;
}
.topic-card-head[aria-expanded="true"] .topic-card-caret {
  transform: rotate(180deg);
  color: #2c4467;
}

.topic-card-expansion {
  display: none;
  border-top: 1px solid #eef0f4;
  padding: 0.65rem 0.85rem 0.85rem;
  background: #fbfcfe;
}
.topic-card.is-expanded .topic-card-expansion {
  display: block;
}
.topic-card-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.6rem;
  margin: 0 0 0.55rem;
  background: rgba(44, 68, 103, 0.06);
  border: 1px solid rgba(44, 68, 103, 0.18);
  border-radius: 7px;
  color: #2c4467;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: background 0.14s, border-color 0.14s, color 0.14s;
}
.topic-card-all:hover {
  background: rgba(44, 68, 103, 0.11);
  border-color: rgba(44, 68, 103, 0.32);
  color: #1e2d44;
  text-decoration: none;
}
.topic-card-all svg { transition: transform 0.14s; }
.topic-card-all:hover svg { transform: translateX(2px); }

.topic-card-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 540px) {
  .topic-card-sublist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.6rem;
  }
}
.topic-card-sublink {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  margin: 1px 0;
  color: #1e2d44;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 7px;
  transition: color 0.12s, background 0.12s;
}
.topic-card-sublink:hover {
  color: #2c4467;
  background: rgba(44, 68, 103, 0.07);
  text-decoration: none;
}
.topic-card-subdot {
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #c1c8d4;
}
.topic-card-sublink:hover .topic-card-subdot { background: #2c4467; }
.topic-card-empty {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.search-modal-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.2rem 0 0.6rem;
  padding: 0.4rem 0;
  background: transparent;
  border: none;
  color: #6c7a91;
  font-family: var(--font-family);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color 0.12s;
}
.search-modal-view-all:hover { color: #1e2d44; }
.search-modal-view-all svg { transition: transform 0.14s; }

@keyframes search-card-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.search-overlay-input-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0.7rem 0.9rem;
  background: #f4f5f7;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  flex-shrink: 0;
  overflow: hidden;
  transition: border-color 0.14s, background 0.14s;
}
.search-overlay-input-row:focus-within {
  border-color: var(--color-primary);
  background: var(--color-bg);
  box-shadow: 0 0 0 3px rgba(74, 124, 201, 0.14);
}

.search-overlay-icon-svg {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.search-overlay-results-block {
  margin-bottom: 0.5rem;
  padding: 0 0.85rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
.search-overlay-browse .search-overlay-section-label {
  margin-top: 0.25rem;
}

/* Section labels in the body */
.search-overlay-section-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-light);
  margin: 0.5rem 0 0.35rem;
  padding-bottom: 0;
  border-bottom: none;
}

.search-overlay-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1.05rem;
  font-family: var(--font-family);
  color: var(--color-text);
  font-weight: 500;
  background: transparent;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Kill native search clear button — we don't need it. */
  -webkit-appearance: none;
  appearance: none;
}
.search-overlay-input::-webkit-search-cancel-button,
.search-overlay-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.search-overlay-input::placeholder {
  color: var(--color-text-light);
  font-weight: var(--font-weight-regular);
}

.search-overlay-esc { display: none; }

/* Featured Topics header — matches parent topic row style (same
   size + same chrome) with slightly heavier weight so it reads as
   the primary section label. */
.search-featured-header {
  font-family: var(--font-family);
  font-size: 1.05rem;
  font-weight: 800;
  color: #1e2d44;
  letter-spacing: -0.005em;
  padding: 0.85rem 1.15rem;
  background: var(--color-bg-light, #f7f8fa);
  border-bottom: 1px solid var(--color-border);
}
.search-featured-dot {
  background: var(--color-primary) !important;
  opacity: 0.6;
}

.search-overlay-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-bg-light, #f3f4f6);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  font-size: 1rem;
  color: var(--color-text);
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.12s;
}
.search-overlay-close:hover {
  background: var(--color-border);
}

/* Body wrap — positioning context for the top/bottom scroll-fade
   overlays. The inner .search-overlay-body is the actual scroller;
   the wrap is fixed-flex so the overlays anchor to its edges and
   only become visible when there's hidden content above/below. */
.search-overlay-body-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.search-overlay-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
/* Scroll-fade overlays anchor to the wrap, not the page. Use the
   modal's background so the fade reads as content sliding under the
   modal's chrome rather than a generic gray. */
.search-overlay-body-wrap .scroll-fade-top {
  background: linear-gradient(to bottom, var(--color-bg) 35%, rgba(255, 255, 255, 0));
}
.search-overlay-body-wrap .scroll-fade-bottom {
  background: linear-gradient(to top, var(--color-bg) 35%, rgba(255, 255, 255, 0));
}
.search-overlay-body-wrap.has-overflow-top .scroll-fade-top { opacity: 1; }
.search-overlay-body-wrap.has-overflow-bottom .scroll-fade-bottom { opacity: 1; }

.search-overlay-group {
  margin-bottom: 0;
}
.search-overlay-group:last-child {
  margin-bottom: 0;
}

/* Shared parent/subtopic treatment for search + all-topics modals */
.search-parent-icon,
.all-topics-modal-parent-icon { display: none; }

.search-overlay-group-empty {
  font-size: 0.78rem;
  color: var(--color-text-light);
  font-style: italic;
  padding: 0.4rem 2.2rem;
}

/* Filtered search results (shown when user is typing) */
/* Search result rows */
.search-overlay-result {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  font-size: 0.98rem;
  color: var(--color-text);
  border-radius: 6px;
  transition: background 0.1s;
}

.search-overlay-result:hover,
.search-overlay-result.highlighted {
  background: var(--color-bg-light, #f6f7f9);
}

.search-overlay-result-name {
  flex: 1;
  font-weight: 600;
  color: #0f1a2e;
}
/* Matched substring inside the result name — bright yellow
   highlight so the user can immediately see which characters
   matched their query. */
.search-overlay-result-name strong {
  background: rgba(255, 213, 96, 0.55);
  color: #0f1a2e;
  font-weight: 700;
  padding: 0.05em 0.15em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.search-overlay-result-parent {
  color: var(--color-text-light);
  font-size: 0.72rem;
  flex-shrink: 0;
}

.search-overlay-result-arrow {
  color: var(--color-text-light);
  font-size: 0.9rem;
  opacity: 0.4;
  flex-shrink: 0;
}
.search-overlay-result:hover .search-overlay-result-arrow { opacity: 1; color: var(--color-primary); }

/* "Add as Custom Topic" row — primary CTA when the query doesn't
   match an existing topic. Two-line layout (action label on top,
   search term on the bottom) so the term reads as a clear quoted
   value rather than as part of a sentence — eliminates the
   "Search " query " as Custom Topic" awkward-spacing problem and
   makes the action unambiguous. */
.search-overlay-custom {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  margin: 0.6rem 0 0.25rem;
  cursor: pointer;
  background: rgba(74, 124, 201, 0.08);
  border: 1px solid rgba(74, 124, 201, 0.22);
  border-radius: 8px;
  color: var(--color-primary);
  transition: background 0.14s, border-color 0.14s, transform 0.06s;
}
.search-overlay-custom:hover,
.search-overlay-custom.highlighted {
  background: rgba(74, 124, 201, 0.14);
  border-color: rgba(74, 124, 201, 0.34);
}
.search-overlay-custom:active { transform: translateY(1px); }

.search-custom-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}
.search-custom-action {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-primary);
  opacity: 0.85;
}
.search-custom-term {
  font-size: 1rem;
  font-weight: 700;
  color: #0f1a2e;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-custom-badge {
  background: var(--color-primary);
  color: white;
  font-size: 1rem;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}

.search-overlay-empty {
  padding: 0.75rem;
  color: var(--color-text-muted);
  font-size: 0.84rem;
  text-align: center;
}

@media (max-width: 640px) {
  .search-overlay {
    padding: 0 0 0 0;
    align-items: stretch;
  }

  .search-overlay-card {
    max-width: none;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    animation: search-card-in-mobile 0.2s ease;
  }

  @keyframes search-card-in-mobile {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .search-overlay-input {
    font-size: 1rem;
  }

  .search-overlay-esc {
    display: none;
  }

  .search-overlay-close {
    display: inline-block;
  }
}

/* === Prompt Preview Modal (M2 — compact card) === */
/* === AI Shortcuts / Prompt Modal === */
/* === Prompt Modal (anchored panel over AI Shortcuts card) ============
   Two layers:
     .prompt-modal-overlay  full-viewport translucent backdrop
     .prompt-modal-panel    JS-positioned card with internal sections
   ====================================================================*/
.prompt-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 26, 46, 0.38);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 200;
  opacity: 0;
  transition: opacity 0.18s ease-out;
}
.prompt-modal-overlay.is-open { opacity: 1; }

.prompt-modal-panel {
  position: fixed;
  z-index: 201;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 24px 60px -12px rgba(15, 23, 42, 0.32),
    0 8px 18px -8px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform-origin: top center;
  transform: translateY(-6px) scale(0.985);
  opacity: 0;
  transition:
    opacity 0.2s ease-out,
    transform 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.05);
  will-change: transform, opacity;
}
.prompt-modal-panel.is-open {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.prompt-modal-panel.is-closing {
  transform: translateY(-4px) scale(0.985);
  opacity: 0;
}

/* Header */
.pm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.15rem 0.85rem;
  border-bottom: 1px solid #eef0f4;
  flex-shrink: 0;
}
.pm-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex: 1 1 auto;
}
.pm-title-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: var(--color-bg-light, #f3f4f6);
  border-radius: 6px;
  color: var(--color-primary);
}
.pm-title-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.15rem;
}
.pm-title-eyebrow {
  font-family: var(--font-family);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #9aa3b3;
  line-height: 1;
}
.pm-title-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.018em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.pm-close {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.pm-close:hover { background: #f3f4f6; color: var(--color-text); }
.pm-close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }

/* Body — scrolls when content exceeds panel max-height */
.pm-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.15rem 0.5rem;
}
.pm-section { margin-bottom: 1.1rem; }
.pm-section:last-child { margin-bottom: 0.25rem; }

.pm-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
}
.pm-section-label {
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1e2d44;
  display: block;
  margin-bottom: 0.5rem;
}
.pm-section-head .pm-section-label { margin-bottom: 0; }
.pm-reset {
  background: none;
  border: none;
  color: var(--color-primary);
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  padding: 0.1rem 0;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}
.pm-reset:hover { color: var(--color-primary-dark, #0f1a2e); }

/* Preview / textarea — share container so floating action buttons sit
   in the same spot regardless of mode. */
.pm-preview-wrap {
  position: relative;
  border: 1px solid #e6e8ee;
  border-radius: 8px;
  background: #f8f9fb;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.pm-preview-wrap:hover { border-color: #cdd3de; background: #fff; }
.pm-preview-wrap.is-editing {
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(30, 45, 68, 0.08);
}
.pm-preview {
  padding: 0.85rem 1rem;
  padding-right: 4.5rem; /* room for floating action buttons */
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text);
  max-height: 260px;
  overflow-y: auto;
  white-space: pre-wrap;
  cursor: text;
  border-radius: 8px;
}
.pm-preview:focus-visible { outline: none; }
.pm-textarea {
  width: 100%;
  min-height: 160px;
  max-height: 320px;
  padding: 0.85rem 1rem;
  padding-right: 4.5rem;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text);
  font-family: var(--font-family);
  background: transparent;
  border: none;
  border-radius: 8px;
  resize: vertical;
  box-sizing: border-box;
}
.pm-textarea:focus { outline: none; }

/* Floating action buttons in preview corner */
.pm-preview-actions {
  position: absolute;
  top: 0.5rem;
  right: 0.55rem;
  display: flex;
  gap: 0.25rem;
  z-index: 1;
}
.pm-icon-btn {
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.14s, color 0.14s, border-color 0.14s, transform 0.08s;
}
.pm-icon-btn:hover {
  background: #fff;
  color: var(--color-primary);
  border-color: #e6e8ee;
}
.pm-icon-btn:active { transform: scale(0.92); }
.pm-icon-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.pm-icon-btn.is-copied {
  background: #def7ec;
  color: #03543f;
  border-color: #c3e4d4;
}
/* Floating "Copied" tooltip — appears briefly after a successful copy. */
.pm-icon-btn::after {
  content: 'Copied';
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--color-primary);
  color: #fff;
  padding: 0.22rem 0.5rem;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s, transform 0.16s;
}
.pm-icon-btn::before {
  /* Small triangle pointing down from the tooltip */
  content: '';
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-top-color: var(--color-primary);
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s, transform 0.16s;
}
.pm-icon-btn.is-copied::after,
.pm-icon-btn.is-copied::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.pm-preview-wrap.is-editing .pm-icon-btn { background: #fff; }

/* Prominent copy button — wider than the icon-only edit/save
   sibling, with a visible "Copy" label so users notice it
   immediately. Sits inside .pm-preview-actions alongside the
   icon-only edit button. */
.pm-copy-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 30px;
  padding: 0 0.7rem 0 0.55rem;
  background: var(--color-bg);
  border: 1.5px solid #c8d3e3;
  border-radius: 8px;
  color: #1e2d44;
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.06s, box-shadow 0.14s;
  box-shadow: 0 1px 2px rgba(15, 26, 46, 0.06);
}
.pm-copy-btn svg { color: #2c4467; flex-shrink: 0; }
.pm-copy-btn:hover {
  background: #f5f8fd;
  border-color: #95a8c5;
  color: #0f1a2e;
  box-shadow: 0 2px 5px rgba(15, 26, 46, 0.1);
}
.pm-copy-btn:active { transform: translateY(1px); }
.pm-copy-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.pm-copy-btn.is-copied {
  background: #def7ec;
  border-color: #86d3b3;
  color: #03543f;
}
.pm-copy-btn.is-copied svg { color: #03543f; }

/* Models — chip row */
.pm-models {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.pm-model {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  background: #fff;
  border: 1px solid #e2e6ee;
  border-radius: 999px;
  font-family: var(--font-family);
  font-size: 0.84rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.14s, background 0.14s, color 0.14s, box-shadow 0.14s;
  white-space: nowrap;
}
.pm-model:hover {
  border-color: var(--color-primary-light, #3a4a63);
  color: var(--color-primary);
}
.pm-model[aria-pressed="true"] {
  background: #eef2f7;
  border-color: #c8d2e0;
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  box-shadow: inset 0 0 0 1px #c8d2e0;
}
.pm-model[aria-pressed="true"]::before {
  content: '';
  width: 12px;
  height: 12px;
  margin-right: 0.4rem;
  flex-shrink: 0;
  background-color: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,6.5 5,9.5 10,3.5'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='2,6.5 5,9.5 10,3.5'/></svg>") no-repeat center / contain;
}

/* Submit area — sits as a regular section; meta block below provides
   the visual separator. */
.pm-submit-area { margin-top: 0; }
/* Primary on its own row; secondary "Open only" sits beneath as a quiet
   text link. Helper text gets its own breathing room below both. */
.pm-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.pm-submit {
  align-self: flex-start;
  height: 38px;
  padding: 0 1rem;
  background: #16a34a;
  color: #fff;
  border: 1px solid #16a34a;
  border-radius: 6px;
  font-family: var(--font-family);
  font-size: 0.86rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, opacity 0.14s;
}
.pm-submit:hover { background: #15803d; border-color: #15803d; }
.pm-submit:disabled { opacity: 0.45; cursor: not-allowed; }

/* Meta subsection — model info + disclaimer below the submit button.
   Reads as a quiet footer block, not a primary section. */
.pm-meta {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f0f2f6;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pm-meta-line {
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--color-text-light);
}
.pm-meta-label {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  margin-right: 0.25rem;
}
.pm-meta-link {
  color: #2563eb;
  font-weight: var(--font-weight-regular, 400);
  text-decoration: underline;
}
.pm-meta-link:hover { color: #1d4ed8; }
.pm-meta-text { color: var(--color-text-light); }

/* Legacy class — no longer used */
.prompt-modal { display: none; }

/* Mobile tweaks for the redesigned panel */
@media (max-width: 640px) {
  .pm-header { padding: 0.85rem 0.95rem 0.75rem; }
  .pm-body { padding: 0.85rem 0.95rem 0.85rem; }
  /* Submit button stays left-aligned + content-width on mobile too —
     full-width stretching was making it dominate the modal. */
  .pm-actions { align-items: flex-start; }
  .pm-submit { align-self: flex-start; }
  .pm-title-name { font-size: 1.02rem; }
  .pm-title-eyebrow { font-size: 0.64rem; }
}

/* === Related Topics === */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.related-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  text-decoration: none;
  color: var(--color-text);
  transition: background 0.15s, border-color 0.15s;
}

.related-card:hover {
  background: var(--color-bg-light);
  border-color: var(--color-primary-light);
  text-decoration: none;
}

.related-card.active-page {
  background: var(--color-accent);
  border-color: var(--color-primary);
  cursor: default;
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.related-card.active-page:hover {
  background: var(--color-accent);
  border-color: var(--color-primary);
}

.related-card.active-page .related-name {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.related-card.active-page .related-dot {
  background: var(--color-primary);
}

.related-card.active-page .related-arrow {
  display: none;
}

.related-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}

.related-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 500;
}

.related-arrow {
  color: var(--color-text-light);
  font-size: 0.9rem;
}

.related-active-label {
  font-size: 0.65rem;
  color: white;
  background: var(--color-primary);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.related-empty {
  color: var(--color-text-muted);
  text-align: center;
  padding: 2rem;
}

@media (max-width: 768px) {
  .related-grid {
    grid-template-columns: 1fr;
  }
}

/* === Tab panels =============================================== */
/* Tabular nav: only the active panel visible (matches tab pill breakpoint). */
@media (max-width: 1023.98px) {
  [data-tab-panel] { display: none; }
  body.active-tab-newsfeed [data-tab-panel="newsfeed"],
  body.active-tab-shortcuts [data-tab-panel="shortcuts"],
  body.active-tab-related [data-tab-panel="related"] {
    display: block;
  }
}

/* Subnav inline topics — sits on the title row.
   The single ::before separator before the first child sits in
   the parent's left padding zone, well outside any element's
   hover area. All inline children share consistent 0.5rem
   horizontal padding. */
.subnav-topics-inline {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  /* Horizontal scroll at every viewport. Combined with the wrap's
     overflow: hidden + arrows on desktop, this gives users a way
     to reach off-screen chips without the trim function having to
     hide them entirely. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-left: 0;
  padding-left: 0;
  border-left: none;
  position: relative;
  /* Explicit z-index so the fade pseudo on the wrap (z-index: 1)
     reliably paints ABOVE the strip in every browser. Without
     this, Safari's scroll-container stacking context was lifting
     the strip's chips above the fade and the gradient appeared
     to have no effect. */
  z-index: 0;
}
.subnav-topics-inline::-webkit-scrollbar { display: none; }
/* Only the action-link↔first-topic separator lives inside the strip
   (it's positioned relative to a specific child, not the strip's
   left edge, so it doesn't conflict with the scroll mask). The
   title↔topics separator moved onto .subnav-chip-wrap::before below
   so it sits outside the masked / scrolled region and doesn't get
   faded or covered by the left scroll arrow. */
.subnav-topics-inline .subnav-action-link + .subnav-topic-link::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.5rem;
  background: #b9c2d0;
  transition: background 0.12s;
  pointer-events: none;
}
/* Second separator sits between "All Topics +" and the first topic
   chip. The chip itself is positioned (relative) so the absolute
   ::before anchors to its left edge. */
.subnav-topics-inline .subnav-action-link + .subnav-topic-link {
  position: relative;
}
.subnav-topics-inline .subnav-action-link + .subnav-topic-link::before {
  left: 0;
}
/* Hide row separators when the action-link is being hovered so the
   hover rectangle reads as a single clean fill that meets the
   surrounding separators flush. */
.subnav-topics-inline:has(.subnav-action-link:hover)::before,
.subnav-topics-inline:has(.subnav-action-link:hover) .subnav-action-link + .subnav-topic-link::before,
.subnav-topics-inline:has(.subnav-action-link:hover) .subnav-topics-label::before {
  background: transparent;
}

/* Home Featured label gets a ::before divider sitting at its own
   left edge, between "All Topics +" and "Featured:". padding-left
   on the label and padding-right on the action link are matched
   so both sides of this divider have the same breathing room. */
.home-subnav-topics .subnav-topics-label {
  position: relative;
  padding-left: 0.85rem;
}
.home-subnav-topics .subnav-topics-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.5rem;
  background: var(--color-border);
  transition: background 0.12s;
  pointer-events: none;
}
/* Action link symmetric padding: 0.85rem on both sides so the
   leading divider and the All-Topics ↔ Featured divider sit the
   same distance from the "All Topics +" text. */
/* Home subnav "All Topics +" action link — pill treatment. The
   desktop copy sits at the right edge of the row (margin-left:
   auto) so its right edge aligns with the main nav's right edge
   above it. margin-right: 0 ensures the pill kisses the row's
   right padding edge cleanly. */
/* "All Topics +" sits as the last item INSIDE the scrolling chip
   strip — same look as a regular chip, not a separate pill. Reads
   as a quiet text-style link the user reaches by scrolling past
   the featured topics. */
.home-subnav-topics .subnav-action-link,
.subnav-all-topics-link {
  padding: 0.45rem 0.9rem;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: #6c7a91;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .home-subnav-topics .subnav-action-link:hover,
  .subnav-all-topics-link:hover {
    background: rgba(15, 26, 46, 0.05);
    color: #2c4467;
    text-decoration: none;
  }
}

/* === Responsive nav breakpoints (CSS-only, no JS measurement) === */

/* Shrink featured topic chips in two steps so more of them fit at
   intermediate widths before the trim function has to start hiding
   them. */
@media (max-width: 1200px) {
  .subnav-topic-link { font-size: 0.74rem; }
}
@media (max-width: 1000px) {
  .subnav-topic-link { font-size: 0.7rem; padding-left: 0.8rem; padding-right: 0.8rem; }
}

/* "All Topics +" stays visible on the home subnav at every width.
   Lives as a direct child of .topic-banner-row (outside the chips
   wrapper) so it's not hidden when the chips are hidden on mobile.
   On desktop: margin-left: auto pushes it past the chips toward the
   right edge of the row. On mobile (<900px): styled to match the
   .tab-pill look — no border, no fill, plain muted text. Never gets
   the active state since it opens a modal rather than switching tab. */
.subnav-all-topics-link {
  /* No margin-left: auto — used to push the link as a pinned
     pill to the right edge of the row. Now it sits at the
     natural end of the chip strip and scrolls alongside the
     featured topic chips. */
  flex-shrink: 0;
}
/* On mobile, the standalone .subnav-all-topics-link (inside the chips
   wrapper) is hidden — the All Topics + is rendered inside the pills
   group instead, as a .tab-pill-all-topics element. */
@media (max-width: 899.98px) {
  .subnav-all-topics-link {
    display: none !important;
  }
}

/* First chip gets a small left MARGIN (not padding) to clear the
   leading vertical separator at the strip's left edge. Margin
   sits outside the chip's hover-pill box, so the pill stays the
   same width as its siblings — and the chip is offset just enough
   that the pill doesn't kiss the separator on hover. Only applies
   at desktop widths (≥900px); mobile uses the grid-area layout
   and has its own first-chip rhythm. */
@media (min-width: 900px) {
  .subnav-topics-inline > .subnav-topic-link:first-child {
    margin-left: 0.55rem;
  }
}

/* First-chip padding stays consistent at every width so the separator
   never appears to "slide" closer to or further from the page title
   between breakpoints. (Previously we shrank it at ≤899.98px to handle
   the wrapped-row case, which created a visible jump.) */

/* 800px: featured topics in the home subnav are trimmed by JS
   (trimOverflowLinks) — chips drop as space tightens while "All
   Topics +" stays pinned. The hamburger and main-nav buttons stay
   visible at all widths; CTA hide is now handled by the ≤400px
   rule. Padding stays at 2rem to match the topic-layout content
   below — using 1rem here made the nav bleed wider than the
   content. */
@media (max-width: 800px) {
  .sticky-actions { margin-left: auto; }
}

.subnav-topics-label {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary-light);
  letter-spacing: -0.005em;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 4rem 0.5rem;
  margin: -4rem 0;
}

.subnav-topic-link {
  /* Ghost-pill treatment: transparent surface at rest so the row
     reads as a clean list of links, not a row of competing
     buttons. Pill background materializes on hover so the
     interactive affordance is still discoverable. */
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: #1e2d44;
  text-decoration: none;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: -0.005em;
  transition: background 0.12s, color 0.12s;
  padding: 0.42rem 0.9rem;
  background: transparent;
  border: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
}
@media (hover: hover) {
  .subnav-topic-link:hover {
    color: #1c3a6b;
    background: #eef1f6;
    text-decoration: none;
  }
}
/* "ALL TOPICS +" — matches FEATURED label style. Symmetric 0.5rem
   horizontal padding so visual gap on each side of the divider
   between elements is identical. */
.subnav-action-link {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary-light);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  /* Discreet pill: hairline border + soft background that blends into
     the subnav until hovered. Hover deepens the border + background
     to make the affordance clear. */
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  transition: color 0.12s, background 0.12s, border-color 0.12s, box-shadow 0.18s;
  display: inline-flex;
  align-items: center;
}
@media (hover: hover) {
  .subnav-action-link:hover {
    color: var(--color-primary);
    background: #fff;
    border-color: var(--color-primary-light);
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 26, 46, 0.04);
  }
}

/* "More +" — always visible at end, never clipped. Horizontal padding
   matches the topic chips (1rem) so the gap between the last visible
   chip and "More +" reads consistently with chip-to-chip spacing. */
.subnav-more-link {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-light);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  transition: color 0.12s, background 0.12s;
  padding: 4rem 1rem;
  margin: -4rem 0;
  display: inline-flex;
  align-items: center;
}
@media (hover: hover) {
  .subnav-more-link:hover {
    color: var(--color-primary);
    background: rgba(30, 45, 68, 0.06);
    text-decoration: none;
  }
}
.subnav-more-link:hover {
  color: var(--color-primary);
}

/* "Related Topics +" button — shown/hidden dynamically by trimOverflowLinks
   based on how many inline topic links fit */
.subnav-related-btn {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-primary-light);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  transition: color 0.12s, background 0.12s, border-color 0.12s, box-shadow 0.18s;
}
@media (hover: hover) {
  .subnav-related-btn:hover {
    color: var(--color-primary);
    background: #fff;
    border-color: var(--color-primary-light);
    box-shadow: 0 1px 2px rgba(15, 26, 46, 0.04);
    text-decoration: none;
  }
}

/* Desktop: show inline topics, hide mobile tabs.
   Break to tabs at 1024px to prevent text overflow. */
@media (min-width: 1024px) {
  .topic-banner-tabs-mobile { display: none !important; }
  /* Hide old jump-link tabs on desktop — only inline topics show */
  #sub-header .topic-banner-tabs:not(#prompt-gen-steps):not(.topic-banner-tabs-mobile) {
    display: none;
  }
}
@media (max-width: 1023.98px) {
  .topic-banner-tabs-mobile,
  #sub-header .topic-banner-tabs:not(#prompt-gen-steps) {
    display: flex;
    gap: 1rem;
    align-items: center;
  }
  /* Active tab cue — subtle but clear */
  .topic-banner-tabs-mobile .tab-pill.active,
  #sub-header .topic-banner-tabs:not(#prompt-gen-steps) .tab-pill.active {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    border-bottom: 1.5px solid var(--color-primary);
    padding-bottom: 0.35rem;
  }
}

/* Legacy home topics bar — now replaced by subnav inline topics */
.home-topics-bar {
  display: none;
}
.home-topics-bar-inner {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.home-topics-bar-inner::-webkit-scrollbar { display: none; }
.home-topics-bar-label {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  margin-right: 1.25rem;
}
.home-topics-bar-link {
  font-size: 0.9rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.25rem 0;
  transition: color 0.12s;
}
.home-topics-bar-link:hover {
  color: var(--color-primary);
}
/* Thin separator between links */
.home-topics-bar-link + .home-topics-bar-link {
  margin-left: 1.1rem;
}
.home-topics-bar-link + .home-topics-bar-link::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--color-border);
  margin-right: 1.1rem;
  vertical-align: -1px;
}
.home-topics-bar-all {
  margin-left: auto;
  padding-left: 1.1rem;
  border-left: 1px solid var(--color-border);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
}
.home-topics-bar-all::before {
  display: none;
}

/* (Old grid rules removed — flex-wrap rule below now handles all
   column counts via auto-fit-style flex-basis.) */

@media (max-width: 899.98px) {
  .home-topics-bar { display: none; }
}


/* === Topic layout: AI Shortcuts left sidebar + News Feed right ====
   <900px: single column, shortcuts stacked above News Feed.
   ≥900px: 320px sidebar on the left, News Feed fills the rest.

   In app-mode (home / topic / custom routes) the layout fills the
   viewport between the subnav and the bottom of the window. There's
   no footer below, so the cards live inside this fixed-height area
   like an application panel. */
.topic-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

body.app-mode {
  overflow: hidden;
  /* Use 100svh (small viewport height) — bounds the body to the
     SMALLEST visible viewport area regardless of whether mobile
     browser chrome (URL bar, bottom nav) is showing. Guarantees the
     last item is reachable even when chrome appears, at the cost of
     slightly unused space when chrome hides. Falls back through dvh
     and vh for older browsers. */
  height: 100vh;
  height: 100dvh;
  height: 100svh;
  width: 100%;
  overscroll-behavior: none;
}
html:has(body.app-mode) {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  height: 100svh;
}
/* Higher-specificity selector overrides the body.sticky-always.has-subnav
   padding-top rule that would otherwise add ~150px of top padding inside
   #content. With position: fixed this padding was creating phantom
   white space above the topic-layout. */
body.app-mode.sticky-always.has-subnav #content,
body.app-mode #content {
  position: fixed;
  top: calc(64px + var(--subnav-height, 66px));
  left: 0;
  right: 0;
  bottom: 0;
  /* Explicit height ensures the scroll-wrap chain inside has a
     definite parent height to overflow against. dvh handles mobile
     browser chrome correctly. min-height: 0 cancels the
     `body.home-mode #content { min-height: 100vh }` rule above,
     which would otherwise force #content to a full-viewport height
     and push the multi-submit panel below the fold on short
     desktop viewports. */
  height: calc(100dvh - 64px - var(--subnav-height, 66px));
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
body.app-mode .topic-layout {
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  /* Tight bottom padding — the scroll wraps inside each section
     handle their own safe-area reservation. Avoids a big white
     band at the bottom of the page on desktop. */
  padding: 1.6rem 2rem 1rem;
  box-sizing: border-box;
}
@media (max-width: 640px) {
  body.app-mode .topic-layout {
    padding: 1.25rem 1rem 1.25rem;
  }
}
/* In tabbed mode the section title rows are hidden, so the section
   content sits directly under the subnav — drop the layout's top
   padding so the gap reads as deliberate (the subnav and content
   share a visual band) rather than as a stranded empty strip. */
@media (max-width: 899.98px) {
  body.app-mode .topic-layout:not(.is-custom) {
    /* Zero top padding so the tabs control band butts directly up
       against the subnav band above — no orphan whitespace strip
       between the two. */
    padding-top: 0;
  }
}

@media (min-width: 900px) {
  .topic-layout {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }
  /* Discreet vertical separator between Shortcuts (left) and News
     Feed (right). Drawn via ::after so it can start below the subnav
     (with breathing room above) and run down the rest of the column. */
  body.app-mode .topic-layout:not(.is-custom) > #section-shortcuts {
    position: relative;
    padding-right: 1.5rem;
  }
  body.app-mode .topic-layout:not(.is-custom) > #section-shortcuts::after {
    content: '';
    position: absolute;
    top: 0.4rem;
    right: 0;
    bottom: 0;
    width: 1px;
    background: #e2e8f0;
    pointer-events: none;
  }
  body.app-mode .topic-layout:not(.is-custom) > #section-newsfeed {
    padding-left: 1.5rem;
  }
  /* Custom-search pages have only Shortcuts (no News Feed). Full
     width, left-aligned. */
  .topic-layout.is-custom {
    grid-template-columns: minmax(0, 1fr);
  }
  .topic-layout.is-custom > #section-shortcuts {
    max-width: none;
    margin: 0;
    width: 100%;
  }
  /* Inline Related section is mobile-only — desktop uses the related-
     topics modal triggered from the topic banner. */
  body.app-mode .topic-layout > #section-related { display: none; }
}

.layout-section {
  display: flex;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}
.layout-section > * { width: 100%; }

/* In app-mode at <900px, the topic-layout is a single column with
   only one section visible at a time (tab pills toggle which). That
   active section fills the bounded viewport via flex:1, and uses
   overflow: hidden so its inner scroll-wrap gets a definite height
   to overflow against. */
@media (max-width: 899.98px) {
  body.app-mode .topic-layout {
    display: flex;
    flex-direction: column;
    /* Zero row-gap on mobile: the body-tabs row should sit flush
       against the panel section it controls. The desktop layout
       above still uses `gap: 1.5rem` for its two-column layout. */
    gap: 0;
  }
  body.app-mode .topic-layout > .layout-section {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
  }
  /* News-feed section goes edge-to-edge on mobile so the iframe
     matches the body-tabs' full-bleed width above it. The other
     sections (shortcuts, related) keep the topic-layout's 1rem
     side inset so their bullets/cards don't kiss the viewport
     edge. */
  body.app-mode .topic-layout:not(.is-custom) > #section-newsfeed {
    margin-left: -1rem;
    margin-right: -1rem;
  }
  /* Body tabs: true tab navigator at the top of the panel area.
     Full-bleed (negative side margin escapes the .topic-layout 1rem
     side padding) so the underline indicator runs edge-to-edge.
     Sits on white — visually distinct from the gray subnav band
     above — and signals to the user that it controls the panel
     content directly beneath it. No bottom margin: the next
     panel-section starts flush against the tab nav's bottom
     border so there's no orphaned whitespace under the tabs. */
  /* Body-tabs: two clean pills side by side (no container chrome).
     Active = navy filled, inactive = white with hairline border.
     Modest height (~36px) so the row reads as a control, not a
     hero element. Top margin separates the row from the subnav
     above; bottom margin from the panel content below. */
  body.app-mode .topic-layout:not(.is-custom) > .body-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex: 0 0 auto;
    /* Tinted band — darker than the subnav above so the tab row
       reads as a contained "control center" element rather than
       two floating buttons on the page bg. Negative horizontal
       margin matches the topic-layout's horizontal padding
       (2rem at >640px, 1rem at ≤640px) so the band runs full-
       bleed to the topic-layout edges across all viewport widths.
       No top margin — band sits flush against the subnav band
       above (no orphan whitespace strip). */
    background: #e7ecf3;
    margin: 0 -2rem;
    padding: 0.7rem 2rem;
    gap: 0.65rem;
    border: none;
    border-top: 1px solid #d6dce6;
    border-bottom: 1px solid #d6dce6;
    border-radius: 0;
  }
  /* Tabs sit flush against the panel below — breathing room is
     handled by the panel's own top padding / first-row padding so
     it can be tuned per-panel without re-introducing whitespace
     between the bottom tab border and the panel content. */
  /* Narrow phones (≤640px): the topic-layout drops to 1rem
     horizontal padding, so the tab band's negative margin needs
     to follow suit or the band would over-bleed past the
     viewport edges and trigger a horizontal scrollbar. */
  @media (max-width: 640px) {
    body.app-mode .topic-layout:not(.is-custom) > .body-tabs {
      margin-left: -1rem;
      margin-right: -1rem;
      padding-left: 1rem;
      padding-right: 1rem;
    }
  }
  body.app-mode .topic-layout:not(.is-custom) > .body-tabs:has(.tab-pill-related) {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .body-tabs .tab-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #dde2ec;
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: -0.008em;
    line-height: 1.2;
    color: #4a5568;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.14s, color 0.14s, border-color 0.14s, transform 0.06s;
  }
  .body-tabs .tab-pill:hover {
    color: #1e2d44;
    border-color: #b8c3d5;
  }
  .body-tabs .tab-pill.active {
    background: #1c3a6b;
    border-color: #1c3a6b;
    color: #ffffff;
  }
  .body-tabs .tab-pill.active:hover {
    background: #163058;
    border-color: #163058;
    color: #ffffff;
  }
  .body-tabs .tab-pill:active { transform: translateY(1px); }
  @media (max-width: 500px) {
    .body-tabs .tab-pill { font-size: 0.82rem; padding: 0.42rem 0.7rem; }
  }
  @media (max-width: 380px) {
    .body-tabs .tab-pill { font-size: 0.78rem; padding: 0.4rem 0.55rem; }
  }
  /* Drop the topic-layout's top padding on mobile — the body-tabs
     hugs the very top of the panel area, immediately below the
     subnav band. */
  body.app-mode .topic-layout:not(.is-custom) {
    padding-top: 0;
  }
}
@media (min-width: 900px) {
  /* Desktop layout shows both Shortcuts (sidebar) and News Feed
     side-by-side, so the body-tabs switcher isn't needed. */
  .body-tabs { display: none; }
}

.sidebar-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* === Shortcuts card (no chrome) ===
   Transparent — same visual treatment as the News Feed. Separation
   between the two on desktop comes from a thin vertical line in the
   grid gap (see body.app-mode .topic-layout below). */
.shortcuts-sidebar {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* === Shortcuts card layout: flex column with internal-scrolling list ===
   Three regions stacked vertically: header (auto), optional multi-
   controls (auto, only rendered when multi-select is on), and the
   list-wrap (flex: 1) which is the scroll region. Header and multi-
   controls stay visible at the top of the card while the list scrolls
   beneath them.

   Desktop (>=900px): card is position:sticky to keep it pinned in the
   viewport while the news feed scrolls past it.

   Mobile (<900px): card is in normal flow (sticky has no meaning at
   the top of a stacked page), but still capped at a max-height so the
   list scrolls internally instead of pushing news feed far below. */
/* Scope the layout flex/overflow rules to ONLY the actual sidebar
   inside #section-shortcuts. Other usages of .shortcuts-sidebar
   (modals — all-topics, discover, search overlay, prompt-builder
   pickers) need natural scroll behavior, not the fixed-viewport
   structure we use in the topic-layout. */
#section-shortcuts > .shortcuts-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
/* Card title row — matches News Feed title size/weight + blue accent
   bar + separator line. Stays at the top of the card while the body
   below scrolls. */
.shortcuts-sidebar .sidebar-card-header {
  display: flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  padding: 0 0 1rem 0;
  border-bottom: 1px solid #d6dae2;
  position: relative;
  background: var(--color-bg);
  z-index: 4;
}
/* Bar is anchored to the TITLE element (not the header) so its
   geometry depends only on the title text, not on whether other
   header children (Multi-select toggle, description) are present
   or taller. This keeps the Shortcuts bar identical in height to
   the News Feed / Related Topics bars. */
.shortcuts-sidebar .sidebar-card-header::before { display: none; }
.shortcuts-sidebar .sidebar-card-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.15;
  font-weight: 600;
  /* Branded navy — same value the other panel section titles use
     so the editorial split (chrome=blue, content=off-black) is
     consistent across panels. */
  color: #1c3a6b;
  letter-spacing: -0.024em;
  margin: 0;
  padding: 0;
  flex: 0 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.shortcuts-sidebar .sidebar-card-title::before { display: none; }

/* Body scroll wrap — Content + AI scroll together. The explicit
   flex-basis: 0 and touch-action keep mobile browsers from latching
   the scroll onto an outer ancestor (which previously caused the
   "can't scroll the list" bug on mobile).

   padding-right + scrollbar-gutter give the scrollbar its own lane
   to the right of the button content so it doesn't paint over the
   chevron icons. padding-bottom gives the last shortcut some
   breathing room at the bottom of the viewport so it isn't kissed
   by the viewport edge. */
.shortcuts-scroll-wrap {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
  padding-top: 1rem;
  padding-right: 0.55rem;
  padding-bottom: max(2.5rem, calc(env(safe-area-inset-bottom, 0px) + 1.5rem));
  scrollbar-gutter: stable;
  /* Hide the visible scrollbar — the gutter stays reserved so
     content doesn't shift when scroll appears/disappears, but the
     scrollbar itself no longer competes with the floating submit
     modal for visual real estate on the panel's right edge. The
     mask-image fade at the bottom (.has-overflow-bottom) is the
     scroll-progress signal instead. */
  scrollbar-width: none;
  transition: -webkit-mask-image 0.18s, mask-image 0.18s;
}
.shortcuts-scroll-wrap::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}
/* Mobile (tabbed mode): the section header is hidden and the
   body-tabs sit directly above this scroll wrap, but the first
   subsection title ("Quick Links" / "AI Shortcuts") still needs
   visible breathing room beneath the body-tabs underline so it
   doesn't kiss the tab bar. Tighter than the original 1rem
   default since there's no longer a hidden header consuming
   space, but enough to read as a deliberate gap. */
@media (max-width: 899.98px) {
  body.app-mode .topic-layout:not(.is-custom) .shortcuts-scroll-wrap {
    padding-top: 1.4rem;
  }
}
/* When the shortcut list overflows below the visible area, fade
   the bottom ~56px so the last visible item softly fades out —
   signals "there's more below". Disappears once the user scrolls
   all the way to the bottom. */
.shortcuts-scroll-wrap.has-overflow-bottom {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 64px), rgba(0, 0, 0, 0.2) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 64px), rgba(0, 0, 0, 0.2) 100%);
}
/* Top-edge fade — mirror of the bottom fade; lights up when the
   user has scrolled past the top of the list so there's content
   above to scroll back to. Same 64px gradient length so both
   edges read identically. */
.shortcuts-scroll-wrap.has-overflow-top {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, #000 64px, #000 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, #000 64px, #000 100%);
}
/* Both edges fading at once — single combined gradient (mask-image
   accepts only one image per element, so the single-edge rules
   above need an explicit override when both classes apply). */
.shortcuts-scroll-wrap.has-overflow-top.has-overflow-bottom {
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    #000 64px,
    #000 calc(100% - 64px),
    rgba(0, 0, 0, 0.2) 100%);
  mask-image: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    #000 64px,
    #000 calc(100% - 64px),
    rgba(0, 0, 0, 0.2) 100%);
}
/* Tail spacer — pushes the last item up so it clears the viewport
   edge / mobile browser chrome on long lists. */
.shortcuts-list-tail-spacer {
  height: 3rem;
  flex-shrink: 0;
  pointer-events: none;
}
.shortcuts-scroll-wrap .ai-shortcuts-subsection .sidebar-shortcut-list > .sidebar-shortcut:last-child {
  margin-bottom: 1rem;
}

/* Subsections — Content Shortcuts + AI Shortcuts, both inside the
   single scroll wrap. */
.shortcuts-subsection {
  display: flex;
  flex-direction: column;
}
.shortcuts-subsection + .shortcuts-subsection { margin-top: 1.15rem; }
/* Editorial "eyebrow" pattern: a quiet uppercase label that anchors
   a thin horizontal rule extending to the right. The label stops
   carrying the full visual weight (no bold dark-navy heading) and
   instead reads as a section marker — the rule does the structural
   work, the label just identifies. */
.shortcuts-subsection-header {
  display: flex;
  align-items: center;
  margin: 0 0 0.6rem;
  padding: 0;
  border-bottom: none;
  flex-shrink: 0;
}
.shortcuts-subsection-title {
  font-family: var(--font-family);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  /* Sub-section title in the same branded navy as the panel
     headers, just at body-text size. */
  color: #1c3a6b;
  margin: 0;
  flex: 0 0 auto;
}
.shortcuts-subsection-header .multi-toggle {
  font-size: 0.78rem;
  gap: 0.4rem;
  margin-left: auto;
}

/* The submit bar is now positioned absolutely at the bottom of the
   .shortcuts-sidebar card (see the .shortcuts-multi-submit-wrap rule
   above). This override block from the old in-flow layout is now a
   no-op placeholder. */

/* The topic-layout cell is already viewport-bounded in app-mode, so
   the card just fills its cell. min-height: 0 lets the inner flex
   children shrink (so the list-wrap actually scrolls when the list
   overflows). */
.shortcuts-sidebar {
  height: 100%;
}

/* === Tab pills (News / Shortcuts / Related) ========================
   Two-layer structure on mobile:
     1. .subnav-tab-pills (outer) — full-bleed white "content
        controller" band. Hosts the pills tray and supplies the
        hard bottom border that separates this nav from the panel
        content directly below it.
     2. .subnav-tab-pills-tray (inner) — soft gray segmented-pill
        tray that visually groups the News/Shortcuts pills.
   Hidden on desktop (sidebar layout) and on custom-search pages. */
.subnav-tab-pills { display: none; }
.subnav-tab-pills::before { content: none; }
/* Tray is a tight equal-column grid so each tab gets exactly half
   the tray width regardless of label length. Compact, fixed
   width keeps the control from sprawling across the band. */
.subnav-tab-pills-tray {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  padding: 3px;
  flex-shrink: 0;
  position: relative;
  background: #e8eaef;
  border-radius: 999px;
  width: 220px;
  max-width: 100%;
}
.tab-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.32rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: 999px;
  font-family: var(--font-family);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.1;
  color: #3a4a64;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s, color 0.14s, box-shadow 0.14s;
}
@media (max-width: 400px) {
  .subnav-tab-pills-tray { width: 200px; }
  .tab-pill {
    padding: 0.3rem 0.5rem;
    font-size: 0.76rem;
  }
}
/* Tab pill dual labels — "News Feed" on desktop, always "News" on
   tabbed-nav widths (≤899px) so there's no dynamic swap to babysit
   and the tab pills stay tight on every mobile/tablet width. */
.tab-pill-label-short { display: none; }
/* Body-tab label fallbacks. The long labels ("News Feed" / "AI and
   Content Shortcuts") show by default; below 500px the Shortcuts
   tab falls back to the shorter "AI Shortcuts" so it fits inside
   the half-tray slot. */
@media (max-width: 500px) {
  .body-tabs .tab-pill-shortcuts .tab-pill-label-long { display: none; }
  .body-tabs .tab-pill-shortcuts .tab-pill-label-short { display: inline; }
}
.tab-pill:hover { color: #0f1a2e; }
.tab-pill.active {
  color: white;
  box-shadow: 0 1px 2px rgba(15, 26, 46, 0.12);
}
.tab-pill-newsfeed.active  { background: #2f7a55; }
.tab-pill-shortcuts.active { background: #3f6ab3; }
.tab-pill-related.active   { background: #b04e1d; }
/* "All Topics +" lives inside the pill group on mobile but never
   becomes the active state (it opens a modal). Reads as a plain
   text-style pill matching the inactive News/Shortcuts. */
.tab-pill-all-topics { text-decoration: none; }
.tab-pill-all-topics.active {
  background: transparent;
  color: var(--color-text-muted);
  box-shadow: none;
}

/* Active-tab section visibility — only one section visible at a time
   on mobile. */
@media (max-width: 899.98px) {
  /* Body tabs are the active navigator now — no subnav tab pills
     on mobile. (Rule kept here as documentation; the element is
     no longer rendered.) */
  /* Hide the "Related Topics +" modal-trigger sibling on mobile —
     on app-mode pages the related list now lives inline in the
     chip strip below. trimOverflowLinks sets an inline
     `style.display = 'inline-block'` on this button, so we need
     !important to override. */
  body.app-mode #sub-header.is-subnav #subnav-related-btn {
    display: none !important;
  }
  /* Mobile: pills ALWAYS sit on a new row below the page title (not
     conditionally on space). Title group is forced full-width via
     flex-basis: 100%, which forces wrap regardless of available
     horizontal room. Generous row-gap gives the pills breathing
     room from the title above. */
  body.app-mode #sub-header.is-subnav .topic-banner-row,
  body.app-mode #sub-header.is-home-subnav .topic-banner-row {
    flex-wrap: wrap;
    row-gap: 0.85rem;
    align-items: center;
  }
  body.app-mode #sub-header.is-subnav .topic-banner-titlegroup,
  body.app-mode #sub-header.is-home-subnav .topic-banner-titlegroup {
    flex-basis: 100%;
    margin-right: 0;
  }

  /* === Mobile subnav (home + topic) ============================
     Two-row stack: page title → related/featured chip strip.
     Tabs no longer live in the subnav — they now sit at the top
     of the body content (.body-tabs) as a true tab navigator that
     controls the panel beneath it. The subnav band is now purely
     an identity strip: "what page am I on, what's near it."
     Scoped via :has() to rows that actually carry the chip strip,
     so custom-search pages (title-only) keep their default flex
     layout and don't render an empty grid row. */
  body.app-mode #sub-header.is-subnav .topic-banner-row:has(.subnav-chip-wrap) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "chips";
    /* Tight row-gap so the topic scroll reads as a direct
       sub-list of the page title, not a separate row below. */
    row-gap: 0;
    flex-wrap: initial;
    width: 100%;
    align-items: center;
  }
  /* Mobile subnav is now a compact two-row band — title sits
     above the chip strip on the same gray surface, with a
     generous top inset and a clear gap into the chip strip
     below so the page title has obvious breathing room. */
  body.app-mode #sub-header.is-subnav .topic-banner {
    padding: 1.05rem 1rem 0;
  }
  body.app-mode #sub-header.is-subnav .topic-banner-titlegroup {
    grid-area: title;
    flex-basis: auto;
    margin-right: 0;
    min-width: 0;
  }
  /* Chip strip wrap. Sits on the same gray fill as the title row,
     with a single faint top hairline that lightly separates it
     from the title above without breaking the unified band feel.
     Full-bleed via negative margin so the scrollable row extends
     edge-to-edge within the band. */
  body.app-mode #sub-header.is-subnav .subnav-chip-wrap {
    grid-area: chips;
    position: relative;
    min-width: 0;
    /* Align the topic scroll's left edge with the page-title icon
       (no negative margin on the left). Right side keeps a -1rem
       bleed so chips that scroll past the viewport fade out into
       the page edge instead of stopping in the middle. */
    margin-left: 0;
    margin-right: -1rem;
    /* Separator border removed so the topic scroll reads as a
       direct sub-list of the page title above, not a separate
       row divided by a rule. */
    border-top: none;
    border-bottom: none;
    background: transparent;
  }
  /* Inner scroller: horizontal overflow + inset padding so chip
     content stays inside a readable margin while the bordered
     band beneath it goes edge-to-edge. The mask-image fade is
     applied to THIS element, so the wrap's borders are untouched
     by the fade. */
  body.app-mode #sub-header.is-subnav .subnav-topics-inline {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.15rem;
    margin: 0;
    /* No left padding — the chip's own 0.75rem padding gives the
       first chip's text a small inset, and the wrap's parent banner
       padding (1rem) already places the wrap edge at the same x as
       the page-title icon. Extra padding-left here would push the
       chips visibly inboard of the title icon. */
    padding: 0.6rem 1rem 0.65rem 0;
    border-top: none;
    border-bottom: none;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transition: mask-image 0.18s ease, -webkit-mask-image 0.18s ease;
  }
  /* Mask gradient is now driven by .can-scroll-* classes on the
     wrap (see rules outside this media query). When scrolled to
     the end, the can-scroll-right class drops and the mask
     automatically goes flat. */
  body.app-mode #sub-header.is-subnav .subnav-topics-inline::before {
    display: none; /* drop the desktop vertical divider before the chips */
  }
  body.app-mode #sub-header.is-subnav .subnav-topics-inline::-webkit-scrollbar {
    display: none;
  }
  body.app-mode #sub-header.is-subnav .subnav-chip-wrap {
    margin-left: 0 !important;
  }
  body.app-mode #sub-header.is-subnav .subnav-topics-inline {
    /* Tight + symmetric vertical padding so the chip strip stays
       close to the title row above AND the absolutely-positioned
       scroll arrows (which center on the wrap's 50%) align with
       the chip text vertically. Asymmetric padding made arrows
       appear visually below the chip baseline. */
    padding: 0.4rem 1rem 0.4rem 0 !important;
  }
  /* Mobile arrow placement: left edge sits flush at the wrap's
     left edge (= banner content edge = 1rem from viewport), which
     matches the right arrow's distance from the viewport's right
     edge — so the two arrows look symmetric. Default 1rem-from-
     wrap-edge offset put the left arrow 2rem from viewport while
     the right one stayed at 1rem, throwing the symmetry off. */
  body.app-mode #sub-header.is-subnav .subnav-chip-arrow-left {
    left: 0 !important;
  }
  body.app-mode #sub-header.is-subnav .subnav-topics-inline > .subnav-topic-link:first-child {
    /* Flush with the wrap edge — chip text lands at the same x as
       the page-title icon glyph (both at banner's 1rem inset). */
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  body.app-mode #sub-header.is-subnav .subnav-topic-link {
    flex: 0 0 auto;
    white-space: nowrap;
    /* Mobile chips: exact match to the desktop final-state — the
       #sub-header .subnav-topic-link rule later in the stylesheet
       wins on desktop with color #4a6a8a + weight medium (500),
       so mobile mirrors that here rather than the base
       .subnav-topic-link spec. */
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    text-transform: none;
    letter-spacing: -0.005em;
    color: #4a6a8a;
    line-height: 1.1;
    padding: 0.4rem 0.75rem;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 999px;
    text-decoration: none;
  }
  body.app-mode #sub-header.is-subnav .subnav-topic-link:hover {
    color: #1c3a6b;
    background: #eef1f6;
    text-decoration: none;
  }
  /* "All Topics +" (home) / "More +" (topic pages) lives inline as
     the last item in the scrollable chip strip. Sits at the same
     visual weight as the surrounding chips, just one notch heavier
     and a touch off-color (muted teal-grey) so it still reads as a
     distinct CTA without bolding past the topic links. */
  body.app-mode #sub-header.is-subnav .subnav-all-topics-link,
  body.app-mode #sub-header.is-subnav .subnav-more-link {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    padding: 0.2rem 0.5rem;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #6c7a91;
    font-family: var(--font-family);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
  }
  body.app-mode #sub-header.is-subnav .subnav-all-topics-link:hover,
  body.app-mode #sub-header.is-subnav .subnav-more-link:hover {
    color: #3a4a64;
    text-decoration: none;
    background: rgba(15, 26, 46, 0.05);
  }
  body.app-mode .topic-layout:not(.is-custom) > #section-shortcuts,
  body.app-mode .topic-layout:not(.is-custom) > #section-newsfeed,
  body.app-mode .topic-layout:not(.is-custom) > #section-related {
    display: none;
  }
  body.app-mode.active-tab-newsfeed .topic-layout:not(.is-custom) > #section-newsfeed { display: flex; }
  body.app-mode.active-tab-shortcuts .topic-layout:not(.is-custom) > #section-shortcuts { display: flex; }
  body.app-mode.active-tab-related   .topic-layout:not(.is-custom) > #section-related   { display: flex; }

  /* === Tabbed-nav hierarchy bump ============================
     In tabbed (mobile/tablet) mode the active tab already labels
     the panel ("News Feed" / "Shortcuts" / "Related"), so the
     duplicate section-title row inside each panel is redundant.
     We hide those and promote the inner labels up one rung:
       Quick Links / AI Shortcuts → section-title styling
       Discover / Learn / Analyze / More → editorial eyebrow
     For panels with no subsections (News Feed / Related), the
     content sits directly under the tab bar.

     Scoped to .topic-layout:not(.is-custom) — custom-search pages
     don't use the tab system and still need their inline section
     titles. */
  body.app-mode .topic-layout:not(.is-custom) .shortcuts-sidebar .sidebar-card-header,
  body.app-mode .topic-layout:not(.is-custom) .newsfeed-title,
  body.app-mode .topic-layout:not(.is-custom) .related-title {
    display: none;
  }

  /* Mobile subsection-header: spacing only, no border-bottom rule.
     The accent chip + label carries the section identity; an
     extra separator just adds visual noise. */
  body.app-mode .topic-layout:not(.is-custom) .shortcuts-subsection-header {
    margin: 0 0 0.85rem;
    padding: 0;
    border-bottom: none;
    gap: 0;
  }
  body.app-mode .topic-layout:not(.is-custom) .shortcuts-subsection-header::after {
    display: none;
  }
  body.app-mode .topic-layout:not(.is-custom) .shortcuts-subsection-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: #1e2d44;
    letter-spacing: -0.024em;
    line-height: 1.15;
    text-transform: none;
    display: inline-flex;
    align-items: center;
  }
  body.app-mode .topic-layout:not(.is-custom) .shortcuts-subsection-title::before { display: none; }

  /* Section eyebrow on mobile: black/off-black text with a thick
     accent-colored underline. Matches the desktop sidebar treatment
     — the underline does the color-coding, not the text color. */
  body.app-mode .topic-layout:not(.is-custom) .ai-shortcut-group { padding-top: 0; }
  body.app-mode .topic-layout:not(.is-custom) .ai-shortcut-group + .ai-shortcut-group { padding-top: 1.2rem; }
  body.app-mode .topic-layout:not(.is-custom) .ai-shortcut-group-label {
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.014em;
    text-transform: none;
    color: #1a2235;
    margin: 0 0 0.85rem;
    padding-bottom: 0;
    border-bottom: none;
    line-height: 1.2;
  }
}

/* === Related Topics inline section ==================================
   Matches the news feed's structural shape (header sticky inside a
   scroll wrap, content scrolls behind it) but with the orange accent
   bar and a vertical list of related topic links. */

/* === Quick Links 2x2 grid =========================================
   Sits in the Shortcuts card's first subsection. Four tiles
   (Google News / Reddit / X / YouTube) arranged in a 2-column grid
   on the sidebar / mobile, each tile a compact card with the brand
   emoji on the left and the name on the right. */
/* Chip-strip wrapper + scroll arrows + fade gradients — apply at
   EVERY viewport (mobile / tablet / desktop) whenever the wrap has
   horizontal overflow. Arrows themselves only show on hover-capable
   pointers (mouse/desktop); touch devices scroll natively via swipe.
   isolation: isolate forces a stacking context on the wrap so the
   fade pseudo-elements paint above the scrollable chip strip —
   without it Safari's scroll container was creating its own
   stacking context and the fade rendered BEHIND the chips. */
.subnav-chip-wrap {
  position: relative;
  /* Take remaining horizontal space in .topic-banner-row so the
     scroll strip extends to the row's right edge (matching the
     news feed's right edge below). Without flex: 1, the wrap
     shrinks to content width and the strip ends well before the
     content boundary — leaving an awkward gap on the right. */
  flex: 1 1 0;
  min-width: 0;
  isolation: isolate;
}
/* Title↔topics vertical separator — pinned to the left edge of the
   chip wrap rather than the scrolling strip inside it, so it stays
   visible regardless of scroll position and isn't faded by the
   scroll-mask gradient or covered by the left scroll arrow. */
.subnav-chip-wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 1.5rem;
  background: #b9c2d0;
  pointer-events: none;
  z-index: 1;
}
/* Mobile: hide the title↔topics separator entirely. The topic
   scroll reads as a direct sub-list of the page title, no rule
   needed between them. !important because there's been other
   high-specificity chip-wrap rules in the mobile @media block
   above (margin-left/-right, border-top/bottom) that share the
   selector path; this guarantees the pseudo stays hidden. */
@media (max-width: 899.98px) {
  .subnav-chip-wrap::before { display: none !important; }
  body.app-mode #sub-header.is-subnav .subnav-chip-wrap::before { display: none !important; }
}
/* When the strip has no chips (trim hid them all), suppress the
   separator so the title group doesn't look like it has a dangling
   bar next to it. */
.subnav-chip-wrap:has(.subnav-topics-inline.is-empty)::before { display: none; }
.subnav-chip-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 3;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(15, 26, 46, 0.12);
  border-radius: 999px;
  color: #2c4467;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 4px rgba(15, 26, 46, 0.12);
  transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.08s, box-shadow 0.14s;
}
.subnav-chip-arrow svg { width: 10px; height: 10px; display: block; }
.subnav-chip-arrow:hover {
  background: var(--color-bg);
  border-color: rgba(15, 26, 46, 0.28);
  color: #0f1a2e;
  box-shadow: 0 3px 8px rgba(15, 26, 46, 0.18);
  transform: translate(0, -50%) scale(1.04);
}
.subnav-chip-arrow:active { transform: translate(0, calc(-50% + 1px)); }
.subnav-chip-arrow-left  { left: 1rem; }
.subnav-chip-arrow-right { right: 1rem; }
/* Desktop banner has wider (2rem) horizontal padding, but the
   arrows sit slightly inside the chip area (not aligned to the
   page-padding edge) so the strip visually extends further right
   before fading into the arrow. */
@media (min-width: 900px) {
  .subnav-chip-arrow-left  { left: 0.5rem; }
  .subnav-chip-arrow-right { right: 0.5rem; }
}

/* Mobile / tabbed-nav widths: the chip strip is now flush in the
   middle row of the subnav grid, so no negative-margin
   compensation is needed for the arrow vertical centering — its
   wrap's bounding box matches the strip's visual center. */

/* Fade via mask-image ON THE STRIP ITSELF instead of an overlay
   pseudo on the wrap. Pseudo overlays were unreliable because
   Safari's scroll-container stacking context kept lifting chips
   above the overlay no matter what z-index gymnastics we tried.
   The mask makes the strip's own content fade to transparent at
   the edges — there's nothing to stack against because the chips
   ARE the gradient at that edge. The subnav band background
   (#f7f8fa) shows through. Arrows sit above naturally. */
/* Desktop fade — wide three-stop gradient because the hover-only
   scroll arrow needs ~50px of fully-transparent area to sit on top
   of without chip text bleeding through. Only kicks in at
   (hover: hover) widths where the arrows actually render. */
@media (hover: hover) and (pointer: fine) {
  /* Long, prominent fade that ends right where the arrow chip
     sits (arrows are 1rem/2rem in from the edge, ~22px wide, so
     the arrow's outer edge is ~38–54px from the wrap edge). We
     ramp the gradient from fully opaque to transparent over a
     wide region so chip text clearly softens as it approaches
     the arrow — no hard cliff. */
  .subnav-chip-wrap.can-scroll-right .subnav-topics-inline {
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 70px), transparent calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 70px), transparent calc(100% - 24px), transparent 100%);
  }
  .subnav-chip-wrap.can-scroll-left .subnav-topics-inline {
    mask-image: linear-gradient(to left, #000 0%, #000 calc(100% - 70px), transparent calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 calc(100% - 70px), transparent calc(100% - 24px), transparent 100%);
  }
  .subnav-chip-wrap.can-scroll-left.can-scroll-right .subnav-topics-inline {
    mask-image: linear-gradient(to right,
      transparent 0%, transparent 24px,
      #000 70px, #000 calc(100% - 70px),
      transparent calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
      transparent 0%, transparent 24px,
      #000 70px, #000 calc(100% - 70px),
      transparent calc(100% - 24px), transparent 100%);
  }
  /* Desktop banner has 2rem horizontal padding, so the arrow is
     further inset. Widen the transparent zone accordingly. */
  @media (min-width: 900px) {
    .subnav-chip-wrap.can-scroll-right .subnav-topics-inline {
      mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 180px), transparent calc(100% - 54px), transparent 100%);
      -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 180px), transparent calc(100% - 54px), transparent 100%);
    }
    .subnav-chip-wrap.can-scroll-left .subnav-topics-inline {
      mask-image: linear-gradient(to left, #000 0%, #000 calc(100% - 180px), transparent calc(100% - 54px), transparent 100%);
      -webkit-mask-image: linear-gradient(to left, #000 0%, #000 calc(100% - 180px), transparent calc(100% - 54px), transparent 100%);
    }
    .subnav-chip-wrap.can-scroll-left.can-scroll-right .subnav-topics-inline {
      mask-image: linear-gradient(to right,
        transparent 0%, transparent 54px,
        #000 180px, #000 calc(100% - 180px),
        transparent calc(100% - 54px), transparent 100%);
      -webkit-mask-image: linear-gradient(to right,
        transparent 0%, transparent 54px,
        #000 180px, #000 calc(100% - 180px),
        transparent calc(100% - 54px), transparent 100%);
    }
  }
}

/* Mobile / touch fade — much narrower (24px linear ramp) because
   there's no scroll arrow to camouflage. The fade just hints
   "more scrollable content" without sandwiching the entire chip
   list when the user is mid-scroll with content on both sides.
   Activates whenever the device lacks a hover-capable pointer
   (phones, tablets, touch-only laptops). */
@media (pointer: coarse), (hover: none) {
  .subnav-chip-wrap.can-scroll-right .subnav-topics-inline {
    mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 24px), transparent 100%);
  }
  .subnav-chip-wrap.can-scroll-left .subnav-topics-inline {
    mask-image: linear-gradient(to left, #000 0%, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 calc(100% - 24px), transparent 100%);
  }
  .subnav-chip-wrap.can-scroll-left.can-scroll-right .subnav-topics-inline {
    mask-image: linear-gradient(to right,
      transparent 0%, #000 24px, #000 calc(100% - 24px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
      transparent 0%, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
}

/* Arrows revealed only on hover-capable pointers and only when the
   strip has scroll headroom in that direction. */
@media (hover: hover) and (pointer: fine) {
  .subnav-chip-wrap.can-scroll-left  .subnav-chip-arrow-left  { display: inline-flex; }
  .subnav-chip-wrap.can-scroll-right .subnav-chip-arrow-right { display: inline-flex; }
}

/* Desktop (≥900px): chip wrap fills the available space between the
   title group and the (hidden) tab pills on the same row. The chip
   strip inside handles its own horizontal scroll — the wrap just
   needs flex: 1 + min-width: 0 so it consumes the remaining row
   space and gives the strip a constrained width to overflow against. */
@media (min-width: 900px) {
  #sub-header.is-subnav .topic-banner-row {
    flex-wrap: nowrap;
  }
  #sub-header.is-subnav .topic-banner-row > .subnav-chip-wrap {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* === Quick Links — bullet rows ============================
   Quick Links share the same bullet-row layout as AI Shortcuts so
   the two lists read as one cohesive stack. The row is an <a>
   (external link) rather than a button — no checkbox marker, just
   a dot + name. Padding + hover mirror the AI Shortcut rows so
   both lists feel identical to use. */
.shortcuts-sidebar .quick-links-bullet-list {
  padding-top: 0;
  margin-top: -0.25rem;
}

/* Tabbed/tabular viewports (≤899px in app-mode): Quick Links go
   2-column with content-sized columns so the pairs sit close
   together instead of stranded with huge empty space inside
   each grid column. AI Shortcuts stays single-column because
   the longer item names + grouped sublabels read better as a
   continuous stack. */
@media (min-width: 480px) and (max-width: 899.98px) {
  body.app-mode .shortcuts-sidebar .quick-links-bullet-list {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: start;
    column-gap: 1.5rem;
    row-gap: 0;
  }
}
.shortcuts-sidebar .quick-links-bullet-list .quick-link-pill {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.36rem 0.5rem 0.36rem 0.45rem;
  background: transparent;
  border: none;
  border-bottom: none;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background 0.14s;
}
.shortcuts-sidebar .quick-links-bullet-list .quick-link-pill:hover {
  background: #eff4fb;
  text-decoration: none;
}

/* === AI Shortcuts grouped subsections ===
   Inside the AI Shortcuts subsection, shortcuts are bucketed by
   category (Discover / Learn / Analyze / More). Each bucket renders
   as a small uppercase label followed by a bullet list. */
.ai-shortcut-group {
  /* First group sits flush against the subsection header — the
     header's own margin-bottom is the gap. Only subsequent groups
     get the extra padding-top that separates one group from the
     next (Discover → Learn → Analyze → More). */
  padding-top: 0;
}
.ai-shortcut-group + .ai-shortcut-group {
  padding-top: 0.95rem;
}
.ai-shortcut-group-label {
  /* Quiet uppercase mini-heading — reads as a category divider
     above its bullet list rather than competing with the AI
     Shortcuts subsection title (which sits one level up) or the
     shortcut names below. */
  display: block;
  font-family: var(--font-family);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a96ad;
  margin: 0 0 0.55rem;
  padding: 0;
  line-height: 1.2;
}
.ai-shortcut-bullet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.ai-shortcut-bullet-row {
  margin: 0;
  padding: 0;
}
/* AI shortcut row — single clickable button. Default state shows a
   bullet dot in the marker slot; on selection, the marker swaps to
   a filled blue circle with a white check. Submission always
   routes through the sticky bottom bar. */
.shortcuts-sidebar .sidebar-shortcut.ai-shortcut-select-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.36rem 0.5rem 0.36rem 0.45rem;
  background: transparent;
  border: none;
  border-bottom: none;
  border-radius: 6px;
  text-align: left;
  font-family: var(--font-family);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.14s, color 0.12s;
}
.shortcuts-sidebar .sidebar-shortcut-list > .sidebar-shortcut.ai-shortcut-select-btn:last-child {
  border-bottom: none;
}
.shortcuts-sidebar .ai-shortcut-select-btn .sidebar-shortcut-name {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
  letter-spacing: -0.005em;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
@media (hover: hover) {
  .shortcuts-sidebar .ai-shortcut-select-btn:hover {
    background: #eff4fb;
  }
}

/* Marker slot — sits in the left column. Renders the bullet dot by
   default; .is-multi-selected on the parent swaps it for a filled
   blue circle with a white check icon. Same 16×16 footprint either
   way so name baseline stays put on toggle. */
.ai-shortcut-marker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  transition: background 0.14s, color 0.14s;
}
.ai-shortcut-marker-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.6;
  transition: opacity 0.12s;
}
.ai-shortcut-marker-check {
  display: none;
  position: absolute;
}
.ai-shortcut-select-btn.is-multi-selected .ai-shortcut-marker {
  background: #2c4467;
  color: #fff;
}
.ai-shortcut-select-btn.is-multi-selected .ai-shortcut-marker-dot {
  display: none;
}
.ai-shortcut-select-btn.is-multi-selected .ai-shortcut-marker-check {
  display: block;
}
.ai-shortcut-select-btn.is-multi-selected .sidebar-shortcut-name {
  color: #2c4467;
  font-weight: 600;
}

/* Custom-search page: bullet lists go 2-column at ≥720px so the
   single-column page uses some of its horizontal room — fixed
   column count (not auto-fit) so different groups don't snap to
   different layouts as item counts vary. */
.topic-layout.is-custom .ai-shortcuts-subsection .ai-shortcut-bullet-list,
.topic-layout.is-custom .quick-links-subsection .quick-links-bullet-list {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1rem;
  row-gap: 0;
}
@media (min-width: 720px) {
  .topic-layout.is-custom .ai-shortcuts-subsection .ai-shortcut-bullet-list,
  .topic-layout.is-custom .quick-links-subsection .quick-links-bullet-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* On wide custom-search pages the columns can stretch the full
   available width — content takes the natural inset from the
   layout's outer padding. */
.topic-layout.is-custom #section-shortcuts {
  max-width: none;
  margin: 0;
}

/* Inline toast — appears briefly above the AI list when the user
   taps a Quick Link while multi-select is on. Pure CSS animation on
   the .is-visible class. */
.shortcuts-toast {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translate(-50%, 8px);
  padding: 0.5rem 0.85rem;
  background: rgba(15, 26, 46, 0.92);
  color: white;
  border-radius: 999px;
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 50;
  white-space: nowrap;
}
.shortcuts-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* The card needs position: relative for the absolute toast positioning. */
.shortcuts-sidebar { position: relative; }

.related-panel {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.related-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.15;
  font-weight: 600;
  /* Branded navy — matches .newsfeed-title / .sidebar-card-title. */
  color: #1c3a6b;
  letter-spacing: -0.024em;
  margin: 0;
  padding: 0 0 1rem 0;
  border-bottom: 1px solid #d6dae2;
  background: var(--color-bg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  position: relative;
}
.related-title::before { display: none; }
@media (max-width: 640px) {
  .related-title { font-size: 1.05rem; }
}
.related-scroll-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  position: relative;
  padding-bottom: max(3rem, calc(env(safe-area-inset-bottom, 0px) + 2rem));
}
/* Related-section links match the sidebar-shortcut flat row style:
   icon on the left, name, chevron on the right, hairline divider
   between rows. Overrides the default boxed .sidebar-shortcut style. */
.related-panel .sidebar-shortcut-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.related-panel .sidebar-shortcut.related-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.7rem 0.5rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid #e6e8ec;
  border-radius: 0;
  font-family: var(--font-family);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.related-panel .sidebar-shortcut.related-link:hover {
  background: #f6f7f9;
  color: var(--color-primary);
}
.related-panel .sidebar-shortcut.related-link:last-child {
  border-bottom: none;
}
.related-link .sidebar-shortcut-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  flex-shrink: 0;
  color: var(--color-primary, #385c95);
}
.related-link .sidebar-shortcut-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.related-link .sidebar-shortcut-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.related-link .sidebar-shortcut-chev {
  color: var(--color-text-light);
  font-size: 1rem;
  line-height: 1;
  opacity: 0.5;
  flex-shrink: 0;
}

.sidebar-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.5rem;
  margin-bottom: 1.15rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid #e2e8f0;
}
/* On mobile the shortcuts render as full-width list rows (each row has
   its own border-bottom). Drop the header's margin-bottom so the
   header's border-bottom abuts the first row — the same line then
   reads as the top border of the first shortcut and the list flows in
   smoothly without a visible gap. */
@media (max-width: 640px) {
  .shortcuts-sidebar .sidebar-card-header { margin-bottom: 0; }
}

/* Topic tag next to section titles — a quiet sentence-case label
   sat to the right of the section title and separated by a thin
   vertical divider. No dot, no uppercase, no bold: the section
   title and the green/navy/orange accent bar do the heavy lifting,
   and the tag just identifies which topic the section is scoped to.
   Reads like a breadcrumb anchor without becoming another button. */
.section-topic-pill {
  display: inline-flex;
  align-items: center;
  line-height: 1.15;
  font-family: var(--font-family);
  font-size: 0.82rem;
  font-weight: 500;
  color: #8a96ad;
  background: transparent;
  border: none;
  border-left: 1px solid #d6dae2;
  border-radius: 0;
  padding: 0.05rem 0 0.05rem 0.85rem;
  letter-spacing: -0.005em;
  text-transform: none;
  margin-left: 0.85rem;
  /* Was flex-shrink: 0 + white-space: nowrap, which forced long
     topic names like "Defense, Security, Foreign Policy" to push
     past the panel's right edge (cut off mid-word). Now the suffix
     shrinks/ellipsizes when there isn't room. */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: none;
}

.sidebar-card-desc {
  margin: 0.1rem 0 0.1rem;
  padding: 0;
  border: none;
  font-size: 0.88rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.35;
  color: var(--color-text-muted);
  letter-spacing: -0.005em;
}

.sidebar-card-icon {
  font-size: 1rem;
  opacity: 0.85;
}

.sidebar-card-title {
  font-family: var(--font-family);
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 600;
  color: #1e2d44;
  flex-basis: 100%;
  letter-spacing: -0.015em;
  margin: 0 0 0.15rem 0;
  padding-left: 0.95rem;
  border-left: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.sidebar-card-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: -0.12em;
  bottom: -0.12em;
  width: 4px;
  background: #4a7cc9;
  border-radius: 999px;
}


/* Shortcuts list inside sidebar card */
.sidebar-group-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-light);
  margin: 0.65rem 0 0.4rem;
}
.sidebar-group-label:first-child { margin-top: 0; }

.sidebar-shortcut-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.35rem;
}

/* AI Shortcuts — list rows on mobile, card grid on wider widths.
   Mobile uses hairline dividers; desktop uses bordered cards in a
   multi-column auto-fit grid so they fill the row gracefully. */

.shortcuts-sidebar .sidebar-shortcut-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}
.shortcuts-sidebar .sidebar-shortcut {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.55rem 0.5rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid #e6e8ec;
  border-radius: 0;
  text-align: left;
  font-family: var(--font-family);
  font-size: 0.875rem;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.shortcuts-sidebar .sidebar-shortcut-list > .sidebar-shortcut:last-child {
  border-bottom: none;
}
@media (hover: hover) {
  .shortcuts-sidebar .sidebar-shortcut:hover {
    background: var(--color-bg-light, #f6f7f9);
    color: var(--color-primary);
  }
}
.shortcuts-sidebar .sidebar-shortcut:focus { outline: none; }
.shortcuts-sidebar .sidebar-shortcut:active {
  background: var(--color-bg-light, #f6f7f9);
  color: var(--color-primary);
}
.shortcuts-sidebar .sidebar-shortcut-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: 0.85;
}
.shortcuts-sidebar .sidebar-shortcut-icon img,
.shortcuts-sidebar .sidebar-shortcut-icon svg {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
}
.shortcuts-sidebar .sidebar-shortcut-icon svg {
  stroke: var(--color-primary, #385c95);
}
.shortcuts-sidebar .sidebar-shortcut-name {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shortcuts-sidebar .sidebar-shortcut-chev {
  color: var(--color-text-light);
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0.5;
  flex-shrink: 0;
  transition: transform 0.15s, opacity 0.15s, color 0.15s;
}
@media (hover: hover) {
  .shortcuts-sidebar .sidebar-shortcut:hover .sidebar-shortcut-chev {
    opacity: 1;
    transform: translateX(2px);
    color: var(--color-primary);
  }
}

/* === Per-breakpoint button density ====================================
   Three modes for the AI Shortcuts list:
   - Desktop sidebar (≥900px): single column, taller rows so the buttons
     read as proper hit-targets in the sticky sidebar.
   - Stacked tablet (641–899px): card stacks above the news feed and has
     lots of horizontal room — split shortcuts into 2 columns with
     compact rows.
   - Mobile (≤640px): back to single column at compact height.

   Content Shortcuts always stays single-column — there are only ~4 of
   them and they shouldn't compete with the AI list for visual weight. */
@media (min-width: 900px) {
  .shortcuts-sidebar .sidebar-shortcut {
    padding: 0.85rem 0.5rem;
    gap: 0.65rem;
  }
  .shortcuts-sidebar .sidebar-shortcut-icon,
  .shortcuts-sidebar .sidebar-shortcut-icon img {
    width: 20px;
    height: 20px;
  }
}


.sidebar-shortcut {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-family: var(--font-family);
  font-size: 0.83rem;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}

@media (hover: hover) {
  .sidebar-shortcut:hover {
    background: var(--color-bg-light);
  }
}

.sidebar-shortcut-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
}

.sidebar-shortcut-name {
  flex: 1;
  font-weight: var(--font-weight-medium);
}

/* Topics list */
.sidebar-topic-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* Topics card "View All Topics +" CTA */

/* Mobile (tabular sidebar / pill-switched view): give each shortcut
   row more vertical breathing room so they're comfortable tap
   targets and feel less cramped than the desktop sidebar rows. */
@media (max-width: 899.98px) {
  .shortcuts-sidebar .sidebar-shortcut {
    padding-top: 0.95rem;
    padding-bottom: 0.95rem;
    font-size: 0.92rem;
  }
  .shortcuts-sidebar .sidebar-shortcut-icon,
  .shortcuts-sidebar .sidebar-shortcut-icon img {
    width: 20px;
    height: 20px;
  }
}

/* Overflow related items: hidden on desktop, always visible on mobile
   (tabular nav shows the full list since it's the dedicated panel). */
@media (min-width: 900px) {
  .shortcuts-sidebar .sidebar-shortcut.is-overflow-related { display: none; }
}

/* CTA links at the bottom of Topics / Related Topics cards */
.topics-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  white-space: nowrap;
}
.topics-card-footer-link {
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  letter-spacing: -0.005em;
  padding: 0.35rem 0.7rem;
  border-radius: 3px;
  transition: background 0.12s, color 0.12s;
}
.topics-card-footer-link:hover {
  background: var(--color-accent);
}
.topics-card-footer-link + .topics-card-footer-link {
  margin-left: 0.15rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--color-border);
  border-radius: 0 3px 3px 0;
}

/* Related Topics modal */
.related-topics-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.related-modal-card {
  position: relative;
  background: var(--color-bg);
  border-radius: 6px;
  width: 100%;
  max-width: 420px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.35);
  animation: modalPop 0.18s ease-out;
}
.related-modal-close {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  width: 30px;
  height: 30px;
  background: var(--color-bg-light, #f3f4f6);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text);
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s;
}
.related-modal-close:hover {
  background: var(--color-bg-light);
  color: var(--color-text);
}
.related-modal-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.95rem 1.15rem 0.9rem;
  border-bottom: 1px solid var(--color-border);
}
.related-modal-eyebrow {
  font-family: var(--font-family);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: #9aa3b3;
  line-height: 1;
}
.related-modal-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.15;
}
.related-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}
.related-modal-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.15rem;
  color: var(--color-text);
  text-decoration: none !important;
  transition: background 0.12s, color 0.12s;
}
@media (hover: hover) {
  .related-modal-row:hover {
    background: var(--color-bg-light, #f6f7f9);
    color: var(--color-primary);
  }
}
.related-modal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.55;
  flex-shrink: 0;
}
@media (hover: hover) { .related-modal-row:hover .related-modal-dot { opacity: 1; } }
.related-modal-name {
  flex: 1;
  font-size: 0.88rem;
  font-weight: var(--font-weight-medium);
}
.related-modal-chev {
  color: var(--color-text-light);
  font-size: 1rem;
  opacity: 0.4;
}
@media (hover: hover) {
  .related-modal-row:hover .related-modal-chev {
    opacity: 1;
    color: var(--color-primary);
  }
}
.related-modal-footer {
  padding: 0.65rem 1.15rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-light, #f6f7f9);
  text-align: center;
}
.related-modal-all {
  font-size: 0.82rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
}
.related-modal-all:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Home's "All Topics" panel — full catalog grouped by parent */
.all-topics-sidebar-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.all-topics-sidebar-group {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.85rem;
}
.all-topics-sidebar-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.all-topics-sidebar-parent {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  text-decoration: none;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.all-topics-sidebar-parent:hover { text-decoration: underline; }

.all-topics-sidebar-subs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
}
.all-topics-sidebar-sub {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  background: var(--color-bg-light, #f4f5f7);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  font-size: 0.78rem;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.all-topics-sidebar-sub:hover {
  background: var(--color-accent);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* "Featured" pill label beside the card title */
.sidebar-card-label {
  margin-left: auto;
  padding: 0.12rem 0.55rem;
  background: var(--color-accent);
  color: var(--color-primary);
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sidebar-topic {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: var(--font-weight-medium);
  transition: background 0.15s, border-color 0.15s;
}

.sidebar-topic:hover {
  background: var(--color-bg-light);
  border-color: var(--color-primary-light);
  text-decoration: none;
}

.sidebar-topic-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}

.sidebar-topic-name {
  flex: 1;
}

.sidebar-topic-arrow {
  color: var(--color-text-light);
  font-size: 0.85rem;
}

.sidebar-more-note {
  font-size: 0.75rem;
  color: var(--color-text-light);
  font-style: italic;
  padding: 0.35rem 0 0;
  text-align: center;
}

.sidebar-empty {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin: 0;
}


/* === All Topics view (homepage's "All Topics" tab) === */
.all-topics-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.all-topics-group {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1.1rem;
}

.all-topics-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.all-topics-parent {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--color-text);
  margin-bottom: 0.85rem;
  padding: 0.7rem 0.95rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.05s;
}

.all-topics-parent:hover {
  text-decoration: none;
  background: var(--color-accent);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.all-topics-parent:active {
  transform: translateY(1px);
}

.all-topics-parent-accent {
  width: 4px;
  height: 22px;
  background: var(--color-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

.all-topics-parent-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.015em;
  flex: 1;
}

.all-topics-parent-arrow {
  color: var(--color-text-light);
  font-size: 1rem;
  transition: color 0.15s, transform 0.15s;
}

.all-topics-parent:hover .all-topics-parent-arrow {
  color: var(--color-primary);
  transform: translate(2px, -2px);
}

.all-topics-subgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
}

.all-topics-sub {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: var(--font-weight-medium);
  transition: background 0.15s, border-color 0.15s;
}

.all-topics-sub:hover {
  background: var(--color-bg-light);
  border-color: var(--color-primary-light);
  text-decoration: none;
}

.all-topics-note {
  margin-top: 1.5rem;
  padding: 1rem 1.15rem;
  background: var(--color-bg-light);
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.all-topics-search-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  font-family: var(--font-family);
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  font-size: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(30, 45, 68, 0.3);
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0;
}

.all-topics-search-link:hover {
  text-decoration-color: var(--color-primary);
}

@media (max-width: 640px) {
  .all-topics-subgrid {
    grid-template-columns: 1fr;
  }

  .all-topics-parent-name {
    font-size: 1.05rem;
  }
}

/* === Wizard topic picker (Primary/Secondary topic step) === */
/* Multi-select topic chips row (primary/secondary topics) */
.wiz-topic-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
}

.wiz-topic-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.55rem 0.4rem 0.75rem;
  background: var(--color-primary);
  color: white;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: var(--font-weight-medium);
}

.wiz-topic-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  transition: background 0.15s;
}

.wiz-topic-chip-remove:hover {
  background: rgba(255, 255, 255, 0.35);
}

.wiz-topic-add {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.7rem;
  background: transparent;
  border: 1px dashed var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.wiz-topic-add:hover {
  background: var(--color-accent);
  border-color: var(--color-primary);
  border-style: solid;
  color: var(--color-primary);
}

.wiz-topic-picker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 0.92rem;
  color: var(--color-text);
  text-align: left;
  transition: border-color 0.15s;
}

.wiz-topic-picker:hover {
  border-color: var(--color-primary);
}

.wiz-topic-picker-icon {
  color: var(--color-primary);
  font-size: 1rem;
  flex-shrink: 0;
}

.wiz-topic-picker-value {
  flex: 1;
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wiz-topic-picker-placeholder {
  color: var(--color-text-light);
  font-weight: var(--font-weight-regular);
}

.wiz-topic-picker-chevron {
  color: var(--color-text-light);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.wiz-topic-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(15, 26, 46, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 1rem 1rem;
  animation: search-overlay-in 0.1s ease-out;
}

.wiz-topic-overlay-card {
  background: var(--color-bg);
  border-radius: 14px;
  width: 100%;
  max-width: 640px;
  max-height: 75vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  animation: search-card-in 0.12s ease-out;
}

/* New multi-select picker head + selected row + footer */
.wiz-topic-overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.wiz-topic-overlay-label {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.wiz-topic-overlay-selected {
  padding: 0.75rem 1.15rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex-shrink: 0;
  max-height: 120px;
  overflow-y: auto;
}
.wiz-topic-overlay-empty {
  color: var(--color-text-light);
  font-size: 0.82rem;
}
.wiz-topic-overlay-sel {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.35rem 0.2rem 0.55rem;
  background: #4a6a8a;
  color: white;
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: var(--font-weight-medium);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wiz-topic-overlay-sel-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.82rem;
  line-height: 1;
}
.wiz-topic-overlay-sel-remove:hover { background: rgba(255, 255, 255, 0.35); }

.wiz-topic-overlay-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.15rem;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-bg-light, #f6f7f9);
}
.wiz-topic-overlay-count {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: var(--font-weight-medium);
}
.wiz-topic-overlay-done {
  padding: 0.5rem 1.25rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: var(--font-weight-semibold);
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s;
}
.wiz-topic-overlay-done:hover {
  background: var(--color-primary-dark, var(--color-primary));
}

.wiz-topic-overlay-check {
  margin-left: auto;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}
.wiz-topic-overlay-result.is-selected {
  background: var(--color-accent);
  color: var(--color-primary);
}
.wiz-topic-overlay-chip.is-selected {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.wiz-topic-overlay-input-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.wiz-topic-overlay-icon {
  font-size: 1.15rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

.wiz-topic-overlay-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1.05rem;
  font-family: var(--font-family);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  background: transparent;
  min-width: 0;
}

.wiz-topic-overlay-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
}

.wiz-topic-overlay-close:hover {
  color: var(--color-text);
}

.wiz-topic-overlay-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.15rem 1.15rem;
}

.wiz-topic-overlay-group {
  margin-bottom: 1rem;
}

.wiz-topic-overlay-group:last-child {
  margin-bottom: 0;
}

.wiz-topic-overlay-group-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  margin-bottom: 0.45rem;
}

.wiz-topic-overlay-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.wiz-topic-overlay-chip {
  padding: 0.32rem 0.75rem;
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.82rem;
  font-family: var(--font-family);
  cursor: pointer;
  color: var(--color-text);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.wiz-topic-overlay-chip:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.wiz-topic-overlay-chip-parent {
  font-weight: var(--font-weight-semibold);
  background: white;
  border-color: var(--color-primary-light);
  color: var(--color-primary);
}

.wiz-topic-overlay-result {
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.wiz-topic-overlay-result:hover,
.wiz-topic-overlay-result.highlighted {
  background: var(--color-accent);
}

.wiz-topic-overlay-result-custom {
  background: var(--color-accent);
  margin-bottom: 0.5rem;
}

.wiz-topic-overlay-badge {
  background: var(--color-primary);
  color: white;
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.wiz-topic-overlay-section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  margin: 0.6rem 0 0.4rem;
}

.wiz-topic-overlay-result-parent {
  color: var(--color-text-light);
  font-size: 0.78rem;
  margin-left: 0.4rem;
}

@media (max-width: 640px) {
  .wiz-topic-overlay {
    padding: 0;
    align-items: stretch;
  }
  .wiz-topic-overlay-card {
    max-width: none;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
}

/* === Knowledge Prompt Generator — Wizard Mode === */
/* Single-column prompt builder with bottom action bar */
.wiz-two-panel {
  display: flex;
  flex-direction: column;
  max-width: 100%;
}
.wiz-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.wiz-intro {
  margin: 0 0 1rem;
  padding-bottom: 0;
  border-bottom: none;
}
.wiz-intro-text {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  max-width: 920px;
  letter-spacing: -0.005em;
}
@media (max-width: 640px) {
  .wiz-intro { margin-bottom: 0.85rem; }
  .wiz-intro-text { font-size: 0.88rem; line-height: 1.45; }
}

/* === Prompt Builder card grid + modal ============================
   Each .pb-card is one of the picker groups (Topics, Output,
   Sources & Citations, Scope, Custom). Clicking opens .pb-modal
   with the relevant pickers inside. */
.pb-card-grid {
  display: grid;
  /* 3-up at wide desktop widths, 2-up at laptop / smaller. The
     280px minmax was packing 3 narrow cards into ~840px viewports
     and forcing "Sources & Citations" / "Custom Instructions" to
     ellipsize. Bumping the floor to 360px means each card has
     enough room for its full label before the grid drops to 2-up.
     Mobile media query below further drops it to 1-up. */
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 0.85rem;
}
.pb-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  width: 100%;
  padding: 1rem 1.1rem 1.1rem;
  background: var(--color-bg);
  border: 1px solid #e6e8ec;
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  box-shadow: 0 1px 2px rgba(15, 26, 46, 0.03);
  transition: border-color 0.14s, box-shadow 0.14s, transform 0.06s;
}
.pb-card:hover {
  border-color: #c8d3e3;
  box-shadow: 0 4px 14px rgba(15, 26, 46, 0.08);
  transform: translateY(-1px);
}
.pb-card:active { transform: translateY(0); }
.pb-card.has-items { border-color: #c8d3e3; }

/* Row 1: icon + title (+ optional Required tag) all inline. */
.pb-card-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.pb-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #eef2f8 0%, #e1e8f3 100%);
  border-radius: 9px;
  color: #2c4467;
}
.pb-card-icon svg { width: 18px; height: 18px; display: block; }
.pb-card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #1e2d44;
  line-height: 1.15;
  /* flex: 0 1 auto lets the title sit at its content width so the
     REQUIRED pill stays right next to it (instead of being pushed
     to the row's right edge by a growing title). It can still
     shrink + ellipsize if space gets tight at narrow widths. The
     trailing Add pill uses margin-left: auto to claim the
     right-end space. */
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-card-req {
  display: inline-flex;
  align-items: center;
  /* More breathing room around the text + slightly taller pill so
     it sits visually centered with the bold card title beside it. */
  padding: 0.3rem 0.65rem;
  background: rgba(194, 65, 12, 0.1);
  color: #c2410c;
  border-radius: 999px;
  font-family: var(--font-family);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  /* Drop baseline alignment and ride the flex centerline instead. */
  align-self: center;
}
/* Trailing action chip on every card — replaces the old chevron +
   separate "+ Add" CTA. Reads "Add +" when empty (clear call to
   action) or "Edit" when the card already has selections. Pill
   styling so it's visually obvious it's tappable. */
.pb-card-action {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.7rem;
  background: rgba(44, 68, 103, 0.07);
  color: #2c4467;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.06s;
}
.pb-card.has-items .pb-card-action {
  background: var(--color-bg);
  border-color: rgba(44, 68, 103, 0.22);
  color: #2c4467;
  font-size: 0.76rem;
}
.pb-card:hover .pb-card-action {
  background: rgba(44, 68, 103, 0.13);
  border-color: rgba(44, 68, 103, 0.22);
  color: #1e2d44;
}
.pb-card.has-items:hover .pb-card-action {
  background: #f5f8fd;
  border-color: rgba(44, 68, 103, 0.4);
}

/* Row 2: description sub-text under the head. Indent matches icon
   width + gap so it aligns with the title text above. */
.pb-card-desc {
  font-family: var(--font-family);
  font-size: 0.84rem;
  color: var(--color-text-muted);
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  padding-left: calc(32px + 0.6rem);
}

/* Row 3: chip summary or "+ Add" CTA, also indented to the title. */
.pb-card-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  padding-left: calc(32px + 0.6rem);
  margin-top: 0.15rem;
}
.pb-card-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.55rem;
  background: rgba(44, 68, 103, 0.07);
  color: #2c4467;
  border-radius: 999px;
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-card-more {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 500;
}

/* Modal overlay shared with the existing prompt-modal pattern. */
.pb-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: pb-modal-fade 0.16s ease-out;
}
@keyframes pb-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.pb-modal-card {
  width: 100%;
  max-width: 640px;
  max-height: 88vh;
  background: var(--color-bg);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(15, 26, 46, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: pb-modal-rise 0.18s ease-out;
}
@keyframes pb-modal-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.pb-modal-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.15rem 0.9rem;
  border-bottom: 1px solid #eef0f4;
  flex-shrink: 0;
}
.pb-modal-close {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-light, #f3f5f9);
  border: 1px solid #e6e8ec;
  border-radius: 9px;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--color-text-muted);
  padding: 0;
  transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.06s;
}
.pb-modal-close:hover {
  background: #eef2f7;
  border-color: #c8d3e3;
  color: var(--color-text);
}
.pb-modal-close:active { transform: translateY(1px); }
.pb-modal-title-block {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}
.pb-modal-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e2d44;
  letter-spacing: -0.018em;
}
.pb-modal-subtitle {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--color-text-muted);
  font-weight: 500;
}
.pb-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.15rem;
}
.pb-modal-section + .pb-modal-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #eef0f4;
}
.pb-modal-section-title {
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e2d44;
  letter-spacing: -0.01em;
}
.pb-modal-section-desc {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.pb-modal-desc {
  margin: 0 0 0.75rem;
  font-size: 0.88rem;
  color: var(--color-text);
  line-height: 1.5;
}
.pb-modal-textarea {
  width: 100%;
  min-height: 160px;
  padding: 0.8rem 0.95rem;
  background: #f5f6f9;
  border: 1px solid #e1e6ee;
  border-radius: 10px;
  font-family: var(--font-family);
  /* 16px floor prevents iOS auto-zoom on focus. */
  font-size: 16px;
  color: var(--color-text);
  resize: vertical;
  line-height: 1.5;
  transition: background 0.14s, border-color 0.14s;
}
.pb-modal-textarea:focus {
  outline: none;
  background: var(--color-bg);
  border-color: #95a8c5;
  box-shadow: 0 0 0 3px rgba(74, 124, 201, 0.22);
}
/* Accordion-card topic picker (opened from "Browse topics" inside
   the Topics buffer modal). Matches the site's Topics modal:
   parent cards with icon + name + chevron, expand to subtopic
   list. Supports multi-select via tick marks; Done returns the
   set. */
.pb-acc-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.85rem;
  background: #f4f5f7;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 0.85rem;
}
.pb-acc-search svg { color: var(--color-text-muted); flex-shrink: 0; }
.pb-acc-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  /* iOS Safari auto-zooms into any input with font-size < 16px on
     focus — that's where the "zoom issue still occurring in prompt
     builder" was coming from. Bumped to 16px so the page no longer
     jumps when the user taps the search input. */
  font: 500 16px/1.2 var(--font-family);
  color: var(--color-text);
  min-width: 0;
  -webkit-appearance: none; appearance: none;
}
.pb-acc-search-input::placeholder { color: var(--color-text-light); font-weight: 500; }
.pb-acc-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.6rem 0.7rem;
  background: rgba(44, 68, 103, 0.04);
  border: 1px dashed rgba(44, 68, 103, 0.2);
  border-radius: 10px;
  margin-bottom: 0.85rem;
}
.pb-acc-selchip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.4rem 0.22rem 0.6rem;
  background: rgba(44, 68, 103, 0.1);
  color: #1e2d44;
  border-radius: 999px;
  font: 600 0.82rem/1 var(--font-family);
}
.pb-acc-selchip-x {
  width: 17px; height: 17px;
  border-radius: 999px;
  border: none;
  background: rgba(15, 26, 46, 0.1);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.pb-acc-selchip-x:hover { background: rgba(15, 26, 46, 0.18); color: var(--color-text); }

.pb-acc-list { display: flex; flex-direction: column; gap: 0.45rem; }
.pb-acc-card {
  background: var(--color-bg);
  border: 1px solid #e6e8ec;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.14s, box-shadow 0.14s;
}
.pb-acc-card.is-selected { border-color: #95a8c5; box-shadow: 0 1px 2px rgba(15, 26, 46, 0.04); }
.pb-acc-card.is-open { border-color: #c8d3e3; }
/* Entire head row is the expand toggle — single tap target. No more
   parent-auto-select on tap. The parent topic itself becomes a row
   inside the expanded body. */
.pb-acc-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  background: transparent;
  border: none;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  font: 600 0.95rem/1.2 var(--font-display);
  color: #1e2d44;
  letter-spacing: -0.008em;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
}
.pb-acc-head:hover { background: rgba(15, 26, 46, 0.03); }
.pb-acc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
  color: #2c4467;
}
.pb-acc-icon svg { width: 20px; height: 20px; display: block; }
.pb-acc-name { flex: 1; min-width: 0; }
.pb-acc-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: rgba(44, 68, 103, 0.12);
  color: #2c4467;
  font-weight: 700;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.pb-acc-chev {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform 0.16s;
}
.pb-acc-card.is-open .pb-acc-chev { transform: rotate(180deg); color: var(--color-text); }
.pb-acc-body { display: none; padding: 0 0.7rem 0.65rem; }
.pb-acc-card.is-open .pb-acc-body { display: block; }
/* Parent-pick row inside the body — full-width, signals "select the
   entire parent topic" rather than a subtopic. */
.pb-acc-sub-parent {
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem 0.45rem;
  border: 1px dashed rgba(44, 68, 103, 0.22);
  border-radius: 7px;
  background: rgba(44, 68, 103, 0.03);
}
.pb-acc-sub-parent:hover { background: rgba(44, 68, 103, 0.07); border-color: rgba(44, 68, 103, 0.32); }
.pb-acc-sub-parent.is-selected { background: rgba(44, 68, 103, 0.1); border-color: rgba(44, 68, 103, 0.4); border-style: solid; }
.pb-acc-sub-parent .pb-acc-sub-name strong { font-weight: 700; }
.pb-acc-sub-hint {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: 0.25rem;
}
.pb-acc-sublist {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0 0;
  border-top: 1px solid #eef0f4;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 540px) {
  .pb-acc-sublist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0.5rem; }
}
.pb-acc-sub {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.4rem 0.3rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  text-align: left;
  font: 500 0.88rem/1.25 var(--font-family);
  color: #1e2d44;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: background 0.12s, color 0.12s;
}
.pb-acc-sub:hover { background: rgba(15, 26, 46, 0.04); color: #2c4467; }
.pb-acc-sub.is-selected { color: #2c4467; font-weight: 600; }
.pb-acc-sub-name { flex: 1; min-width: 0; }
/* Checkbox indicator sits where the bullet was. Same fixed size in
   both states so toggling doesn't shift the row. */
.pb-acc-check {
  flex-shrink: 0;
  width: 17px; height: 17px;
  border-radius: 4px;
  border: 1.5px solid #c1c8d4;
  background: var(--color-bg);
  display: inline-flex; align-items: center; justify-content: center;
  color: white;
  transition: background 0.12s, border-color 0.12s;
}
.pb-acc-sub:hover .pb-acc-check { border-color: #95a8c5; }
.pb-acc-check.is-checked {
  background: #2c4467;
  border-color: #2c4467;
}
.pb-acc-sub-empty {
  margin: 0;
  padding: 0.35rem 0.3rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-style: italic;
}

.pb-acc-results { display: flex; flex-direction: column; gap: 0.25rem; }
.pb-acc-custom {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: rgba(74, 124, 201, 0.08);
  border: 1px solid rgba(74, 124, 201, 0.2);
  border-radius: 8px;
  color: var(--color-primary);
  font: 600 0.9rem/1.25 var(--font-family);
  cursor: pointer;
  margin-bottom: 0.5rem;
  transition: background 0.12s, border-color 0.12s;
}
.pb-acc-custom:hover { background: rgba(74, 124, 201, 0.14); border-color: rgba(74, 124, 201, 0.32); }
.pb-acc-custom-plus {
  width: 22px; height: 22px;
  background: var(--color-primary);
  color: white;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
  flex-shrink: 0;
}
.pb-acc-result {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  text-align: left;
  font: 500 0.92rem/1.2 var(--font-family);
  color: #1e2d44;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.pb-acc-result:hover { background: rgba(15, 26, 46, 0.04); border-color: rgba(15, 26, 46, 0.06); }
.pb-acc-result.is-selected { color: #2c4467; font-weight: 600; background: rgba(44, 68, 103, 0.06); border-color: rgba(44, 68, 103, 0.18); }
.pb-acc-result-name { flex: 1; min-width: 0; }
.pb-acc-result-parent { font-size: 0.78rem; color: var(--color-text-muted); }
.pb-acc-empty {
  margin: 0.6rem 0;
  padding: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
}

/* Topics card buffer modal — chip list + "Browse topics" CTA per
   section (Primary / Secondary). Browse delegates to the accordion
   topic picker overlay. */
.pb-topic-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
  align-items: center;
}
.pb-topic-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem 0.3rem 0.7rem;
  background: rgba(44, 68, 103, 0.08);
  color: #1e2d44;
  border-radius: 999px;
  font-family: var(--font-family);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.pb-topic-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: rgba(15, 26, 46, 0.08);
  border: none;
  border-radius: 999px;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}
.pb-topic-chip-x:hover { background: rgba(15, 26, 46, 0.16); color: var(--color-text); }
.pb-topic-browse {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  background: var(--color-bg);
  border: 1px dashed rgba(44, 68, 103, 0.35);
  border-radius: 999px;
  color: #2c4467;
  font-family: var(--font-family);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s;
}
.pb-topic-browse:hover {
  background: rgba(44, 68, 103, 0.06);
  border-color: #2c4467;
  border-style: solid;
}
.pb-req-tag, .pb-optional-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-family: var(--font-family);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.pb-req-tag { background: rgba(194, 65, 12, 0.1); color: #c2410c; }
.pb-optional-tag { background: rgba(15, 26, 46, 0.06); color: var(--color-text-muted); }

.pb-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.15rem 0.9rem;
  border-top: 1px solid #eef0f4;
  flex-shrink: 0;
}
/* Matches the site's primary modal button (settings modal "Save"):
   navy pill, subtle hover, press-down on active. */
.pb-modal-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 0.55rem 1.25rem;
  background: #2c4467;
  color: white;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--font-family);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.14s, transform 0.06s;
}
.pb-modal-done:hover { background: #1f3251; }
.pb-modal-done:active { transform: translateY(1px); }

/* Cancel — secondary action, sits to the left of Done. Closes
   the modal without committing (for pickers that have a confirm-
   on-Done flow). On modals where Done is already a "close" (no
   commit), Cancel is functionally equivalent — provides a
   familiar affordance for users who instinctively look for it. */
.pb-modal-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 0.55rem 1.25rem;
  background: transparent;
  color: var(--color-text);
  border: 1.5px solid #d8dee8;
  border-radius: 999px;
  font-family: var(--font-family);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, transform 0.06s;
}
.pb-modal-cancel:hover { background: #f3f5f9; border-color: #c8d2e0; }
.pb-modal-cancel:active { transform: translateY(1px); }

@media (max-width: 640px) {
  /* Denser cards on mobile: tighter padding, smaller icon, smaller
     desc/summary so each card uses less vertical real estate and
     more of the screen is usable without scrolling. */
  .pb-card-grid { grid-template-columns: 1fr; gap: 0.55rem; }
  .pb-card { padding: 0.7rem 0.85rem 0.8rem; gap: 0.3rem; }
  .pb-card-icon { width: 30px; height: 30px; }
  .pb-card-icon svg { width: 16px; height: 16px; }
  .pb-card-title { font-size: 0.92rem; }
  .pb-card-desc { font-size: 0.78rem; padding-left: calc(30px + 0.6rem); }
  .pb-card-summary { padding-left: calc(30px + 0.6rem); }
  .pb-card-action { font-size: 0.72rem; padding: 0.25rem 0.55rem; }
  .pb-modal-card { max-height: 92vh; }
}

/* Field layout — each row is now a self-contained card block with
   border + padding + rounded corners. Two halves sit side-by-side
   inside the card on wide widths, stack on mobile. Matches the
   Topics modal / Settings modal card pattern so the builder reads
   as a family of pickers. */
.wiz-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
  background: var(--color-bg);
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  padding: 1rem 1.15rem 1.05rem;
  box-shadow: 0 1px 2px rgba(15, 26, 46, 0.03);
  transition: border-color 0.14s, box-shadow 0.14s;
}
.wiz-field-row:focus-within {
  border-color: #c8d3e3;
  box-shadow: 0 2px 6px rgba(15, 26, 46, 0.06);
}
@media (max-width: 640px) {
  .wiz-field-row { grid-template-columns: 1fr; gap: 1rem; padding: 0.85rem 0.95rem 0.95rem; }
}
.wiz-field-half { min-width: 0; }
.wiz-field-full { min-width: 0; flex: 1 1 100%; }
.wiz-field-group { }

.wiz-field-label {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: #1e2d44;
  margin-bottom: 0.25rem;
  line-height: 1.2;
}
.wiz-field-desc {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
  line-height: 1.35;
  margin: 0 0 0.5rem 0;
}
.wiz-req {
  color: white;
  background: #e53e3e;
  font-weight: var(--font-weight-semibold);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 0.3rem;
  position: relative;
  top: -1px;
}
.wiz-opt { color: var(--color-text-light); font-weight: var(--font-weight-regular); font-size: 0.75rem; }

/* Inline topic chips */
.wiz-topic-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-height: 34px;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg);
  cursor: pointer;
}
.wiz-topic-chips:hover {
  border-color: var(--color-primary-light);
}
.wiz-inline-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.35rem 0.2rem 0.55rem;
  background: #4a6a8a;
  color: white;
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: var(--font-weight-medium);
}
.wiz-inline-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: rgba(255,255,255,0.2);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1;
}
.wiz-inline-chip-x:hover { background: rgba(255,255,255,0.35); }

.wiz-topic-add-inline {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  padding: 0.2rem 0.3rem;
}
.wiz-topic-add-inline:hover { color: var(--color-primary); }

/* Clean topic rows in the prompt generator picker — no underlines or bottom borders */
.wiz-topic-picker-card .sidebar-shortcut:hover,
.wiz-topic-picker-card .wiz-topic-row:hover,
.wiz-topic-picker-card .wiz-topic-result:hover {
  text-decoration: none !important;
}
.wiz-topic-picker-card .sidebar-shortcut {
  border-bottom: none;
}
.wiz-topic-add-inline:hover { text-decoration: underline; }

/* Custom instructions textarea */
/* Select-style dropdown for prompt generator fields */
.wiz-select-wrap {
  position: relative;
}
.wiz-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-bg);
  font-family: var(--font-family);
  font-size: 0.84rem;
  color: var(--color-text-muted);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s;
  min-height: 36px;
}
.wiz-select-trigger.has-value {
  color: var(--color-text);
}
.wiz-select-trigger:hover {
  border-color: var(--color-primary-light);
}
.wiz-select-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wiz-select-arrow {
  font-size: 0.7rem;
  color: var(--color-text-light);
  margin-left: 0.5rem;
  flex-shrink: 0;
}
.wiz-select-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  z-index: 100;
  max-height: 220px;
  overflow-y: auto;
  padding: 0.25rem 0;
}
.wiz-select-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.45rem 0.75rem;
  border: none;
  background: transparent;
  font-family: var(--font-family);
  font-size: 0.84rem;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.wiz-select-option:hover {
  background: var(--color-bg-light, #f6f7f9);
}
.wiz-select-option.is-selected {
  background: #eef2f7;
  font-weight: var(--font-weight-medium);
}
.wiz-select-check {
  width: 16px;
  font-size: 0.7rem;
  color: #4a6a8a;
  flex-shrink: 0;
}
.wiz-select-custom-row {
  display: flex;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-top: 1px solid var(--color-border);
  margin-top: 0.25rem;
}
.wiz-select-custom-input {
  flex: 1;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 0.3rem 0.5rem;
  font-family: var(--font-family);
  font-size: 0.8rem;
  outline: none;
  min-width: 0;
}
.wiz-select-custom-input:focus {
  border-color: var(--color-primary);
}
.wiz-select-custom-add {
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-bg-light);
  font-size: 1rem;
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wiz-select-custom-add:hover {
  background: var(--color-accent);
}

.wiz-field-picker-custom-row {
  display: flex;
  gap: 0.35rem;
  padding: 0.55rem 1.15rem;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.wiz-custom-textarea {
  width: 100%;
  min-height: 70px;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: 0.84rem;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  color: var(--color-text);
}
.wiz-custom-textarea:focus { border-color: var(--color-primary); }

/* Action bar — fixed at bottom of viewport on prompt generator */
.wiz-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease-out;
}
.wiz-action-bar-inner {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0.75rem 2rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 1rem;
}
.wiz-action-bar-spacer {
  height: 70px;
}
/* Inline placement: when the prompt builder fits in the viewport
   without scrolling, the action bar drops out of fixed positioning
   and sits naturally below the card grid. JS toggles the class via
   setupActionBarPlacement(). */
body.pb-action-bar-inline .wiz-action-bar {
  position: static;
  bottom: auto;
  left: auto;
  right: auto;
  background: transparent;
  border-top: none;
  box-shadow: none;
  transform: none !important;
  margin-top: 1.25rem;
}
body.pb-action-bar-inline .wiz-action-bar-inner {
  padding: 0;
  padding-bottom: 0;
}
body.pb-action-bar-inline .wiz-action-bar-spacer {
  display: none;
}
@media (max-width: 640px) {
  .wiz-action-bar-inner {
    padding: 0.65rem 0.9rem;
    padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
  }
}
.wiz-action-bar-inner {
  justify-content: flex-start;
}

.wiz-action-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: var(--font-weight-bold);
  color: white;
  cursor: pointer;
  transition: background 0.12s, opacity 0.12s;
  white-space: nowrap;
  min-height: 44px;
  /* Fixed width so the bar doesn't trampoline as the label flips
     between "Add Topic(s) to Submit" and "Preview Prompt and Submit" */
  min-width: 280px;
}
/* Ready state: green */
.wiz-action-btn.is-ready {
  background: #16a34a;
}
.wiz-action-btn.is-ready:hover { background: #15803d; }
/* Empty / disabled state: red, faded */
.wiz-action-btn.is-empty,
.wiz-action-btn:disabled {
  background: #dc2626;
  color: white;
  opacity: 0.6;
  cursor: not-allowed;
}

/* Hide legacy indicator dot if any old markup lingers */
.wiz-action-indicator { display: none !important; }

.wiz-action-restart {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.1rem;
  background: transparent;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.12s, color 0.12s, background 0.12s, opacity 0.12s;
  min-height: 44px;
}
.wiz-action-restart:hover:not(:disabled) {
  border-color: #dc2626;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.06);
}
.wiz-action-restart:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--color-border-light);
  color: var(--color-text-light);
  background: transparent;
}

@media (max-width: 640px) {
  .wiz-action-btn { flex: 0 0 auto; padding: 0.65rem 1rem; font-size: 0.88rem; min-width: 240px; }
  .wiz-action-restart { padding: 0.6rem 0.85rem; font-size: 0.8rem; }
}

@media (max-width: 640px) {
  .wiz-field-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* Prompt generator now uses .prompt-modal-overlay / .prompt-modal-panel
   styles for its preview+submit modal — see the Prompt Modal section. */

.pm-preview.is-empty { color: var(--color-text-muted); font-style: italic; }

/* Topic picker: search-modal-style with multi-select checkmarks */
.wiz-topic-picker-card {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Card sizes to its content. Cap = 80vh so long lists scroll. */
  max-height: 80vh;
}
.wiz-topic-picker-card .search-overlay-body {
  /* flex: 0 1 auto means body grows to its content but won't fill
     remaining card space — so Done sits right below the options
     when the list is short instead of stuck to viewport bottom. */
  flex: 0 1 auto;
  overflow-y: auto;
  min-height: 0;
}
@media (max-width: 640px) {
  .wiz-topic-picker-card {
    max-width: none;
    max-height: 90dvh;
    border-radius: 12px 12px 0 0;
  }
  .wiz-topic-overlay {
    padding: 0;
    align-items: flex-end;
  }
}
.wiz-topic-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--color-border);
}
.wiz-topic-picker-header .search-overlay-close {
  width: 34px;
  height: 34px;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.wiz-topic-picker-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin: 0;
}
.wiz-topic-selected-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.35rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--color-border);
  min-height: 40px;
  max-height: 110px;
  overflow-y: auto;
  align-items: center;
  flex-shrink: 0;
}
.wiz-topic-selected-row:empty::after {
  content: 'No topics selected';
  color: var(--color-text-light);
  font-size: 0.8rem;
}
.wiz-topic-check {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: white;
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  transition: background 0.12s, border-color 0.12s;
}
.wiz-topic-row.is-selected .wiz-topic-check,
.wiz-topic-result.is-selected .wiz-topic-check {
  background: #22c55e;
  border-color: #22c55e;
}
.wiz-topic-row {
  cursor: pointer;
}
.wiz-topic-row.is-selected {
  background: var(--color-accent);
}
/* Parent rows in topic picker — clearly clickable */
.wiz-topic-picker-card .search-parent-row {
  cursor: pointer;
}
.wiz-topic-picker-card .search-parent-row:hover {
  background: #e8eaef;
}
.wiz-topic-parent-hint {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--color-text-light);
}
.wiz-topic-result {
  cursor: pointer;
}
.wiz-topic-result.is-selected {
  background: var(--color-accent);
}
.wiz-topic-picker-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-light, #f6f7f9);
  position: sticky;
  bottom: 0;
  z-index: 10;
  flex-shrink: 0;
}
.wiz-topic-picker-foot-left {
  justify-content: flex-start;
}
.wiz-topic-picker-count {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}
.wiz-topic-picker-title-block {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.wiz-topic-picker-desc {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
  margin: 0;
  line-height: 1.35;
}
.wiz-custom-badge-inline {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  background: var(--color-accent);
  color: var(--color-text-muted);
  font-size: 0.65rem;
  font-weight: var(--font-weight-medium);
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.wiz-field-add-row {
  cursor: pointer;
  border: 1px dashed var(--color-border);
  border-radius: 5px;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.4rem;
  background: var(--color-bg-light, #f6f7f9);
  transition: border-color 0.12s, background 0.12s;
}
.wiz-field-add-row:hover {
  border-color: var(--color-primary);
  background: var(--color-accent);
}
.wiz-topic-picker-done {
  padding: 0.45rem 1.1rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 4px;
  font-weight: var(--font-weight-semibold);
  font-size: 0.85rem;
  cursor: pointer;
}
.wiz-topic-picker-done:hover { background: var(--color-primary-dark, #162238); }

/* Legacy .wiz — keep for any remaining styles */
.wiz {
  max-width: 720px;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
}

.wiz-head {
  margin-bottom: 1.5rem;
}

.wiz-head-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.wiz-head-icon {
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  color: white;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.wiz-head-text {
  flex: 1;
  min-width: 0;
}

.wiz-head-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.wiz-head-step {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  margin-top: 0.15rem;
}

/* Clickable horizontal stepper — compact numbered markers, all 8
   visible at once. Only the CURRENT step also shows its label so the
   row never overflows. The label for other steps is a hover tooltip. */
.wiz-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 0.4rem 0.1rem 0.25rem;
  width: 100%;
}

.wiz-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.3rem;
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-family);
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.wiz-step:hover:not(.is-blocked) {
  background: var(--color-bg-light);
  color: var(--color-text);
}

.wiz-step.is-blocked {
  cursor: not-allowed;
  opacity: 0.45;
}

.wiz-step-marker {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-muted);
  color: var(--color-text-muted);
  font-size: 0.74rem;
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.wiz-step-label {
  font-weight: var(--font-weight-bold);
  font-size: 0.82rem;
  letter-spacing: -0.01em;
}

.wiz-step-sep {
  flex: 1;
  height: 3px;
  background: var(--color-border);
  margin: 0 0.2rem;
  border-radius: 2px;
  min-width: 12px;
}

/* Separator after a completed step fills with primary to show progress. */
.wiz-step.is-complete + .wiz-step-sep,
.wiz-step.is-current + .wiz-step-sep {
  background: linear-gradient(to right, var(--color-primary) 50%, var(--color-border) 50%);
}
.wiz-step.is-complete:has(+ .wiz-step-sep + .wiz-step.is-complete) + .wiz-step-sep,
.wiz-step.is-complete:has(+ .wiz-step-sep + .wiz-step.is-current) + .wiz-step-sep {
  background: var(--color-primary);
}

/* States */
.wiz-step.is-current {
  color: var(--color-primary);
  background: var(--color-accent);
  padding-right: 0.7rem;
}
.wiz-step.is-current .wiz-step-marker {
  background: var(--color-primary);
  color: white;
  box-shadow: 0 0 0 3px white, 0 0 0 5px var(--color-primary);
}

.wiz-step.is-complete .wiz-step-marker {
  background: var(--color-primary);
  color: white;
}
.wiz-step.is-complete {
  color: var(--color-primary);
}

.wiz-step.is-visited:not(.is-current):not(.is-complete) {
  color: var(--color-text);
}
.wiz-step.is-visited:not(.is-current):not(.is-complete) .wiz-step-marker {
  background: var(--color-bg-light);
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}

.wiz-step.is-future {
  opacity: 0.55;
}

@media (max-width: 640px) {
  .wiz-stepper {
    padding: 0.3rem 0;
  }

  .wiz-step-marker {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
  }

  .wiz-step-label {
    font-size: 0.72rem;
  }

  .wiz-step.is-current {
    padding-right: 0.5rem;
  }

  .wiz-step-sep {
    min-width: 8px;
  }
}

/* Very narrow widths — hide labels for non-current steps to keep tracker compact */
@media (max-width: 440px) {
  .wiz-step:not(.is-current) .wiz-step-label {
    display: none;
  }
}

.wiz-body {
  margin-bottom: 1.25rem;
}

.wiz-step-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 0.35rem;
}

.wiz-step-desc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0 0 1rem;
}

.wiz-step-content {
  margin-bottom: 1rem;
}

/* Inputs */
.wiz-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
  margin-bottom: 0.55rem;
}

.wiz-required {
  color: var(--color-primary);
}

.wiz-optional {
  color: var(--color-text-light);
  font-weight: var(--font-weight-regular);
  font-size: 0.85em;
}

.wiz-input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  /* 16px floor on every PB input — anything smaller triggers iOS
     Safari's auto-zoom on focus, which was bouncing the page when
     the user tapped a custom field. */
  font-size: 16px;
  font-family: var(--font-family);
  color: var(--color-text);
  background: white;
  transition: border-color 0.15s;
}

.wiz-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.wiz-textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  font-size: 16px;
  font-family: var(--font-family);
  color: var(--color-text);
  background: white;
  min-height: 90px;
  resize: vertical;
  transition: border-color 0.15s;
}

.wiz-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Popular topic chips on Step 1 */
.wiz-popular-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.wiz-popular-label {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-right: 0.2rem;
}

.wiz-pop-chip {
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg-light);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--color-text);
  cursor: pointer;
  font-family: var(--font-family);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.wiz-pop-chip:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

/* Card grid (Content Type) */
.wiz-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}

.wiz-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1rem 0.95rem;
  border: 2px solid var(--color-border);
  background: white;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-family);
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
}

.wiz-card:hover {
  border-color: var(--color-primary-light);
  background: var(--color-bg-light);
}

.wiz-card.selected {
  border-color: var(--color-primary);
  background: var(--color-accent);
}

.wiz-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  color: #2c4467;
  line-height: 1;
}
.wiz-card-icon svg { width: 24px; height: 24px; display: block; }

.wiz-card-label {
  font-size: 0.92rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.wiz-card.selected .wiz-card-label {
  color: var(--color-primary);
}

/* Chip grid (most steps) */
.wiz-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-left: -0.1rem;
}

.wiz-chip {
  padding: 0.3rem 0.65rem;
  border: 1.5px solid var(--color-border);
  background: white;
  border-radius: 999px;
  font-size: 0.78rem;
  font-family: var(--font-family);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.wiz-chip:hover {
  border-color: var(--color-primary-light);
  background: var(--color-bg-light);
}

.wiz-chip.selected {
  border-color: #4a6a8a;
  background: #4a6a8a;
  color: white;
}

/* Custom value chip (selected by default, has remove button) */
.wiz-chip.wiz-chip-custom {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-right: 0.4rem;
}

.wiz-chip-remove {
  background: rgba(255, 255, 255, 0.18);
  color: white;
  border: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.wiz-chip-remove:hover {
  background: rgba(255, 255, 255, 0.32);
}

/* "+ Add custom" chip — quiet, outlined, dashed */
.wiz-chip-add {
  border-style: dashed;
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.wiz-chip-add:hover {
  border-style: solid;
  border-color: var(--color-primary);
  background: var(--color-accent);
  color: var(--color-primary);
}

/* Custom card (for content type step) */
.wiz-card.wiz-card-custom {
  position: relative;
}

.wiz-card-remove {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(30, 45, 68, 0.1);
  color: var(--color-primary);
  border: none;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.wiz-card-remove:hover {
  background: var(--color-primary);
  color: white;
}

.wiz-card.wiz-card-add {
  border-style: dashed;
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
}

.wiz-card.wiz-card-add:hover {
  border-style: solid;
  border-color: var(--color-primary);
  background: var(--color-accent);
  color: var(--color-primary);
}

.wiz-card.wiz-card-add .wiz-card-icon,
.wiz-card.wiz-card-add .wiz-card-label {
  color: var(--color-primary);
}

/* Inline custom-input wrap (replaces the "+ Add custom" chip when clicked) */
.wiz-custom-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 2px solid var(--color-primary);
  background: white;
  border-radius: 999px;
  padding: 0.25rem 0.4rem 0.25rem 0.85rem;
}

.wiz-custom-input {
  border: none;
  outline: none;
  font-family: var(--font-family);
  font-size: 16px;
  background: transparent;
  color: var(--color-text);
  width: 180px;
  min-width: 100px;
  padding: 0;
}

.wiz-custom-add-btn {
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family);
  cursor: pointer;
}

.wiz-custom-add-btn:hover {
  background: var(--color-primary-dark);
}

.wiz-custom-cancel-btn {
  background: none;
  color: var(--color-text-muted);
  border: none;
  padding: 0.2rem 0.4rem;
  font-size: 0.95rem;
  cursor: pointer;
  line-height: 1;
}

.wiz-custom-cancel-btn:hover {
  color: var(--color-text);
}

/* Extra inputs (for requiresInput options like "Compare to what?") */
.wiz-extras {
  margin-top: 0.75rem;
}

.wiz-extra-input {
  margin-bottom: 0.75rem;
  padding: 0.7rem 0.85rem;
  background: var(--color-accent);
  border-radius: 8px;
  border-left: 3px solid var(--color-primary);
}

.wiz-extra-input:last-child {
  margin-bottom: 0;
}

.wiz-extra-label {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0.4rem;
}

.wiz-extra-context {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
  font-size: 0.85em;
}

.wiz-extra-field {
  font-size: 16px !important;
  padding: 0.5rem 0.75rem !important;
}

/* Sub-sections render as card blocks — each pick category gets its
   own bordered card with a clear heading, then the field UI inside.
   Matches the Topics modal / Settings modal card pattern so the
   Prompt Builder reads as a related family of pickers. */
.wiz-sub-section {
  background: var(--color-bg);
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  padding: 0.95rem 1.05rem 1rem;
  margin-bottom: 0.85rem;
  box-shadow: 0 1px 2px rgba(15, 26, 46, 0.03);
  transition: border-color 0.14s, box-shadow 0.14s;
}
.wiz-sub-section:last-child { margin-bottom: 0; }
.wiz-sub-section:focus-within {
  border-color: #c8d3e3;
  box-shadow: 0 2px 6px rgba(15, 26, 46, 0.06);
}

.wiz-sub-label {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: #1e2d44;
  font-weight: 700;
  letter-spacing: -0.012em;
  margin-bottom: 0.65rem;
  line-height: 1.2;
}
.wiz-sub-label .wiz-optional {
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-left: 0.35rem;
  letter-spacing: -0.005em;
}

/* On wider viewports, the Style step (which is mostly chip-grid
   pickers) and the Content step lay their card blocks out in a
   responsive 2-column grid for a denser, more "settings-like"
   read. Steps add the class on their root, e.g. .wiz-step-body. */
@media (min-width: 720px) {
  .wiz-step-body.wiz-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
  }
  .wiz-step-body.wiz-grid-2 .wiz-sub-section { margin-bottom: 0; }
  /* Full-width card for the Custom Instructions textarea so it
     gets the breathing room it needs. */
  .wiz-step-body.wiz-grid-2 .wiz-sub-section.wiz-sub-section-wide {
    grid-column: 1 / -1;
  }
}

/* Live prompt preview — neutral but with real presence */
.wiz-preview {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.wiz-preview-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.95rem;
  background: var(--color-bg-light, #f6f7f9);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  letter-spacing: -0.005em;
}
.wiz-preview-head::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}

.wiz-preview-body {
  padding: 0.85rem 0.95rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text);
  white-space: pre-wrap;
  background: var(--color-bg);
}

.wiz-preview-body.wiz-preview-empty {
  color: var(--color-text-light);
  font-style: italic;
}

/* Footer nav */
.wiz-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
  position: sticky;
  bottom: 0;
  background: var(--color-bg);
  z-index: 5;
}

.wiz-foot-right {
  display: flex;
  gap: 0.5rem;
}

.wiz-btn-back,
.wiz-btn-skip,
.wiz-btn-next {
  padding: 0.6rem 1.1rem;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  font-family: var(--font-family);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.wiz-btn-back {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.wiz-btn-back:hover:not(:disabled) {
  border-color: var(--color-primary-light);
  color: var(--color-text);
}

.wiz-btn-back:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.wiz-btn-skip {
  background: transparent;
  color: var(--color-text-muted);
  border: none;
}

.wiz-btn-skip:hover {
  color: var(--color-text);
}

.wiz-btn-next {
  background: var(--color-primary);
  color: white;
  border: none;
}

.wiz-btn-next:hover:not(:disabled) {
  background: var(--color-primary-dark);
}

.wiz-btn-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Review step */
.wiz-review {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.wiz-review-section {
  display: flex;
  flex-direction: column;
}

.wiz-prompt-box {
  background: var(--color-bg-light, #f6f7f9);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1rem 1.15rem;
  font-size: 0.92rem;
  line-height: 1.6;
  white-space: pre-wrap;
  margin-bottom: 0.6rem;
  max-height: 320px;
  overflow-y: auto;
}

.wiz-prompt-edit {
  width: 100%;
  min-height: 240px;
  max-height: 420px;
  padding: 1rem 1.15rem;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1.5px solid var(--color-primary);
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  margin-bottom: 0.6rem;
}

.wiz-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}

.wiz-review-actions {
  display: flex;
  gap: 0.35rem;
}

.wiz-btn-inline {
  padding: 0.3rem 0.7rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wiz-btn-inline:hover {
  background: var(--color-accent);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.wiz-prompt-reset {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 0.2rem 0;
}
.wiz-prompt-reset:hover { color: var(--color-primary); }

/* Prompt generator: step pills in the sticky subnav */
.wiz-subnav-step.tab-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.25rem;
}

/* "Preview" action in the prompt-generator subnav — opens the live
   prompt preview modal from anywhere in the wizard. */
.wiz-subnav-preview {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.85rem;
  padding: 0.35rem 0.8rem;
  background: var(--color-accent);
  border: 1px solid var(--color-primary-light, var(--color-border));
  border-radius: 999px;
  color: var(--color-primary);
  font-family: var(--font-family);
  font-size: 0.78rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.wiz-subnav-preview:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
}
.wiz-subnav-preview-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-bg);
  animation: wiz-subnav-preview-pulse 2s ease-in-out infinite;
}
.wiz-subnav-preview:hover .wiz-subnav-preview-dot {
  background: white;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
@keyframes wiz-subnav-preview-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* Live prompt preview modal */
.prompt-preview-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.prompt-preview-modal-card {
  position: relative;
  background: var(--color-bg);
  border-radius: 6px;
  width: 100%;
  max-width: 620px;
  max-height: 82vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.35);
  animation: modalPop 0.18s ease-out;
}
.prompt-preview-modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--color-text-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.prompt-preview-modal-close:hover {
  background: var(--color-bg-light);
  color: var(--color-text);
}
.prompt-preview-modal-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.15rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-light, #f6f7f9);
}
.prompt-preview-modal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}
.prompt-preview-modal-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin: 0;
}
.prompt-preview-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.15rem 1.25rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-text);
  white-space: pre-wrap;
}
.prompt-preview-modal-body.is-empty {
  color: var(--color-text-light);
  font-style: italic;
  text-align: center;
  padding: 2rem 1.25rem;
}
.prompt-preview-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.15rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-light, #f6f7f9);
}
.prompt-preview-modal-copy {
  padding: 0.45rem 0.9rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background 0.15s;
}
.prompt-preview-modal-copy:hover {
  background: var(--color-primary-dark, var(--color-primary));
}
.prompt-preview-modal-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.wiz-subnav-step[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}
.wiz-subnav-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-bg-light, #f4f5f7);
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: var(--font-weight-bold);
  border: 1px solid var(--color-border);
}
.wiz-subnav-step.active .wiz-subnav-num {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.wiz-subnav-step.is-complete:not(.active) .wiz-subnav-num {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.wiz-subnav-step.is-complete:not(.active) {
  color: var(--color-text);
}

.wiz-btn-secondary {
  align-self: flex-start;
  padding: 0.45rem 0.9rem;
  background: white;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  font-family: var(--font-family);
}

.wiz-btn-secondary:hover {
  border-color: var(--color-primary-light);
  color: var(--color-text);
}

.wiz-model-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.wiz-model-btn {
  padding: 0.65rem 0.5rem;
  border: 2px solid var(--color-border);
  background: white;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: var(--font-family);
  color: var(--color-text);
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

.wiz-model-btn:hover {
  border-color: var(--color-primary-light);
}

.wiz-model-btn.selected {
  border-color: var(--color-primary);
  background: var(--color-accent);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.wiz-model-tag {
  font-size: 0.7em;
  color: var(--color-text-light);
}

.wiz-warning {
  padding: 0.7rem 0.85rem;
  background: #fffbeb;
  border: 1px solid #f6e05e;
  color: #744210;
  border-radius: 6px;
  font-size: 0.82rem;
  line-height: 1.5;
}

.wiz-btn-submit {
  width: 100%;
  padding: 0.95rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  font-family: var(--font-family);
  letter-spacing: -0.01em;
  transition: background 0.15s;
}

.wiz-btn-submit:hover {
  background: var(--color-primary-dark);
}

.wiz-btn-restart {
  width: 100%;
  padding: 0.7rem;
  background: transparent;
  color: var(--color-text-muted);
  border: none;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: var(--font-family);
  text-decoration: underline;
  text-decoration-color: rgba(113, 128, 150, 0.3);
  text-underline-offset: 3px;
}

.wiz-btn-restart:hover {
  color: var(--color-primary);
}

.wiz-disclaimer {
  font-size: 0.72rem;
  color: var(--color-text-light);
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

/* Mobile */
@media (max-width: 640px) {
  .wiz-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .wiz-step-title {
    font-size: 1.1rem;
  }

  .wiz-step-desc {
    font-size: 0.82rem;
    margin-bottom: 0.85rem;
  }

  .wiz-head-icon {
    width: 36px;
    height: 36px;
    font-size: 1.05rem;
  }

  .wiz-head-title {
    font-size: 1.05rem;
  }

  .wiz-model-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .wiz-foot {
    padding-top: 0.7rem;
  }

  .wiz-btn-back,
  .wiz-btn-skip,
  .wiz-btn-next {
    padding: 0.55rem 0.85rem;
    font-size: 0.82rem;
  }
}

@media (max-width: 400px) {
  .wiz-cards {
    grid-template-columns: 1fr;
  }

  .wiz-model-grid {
    grid-template-columns: 1fr;
  }
}

/* === About Page === */
.about-page {
  max-width: 680px;
}
.about-hero {
  margin-bottom: 2rem;
}
.about-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: #1e1e1e;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.about-lead {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.about-section {
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-border);
}
.about-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.about-section h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e1e1e;
  margin-bottom: 0.6rem;
}
.about-section p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 0 0.85rem;
}
.about-section p:last-child { margin-bottom: 0; }
.about-section ul + p,
.about-section p + p { margin-top: 0; }
.about-section ul {
  padding-left: 1.15rem;
  font-size: 0.88rem;
  line-height: 1.75;
  list-style: none;
}
.about-section li {
  margin-bottom: 0.35rem;
  position: relative;
  padding-left: 0.15rem;
}
.about-section li::before {
  content: '';
  position: absolute;
  left: -1rem;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-text-light);
}
/* Sub-headings within sections */
.about-sub-heading {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: #1e1e1e;
  margin: 1.25rem 0 0.5rem;
}
/* CTA button links (Portfolio, LinkedIn, GitHub) */
.about-cta-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.about-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.65rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  font-size: 0.84rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s;
}
.about-cta-link:hover {
  border-color: var(--color-text);
  background: var(--color-bg-light);
  text-decoration: none;
}
.about-cta-row .about-cta-link { margin-top: 0; }
/* Disclaimer */
.about-disclaimer p {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* === Not Found === */
.not-found {
  text-align: center;
  padding: 3rem 1rem;
}

.not-found h2 {
  margin-bottom: 0.5rem;
}

/* === Typography === */
body {
  font-weight: var(--font-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, .header-title, .footer-title, .section-header h2 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}

.header-title {
  font-weight: var(--font-weight-bold);
}

.header-prompt-btn,
.footer-title,
.section-header h2 {
  font-weight: var(--font-weight-semibold);
}

.tab-pill,
.shortcut-name,
.related-name {
  font-weight: var(--font-weight-medium);
}

.tab-pill.active {
  font-weight: var(--font-weight-semibold);
}

.pg-btn,
.pg-label,
.prompt-modal-label,
.search-result-header,
.search-result-section-label,
.shortcuts-section-label {
  font-weight: var(--font-weight-semibold);
}

.pg-field-label {
  font-weight: var(--font-weight-medium);
}

/* === Enhanced Search Bar (prominent) === */
.search-bar {
  padding: 0.85rem 1.1rem;
  font-size: 0.95rem;
  font-weight: var(--font-weight-medium);
  gap: 0.7rem;
  border-radius: 8px;
  width: 100%;
}

.search-bar-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  color: var(--color-primary);
}

.search-bar-label {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.search-bar-wrapper {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

/* === Prompt Generator extras === */
.pg-summary-empty {
  color: var(--color-text-light) !important;
  font-style: italic;
}

.pg-summary-error {
  color: var(--color-danger) !important;
  background: #fff5f5 !important;
  border-color: #fc8181 !important;
}

/* === Topic Banner (with integrated tabs) === */
.topic-banner {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(30, 45, 68, 0.12);
  border-radius: 0;
  margin-bottom: 1.5rem;
  padding: 0.25rem 0 1.15rem;
}

.topic-banner-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.25rem;
  flex-wrap: wrap;
  row-gap: 0.6rem;
}

/* TP3: subtle vertical divider between title group and tabs */
.topic-banner-row .topic-banner-tabs {
  position: relative;
  padding-left: 1.25rem;
}

.topic-banner-row .topic-banner-tabs::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: var(--color-border);
}

/* Hide the divider when tabs wrap to a second line (mobile / narrow widths) */
@media (max-width: 640px) {
  .topic-banner-row .topic-banner-tabs {
    padding-left: 0;
  }
  .topic-banner-row .topic-banner-tabs::before {
    display: none;
  }
}

.topic-banner-titlegroup {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 0 0 auto;
}

.topic-banner-accent {
  width: 4px;
  height: 32px;
  background: var(--color-primary);
  border-radius: 2px;
  flex-shrink: 0;
  align-self: center;
}

.topic-banner-title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--color-primary);
  margin: 0;
  word-break: break-word;
}

.topic-banner-tabs {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: flex-end;
}

.topic-banner-tabs .tab-pill {
  font-size: 0.9rem;
}

.tab-content-area {
  width: 100%;
}

@media (max-width: 768px) {
  .topic-banner {
    padding: 0.15rem 0 0.85rem;
    margin-bottom: 1rem;
  }

  .topic-banner-accent {
    height: 26px;
  }

  .topic-banner-title {
    font-size: 1.4rem;
  }
}

/* === Discover / All Topics modals =========================== */
.discover-modal-overlay,
.all-topics-modal-overlay,
.settings-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* === Settings modal =================================================
   Layout: header / scrollable body / sticky footer. Each setting
   section sits in its own pale card with a clear title + helper
   line. Footer hosts Reset (left) + Cancel / Save (right). */
.settings-modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  background: var(--color-bg);
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.35);
  overflow: hidden;
}
.settings-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.2rem 1.3rem 1rem;
  border-bottom: 1px solid #eef0f4;
  flex-shrink: 0;
}
.settings-modal-head-text { min-width: 0; }
.settings-modal-title {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1e2d44;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.settings-modal-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6c7a91;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.settings-modal-title-icon svg { display: block; }
.settings-modal-intro {
  margin: 0;
  font-family: var(--font-family);
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--color-text-muted);
  max-width: 38em;
}
.settings-modal-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f5f9;
  border: 1px solid #e6e8ec;
  border-radius: 999px;
  color: var(--color-text);
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.12s, color 0.12s;
}
.settings-modal-close:hover {
  background: #e8edf5;
  color: var(--color-primary, #2c4467);
}

/* Scrollable middle region — section cards live here. */
.settings-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1.2rem 1.3rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #f7f9fc;
}
.settings-section {
  background: var(--color-bg);
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  padding: 1rem 1.05rem 1.05rem;
}
.settings-section-head { margin-bottom: 0.75rem; }
.settings-section-title {
  margin: 0 0 0.2rem;
  font-family: var(--font-family);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #1e2d44;
}
.settings-section-desc {
  margin: 0;
  font-family: var(--font-family);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.settings-option-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.settings-option-grid-stacked {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.5rem;
}

.settings-option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  background: #f3f5f9;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--font-family);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.06s;
  text-align: left;
}
.settings-option:hover {
  background: #e6ecf5;
  border-color: #c8d3e3;
}
.settings-option:active { transform: translateY(1px); }
.settings-option.is-selected {
  background: #ebf2fb;
  border-color: #2c4467;
  color: #1e2d44;
}
.settings-option-label { font-weight: 600; }
.settings-option-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: #2c4467;
  background: rgba(44, 68, 103, 0.12);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
}
.settings-option.is-selected .settings-option-tag {
  background: rgba(255, 255, 255, 0.85);
}

.settings-option-stacked {
  flex-direction: column;
  align-items: flex-start;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  gap: 0.2rem;
  text-align: left;
}
.settings-option-stacked .settings-option-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e2d44;
}
.settings-option-stacked .settings-option-desc {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.settings-option-stacked.is-selected .settings-option-desc { color: #475569; }

/* Label row — holds the model name + the optional DEFAULT tag on
   the same line above the description, since the stacked card is a
   flex column and the tag would otherwise drop to its own row. */
.settings-option-stacked .settings-option-label-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

/* Footer — Reset (left), Cancel / Save (right). Sticks to the
   bottom of the modal card. */
.settings-modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.3rem;
  border-top: 1px solid #eef0f4;
  background: var(--color-bg);
  flex-shrink: 0;
}
.settings-modal-foot-right {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.settings-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-family: var(--font-family);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s, opacity 0.14s, transform 0.06s;
  white-space: nowrap;
}
.settings-modal-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.settings-modal-btn-reset {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-muted);
  font-weight: 500;
  padding: 0.5rem 0.6rem;
}
.settings-modal-btn-reset:hover {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.06);
}
.settings-modal-btn-secondary {
  background: transparent;
  border: 1.5px solid #d6dae2;
  color: #1e2d44;
}
.settings-modal-btn-secondary:hover:not(:disabled) {
  background: #f3f5f9;
  border-color: #95a8c5;
}
.settings-modal-btn-primary {
  background: #9ca3af;
  border: 1.5px solid transparent;
  color: white;
}
.settings-modal-btn-primary.is-active {
  background: #2c4467;
}
.settings-modal-btn-primary.is-active:hover {
  background: #1f3251;
}
.settings-modal-btn-primary:active:not(:disabled) { transform: translateY(1px); }

@media (max-width: 540px) {
  .settings-modal-card {
    max-height: 92vh;
    border-radius: 14px;
  }
  .settings-modal-head { padding: 1rem 1rem 0.85rem; }
  .settings-modal-body { padding: 1rem 1rem 0.75rem; gap: 0.85rem; }
  .settings-modal-foot {
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .settings-modal-foot-right { width: 100%; justify-content: flex-end; }
  .settings-option-grid-stacked { grid-template-columns: 1fr; }
}

.discover-modal-card,
.all-topics-modal-card {
  position: relative;
  background: var(--color-bg);
  border-radius: 6px;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.15rem 1.25rem 1.25rem;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.35);
}
.discover-modal-card .sidebar-card-title {
  font-size: 1rem;
  padding-left: 0;
}
.discover-modal-card .sidebar-card-title::before {
  display: none;
}
.discover-modal-card .sidebar-card-header {
  border-bottom: none;
  padding-bottom: 0.25rem;
  margin-bottom: 0;
}
.discover-modal-card .sidebar-shortcut-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.discover-modal-card .sidebar-shortcut {
  display: flex;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: 0.65rem 0.5rem;
  text-decoration: none !important;
  animation: modalPop 0.18s ease-out;
}

.all-topics-modal-card { max-width: 560px; }

@media (max-width: 640px) {
  .discover-modal-card,
  .all-topics-modal-card {
    max-width: 92vw;
    max-height: 80vh;
    border-radius: 8px;
    padding: 1.15rem;
    animation: none;
    align-self: center;
  }
  .discover-modal-overlay,
  .all-topics-modal-overlay {
    align-items: center;
    padding: 1rem;
  }
  .discover-modal-card .sidebar-card-title {
    font-size: 0.95rem;
  }
  .discover-modal-card .discover-modal-sub {
    font-size: 0.75rem;
    margin-bottom: 0.65rem;
  }
  .discover-modal-card .sidebar-shortcut-list {
    overflow: hidden;
  }
  .discover-modal-card .sidebar-shortcut {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@keyframes modalPop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.discover-modal-close,
.all-topics-modal-close {
  position: absolute;
  top: 0.65rem;
  right: 0.75rem;
  width: 30px;
  height: 30px;
  background: var(--color-bg-light, #f3f4f6);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text);
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.discover-modal-close:hover,
.all-topics-modal-close:hover {
  background: var(--color-bg-light);
  color: var(--color-text);
}

.discover-modal-header,
.all-topics-modal-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-border);
}

.discover-modal-header-icon,
.all-topics-modal-header-icon {
  font-size: 0.95rem;
  opacity: 0.85;
}

.discover-modal-title,
.all-topics-modal-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing: -0.01em;
  margin: 0;
}

.discover-modal-sub {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 0.9rem;
}
.discover-modal-sub strong {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.discover-modal-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
@media (max-width: 480px) {
  .discover-modal-list { grid-template-columns: 1fr; }
}

.discover-modal-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.discover-modal-row:hover {
  background: var(--color-accent);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.discover-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.discover-modal-name {
  flex: 1;
  font-weight: var(--font-weight-medium);
  font-size: 0.82rem;
  min-width: 0;
  letter-spacing: -0.005em;
}

.discover-modal-arrow {
  color: var(--color-text-light);
  font-size: 0.78rem;
  transition: color 0.15s, transform 0.15s;
}

.discover-modal-row:hover .discover-modal-arrow {
  color: var(--color-primary);
  transform: translate(2px, -2px);
}

/* All Topics modal body */
/* All Topics modal — flat list matching AI Shortcuts / Related style */
.all-topics-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.all-topics-modal-group {
  margin-bottom: 0;
}
.all-topics-modal-body {
  padding: 0;
  gap: 0;
}

/* Parent topic: section header with left accent bar — reads as a
   category label, clearly distinct from the subtopic list items. */
/* Subtopic container */
.all-topics-modal-subs {
  display: flex;
  flex-direction: column;
}

/* Shared: parent topic rows in modals + search — prominent category
   headers that contain their subtopics. Slightly taller and larger
   font than subtopic rows so the hierarchy reads cleanly. */
.all-topics-modal-parent.sidebar-shortcut,
.search-parent-row.sidebar-shortcut {
  background: var(--color-bg-light, #f7f8fa);
  border-bottom: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  padding: 0.85rem 1.15rem;
  margin-top: 0;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 1.05rem;
  color: #1e2d44;
  letter-spacing: -0.005em;
  text-transform: none;
  text-decoration: none !important;
}
.all-topics-modal-parent.sidebar-shortcut:first-child,
.search-parent-row.sidebar-shortcut:first-child {
  border-top: none;
}
.all-topics-modal-parent.sidebar-shortcut:hover,
.search-parent-row.sidebar-shortcut:hover {
  background: #eef0f4;
  color: var(--color-primary);
}
/* Parent-topic chevron: bigger and bolder color than the subtopic
   chev — communicates "this whole category opens" with more weight. */
.all-topics-modal-parent.sidebar-shortcut .sidebar-shortcut-chev,
.search-parent-row.sidebar-shortcut .sidebar-shortcut-chev {
  opacity: 0.7;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}
.all-topics-modal-parent.sidebar-shortcut:hover .sidebar-shortcut-chev,
.search-parent-row.sidebar-shortcut:hover .sidebar-shortcut-chev {
  opacity: 1;
  color: var(--color-primary);
  transform: translateX(2px);
}
.all-topics-modal-parent.sidebar-shortcut .sidebar-shortcut-name,
.search-parent-row.sidebar-shortcut .sidebar-shortcut-name {
  font-weight: 700;
  font-family: var(--font-family);
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  text-transform: none;
}

/* Shared: subtopic rows in modals + search */
.all-topics-modal-sub.sidebar-shortcut,
.search-subtopic-row.sidebar-shortcut {
  padding: 0.55rem 1rem 0.55rem 1.7rem;
  font-size: 0.86rem;
  font-weight: var(--font-weight-medium);
  text-decoration: none !important;
  /* Override the modal-card flat-rectangle defaults (border-radius:0 +
     hard border-bottom divider) so the hover background reads as a
     soft pill rather than a tight grey block bleeding into the next
     row. Slight horizontal inset gives the hover pill breathing room
     from the column edges. */
  border-radius: 7px !important;
  border-bottom: none !important;
  margin: 1px 0.35rem;
}

/* Subtopic groups flow into next parent seamlessly */
.all-topics-modal-subs,
.search-subtopic-list {
  margin-bottom: 0;
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
}
/* Remove bottom border on last subtopic so it doesn't double with the next parent's top border */
.search-subtopic-list .sidebar-shortcut:last-child,
.all-topics-modal-subs .sidebar-shortcut:last-child {
  border-bottom: none;
}

/* Subtle "View all topics" link in Featured Topics card */
.sidebar-view-all-topics {
  display: inline-block;
  margin-top: 0.65rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-link, #2563eb);
  font-size: 0.78rem;
  font-weight: var(--font-weight-medium);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.sidebar-view-all-topics:hover {
  color: var(--color-primary);
  text-decoration-thickness: 2px;
}


/* === Subnav redesign: icon + underlined title ========================= */

/* Title group: title-inner (icon + name). The hamburger lives in the
   main nav now, so the title group sits hard-left in the subnav row. */
#sub-header.is-subnav .topic-banner-titlegroup,
#sub-header.is-home-subnav .topic-banner-titlegroup {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* The icon + title sit together as a tight group. */
.topic-banner-titleinner {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  min-width: 0;
}
.topic-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  flex-shrink: 0;
  color: var(--color-primary-dark, #0f1a2e);
}
.topic-banner-icon svg { width: 100%; height: 100%; display: block; }

#sub-header.is-subnav .topic-banner-titleinner .topic-banner-title,
#sub-header.is-home-subnav .topic-banner-titleinner .topic-banner-title {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-primary-dark, #0f1a2e);
  line-height: 1.15;
  /* Long topic names like "Chemistry, Biology and Genetics" wrap to
     a second line instead of being clipped with an ellipsis. */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  margin: 0;
}
/* Desktop-only title size: at <900px the mobile override earlier
   in this file (1.05rem) takes effect, scoped via @media. Without
   wrapping the size in a query here, this later-in-source rule
   silently won and pinned the mobile title to 1.32rem. */
@media (min-width: 900px) {
  #sub-header.is-subnav .topic-banner-titleinner .topic-banner-title,
  #sub-header.is-home-subnav .topic-banner-titleinner .topic-banner-title {
    font-size: 1.32rem;
  }
}

/* Topic chips: slightly muted blue so the page title stays the
   dominant element. Medium weight on desktop pairs with the
   uppercase + letter-spaced treatment without feeling heavy. */
#sub-header .subnav-topic-link {
  color: #4a6a8a;
  font-weight: var(--font-weight-medium);
}
/* Hover styles only on devices with a true hover capability so the
   :hover state never sticks after a tap on touch devices (which
   otherwise carries the highlight to whatever sits at the same x/y
   on the page the tap navigated to). */
@media (hover: hover) {
  #sub-header .subnav-topic-link:hover { color: var(--color-primary-dark, #0f1a2e); }
}

/* === Main nav: vertical separator between brand and tagline ============ */
.sticky-brand {
  position: relative;
}
.sticky-brand::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -1.15rem;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.32);
}
@media (max-width: 640px) {
  .sticky-brand::after { display: none; }
  .sticky-tagline { margin-left: 0; }
}
.sticky-tagline {
  margin-left: 1.15rem;
}

/* === Topic Intelligence — control-panel module ====================
   The TI sidebar reads as a control surface, not a peer section. A
   navy header band sits at the top with the panel label in white;
   the body underneath is a soft cool-tinted surface that holds the
   web-source chips and AI-action spines. The band's bottom edge
   replaces the explicit border-rule used in the News Feed header
   and lands at the same y as the News Feed underline so the two
   columns share a single horizontal axis across the page.

   Scoping: the .topic-intelligence-panel modifier is applied only
   to the actual TI sidebar render (app.js). The all-topics modal,
   discover modal, search overlay, prompt-builder pickers, and
   related-topics sidebar all share .shortcuts-sidebar but stay
   visually untouched. */

/* Outer panel — tinted surface with module-rounded corners. A 1px
   phantom border via box-shadow gives the panel a visible edge
   without taking layout space, so the header band's bottom can
   land on the same y as the News Feed underline. */
.topic-intelligence-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

/* Header band — navy strip with the panel label in white. Min-height
   matches the News Feed title row's effective height (1.3rem ×
   line-height 1.15 + 1rem padding-bottom ≈ 2.56rem) so the band's
   bottom edge lands at the same y as the News Feed underline. The
   navy/tint color transition at the band's bottom replaces the
   border-bottom rule used elsewhere. */
/* Topic Intelligence panel header — quiet header band that matches
   the News Feed sibling's typographic weight + height (min-height
   2.56rem, line-height 1.15) but drops the heavy navy fill. Brand-
   color title text sits on the panel surface with a single thin
   accent rule below — same visual rhythm as the News Feed title
   (which uses a hairline border-bottom), so the two columns read
   as parallel headers instead of one banner vs. one text title. */
.topic-intelligence-panel .sidebar-card-header {
  background: transparent;
  border-bottom: 1px solid #d6dae2;
  border-radius: 0;
  padding: 0;
  margin: 0;
  min-height: 2.56rem;
  align-items: center;
}
.topic-intelligence-panel .sidebar-card-title {
  font-family: var(--font-display);
  color: #1c3a6b;
  font-size: 1.3rem;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.024em;
}

/* No body inset now that the panel chrome is gone — the
   accordion cards align flush with the panel title above them
   (which sits at padding 0 on the same x-axis). */
.topic-intelligence-panel .shortcuts-scroll-wrap {
  padding-left: 0;
  padding-right: 0;
}

/* Mobile: strip the control-panel chrome entirely. The TI panel
   on mobile lives in a tabbed view and doesn't need its own
   container (no News Feed sibling competing for the page), so the
   navy band + tinted body + module border just create visual
   noise. Header collapses to a quiet underlined eyebrow; body
   sits on the page bg. Eyebrows below stay colored by group as
   they do on desktop. */
@media (max-width: 899.98px) {
  .topic-intelligence-panel {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .topic-intelligence-panel .sidebar-card-header {
    background: transparent;
    padding: 0 0 0.55rem 0;
    margin: 0 0 0.85rem 0;
    border-bottom: 1px solid #e2e6ee;
    min-height: 0;
  }
  .topic-intelligence-panel .sidebar-card-title {
    color: #5d6b7e;
    font-family: var(--font-family);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1.2;
    text-transform: uppercase;
  }
  /* Drop the inner scroll-wrap horizontal padding on mobile so the
     panel content sits flush with the page-padding edges of
     topic-layout (1rem each side). Previously the wrap added
     ~0.95rem more left padding, indenting WEB SOURCES away from
     the left edge. Add a touch of top padding so the eyebrow
     doesn't kiss the body-tabs underline above it. */
  .topic-intelligence-panel .shortcuts-scroll-wrap {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0.25rem;
  }
}

/* === Custom-search page — strip the control-panel chrome =========
   On custom-search routes, the TI panel IS the page (no News Feed
   sibling). The banded-module styling that works as a sidebar
   reads as a cramped widget when it's the main feature. Strip the
   navy band, the tinted bg, the rounded module corners, and the
   phantom border. Render the heading as a quiet page-level title
   above its underline (matching the News Feed header treatment on
   topic pages). Eyebrows and section spacing get bumped to take
   advantage of the wide canvas. */
.topic-layout.is-custom .topic-intelligence-panel {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
/* Custom-search pages: the panel's own "Topic Intelligence / Covering"
   header is rendered instead inside the sticky block above (so it pins
   together with the search bar), so hide the in-panel one here. */
.topic-layout.is-custom .topic-intelligence-panel .sidebar-card-header {
  display: none;
}
.topic-layout.is-custom .topic-intelligence-panel .shortcuts-scroll-wrap {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

/* Title + subtitle stack inside the panel header. Only custom-search
   renders a subtitle today; on topic/home pages the heading wraps the
   title alone and reads identically to before. */
.sidebar-card-heading {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.sidebar-card-subtitle {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  color: #6b7686;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Eyebrows match topic-page sidebar scale (0.78rem). The WEB
   SOURCES eyebrow is wrapped in a .shortcuts-subsection-header
   so its margin lives there (otherwise the title's margin-bottom
   collapses into the wrapper and the gap disappears). DISCOVER /
   LEARN / ANALYZE labels are direct h5s so their margin-bottom
   applies directly. Both end up with the same 1.1rem of breathing
   below the eyebrow before the content row starts. */
.topic-layout.is-custom .ti-web-sources-section .shortcuts-subsection-title,
.topic-layout.is-custom .ti-action-group-label {
  font-size: 0.78rem;
  letter-spacing: 0.09em;
}
.topic-layout.is-custom .ti-web-sources-section .shortcuts-subsection-header {
  margin-bottom: 1.1rem;
  padding-bottom: 0;
  border-bottom: none;
}
.topic-layout.is-custom .ti-action-group-label {
  margin-bottom: 1.1rem;
}
.topic-layout.is-custom .ti-action-group + .ti-action-group {
  margin-top: 2rem;
}
.topic-layout.is-custom .ti-web-sources-section + .ti-actions-section {
  margin-top: 2rem;
}

/* ===============================================================
   Topic Intelligence — Web Sources + AI Actions
   ===============================================================
   Two visually distinct subsections inside the renamed sidebar card.

   Web Sources (top) — compact horizontal chips. External links to
   Reddit/Google News/X/YouTube/DuckDuckGo. Reads as "open external
   search" at a glance.

   AI Actions (below) — group-tinted cards with icon + name + an
   evergreen one-line description. Reads as "send a prompt to an
   LLM". Group accent colors (Discover/Learn/Analyze/More) make the
   four categories distinguishable without sub-headers competing
   with the section header.
   =============================================================== */

/* Subsection rhythm — Web Sources now uses the same eyebrow style as
   DISCOVER / LEARN / ANALYZE / MORE so the hierarchy reads
   consistently: a single panel with five small uppercase section
   markers (one for chips + four for card groups), all parallel,
   none competing with the "Topic Intelligence" panel title above. */
.shortcuts-sidebar .ti-web-sources-section { --ti-accent: #5d6b7e; }
.shortcuts-sidebar .ti-web-sources-section .shortcuts-subsection-header {
  margin-bottom: 0.45rem;
}
.shortcuts-sidebar .ti-web-sources-section .shortcuts-subsection-title {
  /* Same treatment as .ti-action-group-label — title-case dark text
     + thin tall accent chip, no underline. */
  color: #1a2235;
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.014em;
  text-transform: none;
  display: flex;
  align-items: center;
  width: 100%;
  padding-bottom: 0;
  border-bottom: none;
  margin: 0;
}
.shortcuts-sidebar .ti-web-sources-section .shortcuts-subsection-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 22px;
  background: var(--ti-accent);
  border-radius: 2px;
  margin-right: 0.55rem;
  flex-shrink: 0;
}
.shortcuts-sidebar .ti-web-sources-section .shortcuts-subsection-header {
  margin-bottom: 0.85rem;
}
.shortcuts-sidebar .ti-web-sources-section .shortcuts-subsection-title::after { display: none; }
.shortcuts-sidebar .ti-web-sources-section + .ti-actions-section {
  margin-top: 1.6rem;
}
/* Mobile: undo the legacy "promote subsection-title to a panel
   heading" bump for the Web Sources eyebrow specifically. The bump
   was meant for the old "Quick Links / AI Shortcuts" pair when the
   sidebar card title was hidden on mobile; with the AI Actions
   subsection gone, leaving only Web Sources bumped would make it
   look heavier than the DISCOVER/LEARN/ANALYZE/MORE eyebrows below
   it. The override re-applies the eyebrow look so all five section
   markers in the panel read the same way at any width. */
@media (max-width: 899.98px) {
  /* Mobile WEB SOURCES eyebrow: title-case bold + accent ::before
     chip, no underline (matches the desktop treatment). */
  body.app-mode .topic-layout:not(.is-custom)
    .ti-web-sources-section .shortcuts-subsection-title {
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 700;
    color: #1a2235;
    letter-spacing: -0.014em;
    line-height: 1.2;
    text-transform: none;
    display: flex;
    align-items: center;
    width: 100%;
    padding-bottom: 0;
    border-bottom: none;
    margin: 0;
  }
  /* The generic "hide ::before on mobile subsection titles" rule
     above (intended for the old accent-bar design) wins against
     the Web Sources chip rule by specificity. Re-show the chip
     here for Web Sources specifically on mobile. */
  body.app-mode .topic-layout:not(.is-custom)
    .ti-web-sources-section .shortcuts-subsection-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 22px;
    background: var(--ti-accent);
    border-radius: 2px;
    margin-right: 0.55rem;
    flex-shrink: 0;
  }
}

/* --- Web Sources chips ------------------------------------------------ */
/* Web sources — 2-column grid in the sidebar so the 5 sources
   pack into 3 tight rows side-by-side instead of stacking 5
   deep. Sensible 0.4rem gap (columns aren't lightyears apart).
   Custom-search override below switches to a wider auto-fit. */
.ti-web-source-chips {
  list-style: none;
  margin: 0;
  padding: 0 0.25rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.4rem;
}
.ti-web-source-chip-row { min-width: 0; margin: 0; padding: 0; }
/* Custom-search page (full-width panel): auto-fit grid with a
   bounded cell width so the row spreads out without stretching
   each cell to fill leftover space. */
.topic-layout.is-custom .ti-web-source-chips {
  grid-template-columns: repeat(auto-fit, minmax(160px, 220px));
  gap: 0.15rem 0.5rem;
}
.ti-web-source-chip-row { margin: 0; padding: 0; }
/* Web source row — compact pill with a hairline border. Sits in
   a 2-column grid (sidebar) so 5 sources pack into 3 tight rows.
   No spine (spine stubs in a multi-column grid look orphaned),
   no description (data kept in JSON in case we re-enable). */
.ti-web-source-chip {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  width: 100%;
  padding: 0.38rem 0.6rem;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid #e2e6ee;
  border-radius: 7px;
  text-align: left;
  text-decoration: none;
  font-family: var(--font-family);
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.16s, border-color 0.18s;
  line-height: 1.2;
}
.ti-web-source-chip:hover {
  background: #ffffff;
  border-color: #c8d2e0;
  text-decoration: none;
  color: #1c3a6b;
}
.ti-web-source-chip-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  width: 100%;
}
.ti-web-source-chip-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: #1a2235;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ti-web-source-chip-desc { display: none; }

/* Desktop sidebar icon size + hover (lives above the mobile block
   so the mobile @media can override). Color + stroke-width match
   the neutral shortcut icons (.ti-action-card-icon-svg) so the
   chip glyph reads as content-weight, not an accent badge.
   Compound `.shortcuts-sidebar` selector bumps specificity above
   the generic `.shortcut-icon { color: inherit }` rule defined
   further down the stylesheet, which otherwise clobbers the
   color set here (both are single-class selectors, but the later
   rule wins on source order). */
.shortcuts-sidebar .ti-web-source-chip-icon {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
  color: #6c7589 !important;
  stroke-width: 1.5 !important;
}
.ti-web-source-chip:hover {
  background: #ffffff;
  border-color: #c8d2e0;
  color: #1c3a6b;
  text-decoration: none;
}
.shortcuts-sidebar .ti-web-source-chip:hover .ti-web-source-chip-icon { color: #1c3a6b; }

/* Mobile: 3-column grid of horizontal button-pills (icon + name
   side by side), dropping to 2 columns at narrower widths. 5
   sources lay out as 3+2 rows (or 2+2+1 at narrow widths). */
@media (max-width: 899.98px) {
  .ti-web-source-chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }
  .ti-web-source-chip-row { min-width: 0; }
  .ti-web-source-chip {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45rem;
    width: 100%;
    padding: 0.5rem 0.65rem;
    background: #ffffff;
    border: 1px solid #e2e6ee;
    border-left: 1px solid #e2e6ee;
    border-radius: 8px;
    text-align: left;
  }
  .ti-web-source-chip:hover {
    background: #ffffff;
    border-color: #c8d2e0;
    color: #1c3a6b;
  }
  .ti-web-source-chip-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 0.45rem;
    min-width: 0;
  }
  /* Hide the trailing horizontal rule on WEB SOURCES so it
     matches the other eyebrows (DISCOVER / LEARN / ANALYZE /
     MORE) which don't render one on mobile. */
  .shortcuts-sidebar .ti-web-sources-section .shortcuts-subsection-title::after {
    display: none;
  }
  .shortcuts-sidebar .ti-web-source-chip:hover .ti-web-source-chip-icon { color: #6c7589 !important; }
  .shortcuts-sidebar .ti-web-source-chip-icon { width: 16px !important; height: 16px !important; color: #6c7589 !important; stroke-width: 1.5 !important; flex-shrink: 0; }
  .ti-web-source-chip-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #1e2d44;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
  }
}
/* Narrow phones: drop to 2 columns so the names don't truncate. */
@media (max-width: 480px) {
  .ti-web-source-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* (Orphan rules previously here — icon size, hover, arrow — moved
   ahead of the @media block above so the mobile overrides win.
   Arrow rule deleted since the markup no longer renders one.) */

/* Multi-select mode: external links should remain clickable visually
   but the toast still surfaces when clicked (handled in JS). No
   muting needed — they read as a separate affordance from the cards. */

/* --- AI Actions cards ------------------------------------------------- */
.ti-actions-section { /* inherits .shortcuts-subsection layout */ }

/* Group accent palette — each group gets its own tint on the
   eyebrow label + card icon. Subtle on the card itself so the
   reading rhythm comes from the name + description, not a wash
   of color across the row. */
.ti-action-group { --ti-accent: #5d6b7e; }
.ti-action-group--discover { --ti-accent: #3261a0; }
.ti-action-group--learn    { --ti-accent: #2e8a73; }
.ti-action-group--analyze  { --ti-accent: #b48528; }
.ti-action-group--more     { --ti-accent: #8a4f7a; }

.ti-action-group + .ti-action-group { margin-top: 0.35rem; }
.ti-action-group-label {
  /* Section header: title-case dark text + a thin tall accent bar
     to its left. No underline — the row's identity is the chip +
     larger label text, not a separator rule. */
  color: #1a2235;
  font-weight: 700;
  letter-spacing: -0.014em;
  font-size: 1rem;
  text-transform: none;
  margin: 0 0 0.45rem;
  padding-bottom: 0;
  border-bottom: none;
  display: flex;
  align-items: center;
  /* No `gap` here — the chip's margin-right is the ONLY space
     between chip and label, matching Web Sources's layout. A
     stray flex gap was previously adding ~0.5rem on top of the
     margin, which made Discover / Learn / Analyze / More look
     visibly farther from their chips than Web Sources. */
}
/* Accent chip — thin tall colored bar to the left of the section
   label text. Carries the section's color identity. Slightly
   bigger than the header text height so it reads as a confident
   "this section is X" marker. */
.ti-action-group-label::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 22px;
  background: var(--ti-accent);
  border-radius: 2px;
  /* Identical spacing to Web Sources (0.55rem) — uniform value
     across every section header chip. */
  margin-right: 0.55rem;
  flex-shrink: 0;
}
.ti-action-group-label::after { display: none; }

.ti-action-cards {
  list-style: none;
  margin: 0;
  padding: 0 0.25rem 0 0;
  display: flex;
  flex-direction: column;
  /* No gap — consecutive rows' left accent rules stack into one
     continuous spine per group, visually unifying the four DISCOVER
     rows (etc.) without any card chrome. */
  gap: 0;
}
.ti-action-card-row { margin: 0; padding: 0; }

/* Flat row — no card chrome. A 2px left accent rule (in the group
   color, muted) carries identity; consecutive rows in the same group
   stack so their rules form one continuous spine. Hover and selected
   states tint the row background and bring the rule to full accent.
   Reads as a list of capabilities, not a deck of products. */
.shortcuts-sidebar .sidebar-shortcut.ti-action-card {
  display: flex;
  flex-direction: column;
  /* Override the underlying .ai-shortcut-select-btn rule's
     align-items: center — in a flex column that horizontally
     centers children, which would shrink the description to
     content-width and center it instead of stretching across
     the full card width. */
  align-items: stretch;
  gap: 0.28rem;
  width: 100%;
  padding: 0.55rem 0.7rem 0.6rem 0.7rem;
  background: transparent;
  border: none;
  border-radius: 0;
  text-align: left;
  font-family: var(--font-family);
  cursor: pointer;
  color: var(--color-text);
  transition: background 0.16s;
}
.ti-action-card-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  width: 100%;
}
/* Icon slot — no background, no border-radius, no padding. Just
   the glyph itself in the group's accent color. The 20px box gives
   the SVG room to breathe and acts as the multi-select check
   "anchor" — when selected, an accent-filled rounded square fills
   this slot and shows a white check. */
.ti-action-card-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 5px;
  background: transparent;
  /* Single neutral icon color across all sections — the accent
     work now lives on the section-label chip instead, keeping
     the row content (icon + name + description) reading as
     uniform content rather than color-coded by section. */
  color: #6c7589;
  flex-shrink: 0;
}
.ti-action-card-icon-svg {
  width: 13px;
  height: 13px;
  color: inherit;
  stroke-width: 1.5;
}

/* === Inline-SVG shortcut icon ====================================
   Icon SVGs are inlined from the build-generated registry so
   stroke="currentColor" resolves to the parent's CSS color
   directly. Section-accent tinting (color: var(--ti-accent)
   on the wrapper) propagates automatically. */
.shortcut-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: inherit;
}
.shortcuts-sidebar .ti-action-card .ti-action-card-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: #1a2235;
  /* Allow long titles to wrap to a second line within the header
     row — sits to the right of the inline glyph naturally. */
  white-space: normal;
  word-break: break-word;
}
.ti-action-card-desc {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.002em;
  color: #6a7689;
  /* Description spans the full card width — no indent under the
     icon. Reads as a continuation of the title row rather than a
     subordinate paragraph aligned with a separate icon column. */
  margin: 0;
}

/* Hover state — row picks up a soft accent tint. No spine, no
   border, no shadow: the tint alone signals interactivity. */
@media (hover: hover) {
  .shortcuts-sidebar .sidebar-shortcut.ti-action-card:hover {
    background: color-mix(in srgb, var(--ti-accent) 5%, transparent);
  }
}

/* Multi-select state — the small icon slot fills with a rounded
   accent square + white check (reads as a ticked checkbox), the row
   tints accent, and the left rule resolves to full accent. No
   border / box-shadow on the row itself — the tint + rule + check
   carry the state without re-introducing card chrome. */
.ti-action-card-marker {
  position: absolute;
  inset: 0;
  display: none;
  border-radius: 4px;
  background: var(--ti-accent);
  color: #fff;
  align-items: center;
  justify-content: center;
}
.ti-action-card-check { color: #fff; }
.shortcuts-sidebar .sidebar-shortcut.ti-action-card.is-multi-selected {
  background: color-mix(in srgb, var(--ti-accent) 9%, transparent);
}
.shortcuts-sidebar .sidebar-shortcut.ti-action-card.is-multi-selected
  .ti-action-card-marker { display: inline-flex; }
.shortcuts-sidebar .sidebar-shortcut.ti-action-card.is-multi-selected
  .ti-action-card-icon-svg { visibility: hidden; }
.shortcuts-sidebar .sidebar-shortcut.ti-action-card.is-multi-selected
  .ti-action-card-name { color: var(--ti-accent); }

/* Hide the legacy bullet marker on cards (it was the original
   selection indicator before the card redesign — keeping the
   .ai-shortcut-marker classname intact so the existing JS still
   works, but visually we replaced it with the icon-overlay check
   above). */
.ti-action-card .ai-shortcut-marker-dot { display: none; }

/* Mobile (tabbed mode): cards get more room since the sidebar
   fills the viewport. Icon glyph and type sizes step up so the
   card reads comfortably from arm's length on a phone. */
@media (max-width: 899.98px) {
  /* Mobile shortcut rows: drop the left-accent spine and give each
     card a bordered chevron-row treatment — icon on the left, title
     + description in the middle, ">" chevron pinned to the right.
     Reads as a "tap to open" list item, matching the mobile redesign
     mockup. Minimal gap between consecutive cards so the list reads
     as a tight set; section-header margin-bottom handles the larger
     separation between sections. */
  .ti-action-cards { gap: 0.35rem; }
  .shortcuts-sidebar .sidebar-shortcut.ti-action-card {
    padding: 0.95rem 2.2rem 1rem 0.95rem;
    gap: 0.3rem;
    background: #ffffff;
    border: 1px solid #e2e6ee;
    border-left: 1px solid #e2e6ee;
    border-radius: 10px;
    position: relative;
  }
  .shortcuts-sidebar .sidebar-shortcut.ti-action-card::after {
    content: '';
    position: absolute;
    right: 0.85rem;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid #9aa3b3;
    border-top: 1.5px solid #9aa3b3;
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
    transition: border-color 0.14s;
  }
  .shortcuts-sidebar .sidebar-shortcut.ti-action-card:hover::after {
    border-right-color: var(--ti-accent);
    border-top-color: var(--ti-accent);
  }
  .shortcuts-sidebar .sidebar-shortcut.ti-action-card.is-multi-selected {
    background: color-mix(in srgb, var(--ti-accent) 7%, #ffffff);
    border-color: var(--ti-accent);
  }
  .ti-action-card-header { gap: 0.4rem; }
  .ti-action-card-icon { width: 18px; height: 18px; }
  .ti-action-card-icon-svg { width: 16px; height: 16px; }
  .shortcuts-sidebar .ti-action-card .ti-action-card-name { font-size: 0.88rem; }
  .ti-action-card-desc { font-size: 0.74rem; line-height: 1.4; }
}

/* Custom-search page — the panel takes the full page width. AI
   action cards use auto-fit grid with BOUNDED cell width
   (minmax(260px, 340px)) so cells respond to viewport width
   (more columns when wider) but never stretch past 340px when
   there's leftover row space. A row with one card sits at 340px
   on the left, not blown out across the full panel; a wide
   viewport gets 3–4 columns instead of 2 fat ones. The continuous-
   spine effect doesn't work in a multi-column grid (stubby orphan
   rules), so cells switch to a proper bordered tile treatment. */
/* Custom-search pages: use the same single-column tabular row
   layout as topic-page Topic Intelligence on mobile/tabular widths.
   Each row spans the full content width — icon + name on top, short
   description below, chevron on the right — instead of the 2-column
   tile grid we previously used at desktop widths. The user wants
   custom pages to read like the tabular nav on topic pages, not
   like a card deck. */
.topic-layout.is-custom .ti-actions-section .ti-action-cards {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-right: 0;
}
.topic-layout.is-custom .sidebar-shortcut.ti-action-card {
  padding: 0.7rem 0.95rem 0.75rem;
  background: #ffffff;
  border: 1px solid #e2e6ee;
  border-left: 1px solid #e2e6ee;
  border-radius: 8px;
}
.topic-layout.is-custom .sidebar-shortcut.ti-action-card:hover {
  background: #ffffff;
  border-color: var(--ti-accent);
}
.topic-layout.is-custom .sidebar-shortcut.ti-action-card.is-multi-selected {
  background: color-mix(in srgb, var(--ti-accent) 6%, #ffffff);
  border-color: var(--ti-accent);
}
/* Three-column Web Sources grid for is-custom (matches mobile
   tabular feel — three chips per row, full-width tabular rather
   than the 4-col compact pack we had at desktop). */
.topic-layout.is-custom .ti-web-source-chips {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}
@media (max-width: 640px) {
  .topic-layout.is-custom .ti-web-source-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}