/* customer_dashboard_overrides.css — TitrateLab brand on top of Tabler.

   Design language: quietly-dense premium SaaS for serious operators.
   Reference: Linear, Vercel Dashboard, Stripe.

   Strategy
   --------
   1. ONE token layer at :root — palette, type scale, spacing, radii, shadows,
      motion. Everything below references those tokens; nothing hardcodes
      colors/spacing.
   2. Override Tabler's own --tblr-* vars at :root so all Tabler components
      pick up the brand without needing per-component selectors.
   3. Component layer below the tokens — buttons, cards, tiles, sidebar — each
      one a small set of selectors that build on the tokens.
   4. Motion is premium-quiet: 160ms cubic-bezier(0.4, 0, 0.2, 1). No springs,
      no bounce. Hover lifts use translateY + opacity, not scale.

   Loaded AFTER Tabler so :root specificity wins. */

/* ────────────────────────────────────────────────────────────────────────
   1. TOKEN LAYER
   ──────────────────────────────────────────────────────────────────────── */
:root,
[data-bs-theme="dark"] {
  /* — Brand palette — */
  --tl-navy-900: #0a1530;          /* darkest — sidebar / topbar */
  --tl-navy-800: #0F1E3D;          /* page bg */
  --tl-navy-700: #16264a;          /* card bg (a touch lighter than before for separation) */
  --tl-navy-600: #1f3260;          /* elevated card / hover surface */
  --tl-gold-500: #58a6ff;          /* primary brand */
  --tl-gold-400: #79b8ff;          /* hover lift */
  --tl-gold-600: #1f6feb;          /* pressed / link-hover */

  /* — Ink (text) — */
  --tl-ink-100: #FAFAF7;           /* primary text */
  --tl-ink-300: #c8cdd9;           /* secondary text — bumped up from #aab1c2 for 4.5:1 contrast */
  --tl-ink-500: #8a93a8;           /* tertiary / placeholder */

  /* — Borders / dividers — */
  --tl-border:        rgba(255, 255, 255, 0.06);
  --tl-border-strong: rgba(255, 255, 255, 0.12);
  --tl-border-gold:   rgba(88, 166, 255, 0.35);

  /* — Semantic — */
  --tl-success: #4ADE80;
  --tl-danger:  #f87171;
  --tl-info:    #adbde8;

  /* — Spacing scale (4px base, fibonacci-ish) — */
  --tl-space-1: 4px;
  --tl-space-2: 8px;
  --tl-space-3: 12px;
  --tl-space-4: 16px;
  --tl-space-5: 20px;
  --tl-space-6: 24px;
  --tl-space-8: 32px;
  --tl-space-10: 40px;

  /* — Radius — */
  --tl-radius-sm: 6px;
  --tl-radius-md: 10px;
  --tl-radius-lg: 14px;

  /* — Shadow elevation — */
  /* T1-6: two-layer shadow ramp (sharp contact + soft ambient). Single-blur
     shadows read as flat stickers; layered shadows make surfaces feel
     physically lifted (Stripe/Linear). Pure token swap → lifts every card,
     KPI tile, toast, modal, popover at once. */
  --tl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20), 0 1px 1px rgba(0, 0, 0, 0.12);
  --tl-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.20), 0 8px 24px -6px rgba(0, 0, 0, 0.40);
  --tl-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.24), 0 20px 48px -12px rgba(0, 0, 0, 0.55);
  --tl-shadow-gold: 0 6px 20px rgba(88, 166, 255, 0.18);

  /* — Type scale — */
  --tl-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* JetBrains Mono FIRST (2026-05-31): it's now loaded as a webfont, but it sat
     after ui-monospace so system mono always won + it never downloaded. Leading
     with it gives the distinctive mono labels the /research/portal has. */
  --tl-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tl-fs-display: 32px;
  --tl-fs-h1: 24px;
  --tl-fs-h2: 18px;
  --tl-fs-h3: 15px;
  --tl-fs-body: 14px;
  --tl-fs-small: 13px;
  --tl-fs-micro: 11px;
  --tl-lh-tight: 1.2;
  --tl-lh-body: 1.55;

  /* — Motion — */
  --tl-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tl-dur-fast: 120ms;
  --tl-dur:      160ms;
  --tl-dur-slow: 220ms;

  /* — Tabler bridge: rewire Tabler's own design tokens to ours — */
  --tblr-primary:           var(--tl-gold-500);
  --tblr-primary-rgb:       88, 166, 255;
  --tblr-primary-fg:        var(--tl-navy-800);
  --tblr-link-color:        var(--tl-gold-500);
  --tblr-link-hover-color:  var(--tl-gold-400);

  --tblr-yellow:            var(--tl-gold-500);
  --tblr-yellow-rgb:        88, 166, 255;
  --tblr-yellow-darken:     var(--tl-gold-600);
  --tblr-yellow-fg:         var(--tl-navy-800);

  --tblr-bg-surface:           var(--tl-navy-800);
  --tblr-bg-surface-secondary: var(--tl-navy-700);
  --tblr-bg-surface-tertiary:  var(--tl-navy-600);
  --tblr-body-bg:              var(--tl-navy-800);
  --tblr-body-color:           var(--tl-ink-100);
  --tblr-card-bg:              var(--tl-navy-700);
  --tblr-card-border-color:    var(--tl-border);
  --tblr-border-color:         var(--tl-border);
  --tblr-secondary:            var(--tl-ink-300);
  --tblr-secondary-rgb:        200, 205, 217;
}

/* ────────────────────────────────────────────────────────────────────────
   2. BASE — body, links, headings
   ──────────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--tl-font-sans);
  font-size: var(--tl-fs-body);
  line-height: var(--tl-lh-body);
  background-color: var(--tl-navy-800);
  /* Atmospheric depth (2026-05-31): a soft navy glow from the top edge so the
     page reads as a lit space, not a flat fill. Fixed so it doesn't scroll.
     Premium dark dashboards (Linear/Vercel) almost never use a flat bg. */
  background-image: radial-gradient(1100px 560px at 78% -12%, rgba(31, 50, 96, 0.55) 0%, rgba(15, 30, 61, 0) 62%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--tl-ink-100);
  /* T1-1 (2026-05-31): add tabular figures + contextual alternates. The bare
     list was REPLACING the inherited feature set and silently dropping tabular
     numerals — so numbers wiggled down right-aligned columns. This restores
     them document-wide: the single strongest "real data product" signal. */
  font-feature-settings: "cv02" 1, "cv11" 1, "ss01" 1, "tnum" 1, "calt" 1;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* T1-5: thin branded scrollbars. Stock OS scrollbars on a dark surface are a
   recognizable not-premium tell; Linear/Vercel/Supabase all override them. */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); }

/* T1-4: one unified gold focus ring. Before, only .btn had a focus-visible
   ring; links/rows/chips/summaries had none or inconsistent ones. This both
   reads as authored-by-one-hand and safeguards the 100/100 a11y. */
a:focus-visible, .nav-link:focus-visible, .tl-action:focus-visible,
.tl-vendor-row-clickable:focus-visible, .list-group-item-action:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--tl-gold-500);
  outline-offset: 2px;
  border-radius: var(--tl-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

.text-secondary { color: var(--tl-ink-300) !important; }
/* a11y: Tabler's danger red (#d63939) on our dark card bg (#16264a) is only
   3.19:1 — fails WCAG AA. Use the lighter token red (--tl-danger #f87171 ≈
   5.7:1) for danger TEXT on dark surfaces. (Lighthouse 2026-05-31.) */
.text-danger { color: var(--tl-danger) !important; }
.small, small { font-size: var(--tl-fs-small); }

/* Tabular numerics everywhere they belong — KPI values, money, dates, IDs */
.font-monospace, .font-mono, code, kbd, samp { font-family: var(--tl-font-mono); }

/* Page titles + card titles */
/* Tighter optical tracking on display sizes + balanced wrapping (no orphan
   words on titles) — the quiet typographic craft premium products share. */
h1, .h1, .page-title { font-size: var(--tl-fs-h1); font-weight: 700; line-height: var(--tl-lh-tight); letter-spacing: -0.022em; color: var(--tl-ink-100); text-wrap: balance; }
h2, .h2 { font-size: 20px; font-weight: 600; line-height: var(--tl-lh-tight); letter-spacing: -0.015em; text-wrap: balance; }
h3, .h3, .card-title { font-size: var(--tl-fs-h2); font-weight: 600; line-height: var(--tl-lh-tight); letter-spacing: -0.01em; color: var(--tl-ink-100); }
h4, .h4 { font-size: var(--tl-fs-h3); font-weight: 600; letter-spacing: -0.006em; }
.page-pretitle {
  font-size: var(--tl-fs-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Branded gold eyebrow (2026-05-31) — a premium signature above every page
     title, instead of generic grey. */
  color: var(--tl-gold-500);
}

/* ────────────────────────────────────────────────────────────────────────
   3. SIDEBAR
   ──────────────────────────────────────────────────────────────────────── */
.navbar-vertical {
  background: var(--tl-navy-900);
  border-right: 1px solid var(--tl-border);
}
.navbar-vertical .navbar-brand img { filter: brightness(1.15); }
.navbar-brand-image { height: 32px; width: auto; }

.navbar-vertical .nav-link {
  color: var(--tl-ink-300);
  border-radius: var(--tl-radius-sm);
  margin: 2px 8px;
  padding: 8px 12px;
  transition: color var(--tl-dur) var(--tl-ease),
              background-color var(--tl-dur) var(--tl-ease);
}
.navbar-vertical .nav-link:hover,
.navbar-vertical .nav-link:focus {
  color: var(--tl-ink-100);
  background: rgba(255, 255, 255, 0.04);
}
.navbar-vertical .nav-item.active > .nav-link,
.navbar-vertical .nav-link.active {
  color: var(--tl-gold-400);
  /* Gradient wash fading away from the accent bar + a bolder label — a more
     deliberate active state than a flat tint. Inset box-shadow = no reflow. */
  background: linear-gradient(90deg, rgba(88, 166, 255, 0.16) 0%, rgba(88, 166, 255, 0.03) 100%);
  box-shadow: inset 3px 0 0 var(--tl-gold-500);
  padding-left: 12px;
  font-weight: 600;
}
/* Idle icons sit back (0.62); they brighten on hover + go full-strength when
   active — gives the rail depth and directs the eye (Linear/Vercel pattern). */
.navbar-vertical .nav-link-icon {
  margin-right: 10px;
  opacity: 0.62;
  transition: opacity var(--tl-dur) var(--tl-ease);
}
.navbar-vertical .nav-link:hover .nav-link-icon,
.navbar-vertical .nav-link:focus .nav-link-icon { opacity: 1; }
.navbar-vertical .nav-item.active > .nav-link .nav-link-icon,
.navbar-vertical .nav-link.active .nav-link-icon { opacity: 1; }
.navbar-vertical .nav-link-title {
  font-size: var(--tl-fs-body);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Prevent Pro lock+badge from clipping past sidebar's right edge */
  flex-wrap: wrap;
}

/* Pro lock badge in sidebar — inline, never wider than its column.
   Sidebar nav-link-title flex-wraps so badge drops to a new line on tight widths. */
.navbar-vertical .nav-link-title .badge,
.tl-nav-pro-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  vertical-align: middle;
  line-height: 1.2;
  margin-left: 4px;
}
.tl-pro-lock { opacity: 0.85; vertical-align: middle; }

/* Sidebar footer plan chip — stack the label + badge instead of inlining,
   so wide labels ("Founding-20 reserved") don't push the badge offscreen */
.navbar-vertical .mt-auto > div.text-secondary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: var(--tl-fs-small);
}
.navbar-vertical .mt-auto > div.text-secondary .badge {
  margin-left: 0 !important;
}

/* Inherit-color override for nested anchors (legacy fix from prior CSS) */
.navbar-vertical .nav-link a,
.navbar .nav-link a { color: inherit; }

/* Sidebar section dividers — uppercase muted label with a hairline above.
   Each section gets a <li class="nav-tl-section"> wrapper carrying both. */
.navbar-vertical .nav-tl-section {
  list-style: none;
  margin: 18px 12px 4px;
  padding: 0 8px;
  /* Whisper group labels, not dividers — drop the heavy hairline for breathing
     room + wider tracking (Linear/Vercel sidebar pattern). */
  border-top: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tl-ink-500);
  pointer-events: none;
}
.navbar-vertical .navbar-nav > .nav-tl-section:first-of-type { margin-top: 10px; }

/* ────────────────────────────────────────────────────────────────────────
   4. TOPBAR
   ──────────────────────────────────────────────────────────────────────── */
.page > header.navbar {
  background: var(--tl-navy-900);
  border-bottom: 1px solid var(--tl-border);
  min-height: 56px;
}
.page > header.navbar .avatar {
  font-weight: 600;
  font-size: var(--tl-fs-small);
  letter-spacing: 0.02em;
}

/* ────────────────────────────────────────────────────────────────────────
   5. PAGE HEADER (page-pretitle + page-title + actions row)
   ──────────────────────────────────────────────────────────────────────── */
.page-header {
  padding: var(--tl-space-6) 0 var(--tl-space-4);
  border-bottom: 0;
}
.page-header .page-pretitle { margin-bottom: 6px; }
/* Confident hero title (2026-05-31): 30px tight-tracked, up from 24px — the
   page title is the anchor of every screen; premium dashboards lead big. */
.page-header .page-title { margin: 0; font-size: 30px; letter-spacing: -0.02em; line-height: 1.15; }

/* Mobile: action buttons go on their own row, full-width — no overlay on title.
   Long emails as page titles also need word-break to avoid overflow. */
@media (max-width: 575.98px) {
  .page-header .row.align-items-center { row-gap: var(--tl-space-3); }
  .page-header .col-auto.ms-auto { width: 100%; margin-left: 0 !important; }
  .page-header .col-auto.ms-auto > .d-flex,
  .page-header .col-auto.ms-auto { display: flex; flex-wrap: wrap; gap: var(--tl-space-2); }
  .page-header .col-auto.ms-auto .btn { flex: 1 1 auto; min-width: 140px; }
  .page-header .page-title { font-size: 20px; word-break: break-word; }
}

/* ────────────────────────────────────────────────────────────────────────
   6. CARDS — base + KPI + paywall variants
   ──────────────────────────────────────────────────────────────────────── */
.card {
  /* Lit-from-above material: a faint top sheen over the navy fill + a 1px inset
     highlight on the top edge. Reads as a physical surface, not a flat panel —
     the single biggest "flat = cheap" tell on dark UIs. (2026-05-31 polish.) */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022) 0%, rgba(255, 255, 255, 0) 38%),
    var(--tl-navy-700);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-md);
  box-shadow: var(--tl-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color var(--tl-dur) var(--tl-ease),
              box-shadow var(--tl-dur) var(--tl-ease),
              transform var(--tl-dur) var(--tl-ease);
}
.card-header {
  border-bottom: 1px solid var(--tl-border);
  padding: var(--tl-space-4) var(--tl-space-5);
  background: transparent;
  /* Stack card-title + card-subtitle vertically — fixes the orders-mobile
     "Order history" heading wrapping into the body copy at narrow widths */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.card-header .card-title { margin: 0; }
.card-header .card-subtitle {
  margin: 0;
  font-size: var(--tl-fs-small);
  color: var(--tl-ink-300);
  font-weight: 400;
  line-height: 1.45;
}
.card-body { padding: var(--tl-space-5); }
.card-title { color: var(--tl-ink-100); }

/* Paywall card variant — gold accent border instead of Tabler's harsh orange */
.card.border-warning {
  border-color: var(--tl-border-gold);
  box-shadow: var(--tl-shadow-gold);
}
.tl-paywall-icon {
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

/* ── KPI cards — the 4-up row on /dashboard ── */
.tl-kpi-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022) 0%, rgba(255, 255, 255, 0) 38%),
    var(--tl-navy-700);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-md);
  padding: var(--tl-space-5);
  position: relative;
  height: 100%;
  /* Tabler's .row-deck makes parent cols `display: flex` (for equal heights),
     which means without an explicit width: 100% on the card, each card sizes
     to its content's natural width — and tiles with shorter copy (Pulse
     "Latest investigation ready." vs Watchlist's wrapped multi-line body)
     end up narrower than their col. Forces every card to fill its col,
     keeping gutters uniform across the row. */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 156px;
  overflow: hidden;
  box-shadow: var(--tl-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform var(--tl-dur) var(--tl-ease),
    border-color var(--tl-dur) var(--tl-ease),
    box-shadow var(--tl-dur) var(--tl-ease);
}
.tl-kpi-card:hover {
  border-color: var(--tl-border-strong);
  box-shadow: var(--tl-shadow-md);
  transform: translateY(-1px);
}
.tl-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--tl-gold-500) 0%, rgba(88, 166, 255, 0.2) 100%);
}
.tl-kpi-card .tl-kpi-label {
  font-size: var(--tl-fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tl-ink-300);
  margin-bottom: var(--tl-space-2);
  display: flex;
  align-items: center;
  gap: 6px;
}
.tl-kpi-card .tl-kpi-label .badge {
  font-size: 9px;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  text-transform: uppercase;
}
.tl-kpi-card .tl-kpi-value {
  /* Heroic metric numerals (2026-05-31): 42px, up from 32px. The number is the
     point of a KPI tile — premium data products make it the loud thing. */
  font-size: 42px;
  font-weight: 700;
  color: var(--tl-ink-100);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.tl-kpi-card .tl-kpi-headline {
  font-size: var(--tl-fs-small);
  color: var(--tl-ink-300);
  margin-top: var(--tl-space-2);
  line-height: 1.45;
}
.tl-kpi-card .tl-kpi-link {
  font-size: var(--tl-fs-small);
  font-weight: 600;
  color: var(--tl-gold-500);
  margin-top: var(--tl-space-3);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  align-self: flex-start;
  transition: color var(--tl-dur) var(--tl-ease), gap var(--tl-dur) var(--tl-ease);
}
.tl-kpi-card .tl-kpi-link:hover {
  color: var(--tl-gold-400);
  gap: 9px;
}

/* Editorial KPI variant — for tiles whose "value" is a state or a sentence,
   not a number. The headline takes over the visual-anchor role that the
   giant numeric value plays in metric tiles (Orders/Research), so the four
   tiles feel like equal-weight rectangles in the row. The status pill is
   demoted to a small annotation above the headline. Used by Today's Pulse
   + Watchlist (Free) — both editorial-by-nature, not metric-driven. */
.tl-kpi-card.tl-kpi-editorial .tl-kpi-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--tl-fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(74, 222, 128, 0.12);
  color: var(--tl-success);
  margin-bottom: var(--tl-space-3);
  align-self: flex-start;
}
.tl-kpi-card.tl-kpi-editorial .tl-kpi-status[data-state="muted"] {
  background: rgba(255, 255, 255, 0.06);
  color: var(--tl-ink-300);
}
.tl-kpi-card.tl-kpi-editorial .tl-kpi-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.16);
}
.tl-kpi-card.tl-kpi-editorial .tl-kpi-status[data-state="muted"]::before {
  box-shadow: none;
  opacity: 0.6;
}
.tl-kpi-card.tl-kpi-editorial .tl-kpi-headline {
  font-size: var(--tl-fs-h2);    /* 18px — matches the visual weight of the */
  color: var(--tl-ink-100);      /*       numeric value's anchoring presence */
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0;
  letter-spacing: -0.01em;
}
/* Push the CTA link to the bottom of every KPI tile regardless of how
   short the body content is — keeps row-deck-equalized tiles visually
   balanced rather than leaving dead space at the bottom of editorial cards. */
.tl-kpi-card .tl-kpi-link {
  margin-top: auto;
}

/* Page-header back-link breadcrumb — used on dashboard sub-pages
   (Submit COA, etc.) to give a quick "back to /dashboard" affordance
   above the page title, in addition to the standard sidebar nav. */
.tl-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tl-ink-300);
  text-decoration: none;
  font-size: var(--tl-fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color var(--tl-dur) var(--tl-ease), gap var(--tl-dur) var(--tl-ease);
}
.tl-back-link:hover {
  color: var(--tl-gold-500);
  gap: 9px;
}

/* Quick-actions grid layout — used when Quick actions occupies the wide
   column (col-lg-8 on /dashboard). Each action becomes a 2-row chip with
   icon, label, and a sub-caption. Stacks single-column on mobile. */
.tl-quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tl-space-3);
}
@media (min-width: 992px) {
  .tl-quick-actions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Action chips are intentionally lightweight — no per-chip border or
   background by default. Visual structure comes from the parent card and
   the grid gutter; chips earn a frame only on hover (affordance) and on
   the two semantic accent states (is-primary, is-upgrade). This avoids
   the "boxes inside boxes" feel of fully-framed chips. */
.tl-quick-actions-grid .tl-action {
  display: flex;
  align-items: flex-start;
  gap: var(--tl-space-3);
  padding: var(--tl-space-3) var(--tl-space-4);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--tl-radius-md);
  text-decoration: none;
  color: var(--tl-ink-100);
  transition:
    border-color var(--tl-dur) var(--tl-ease),
    background var(--tl-dur) var(--tl-ease),
    transform var(--tl-dur) var(--tl-ease);
}
.tl-quick-actions-grid .tl-action:hover {
  border-color: var(--tl-border-strong);
  background: rgba(255, 255, 255, 0.025);
  transform: translateY(-1px);
}
.tl-quick-actions-grid .tl-action.is-primary {
  border-color: var(--tl-border-gold);
  background: linear-gradient(180deg, rgba(88, 166, 255, 0.10), rgba(88, 166, 255, 0.04));
}
.tl-quick-actions-grid .tl-action.is-primary:hover {
  border-color: var(--tl-gold-500);
  background: linear-gradient(180deg, rgba(88, 166, 255, 0.16), rgba(88, 166, 255, 0.06));
}
.tl-quick-actions-grid .tl-action.is-upgrade {
  border-color: var(--tl-border-gold);
  background: rgba(88, 166, 255, 0.04);
}
.tl-quick-actions-grid .tl-action .tl-action-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--tl-radius-sm);
  /* Branded gold chip (2026-05-31): the gold stroke-icon now sits in a gold-
     tinted, gold-bordered tile instead of a flat grey square — reads as an
     intentional product affordance, not a default admin-template icon. */
  background: rgba(88, 166, 255, 0.12);
  border: 1px solid rgba(88, 166, 255, 0.20);
  color: var(--tl-gold-500);
  transition: background var(--tl-dur) var(--tl-ease), border-color var(--tl-dur) var(--tl-ease);
}
.tl-quick-actions-grid .tl-action:hover .tl-action-icon {
  background: rgba(88, 166, 255, 0.20);
  border-color: rgba(88, 166, 255, 0.40);
}
.tl-quick-actions-grid .tl-action .tl-action-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tl-quick-actions-grid .tl-action .tl-action-label {
  font-size: var(--tl-fs-body);
  font-weight: 600;
  color: var(--tl-ink-100);
  line-height: 1.25;
}
.tl-quick-actions-grid .tl-action .tl-action-caption {
  font-size: var(--tl-fs-small);
  color: var(--tl-ink-300);
  line-height: 1.35;
}
.tl-quick-actions-grid .tl-action.is-disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* ────────────────────────────────────────────────────────────────────────
   7. BUTTONS — unified height/padding/states across all 6 pages
   ──────────────────────────────────────────────────────────────────────── */
.btn {
  font-weight: 500;
  border-radius: var(--tl-radius-sm);
  padding: 8px 14px;
  font-size: var(--tl-fs-body);
  line-height: 1.4;
  letter-spacing: 0.005em;
  border-width: 1px;
  transition:
    background-color var(--tl-dur) var(--tl-ease),
    border-color var(--tl-dur) var(--tl-ease),
    color var(--tl-dur) var(--tl-ease),
    transform var(--tl-dur-fast) var(--tl-ease),
    box-shadow var(--tl-dur) var(--tl-ease);
}
.btn:focus-visible {
  outline: 2px solid var(--tl-gold-500);
  outline-offset: 2px;
  box-shadow: none;
}
.btn:active { transform: translateY(1px); }

.btn-sm {
  padding: 5px 10px;
  font-size: var(--tl-fs-small);
  border-radius: var(--tl-radius-sm);
}
.btn-lg {
  padding: 11px 18px;
  font-size: 15px;
}

/* Primary brand button (gold) — solid, navy ink */
.btn-yellow,
.btn-yellow:link,
.btn-yellow:visited {
  /* Lit gold: a top-down gradient + a 1px inner top-highlight so the primary
     button reads as a physical, pressable surface instead of a flat fill. */
  background: linear-gradient(180deg, var(--tl-gold-400) 0%, var(--tl-gold-500) 100%);
  border-color: var(--tl-gold-600);
  color: var(--tl-navy-900);
  font-weight: 600;
  box-shadow: var(--tl-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-yellow:hover,
.btn-yellow:focus {
  background: linear-gradient(180deg, #8ec3ff 0%, var(--tl-gold-400) 100%);
  border-color: var(--tl-gold-500);
  color: var(--tl-navy-900);
  box-shadow: var(--tl-shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.34);
  transform: translateY(-1px);
}
.btn-yellow:active {
  background: var(--tl-gold-600);
  border-color: var(--tl-gold-600);
  transform: translateY(0);
  box-shadow: var(--tl-shadow-sm);
}
.btn-yellow:disabled,
.btn-yellow.disabled {
  background: rgba(88, 166, 255, 0.45);
  border-color: rgba(88, 166, 255, 0.45);
  color: rgba(15, 30, 61, 0.7);
}

/* Outline button — secondary action */
.btn-outline-secondary {
  color: var(--tl-ink-100);
  border-color: var(--tl-border-strong);
  background: transparent;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--tl-gold-500);
  color: var(--tl-gold-500);
}

/* Ghost / link-style button */
.btn-link {
  color: var(--tl-gold-500);
  text-decoration: none;
  padding: 6px 8px;
}
.btn-link:hover { color: var(--tl-gold-400); text-decoration: underline; }

/* Destructive */
.btn-outline-danger {
  color: var(--tl-danger);
  border-color: rgba(248, 113, 113, 0.4);
}
.btn-outline-danger:hover {
  background: rgba(248, 113, 113, 0.08);
  border-color: var(--tl-danger);
  color: var(--tl-danger);
}

/* Outline-warning (used by free-tier upgrade button) — gold-tinted */
.btn-outline-warning {
  color: var(--tl-gold-500);
  border-color: var(--tl-gold-500);
  background: transparent;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
  background: var(--tl-gold-500);
  border-color: var(--tl-gold-500);
  color: var(--tl-navy-800);
}

/* ────────────────────────────────────────────────────────────────────────
   8. QUICK-ACTIONS card — left-aligned button stack with icon gutter
   ──────────────────────────────────────────────────────────────────────── */
.tl-quick-actions { padding: var(--tl-space-4) var(--tl-space-5); }
.tl-quick-actions .btn {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--tl-space-3);
  margin-bottom: var(--tl-space-2);
  padding: 10px 14px;
  font-weight: 500;
  border-radius: var(--tl-radius-sm);
}
.tl-quick-actions .btn:last-child { margin-bottom: 0; }
.tl-quick-actions .btn svg { flex-shrink: 0; opacity: 0.9; }
.tl-quick-actions .btn-yellow {
  margin-bottom: var(--tl-space-3);
  box-shadow: var(--tl-shadow-sm);
}
.tl-quick-actions .btn-outline-secondary {
  background: transparent;
  border-color: var(--tl-border);
  color: var(--tl-ink-100);
}
.tl-quick-actions .btn-outline-secondary:hover {
  background: rgba(88, 166, 255, 0.08);
  border-color: var(--tl-gold-500);
  color: var(--tl-gold-500);
}

/* ────────────────────────────────────────────────────────────────────────
   9. FORM CONTROLS
   ──────────────────────────────────────────────────────────────────────── */
.form-control,
.form-select {
  background-color: var(--tl-navy-800);
  border: 1px solid var(--tl-border-strong);
  color: var(--tl-ink-100);
  border-radius: var(--tl-radius-sm);
  padding: 8px 12px;
  font-size: var(--tl-fs-body);
  transition: border-color var(--tl-dur) var(--tl-ease), box-shadow var(--tl-dur) var(--tl-ease);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--tl-gold-500);
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.18);
  background-color: var(--tl-navy-800);
  color: var(--tl-ink-100);
}
.form-label {
  font-size: var(--tl-fs-small);
  font-weight: 500;
  color: var(--tl-ink-300);
  margin-bottom: 6px;
}

/* ────────────────────────────────────────────────────────────────────────
   10. ALERTS / BANNERS (founding-20 strip, free-tier strip)
   ──────────────────────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--tl-radius-md);
  border: 1px solid var(--tl-border);
  padding: var(--tl-space-3) var(--tl-space-4);
  font-size: var(--tl-fs-small);
}
.alert-warning {
  /* Semantic caution — stays amber. Decoupled from the brand --tl-border-gold
     token (now blue) so the warning alert keeps its amber caution signal. */
  background: linear-gradient(180deg, rgba(227, 179, 65, 0.10), rgba(227, 179, 65, 0.04));
  border-color: rgba(227, 179, 65, 0.35);
  color: var(--tl-ink-100);
}
.alert-secondary {
  background: rgba(255, 255, 255, 0.025);
  border-color: var(--tl-border);
  color: var(--tl-ink-100);
}
.alert strong { color: var(--tl-ink-100); }

/* ────────────────────────────────────────────────────────────────────────
   11. TABLES
   ──────────────────────────────────────────────────────────────────────── */
.table-vcenter > :not(caption) > * > * { vertical-align: middle; }
.table.card-table {
  color: var(--tl-ink-100);
  margin: 0;
}
.table.card-table thead th {
  color: var(--tl-ink-300);
  font-size: var(--tl-fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--tl-space-3) var(--tl-space-4);
  border-bottom: 1px solid var(--tl-border);
  background: rgba(255, 255, 255, 0.015);
}
.table.card-table tbody td {
  padding: var(--tl-space-3) var(--tl-space-4);
  border-color: var(--tl-border);
  font-size: var(--tl-fs-body);
}
.table.card-table tbody tr {
  transition: background-color var(--tl-dur) var(--tl-ease);
}
.table.table-hover tbody tr:hover,
.table.card-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }

/* T1-1: tabular + lining figures on numeric table cells so columns align like
   a ledger (pairs with the body-level tnum). `td.tl-num` is already in markup. */
.table.card-table td.tl-num, .table.card-table th.tl-num,
.tl-vendors-table td.tl-num, .tl-vendors-table th.tl-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
/* T1-8: whisper zebra (~1%) for dense-row readability. The cell-level hover
   rule is re-declared after it so hover stays dominant over the even banding. */
.table.card-table tbody tr:nth-child(even) td { background-color: rgba(255, 255, 255, 0.012); }
.table.card-table tbody tr:hover td,
.table.table-hover tbody tr:hover td { background-color: rgba(255, 255, 255, 0.03); }

/* ────────────────────────────────────────────────────────────────────────
   12. BADGES (status, plan-tier, watchlist kind)
   ──────────────────────────────────────────────────────────────────────── */
.badge {
  font-size: var(--tl-fs-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 4px;
}
.bg-yellow-lt {
  background: rgba(88, 166, 255, 0.14) !important;
  color: var(--tl-gold-500) !important;
}
.bg-blue-lt {
  background: rgba(173, 189, 232, 0.14) !important;
  color: var(--tl-info) !important;
}
.bg-green-lt {
  background: rgba(74, 222, 128, 0.14) !important;
  color: var(--tl-success) !important;
}

.avatar.bg-yellow { background: var(--tl-gold-500); }
.avatar.text-navy { color: var(--tl-navy-800); }

/* ────────────────────────────────────────────────────────────────────────
   13. EMPTY STATES + ACTIVITY FEED
   ──────────────────────────────────────────────────────────────────────── */
.empty {
  padding: var(--tl-space-8) var(--tl-space-6);
}
.empty .empty-icon {
  color: var(--tl-gold-500);
  opacity: 0.55;
}
.empty .empty-title {
  font-size: var(--tl-fs-h2);
  font-weight: 600;
  margin-top: var(--tl-space-3);
  color: var(--tl-ink-100);
}
.empty .empty-subtitle {
  font-size: var(--tl-fs-small);
  color: var(--tl-ink-300);
  max-width: 48ch;
  margin-left: auto;
  margin-right: auto;
}

.tl-activity-feed .list-group-item {
  background: transparent;
  border-color: var(--tl-border);
  padding: var(--tl-space-3) 0;
  display: flex;
  gap: var(--tl-space-3);
  align-items: flex-start;
}
.tl-activity-feed .list-group-item:first-child { border-top: 0; }
.tl-activity-feed .activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tl-gold-500);
  margin-top: 6px;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}
.tl-activity-feed .activity-time {
  font-size: var(--tl-fs-micro);
  color: var(--tl-ink-300);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-family: var(--tl-font-mono);
}
.tl-activity-feed .activity-body {
  font-size: var(--tl-fs-body);
  color: var(--tl-ink-100);
  line-height: 1.45;
}
.tl-activity-feed .activity-meta {
  font-size: var(--tl-fs-small);
  color: var(--tl-ink-300);
  margin-top: 2px;
}

/* ────────────────────────────────────────────────────────────────────────
   14. RESEARCH list-group (article rows)
   ──────────────────────────────────────────────────────────────────────── */
.list-group-item-action {
  padding: var(--tl-space-4) var(--tl-space-5);
  border-color: var(--tl-border) !important;
  transition: background-color var(--tl-dur) var(--tl-ease);
}
.list-group-item-action:hover {
  background: rgba(255, 255, 255, 0.025);
  color: var(--tl-ink-100);
}
.list-group-item-action h4 {
  font-size: var(--tl-fs-h3);
  font-weight: 600;
  color: var(--tl-ink-100);
  margin: 0 0 4px;
}
.list-group-item-action small {
  color: var(--tl-ink-300);
  font-family: var(--tl-font-mono);
  font-size: var(--tl-fs-micro);
}
.list-group-item-action p { font-size: var(--tl-fs-small); color: var(--tl-ink-300); margin: 0; }

/* ────────────────────────────────────────────────────────────────────────
   15. PROGRESS (routed-orders bar)
   ──────────────────────────────────────────────────────────────────────── */
.progress {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  height: 6px;
}
.progress-bar.bg-yellow {
  background: linear-gradient(90deg, var(--tl-gold-600), var(--tl-gold-500), var(--tl-gold-400));
  border-radius: 999px;
  transition: width var(--tl-dur-slow) var(--tl-ease);
}

/* ────────────────────────────────────────────────────────────────────────
   16. MODAL — add-watchlist-modal
   ──────────────────────────────────────────────────────────────────────── */
.modal-content {
  background: var(--tl-navy-700);
  border: 1px solid var(--tl-border-strong);
  border-radius: var(--tl-radius-lg);
  box-shadow: var(--tl-shadow-lg);
}
.modal-header {
  border-bottom: 1px solid var(--tl-border);
  padding: var(--tl-space-4) var(--tl-space-5);
}
.modal-body { padding: var(--tl-space-5); }
.modal-footer {
  border-top: 1px solid var(--tl-border);
  padding: var(--tl-space-3) var(--tl-space-5);
  gap: var(--tl-space-2);
}

/* ────────────────────────────────────────────────────────────────────────
   17. FOOTER
   ──────────────────────────────────────────────────────────────────────── */
.footer.footer-transparent {
  border-top: 1px solid var(--tl-border);
  padding: var(--tl-space-5) 0;
  font-size: var(--tl-fs-small);
  color: var(--tl-ink-300);
}
.footer .link-secondary {
  color: var(--tl-ink-300);
  transition: color var(--tl-dur) var(--tl-ease);
}
.footer .link-secondary:hover { color: var(--tl-gold-500); }

/* ────────────────────────────────────────────────────────────────────────
   18. UTILITY OVERRIDES
   ──────────────────────────────────────────────────────────────────────── */
/* Spinner border in gold */
.spinner-border.spinner-border-sm { color: var(--tl-gold-500); }

/* Limit reading-width on prose containers — copy stays scannable */
.card-header .card-subtitle,
.empty-subtitle { max-width: 72ch; }

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  .tl-kpi-card,
  .card,
  .btn,
  .navbar-vertical .nav-link,
  .table.card-table tbody tr,
  .list-group-item-action,
  .tl-kpi-card .tl-kpi-link,
  .footer .link-secondary { transition: none !important; }
  .tl-kpi-card:hover { transform: none; }
}

/* ────────────────────────────────────────────────────────────────────────
   19. RESEARCH FEEDS (added 2026-05-10)
   Pro-tier dashboard surface at /dashboard/research/feeds + the cross-link
   promo card on /dashboard/research. All rules are additive (no edits to
   existing selectors above). Cache-buster on _base.html will be bumped by
   the operator after merging with parallel-agent CSS additions.
   ──────────────────────────────────────────────────────────────────────── */

/* Feed cards — same hover lift as .tl-kpi-card, sized for full-width
   article rows rather than 4-up KPI tiles. */
.tl-feed-card {
  background: var(--tl-navy-700);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-md);
  transition:
    transform var(--tl-dur) var(--tl-ease),
    border-color var(--tl-dur) var(--tl-ease),
    box-shadow var(--tl-dur) var(--tl-ease);
}
.tl-feed-card:hover {
  border-color: var(--tl-border-strong);
  box-shadow: var(--tl-shadow-md);
  transform: translateY(-1px);
}
.tl-feed-card .tl-feed-title {
  font-size: 1.05rem;
  line-height: 1.35;
  margin-bottom: var(--tl-space-2);
}
.tl-feed-card .tl-feed-title a {
  color: var(--tl-ink-100, #fff);
  text-decoration: none;
}
.tl-feed-card .tl-feed-title a:hover {
  color: var(--tl-gold-500);
  text-decoration: underline;
}
.tl-feed-card .tl-feed-snippet {
  /* 2026-05-13: bumped from 92ch → 100ch with the structured-section
     redesign — cards now carry rich multi-section content so the
     legacy single-paragraph fallback can use the full article width.
     Still inside the typographic comfort band's upper bound. */
  max-width: 100ch;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ── Structured-digest sections (2026-05-13 card-redesign) ─────────────
   Mirrors the Discord webhook embed's structure: ─── separator between
   sections, small-caps gold header per section, italic limitations
   block at the bottom, plus #tag chips. Drops the legacy <details>
   accordion entirely — the rich content was being buried behind a
   click while Discord operators got the full embed. */
.tl-feed-card .tl-feed-section {
  margin-top: var(--tl-space-3);
}
.tl-feed-card .tl-feed-section-header {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tl-gold-500);
  font-weight: 600;
  margin-bottom: var(--tl-space-2);
}
.tl-feed-card .tl-feed-section-body {
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 100ch;
  color: var(--tl-ink-200, #cbd5e1);
}
/* markdown-rendered prose: zero out trailing <p> margin so sections
   stack tight. Mirrors the .tl-feed-snippet pattern above. */
.tl-feed-card .tl-feed-section-body > p:last-child,
.tl-feed-card .tl-feed-section-body > ul:last-child,
.tl-feed-card .tl-feed-section-body > ol:last-child {
  margin-bottom: 0;
}
.tl-feed-card .tl-feed-section-body ul,
.tl-feed-card .tl-feed-section-body ol {
  margin-bottom: 0.4rem;
  padding-left: 1.25rem;
}
.tl-feed-card .tl-feed-section-body a {
  color: var(--tl-gold-500, #58a6ff);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tl-feed-card .tl-feed-section-body code {
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  padding: 0 0.25rem;
  border-radius: 3px;
}
/* Horizontal-rule separator between sections — visually matches the
   Discord embed's ``─ ─ ─ ─ ─ ─`` divider. Keeps the page navigable
   even when a card carries 5 sections. */
.tl-feed-card .tl-feed-section-divider {
  border: 0;
  border-top: 1px solid var(--tl-border);
  margin: var(--tl-space-3) 0;
  opacity: 0.7;
}
/* Key Findings: bullet list with gold ▸ marker matching the Discord
   embed's bullets. ``list-style: none`` lets us own the marker. */
.tl-feed-card .tl-feed-key-findings {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.tl-feed-card .tl-feed-key-findings li {
  padding-left: 1.25em;
  text-indent: -1.25em;
  margin-bottom: 0.35em;
  line-height: 1.45;
  font-size: 0.92rem;
}
.tl-feed-card .tl-feed-key-findings li::before {
  content: "▸";
  color: var(--tl-gold-500);
  margin-right: 0.5em;
  display: inline-block;
  width: 0.75em;
}
/* Limitations: italic block-quote-ish style. Distinct visual weight so
   the caveat doesn't compete with the affirmative sections. */
.tl-feed-card .tl-feed-limitations {
  font-style: italic;
  font-size: 0.85rem;
  color: var(--tl-ink-400, #94a3b8);
  margin-top: var(--tl-space-3);
  border-left: 3px solid var(--tl-warning, #cda434);
  padding-left: 0.75em;
}
.tl-feed-card .tl-feed-limitations > p {
  display: inline;
  margin: 0;
}
/* Tags row — small mono chips at the card footer, before the
   "Source: pubmed:... — Ingested ..." footer. */
.tl-feed-card .tl-feed-tags {
  display: flex;
  gap: 0.4em;
  flex-wrap: wrap;
  margin-top: var(--tl-space-3);
  margin-bottom: var(--tl-space-2);
}
.tl-feed-card .tl-feed-tag {
  font-family: var(--tl-font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 0.72rem;
  padding: 0.15em 0.5em;
  background: var(--tl-navy-800);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-sm, 4px);
  color: var(--tl-ink-300, #94a3b8);
  white-space: nowrap;
}
/* 2026-05-13: markdown-rendered summary container — markdown-it wraps
   the prose in <p>, which inherits browser default margin and stacks
   awkwardly inside the .tl-feed-snippet div. Zero out the trailing
   margin so the badge + first paragraph stay tight. Bullet lists +
   inline links inherit Tabler/Bootstrap defaults. */
.tl-feed-card .tl-feed-snippet > p:last-child {
  margin-bottom: 0;
}
.tl-feed-card .tl-feed-snippet > p:first-child {
  display: inline;
}
.tl-feed-card .tl-feed-snippet ul,
.tl-feed-card .tl-feed-snippet ol {
  margin-bottom: 0.4rem;
  padding-left: 1.25rem;
}
.tl-feed-card .tl-feed-snippet a {
  color: var(--tl-gold-500, #58a6ff);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tl-feed-card .tl-feed-snippet a:hover {
  text-decoration: underline;
  filter: brightness(1.15);
}
.tl-feed-card .tl-feed-snippet code {
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.04);
  padding: 0 0.25rem;
  border-radius: 3px;
}
/* NOTE: the legacy ``.tl-feed-details`` and ``.tl-feed-why-it-matters``
   rules were removed 2026-05-13 with the card redesign — the <details>
   accordion is gone, the rich digest renders inline via structured
   .tl-feed-section blocks. */
.tl-feed-card code {
  font-size: 0.78rem;
  opacity: 0.7;
  background: transparent;
  padding: 0;
}

/* ── Discord-webhook-embed card layout (2026-05-21 corrective) ────────────
   The "tl-feed-card-v2" crisp finding-first layout (cde93e6) was rejected
   by the operator — it buried the rich digest behind a <details> accordion
   while the Discord webhook embed shows the FULL structured digest by
   default. These rules layer on top of the existing .tl-feed-card base so
   the dedup query + meta header keep working; what changes is the prose
   region (now full-depth sections, monospace gold headers, ─── dividers,
   code-style tags) mirroring data_ingestion._format_digest_description.
   The v2 fallback rules above still apply when .tl-research-card isn't on
   the article — operator can A/B by switching the class. */
.tl-research-card {
  /* Slightly more breathing room than the crisp v2 card — sections need
     stacking space to feel like a Discord embed instead of a marketing
     tile. */
  padding-bottom: 0.25rem;
}
.tl-research-card .tl-research-headline {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--tl-space-2);
  color: var(--tl-ink-100, #fff);
}
.tl-research-card .tl-research-divider {
  border: 0;
  border-top: 1px solid var(--tl-border);
  margin: var(--tl-space-3) 0;
  opacity: 0.55;
}
/* Section blocks — each one stacks vertically with a mono-uppercase gold
   header (Discord's small-caps section labels). Full prose width below. */
.tl-research-card .tl-research-section {
  margin-top: var(--tl-space-3);
  margin-bottom: var(--tl-space-3);
}
.tl-research-card .tl-research-section-header {
  font-family: var(--tl-font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tl-gold-500, #58a6ff);
  font-weight: 700;
  margin-bottom: var(--tl-space-2);
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.tl-research-card .tl-research-section-header > span[aria-hidden="true"] {
  font-size: 1rem;
  line-height: 1;
  /* Keep emoji baseline-aligned with the text label so the row doesn't
     visually wobble. */
  display: inline-block;
  transform: translateY(-0.02em);
}
.tl-research-card .tl-research-section-body {
  font-size: 0.94rem;
  line-height: 1.55;
  max-width: 100ch;
  color: var(--tl-ink-200, #cbd5e1);
}
.tl-research-card .tl-research-section-body > p {
  margin-bottom: 0.6em;
}
.tl-research-card .tl-research-section-body > p:last-child {
  margin-bottom: 0;
}
.tl-research-card .tl-research-section-body strong {
  color: var(--tl-ink-100, #fff);
  font-weight: 600;
}
.tl-research-card .tl-research-section-body code {
  font-family: var(--tl-font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.05em 0.35em;
  border-radius: 3px;
  color: var(--tl-ink-100, #fff);
  opacity: 1;
}
.tl-research-card .tl-research-section-body blockquote {
  margin: 0.6em 0;
  padding: 0.3em 0.9em;
  border-left: 3px solid var(--tl-gold-500, #58a6ff);
  background: rgba(88, 166, 255, 0.05);
  color: var(--tl-ink-100, #fff);
  font-style: normal;
  border-radius: 0 4px 4px 0;
}
.tl-research-card .tl-research-section-body blockquote > p {
  margin-bottom: 0;
}
.tl-research-card .tl-research-section-body a {
  color: var(--tl-gold-500, #58a6ff);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Key Findings: bullet list mirrors Discord's ▸ markers via list-style
   none + ::before — same pattern .tl-feed-key-findings used. Stays
   compatible with the existing CSS rule by sharing the class. */
.tl-research-card .tl-research-bullets {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.tl-research-card .tl-research-bullets > li {
  padding-left: 1.25em;
  text-indent: -1.25em;
  margin-bottom: 0.5em;
  line-height: 1.5;
  font-size: 0.94rem;
}
.tl-research-card .tl-research-bullets > li::before {
  content: "▸";
  color: var(--tl-gold-500, #58a6ff);
  margin-right: 0.5em;
  display: inline-block;
  width: 0.75em;
}
/* Why It Matters: subtle accent so it stands apart from purely-factual
   sections. Soft gold backdrop, no border (Discord doesn't have one). */
.tl-research-card .tl-research-why {
  background: rgba(88, 166, 255, 0.04);
  padding: var(--tl-space-2) var(--tl-space-3);
  margin-left: calc(-1 * var(--tl-space-3));
  margin-right: calc(-1 * var(--tl-space-3));
  border-radius: var(--tl-radius-sm, 4px);
}
.tl-research-card .tl-research-why .tl-research-section-header {
  color: var(--tl-gold-500, #58a6ff);
}
/* Limitations: italic block-quote-ish, distinct visual weight. Mirrors
   the Discord embed's "⚠️ *limitations*" italic-after-divider line. */
.tl-research-card .tl-research-limitations {
  font-size: 0.86rem;
  color: var(--tl-ink-400, #94a3b8);
  margin-top: var(--tl-space-3);
  border-left: 3px solid var(--tl-warning, #cda434);
  padding: 0.35em 0.75em;
  background: rgba(205, 164, 52, 0.04);
  border-radius: 0 3px 3px 0;
}
.tl-research-card .tl-research-limitations em {
  font-style: italic;
}
.tl-research-card .tl-research-limitations p {
  display: inline;
  margin: 0;
}
/* Tags row: mono code-style chips after the divider, matching the
   Discord embed's `tag1` `tag2` `tag3` row. Larger touch-target than
   the legacy .tl-feed-tag and uses the same mono font as the section
   headers so the visual rhythm holds. */
.tl-research-card .tl-research-tags {
  display: flex;
  gap: 0.45em;
  flex-wrap: wrap;
  margin-top: var(--tl-space-2);
  margin-bottom: var(--tl-space-2);
}
.tl-research-card .tl-research-tag {
  font-family: var(--tl-font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 0.74rem;
  padding: 0.15em 0.55em;
  background: var(--tl-navy-800);
  border: 1px solid var(--tl-border);
  border-radius: var(--tl-radius-sm, 4px);
  color: var(--tl-ink-300, #94a3b8);
  white-space: nowrap;
  opacity: 1;
}
/* "Read full →" pin in the footer, treated as a Discord-source-link CTA. */
.tl-research-card .tl-research-source {
  color: var(--tl-gold-500, #58a6ff);
  text-decoration: none;
  font-weight: 500;
}
.tl-research-card .tl-research-source:hover {
  text-decoration: underline;
}
/* Mobile (≤480px): tighten padding + collapse the why-it-matters bleed so
   sections stack cleanly inside narrow viewports. */
@media (max-width: 480px) {
  .tl-research-card .tl-research-section-body {
    font-size: 0.9rem;
  }
  .tl-research-card .tl-research-why {
    margin-left: 0;
    margin-right: 0;
    padding: var(--tl-space-2);
  }
  .tl-research-card .tl-research-headline {
    font-size: 1.05rem;
  }
}

/* Source-kind badges — color-coded so the timeline is scannable. */
.tl-feed-source-badge {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  border: 1px solid transparent;
}
.tl-feed-source-badge[data-source="pubmed"] {
  background: rgba(43, 108, 176, 0.18);
  color: #79bcff;
  border-color: rgba(43, 108, 176, 0.45);
}
.tl-feed-source-badge[data-source="clinicaltrials"] {
  background: rgba(56, 178, 172, 0.16);
  color: #5be1d4;
  border-color: rgba(56, 178, 172, 0.45);
}
.tl-feed-source-badge[data-source="europepmc"] {
  background: rgba(159, 122, 234, 0.16);
  color: #c8a9ff;
  border-color: rgba(159, 122, 234, 0.45);
}
.tl-feed-source-badge[data-source="pubchem"] {
  background: rgba(72, 187, 120, 0.16);
  color: #7fe9a4;
  border-color: rgba(72, 187, 120, 0.45);
}

/* Filter chip row — All / PubMed / ClinicalTrials / EuropePMC / PubChem */
.tl-feed-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tl-space-2, 8px);
  align-items: center;
}
.tl-feed-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--tl-border);
  border-radius: 999px;
  background: var(--tl-navy-700);
  color: var(--tl-ink-200, #cbd5e1);
  font-size: 0.86rem;
  text-decoration: none;
  transition:
    border-color var(--tl-dur) var(--tl-ease),
    color var(--tl-dur) var(--tl-ease),
    background var(--tl-dur) var(--tl-ease);
}
.tl-feed-chip:hover {
  border-color: var(--tl-border-strong);
  color: var(--tl-ink-100, #fff);
  text-decoration: none;
}
.tl-feed-chip.is-active {
  border-color: var(--tl-border-gold);
  color: var(--tl-gold-500);
  background: rgba(88, 166, 255, 0.06);
}
.tl-feed-chip-count {
  font-size: 0.75rem;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* COE 2026-05-10 AI-5: secondary peptide chips. Smaller, lighter
 * weight to defer visually to the primary peptide chip while still
 * exposing the full extracted compound list at a glance. */
.tl-feed-extra-peptide-chip {
  font-size: 0.7rem;
  opacity: 0.78;
  padding-inline: 0.4rem;
}

/* Semantic-search input + relevance-score chip (search-on-feeds MVP) */
.tl-feed-search {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  align-items: stretch;
}
.tl-feed-search input[type="search"] {
  flex: 1 1 auto;
}
.tl-feed-relevance-chip {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  background: rgba(56, 142, 60, 0.18);
  color: #a8d8ad;
  border: 1px solid rgba(56, 142, 60, 0.35);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  margin-left: 0.4rem;
  white-space: nowrap;
}

/* Cross-link promo card on /dashboard/research */
.tl-feed-promo-card {
  border: 1px solid var(--tl-border);
  background: linear-gradient(
    135deg,
    var(--tl-navy-700) 0%,
    rgba(88, 166, 255, 0.04) 100%
  );
  transition:
    border-color var(--tl-dur) var(--tl-ease),
    box-shadow var(--tl-dur) var(--tl-ease);
}
.tl-feed-promo-card:hover {
  border-color: var(--tl-border-gold);
  box-shadow: var(--tl-shadow-md);
}

@media (prefers-reduced-motion: reduce) {
  .tl-feed-card,
  .tl-feed-chip,
  .tl-feed-promo-card { transition: none !important; }
  .tl-feed-card:hover { transform: none; }
}

/* ── Bottom-left sidebar user menu (replaces top-right account dropdown) ─── */
.tl-sidebar-usermenu {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
}

.tl-usermenu-trigger {
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.tl-usermenu-trigger:hover,
.tl-usermenu-trigger:focus {
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}

.tl-usermenu-trigger.active {
  background: rgba(88, 166, 255, 0.10);
}

.tl-sidebar-usermenu .dropdown-menu {
  min-width: 220px;
  margin-bottom: 4px;
}

/* Bug 5 (2026-05-11): force the sidebar account dropdown to open UPWARD
   even when Bootstrap's Popper.js positioner decides the menu fits below.
   The avatar sits at the bottom of a fixed-height sidebar so a downward
   menu clips on shorter viewports (Sign out lands at y=1092 on a 1100px
   tall window per the 2026-05-11 QA report).

   Root cause: Tabler's CSS leaves `.dropdown-menu` at `position: static`
   by default, so `inset: auto auto 100% 0` has no effect. Force
   absolute positioning + `bottom: 100%` so the menu always reflects above
   its trigger inside the .dropup wrapper. */
.tl-sidebar-usermenu .dropup {
  position: relative !important;
}
.tl-sidebar-usermenu .dropup .dropdown-menu,
.tl-sidebar-usermenu .dropdown-menu,
.tl-sidebar-usermenu .dropdown-menu.show {
  position: absolute !important;
  bottom: 100% !important;
  top: auto !important;
  left: 0 !important;
  right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 4px !important;
  transform: none !important;
  inset: auto auto 100% 0 !important;
}

/* Watchlist polish 2026-05-11: newsworthy vendor cards get a left-edge
   gold accent so they're scannable at a glance. The accent is intentionally
   subtle (4px) rather than a full re-color — Tabler's `bg-orange-lt`
   "newsworthy" pill in the header already carries the loud signal. */
.tl-watch-card-newsworthy {
  border-left: 4px solid var(--tl-gold-500) !important;
}
/* SVG sparkline sits inline with the card text; force a baseline-align so
   the polyline doesn't drift relative to surrounding badges. */
.tl-watch-spark {
  display: inline-block;
  vertical-align: middle;
}

/* ── Tabler modal + toast polish (2026-05-11) ───────────────────────────
   Backs the shared tl-ui.js helpers (tlConfirm / tlToast / tlAlert) so the
   modals + toasts inherit the brand-token aesthetic instead of Tabler's
   default gray. Replaces oldschool-Windows window.alert / window.confirm
   across customer JS. */

/* Modal: tighter fade, brand colors */
.modal-backdrop.fade { transition: opacity var(--tl-dur) var(--tl-ease); }
.modal-backdrop.show { background: var(--tl-navy-900); opacity: 0.6; }
.modal-content {
  background: var(--tl-navy-700);
  border: 1px solid var(--tl-border-strong);
  border-radius: var(--tl-radius-md);
  box-shadow: var(--tl-shadow-lg);
}
.modal-header {
  border-bottom-color: var(--tl-border);
  padding: 16px 20px;
}
.modal-body {
  padding: 16px 20px;
  color: var(--tl-ink-300);
  line-height: var(--tl-lh-body);
}
.modal-footer {
  border-top-color: var(--tl-border);
  padding: 12px 20px;
}
.modal-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--tl-ink-100);
}

/* Toast container: bottom-right, stack */
.toast-container { z-index: 1080; }
.toast {
  background: var(--tl-navy-700);
  border: 1px solid var(--tl-border-strong);
  border-radius: var(--tl-radius-md);
  box-shadow: var(--tl-shadow-md);
  color: var(--tl-ink-100);
  min-width: 280px;
  margin-bottom: 8px;
}
.toast .toast-header {
  background: transparent;
  color: var(--tl-ink-100);
  border-bottom: 1px solid var(--tl-border-strong);
}
.toast .toast-body {
  color: var(--tl-ink-300);
  line-height: var(--tl-lh-body);
}
.toast.tl-toast-success { border-left: 4px solid var(--tl-success); }
.toast.tl-toast-danger  { border-left: 4px solid var(--tl-danger); }
.toast.tl-toast-warning { border-left: 4px solid var(--tlgh-warning, #e3b341); }
.toast.tl-toast-info    { border-left: 4px solid var(--tl-info); }

/* ── /dashboard/research/feeds card v2 (2026-05-21 quality sprint) ────────
   Compact, scannable per-article card. Long-form sections live behind a
   <details> accordion; lead + why-it-matters + key-findings stay inline.
   Mobile-responsive: chip row flex-wraps; ≤480px the date drops to a new
   line via order/wrap so the source badge stays adjacent to the peptide. */
.tl-feed-card-v2 .tl-feed-chips {
  font-size: 0.8125rem;
  row-gap: 6px;
}
.tl-feed-card-v2 .tl-feed-peptide-chip {
  font-weight: 600;
  letter-spacing: 0.01em;
}
.tl-feed-card-v2 .tl-feed-date {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tl-feed-card-v2 .tl-feed-lead {
  color: var(--tl-ink-100);
  font-size: 0.95rem;
  line-height: 1.55;
}
.tl-feed-card-v2 .tl-feed-lead > *:first-child { margin-top: 0; }
.tl-feed-card-v2 .tl-feed-lead > *:last-child  { margin-bottom: 0; }
.tl-feed-card-v2 .tl-feed-why {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--tl-ink-200, #c7c7c7);
  border-left: 3px solid var(--tl-gold-500, #58a6ff);
  padding: 6px 0 6px 12px;
  margin-top: 4px;
}
.tl-feed-card-v2 .tl-feed-why-label {
  font-weight: 600;
  color: var(--tl-gold-500, #58a6ff);
  margin-right: 4px;
}
.tl-feed-card-v2 .tl-feed-why > *:first-child { display: inline; }
.tl-feed-card-v2 .tl-feed-why > p {
  display: inline;
  margin: 0;
}
.tl-feed-card-v2 .tl-feed-details {
  margin-top: 8px;
  border-top: 1px solid var(--tl-border-soft, rgba(255,255,255,0.07));
  padding-top: 6px;
}
.tl-feed-card-v2 .tl-feed-details > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--tl-ink-300, #8b8b8b);
  user-select: none;
  list-style: none;
  padding: 4px 0;
}
.tl-feed-card-v2 .tl-feed-details > summary::-webkit-details-marker { display: none; }
.tl-feed-card-v2 .tl-feed-details > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 120ms ease;
}
.tl-feed-card-v2 .tl-feed-details[open] > summary::before {
  transform: rotate(90deg);
}
.tl-feed-card-v2 .tl-feed-details > summary:hover {
  color: var(--tl-ink-100, #e8e8e8);
}
.tl-feed-card-v2 .tl-feed-details-body {
  padding-top: 6px;
}
.tl-feed-card-v2 .tl-feed-details .tl-feed-section + .tl-feed-section {
  margin-top: 10px;
}
.tl-feed-card-v2 .tl-feed-meta {
  border-top: 1px solid var(--tl-border-soft, rgba(255,255,255,0.07));
  padding-top: 6px;
}
.tl-feed-card-v2 .tl-feed-read-link {
  font-weight: 500;
  color: var(--tl-gold-500, #58a6ff);
  text-decoration: none;
}
.tl-feed-card-v2 .tl-feed-read-link:hover { text-decoration: underline; }

/* ≤320px: stack chip row tighter, drop the date to its own row so the
   peptide + source badges stay primary. */
@media (max-width: 480px) {
  .tl-feed-card-v2 .tl-feed-chips { font-size: 0.78rem; }
  .tl-feed-card-v2 .tl-feed-date {
    flex-basis: 100%;
    margin-left: 0 !important;
    text-align: left;
  }
  .tl-feed-card-v2 .tl-feed-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ── Popular peptide chip rail (2026-05-22 UX iteration) ─────────────────
   One-click toggle chips replacing the multi-select peptide dropdown.
   Active state = filled yellow with × indicator. Inactive = outline
   with hover-to-fill affordance. Removable active filters in the
   "Active:" row get the same removable treatment. */
.tl-peptide-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.82rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 120ms ease, transform 80ms ease, box-shadow 120ms ease;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
}
.tl-peptide-chip:hover {
  text-decoration: none;
  transform: translateY(-1px);
}
.tl-peptide-chip--inactive {
  background: rgba(88, 166, 255, 0.10);
  color: var(--tl-gold-700, #58a6ff);
  border-color: rgba(88, 166, 255, 0.30);
}
.tl-peptide-chip--inactive:hover {
  background: rgba(88, 166, 255, 0.22);
  border-color: rgba(88, 166, 255, 0.55);
  color: var(--tl-gold-800, #79b8ff);
}
.tl-peptide-chip--active {
  background: var(--tl-gold-500, #58a6ff);
  color: var(--tl-navy-deep, #1a2032);
  font-weight: 600;
  border-color: var(--tl-gold-600, #1f6feb);
  box-shadow: 0 1px 3px rgba(88, 166, 255, 0.35);
}
.tl-peptide-chip--active:hover {
  background: var(--tl-gold-600, #1f6feb);
  color: var(--tl-navy-deep, #1a2032);
}
.tl-peptide-chip--active .text-secondary {
  color: rgba(26, 32, 50, 0.65) !important;
}
.tl-rag-chip--removable {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.tl-rag-chip--removable:hover {
  background: var(--tl-gold-600, #1f6feb) !important;
  color: var(--tl-navy-deep, #1a2032);
}
.tl-popular-clear {
  text-decoration: none;
  font-style: italic;
  opacity: 0.7;
}
.tl-popular-clear:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ──────────────────────────────────────────────────────────────────────────
   Research feed command bar (2026-05-22 redesign)
   ──────────────────────────────────────────────────────────────────────────
   Editorial-tactical aesthetic. Replaces the prior 50-70-chip wall with:
     · pinned active-filter pill row (gold-sweep entry)
     · single search input (typeahead via native <datalist>)
     · refine strip with 5 native <details> popovers + n≥ + view selector

   First paint: zero facet chips. Operator opens what they need. Mobile
   320px tested — strip wraps, popovers anchor to viewport edge.
   ────────────────────────────────────────────────────────────────────── */

.tl-cmdbar {
  margin: 0 0 1.25rem 0;
}

/* ── Active-filter pill row ───────────────────────────────────────────── */
.tl-cmdbar__applied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0;
  margin-bottom: 0.35rem;
}
.tl-cmdbar__applied-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tl-gold-500, #58a6ff);
  font-weight: 600;
  margin-right: 0.2rem;
}
.tl-cmdbar__applied-dot {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--tl-gold-500, #58a6ff);
  box-shadow: 0 0 0 0 rgba(88, 166, 255, 0.7);
  animation: tl-cmdbar-pulse 1.8s ease-out infinite;
}
@keyframes tl-cmdbar-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(88, 166, 255, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(88, 166, 255, 0);  }
  100% { box-shadow: 0 0 0 0 rgba(88, 166, 255, 0);    }
}

.tl-cmdbar__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.6rem 0.32rem 0.7rem;
  border-radius: 999px;
  background: rgba(88, 166, 255, 0.14);
  border: 1px solid rgba(88, 166, 255, 0.45);
  color: var(--tl-gold-400, #79b8ff);
  font-size: 0.81rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 100ms ease;
  animation: tl-cmdbar-pill-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes tl-cmdbar-pill-in {
  0%   { background: var(--tl-gold-500, #58a6ff); color: var(--tl-navy-800, #0F1E3D); transform: scale(0.92); }
  60%  { background: rgba(88, 166, 255, 0.40); color: var(--tl-gold-400, #79b8ff); transform: scale(1.02); }
  100% { background: rgba(88, 166, 255, 0.14); color: var(--tl-gold-400, #79b8ff); transform: scale(1); }
}
.tl-cmdbar__pill:hover {
  background: rgba(88, 166, 255, 0.28);
  border-color: var(--tl-gold-500, #58a6ff);
  color: var(--tl-gold-500, #58a6ff);
  text-decoration: none;
  transform: translateY(-1px);
}
.tl-cmdbar__pill--static {
  cursor: default;
  animation: none;
}
.tl-cmdbar__pill--static:hover {
  background: rgba(88, 166, 255, 0.14);
  border-color: rgba(88, 166, 255, 0.45);
  color: var(--tl-gold-400, #79b8ff);
  transform: none;
}
.tl-cmdbar__pill-key {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
  font-weight: 600;
}
.tl-cmdbar__pill-val {
  font-weight: 500;
}
.tl-cmdbar__pill-x {
  opacity: 0.7;
  margin-left: 0.05rem;
}
.tl-cmdbar__pill:hover .tl-cmdbar__pill-x {
  opacity: 1;
}
.tl-cmdbar__clear-all {
  margin-left: auto;
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(88, 166, 255, 0.70);
  text-decoration: none;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  transition: color 140ms ease, background-color 140ms ease;
}
.tl-cmdbar__clear-all:hover {
  color: var(--tl-gold-500, #58a6ff);
  background: rgba(88, 166, 255, 0.10);
  text-decoration: none;
}

/* ── Hairline + gold-dot transition rule ─────────────────────────────── */
.tl-cmdbar__rule {
  position: relative;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(88, 166, 255, 0.25) 20%,
    rgba(88, 166, 255, 0.25) 80%,
    transparent
  );
  margin: 0.6rem 0 0.9rem 0;
}
.tl-cmdbar__rule-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 999px;
  background: var(--tl-gold-500, #58a6ff);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--tl-navy-800, #0F1E3D);
}

/* ── Search row ───────────────────────────────────────────────────────── */
.tl-cmdbar__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--tl-navy-700, #16264a);
  border: 1px solid rgba(88, 166, 255, 0.22);
  border-radius: 10px;
  padding: 0.45rem 0.55rem 0.45rem 0.85rem;
  margin-bottom: 0.75rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.tl-cmdbar__search:focus-within {
  border-color: var(--tl-gold-500, #58a6ff);
  box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
}
.tl-cmdbar__search-icon {
  color: rgba(88, 166, 255, 0.55);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.tl-cmdbar__search:focus-within .tl-cmdbar__search-icon {
  color: var(--tl-gold-500, #58a6ff);
}
.tl-cmdbar__input {
  flex: 1 1 auto;
  background: transparent;
  border: none;
  outline: none;
  color: var(--tblr-body-color, #e8edf5);
  font-size: 0.95rem;
  font-family: inherit;
  padding: 0.35rem 0;
  min-width: 0; /* allow shrink inside flex on 320px */
}
.tl-cmdbar__input::placeholder {
  color: rgba(232, 237, 245, 0.40);
  font-style: italic;
}
.tl-cmdbar__input::-webkit-search-cancel-button { display: none; }
.tl-cmdbar__search-btn {
  flex-shrink: 0;
  background: var(--tl-gold-500, #58a6ff);
  color: var(--tl-navy-800, #0F1E3D);
  border: 1px solid var(--tl-gold-500, #58a6ff);
  border-radius: 6px;
  padding: 0.35rem 0.85rem;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 140ms ease, transform 80ms ease;
}
.tl-cmdbar__search-btn:hover {
  background: var(--tl-gold-400, #79b8ff);
  border-color: var(--tl-gold-400, #79b8ff);
}
.tl-cmdbar__search-btn:active { transform: translateY(1px); }
.tl-cmdbar__search-clear {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 6px;
  color: rgba(232, 237, 245, 0.55);
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}
.tl-cmdbar__search-clear:hover {
  background: rgba(88, 166, 255, 0.10);
  color: var(--tl-gold-500, #58a6ff);
  text-decoration: none;
}

/* ── Refine strip (popovers + n≥ + view) ─────────────────────────────── */
.tl-cmdbar__refine-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.tl-cmdbar__refine {
  position: relative;
}
.tl-cmdbar__refine-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.34rem 0.65rem;
  border: 1px solid rgba(88, 166, 255, 0.18);
  background: transparent;
  border-radius: 6px;
  color: rgba(232, 237, 245, 0.80);
  font-size: 0.82rem;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.tl-cmdbar__refine-btn::-webkit-details-marker { display: none; }
.tl-cmdbar__refine-btn::marker { content: ""; }
.tl-cmdbar__refine-btn:hover {
  background: rgba(88, 166, 255, 0.08);
  border-color: rgba(88, 166, 255, 0.35);
  color: var(--tl-gold-400, #79b8ff);
}
.tl-cmdbar__refine[open] > .tl-cmdbar__refine-btn {
  background: rgba(88, 166, 255, 0.12);
  border-color: var(--tl-gold-500, #58a6ff);
  color: var(--tl-gold-500, #58a6ff);
}
.tl-cmdbar__refine-btn.is-active {
  border-color: rgba(88, 166, 255, 0.55);
  color: var(--tl-gold-400, #79b8ff);
  background: rgba(88, 166, 255, 0.07);
}
.tl-cmdbar__refine-label {
  font-weight: 500;
}
.tl-cmdbar__refine-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  background: var(--tl-gold-500, #58a6ff);
  color: var(--tl-navy-800, #0F1E3D);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  line-height: 1;
}
.tl-cmdbar__refine-caret {
  opacity: 0.6;
  transition: transform 200ms ease;
}
.tl-cmdbar__refine[open] .tl-cmdbar__refine-caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* Popover panel — anchored under the summary, breaks out of the strip. */
.tl-cmdbar__refine-pop {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  z-index: 50;
  min-width: 18rem;
  max-width: min(26rem, calc(100vw - 1rem));
  background: var(--tl-navy-700, #16264a);
  border: 1px solid rgba(88, 166, 255, 0.32);
  border-radius: 10px;
  padding: 0.7rem 0.75rem 0.85rem 0.75rem;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
  animation: tl-cmdbar-pop-in 160ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes tl-cmdbar-pop-in {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}
.tl-cmdbar__refine-pop-head {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(88, 166, 255, 0.65);
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed rgba(88, 166, 255, 0.18);
}
.tl-cmdbar__refine-pop-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  max-height: 18rem;
  overflow-y: auto;
}

/* Compact chip inside a popover — distinct from the active pills. */
.tl-cmdbar__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(232, 237, 245, 0.12);
  background: rgba(232, 237, 245, 0.04);
  color: rgba(232, 237, 245, 0.82);
  font-size: 0.78rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease;
}
.tl-cmdbar__chip:hover {
  background: rgba(88, 166, 255, 0.12);
  border-color: rgba(88, 166, 255, 0.40);
  color: var(--tl-gold-400, #79b8ff);
  text-decoration: none;
  transform: translateY(-1px);
}
.tl-cmdbar__chip.is-on {
  background: var(--tl-gold-500, #58a6ff);
  border-color: var(--tl-gold-600, #1f6feb);
  color: var(--tl-navy-800, #0F1E3D);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.tl-cmdbar__chip.is-on:hover {
  background: var(--tl-gold-400, #79b8ff);
  color: var(--tl-navy-800, #0F1E3D);
}
.tl-cmdbar__chip-tag {
  font-weight: 500;
}
.tl-cmdbar__chip-count {
  opacity: 0.5;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.tl-cmdbar__chip.is-on .tl-cmdbar__chip-count {
  opacity: 0.7;
}
.tl-cmdbar__chip-x {
  font-size: 0.9rem;
  line-height: 1;
  opacity: 0.7;
}

/* ── Inline n≥ / view / apply ─────────────────────────────────────────── */
.tl-cmdbar__refine-form {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}
.tl-cmdbar__nmin,
.tl-cmdbar__view {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.5rem 0.22rem 0.6rem;
  border: 1px solid rgba(88, 166, 255, 0.18);
  border-radius: 6px;
  background: transparent;
  font-size: 0.82rem;
  color: rgba(232, 237, 245, 0.80);
  cursor: text;
}
.tl-cmdbar__nmin:focus-within,
.tl-cmdbar__view:focus-within {
  border-color: var(--tl-gold-500, #58a6ff);
}
.tl-cmdbar__nmin-label,
.tl-cmdbar__view-label {
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(88, 166, 255, 0.65);
  font-weight: 600;
}
.tl-cmdbar__nmin-input,
.tl-cmdbar__view-select {
  background: transparent;
  border: none;
  outline: none;
  color: inherit;
  font: inherit;
  padding: 0.1rem 0;
}
.tl-cmdbar__nmin-input {
  width: 3.2rem;
  text-align: right;
}
.tl-cmdbar__view-select {
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-right: 1.1rem;
  background-image: linear-gradient(45deg, transparent 50%, rgba(88, 166, 255, 0.55) 50%),
                    linear-gradient(135deg, rgba(88, 166, 255, 0.55) 50%, transparent 50%);
  background-position: calc(100% - 0.65rem) center, calc(100% - 0.4rem) center;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
.tl-cmdbar__view-select option {
  background: var(--tl-navy-700, #16264a);
  color: var(--tblr-body-color, #e8edf5);
}
.tl-cmdbar__apply-btn {
  background: transparent;
  color: var(--tl-gold-500, #58a6ff);
  border: 1px solid rgba(88, 166, 255, 0.45);
  border-radius: 6px;
  padding: 0.32rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.tl-cmdbar__apply-btn:hover {
  background: var(--tl-gold-500, #58a6ff);
  color: var(--tl-navy-800, #0F1E3D);
}

/* ── Mobile 320px adjustments ────────────────────────────────────────── */
@media (max-width: 600px) {
  .tl-cmdbar__refine-form {
    margin-left: 0;
    flex-basis: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .tl-cmdbar__refine-pop {
    /* Anchor popovers to the page edge so they never overflow viewport. */
    position: fixed;
    left: 0.5rem;
    right: 0.5rem;
    top: auto;
    min-width: 0;
    max-width: none;
    width: calc(100vw - 1rem);
    margin-top: 0.25rem;
  }
  .tl-cmdbar__input {
    font-size: 16px; /* prevent iOS zoom-on-focus */
  }
}

@media (max-width: 420px) {
  .tl-cmdbar__applied {
    font-size: 0.78rem;
  }
  .tl-cmdbar__pill { font-size: 0.76rem; padding: 0.28rem 0.5rem; }
  .tl-cmdbar__refine-btn { font-size: 0.78rem; padding: 0.32rem 0.55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-cmdbar__applied-dot,
  .tl-cmdbar__pill,
  .tl-cmdbar__refine-pop,
  .tl-cmdbar__refine-caret {
    animation: none !important;
    transition: none !important;
  }
}