/* RandSim demo clone — design system.
   Recreates the live site's look: dark navy header, Rand blue (#1237A0),
   geometric sans (Jost stands in for Galano Grotesque). */

:root {
  --blue: #1237a0;
  --blue-bright: #1237a0;
  --blue-ink: #000000;
  --navy: #000000;
  --navy-2: #000000;
  --ink: #000000;
  --muted: #606467;
  --line: #e2e3e4;
  --bg: #f5f7fb;
  --card: #ffffff;
  --gold: #ECBE1D;
  --green: #19b787;
  --radius: 0;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.07);
  --font: 'Jost', 'Poppins', 'Segoe UI', system-ui, sans-serif;
  /* Sam palette port, 2026-08-03. Adopted VERBATIM — these are the Rand brand
     colours, so no substitutions: no lighter blue anywhere, and the old
     #2f6bff / #4a6cf0 / #ffc845 literals are gone from the gradients too.
     Two notes for her, both left exactly as specified rather than "fixed":
       1. .btn-primary and .cta-btn share one colour for base AND hover
          (#1237a0), so the primary buttons have no hover feedback.
       2. #1237a0 on the new black surfaces measures 2.08:1 — under the 3:1
          WCAG minimum for UI components. The white label is 10:1, so the
          button is still readable; it is the button EDGE that disappears
          against black. Lightening the surface behind it (rather than the
          button) would resolve both without touching a brand colour. */
  --text-hi: #f6f4fb;
  --text-lo: #b3a9c9;
  --hairline: rgba(159, 182, 236, 0.16);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- demo ribbon ---------- */
.demo-ribbon {
  background: var(--gold);
  color: #000000;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 6px 16px;
  letter-spacing: 0.02em;
}
.demo-ribbon a { color: #000000; text-decoration: underline; }

/* ---------- header ---------- */
.site-header {
  background: var(--navy);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
}
.header-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 68px;
}
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo img { height: 44px; width: auto; display: block; }
.logo .logo-fallback {
  color: #fff; font-size: 22px; font-weight: 700; letter-spacing: 0.06em;
}
.labs-badge {
  background: var(--gold); color: #000000; font-size: 13px; font-weight: 800;
  letter-spacing: 0.14em; padding: 4px 11px; border-radius: 0; margin-left: 6px;
}
.main-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-item { position: relative; }
.nav-item > a {
  /* Sam (2026-08-04): white (was light purple #dfe6f5), uppercase, weight 400 */
  color: #fff;
  font-size: 14.5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 22px 14px;
  display: inline-block;
}
.nav-item > a:hover { color: #fff; opacity: 0.8; text-decoration: none; }
.nav-item.open > a { color: #fff; }
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 250px;
  border-radius: 0;
  box-shadow: var(--shadow);
  padding: 8px 0;
  display: none;
  border-top: 3px solid var(--blue-bright);
}
.nav-item.open .dropdown { display: block; }
.dropdown a {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  color: var(--ink);
  font-size: 14.5px;
}
.dropdown a:hover { background: #eef2fb; text-decoration: none; color: var(--blue); }
.badge-new {
  background: var(--green); color: #fff; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 0; letter-spacing: 0.06em;
}
.cta-btn {
  background: var(--blue-bright);
  color: #fff !important;
  font-weight: 600;
  font-size: 14.5px;
  padding: 10px 20px !important;
  border-radius: 0;
  margin-left: 10px;
  white-space: nowrap;
}
/* Hover fades the LABEL, not the button — matches the main site's "Talk to an
   Expert" behavior and keeps the button a fixed brand blue (Spencer, 2026-08-03). */
.cta-btn { transition: color 0.16s ease; }
.cta-btn:hover { background: #1237a0; color: rgba(255,255,255,0.72) !important; text-decoration: none; }
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 0;
  color: #fff; font-size: 26px; cursor: pointer;
}

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(47, 107, 255, 0.35), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, rgba(47, 107, 255, 0.22), transparent 55%),
    linear-gradient(135deg, var(--navy) 0%, var(--blue-ink) 55%, var(--blue) 130%);
  color: #fff;
  padding: 84px 24px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.hero-inner { max-width: 1240px; margin: 0 auto; position: relative; z-index: 1; }
.hero h1 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 700; line-height: 1.14; max-width: 850px; }
.hero p.sub { font-size: clamp(16px, 1.8vw, 21px); color: #fff; margin-top: 18px; max-width: 720px; } /* Sam: white, was #c9d6f2 */
.hero .kicker {
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 13px;
  color: var(--gold); font-weight: 600; margin-bottom: 16px;  /* Sam: gold #ECBE1D */
}
.hero-actions { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-block; padding: 13px 26px; border-radius: 0;
  font-weight: 600; font-size: 15.5px; cursor: pointer; border: 0;
  font-family: var(--font);
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--blue-bright); color: #fff; transition: color 0.16s ease; }
.btn-primary:hover { background: #1237a0; color: rgba(255,255,255,0.72); }
.btn-ghost { background: transparent; color: #fff; border: 1.6px solid rgba(255,255,255,0.55); }
.btn-ghost:hover { border-color: #fff; }
.btn-white { background: #fff; color: var(--blue); }
.btn-white:hover { background: #e8eeff; }

.hero.hero-page { padding: 60px 24px; }
.hero .crumbs { font-size: 13.5px; color: var(--gold); margin-bottom: 14px; }  /* Sam: gold #ECBE1D */
.hero .crumbs a { color: var(--gold); }
.hero .crumbs a:hover { color: #fff; }

/* ---------- layout blocks ---------- */
.section { max-width: 1240px; margin: 0 auto; padding: 64px 24px; }
.section.tight { padding: 40px 24px; }
.section h2 { font-size: clamp(24px, 3vw, 34px); color: var(--blue-ink); line-height: 1.2; }
.section .lead { color: var(--muted); font-size: 17px; margin-top: 12px; max-width: 780px; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

.grid { display: grid; gap: 22px; margin-top: 36px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 26px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card h3 { font-size: 19px; color: var(--blue-ink); margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15px; }
.card .icon {
  width: 46px; height: 46px; border-radius: 0;
  background: linear-gradient(135deg, var(--blue), var(--blue-bright));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 21px; margin-bottom: 16px; font-weight: 700;
}
.card a.more { font-weight: 600; font-size: 14.5px; display: inline-block; margin-top: 10px; }

ul.checklist { list-style: none; margin-top: 14px; }
ul.checklist li { padding-left: 28px; position: relative; margin-bottom: 9px; color: var(--ink); font-size: 15.5px; }
ul.checklist li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--green); font-weight: 700;
}

.band {
  background: linear-gradient(120deg, var(--blue) 0%, var(--blue-bright) 100%);
  color: #fff; border-radius: 0; padding: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.band h2 { color: #fff; }
.band p { color: #d9e4ff; margin-top: 8px; max-width: 640px; }

.prose { max-width: 820px; }
.prose p { margin-bottom: 16px; font-size: 16.5px; color: #000000; }
.prose h2 { margin: 34px 0 12px; }
.prose h3 { margin: 26px 0 10px; color: var(--blue-ink); }

/* ---------- blog ---------- */
.filter-bar {
  background: var(--card); border: 1px solid var(--line); border-radius: 0;
  padding: 16px 20px; margin-top: -42px; position: relative; z-index: 5;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px;
}
.fb-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fb-tools { border-top: 1px dashed var(--line); padding-top: 12px; }
.fb-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-right: 4px;
}
.chip-tool { padding: 6px 13px; font-size: 13px; }
.chip .cnt { opacity: 0.6; font-size: 11px; font-weight: 700; margin-left: 2px; }
.chip.active .cnt { opacity: 0.85; }
.chip-more { padding: 6px 13px; font-size: 13px; border-style: dashed; }
.chip-surprise {
  background: linear-gradient(120deg, #b8860b, #ECBE1D); border-color: transparent; color: #000000;
}
.chip-surprise:hover { color: #000000; filter: brightness(1.06); border-color: transparent; }
.filter-bar input[type="search"], .filter-bar select {
  font-family: var(--font); font-size: 14.5px; padding: 9px 12px;
  border: 1.4px solid var(--line); border-radius: 0; background: #fbfcff; color: var(--ink);
}
.filter-bar input[type="search"] { flex: 1 1 210px; min-width: 170px; }
.chip {
  border: 1.4px solid var(--line); background: #fbfcff; border-radius: 0;
  padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--muted);
  cursor: pointer; font-family: var(--font); transition: all 0.13s ease;
}
.chip:hover { border-color: var(--blue-bright); color: var(--blue); }
.chip.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip.chip-ai.active { background: linear-gradient(120deg, #000000, #1237a0); border-color: #1237a0; }
.filter-count { font-size: 13.5px; color: var(--muted); margin-left: auto; white-space: nowrap; }

/* ---------- color-coded tool chips + badges (single source: src/tool-colors.js) ----
   Each element carries the tool color as --t-solid (+ --t-on = white text) inline,
   server-rendered (templates.js) or client-set (ideas.js / blog-filter.js via
   window.toolStyleVars). Design rule: filter/picker chips are WHITE when idle (a
   small solid color DOT marks the tool) and "light up" to the SOLID tool color with
   white text when selected; non-interactive tool tags are always solid. Rules sit
   AFTER .chip so they win on equal specificity. */
.chip-tool { background: #fff; border-color: var(--line); color: var(--blue-ink); }
.chip-tool::before {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--t-solid, var(--muted)); margin-right: 8px; vertical-align: middle;
  position: relative; top: -1px;
}
.chip-tool:hover { border-color: var(--t-solid, var(--blue-bright)); box-shadow: var(--shadow-sm); color: var(--blue-ink); }
.chip-tool.active { background: var(--t-solid, var(--blue)); border-color: var(--t-solid, var(--blue)); color: var(--t-on, #fff); }
.chip-tool.active::before { display: none; }
.chip-tool .cnt { color: var(--muted); opacity: 0.75; }
.chip-tool.active .cnt { color: var(--t-on, #fff); opacity: 0.8; }

/* non-interactive tool badges: idea cards, the queued strip, blog-post tool tags —
   always the SOLID tool color with white text (they're labels, not toggles). */
.idea-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.tool-bubble {
  display: inline-block; font-size: 11.5px; font-weight: 600; line-height: 1.5;
  padding: 3px 11px; border-radius: 0; border: none;
  background: var(--t-solid, var(--muted)); color: var(--t-on, #fff);
}
.tool-tag.tool-solid,
.post-hero-meta .tool-tag.tool-solid { background: var(--t-solid, var(--blue)); color: var(--t-on, #fff); border: none; }

/* selected-tool chips in the submission picker (removable) */
.tool-bubble.removable { display: inline-flex; align-items: center; gap: 6px; padding-right: 8px; }
.tool-bubble .rm {
  border: none; background: none; color: inherit; cursor: pointer; font-family: var(--font);
  font-size: 14px; line-height: 1; padding: 0 1px; opacity: 0.75; font-weight: 700;
}
.tool-bubble .rm:hover { opacity: 1; }

/* ideas filter mirrors the blog filter bar; just drop the hero overlap margin */
.ideas-filter { margin: 0 0 22px; }

/* submission form: compact pop-open tool picker (keeps the form uncluttered) */
.tool-picker { position: relative; margin: 2px 0; }
.tool-picker-field { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tool-picker-trigger {
  border: 1.4px dashed var(--line); background: #fbfcff; border-radius: 0;
  padding: 7px 15px; font-size: 13px; font-weight: 600; color: var(--blue);
  cursor: pointer; font-family: var(--font); transition: all 0.13s ease; white-space: nowrap;
}
.tool-picker-trigger:hover { border-color: var(--blue-bright); }
.tool-picker-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-popover {
  position: absolute; z-index: 40; top: calc(100% + 8px); left: 0;
  width: min(440px, calc(100vw - 40px));
  background: var(--card); border: 1px solid var(--line); border-radius: 0;
  box-shadow: var(--shadow); padding: 14px 16px;
}
.tool-popover-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tool-popover-head span { font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.tool-popover-done {
  border: none; background: var(--blue); color: #fff; border-radius: 0;
  padding: 6px 15px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font);
}
.tool-popover-done:hover { background: var(--blue-bright); }
.tool-popover-grid { display: flex; flex-wrap: wrap; gap: 8px; max-height: 46vh; overflow-y: auto; padding-right: 4px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .tool-popover {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%;
    border-radius: 0; max-height: 72vh; overflow-y: auto;
    box-shadow: 0 -8px 30px rgba(15, 28, 51, 0.18);
  }
}

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 34px; }
.post-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 0;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm); transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card .thumb {
  height: 130px; display: flex; align-items: flex-end; padding: 14px 18px;
  color: rgba(255,255,255,0.92); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; position: relative; overflow: hidden;
}
.post-card .thumb .ai-flag {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255,255,255,0.18); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 0;
}
.post-card .body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { font-size: 17.5px; line-height: 1.32; color: var(--blue-ink); }
.post-card h3 a { color: inherit; }
.post-card .meta { font-size: 13px; color: var(--muted); margin-top: 9px; }
.post-card .excerpt { font-size: 14.2px; color: var(--muted); margin-top: 10px; flex: 1; }
.post-card .tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tool-tag {
  font-size: 11.5px; font-weight: 600; color: var(--blue);
  background: #eaf0ff; border-radius: 0; padding: 3px 9px;
}
.hidden { display: none !important; }

/* post page */
.post-hero-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.post-hero-meta .tool-tag { background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.byline { color: #fff; font-size: 15px; margin-top: 16px; }  /* Sam: white on dark, was #9fb6ec */
.origin-note {
  background: #eef4ff; border: 1px solid #cdddff; border-radius: 0;
  padding: 18px 22px; margin: 30px 0; font-size: 15px; color: #000000;
}
.takeaways {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--blue-bright);
  border-radius: 0; padding: 24px 28px; margin: 28px 0;
}
.takeaways h3 { margin-bottom: 12px; color: var(--blue-ink); }

/* ---------- ideas lab ---------- */
.ideas-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; margin-top: 36px; align-items: start; }
.idea-item {
  background: var(--card); border: 1px solid var(--line); border-radius: 0;
  padding: 20px 22px; display: flex; gap: 18px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
}
.vote-box { text-align: center; flex-shrink: 0; }
.vote-btn {
  width: 58px; height: 58px; border-radius: 0; border: 1.6px solid var(--line);
  background: #fbfcff; cursor: pointer; font-family: var(--font);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: all 0.14s ease; color: var(--blue);
}
.vote-btn:hover { border-color: var(--blue-bright); background: #eef3ff; transform: translateY(-2px); }
.vote-btn.voted { background: var(--blue); border-color: var(--blue); color: #fff; cursor: default; }
.vote-btn .arrow { font-size: 15px; line-height: 1; }
.vote-btn .count { font-size: 19px; font-weight: 700; line-height: 1.15; }
.vote-progress { font-size: 11px; color: var(--muted); margin-top: 7px; width: 64px; }
.idea-item h3 { font-size: 17.5px; color: var(--blue-ink); }
.idea-item .idea-meta { font-size: 13px; color: var(--muted); margin-top: 4px; }
.idea-item p.details { font-size: 14.5px; color: var(--muted); margin-top: 8px; }
.idea-form label { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 5px; color: var(--blue-ink); }
.idea-form input, .idea-form textarea, .idea-form select {
  width: 100%; font-family: var(--font); font-size: 15px; padding: 11px 13px;
  border: 1.4px solid var(--line); border-radius: 0; background: #fbfcff; color: var(--ink);
}
.idea-form textarea { min-height: 110px; resize: vertical; }
.form-note { font-size: 12.5px; color: var(--muted); margin-top: 12px; }
.queued-flag {
  background: #e5f8f1; color: #0c7a58; font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: 0; display: inline-block;
}

/* ---------- AI queue ---------- */
.queue-item {
  background: var(--card); border: 1px solid var(--line); border-radius: 0;
  padding: 24px 26px; margin-bottom: 18px; box-shadow: var(--shadow-sm);
}
.queue-item h3 { color: var(--blue-ink); font-size: 18px; }
/* The pill stays anchored right and the TITLE wraps instead. Previously this line was allowed to
   flex-wrap, and a title long enough to fill the row pushed the pill onto its own line below —
   so an identical card read differently depending on how long its title happened to be. The
   title block needs min-width:0 or a flex item refuses to shrink below its content width and
   wrapping never gets the chance to happen. */
.queue-head { display: flex; justify-content: space-between; gap: 14px; flex-wrap: nowrap; align-items: flex-start; }
.queue-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.queue-head h3 { overflow-wrap: anywhere; }
.stage-pill {
  font-size: 12.5px; font-weight: 700; padding: 5px 14px; border-radius: 0; white-space: nowrap;
  flex: 0 0 auto;
}
/* Prose stats ("what ran", "headline result") are sentences, not numbers. Give them the row to
   themselves and clamp to three lines so one long methods sentence cannot set the card's height. */
.stat-wide { flex: 1 1 100%; }
.stat-prose {
  font-size: 12.5px; font-weight: 600; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* On a phone there is no room for both on one line, so let it stack there deliberately. */
@media (max-width: 560px) {
  .queue-head { flex-wrap: wrap; }
  .queue-head > div:first-child { flex: 1 1 100%; }
}
.stage-pill.running { background: #fff4e0; color: #9a6200; }
.stage-pill.done { background: #e5f8f1; color: #0c7a58; }
.stage-pill.waiting { background: #eef2fb; color: var(--muted); }
.progress-track { background: #edf1f9; border-radius: 0; height: 10px; margin-top: 16px; overflow: hidden; }
.progress-fill {
  height: 100%; border-radius: 0;
  background: linear-gradient(90deg, var(--blue), var(--blue-bright));
  transition: width 0.9s ease;
}
.stage-row { display: flex; justify-content: space-between; margin-top: 10px; flex-wrap: wrap; gap: 6px; }
.stage-step { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.stage-step.done { color: #0c7a58; font-weight: 600; }
.stage-step.active { color: #9a6200; font-weight: 700; }
.run-log {
  background: var(--navy); color: #9fd0a8; font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 12.5px; border-radius: 0; padding: 16px 18px; margin-top: 16px;
  white-space: pre-wrap; line-height: 1.75;
}
.queue-stats--hero { padding: 30px 30px; }
.queue-stats--hero .qstat b { font-size: 36px; }
.queue-stats--hero .qstat span { font-size: 12.5px; }
.queue-sum {
  font-size: 17.5px; color: #000000; max-width: 900px; line-height: 1.65; margin-bottom: 20px;
}
.queue-sum b { color: var(--blue); font-weight: 700; }
.queue-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  background: linear-gradient(115deg, var(--navy), var(--blue-ink) 70%, var(--blue));
  border-radius: 0; padding: 24px 26px; margin-bottom: 34px;
}
.qstat { text-align: center; color: #fff; }
.qstat b { display: block; font-size: 28px; font-weight: 700; line-height: 1.1; }
.qstat span { font-size: 11.5px; color: #fff; text-transform: uppercase; letter-spacing: 0.09em; }  /* Sam: white */
.stat-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.stat {
  background: #f2f6ff; border: 1px solid var(--line); border-radius: 0;
  padding: 8px 15px; text-align: center; flex: 0 1 auto;
}
.stat b { display: block; font-size: 16.5px; color: var(--blue-ink); line-height: 1.2; }
.stat span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
@media (max-width: 680px) { .queue-stats { grid-template-columns: repeat(2, 1fr); } }
/* Was a dead "coming with the pilot" tease promising a GATED download. That
   plan died with the 2026-07-18 zero-collection flip, and the branded export
   already ships on every study — so this is now a real link to it. */
.report-tease {
  display: inline-block; margin: 14px 0 0 10px; font-size: 12.5px; font-weight: 600;
  color: var(--blue); border: 1.4px solid var(--line); border-radius: 0;
  padding: 9px 14px; cursor: pointer; vertical-align: middle;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.report-tease:hover { border-color: var(--blue); text-decoration: none; }
/* Run Archive */
.arc-row { background: var(--card); border: 1px solid var(--line); border-radius: 0; margin-bottom: 8px; overflow: hidden; }
.arc-head {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 13px 18px; font-family: var(--font);
}
.arc-head:hover { background: #f6f9ff; }
.arc-title { flex: 1; font-weight: 600; color: var(--blue-ink); font-size: 14.5px; min-width: 200px; }
.arc-runs { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-weight: 600; }
.arc-chev { color: var(--muted); font-size: 13px; transition: transform 0.15s ease; }
.arc-row.open .arc-chev { transform: rotate(180deg); }
.arc-detail { padding: 4px 20px 18px; border-top: 1px dashed var(--line); }
.arc-brief { font-size: 14px; color: #000000; margin-top: 12px; }
@media (max-width: 680px) { .arc-head { flex-wrap: wrap; } }
.rev-row {
  background: var(--card); border: 1px solid var(--line); border-radius: 0;
  padding: 16px 20px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.rev-main { flex: 1; min-width: 260px; }
.rev-main a { font-weight: 600; color: var(--blue-ink); font-size: 15.5px; }
.rev-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.rev-note { font-size: 12.5px; color: #9a6200; margin-top: 4px; }
.rev-actions { display: flex; gap: 8px; }
.q-sec { font-size: 21px; color: var(--blue-ink); margin: 4px 0 16px; display: flex; align-items: center; gap: 8px; }
.q-sec span { color: var(--muted); font-weight: 500; font-size: 15px; }
.auto-report {
  background: #fbfdff; border: 1px solid var(--line); border-left: 4px solid var(--green);
  border-radius: 0; padding: 22px 26px; margin-top: 14px; font-size: 15px;
}
.auto-report h4 { color: var(--blue-ink); font-size: 16.5px; margin-bottom: 4px; }
.auto-report .rep-meta { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.auto-report p { color: #000000; margin-bottom: 10px; }
.auto-report .fine { font-size: 12.5px; color: var(--muted); font-style: italic; margin-bottom: 0; }
.empty-state {
  text-align: center; padding: 60px 30px; color: var(--muted);
  background: var(--card); border: 1.6px dashed var(--line); border-radius: 0; margin-top: 30px;
}

/* ---------- footer ---------- */
.site-footer { background: #000; color: #fff; margin-top: 70px; }  /* Sam: black bg, white font */
.footer-inner {
  max-width: 1240px; margin: 0 auto; padding: 54px 24px 30px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px;
}
.footer-inner h4 { color: #fff; font-size: 15px; margin-bottom: 14px; letter-spacing: 0.04em; }
.footer-inner a { color: #fff; display: block; font-size: 14px; margin-bottom: 8px; }
.footer-inner a:hover { color: var(--gold); }
.footer-brand img { height: 30px; }
.footer-inner a.footer-logo, .footer-logo { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; white-space: nowrap; }
.footer-logo:hover, .site-header .logo:hover { text-decoration: none; }
.footer-brand p { font-size: 14px; max-width: 300px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  max-width: 1240px; margin: 0 auto; padding: 20px 24px;
  font-size: 12.5px; color: #fff;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}

/* ---------- interior pages: varied layouts ---------- */
.hero-page.has-img::after { display: none; }
.page-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: center; margin: 48px 0; }
.page-split img { width: 100%; border-radius: 0; box-shadow: var(--shadow); }
.page-split.flip img { order: -1; }
.page-split h2 { margin-bottom: 10px; }
.page-split p { color: #000000; font-size: 16px; }
.accent-band {
  background: linear-gradient(115deg, var(--navy), var(--blue-ink) 70%, var(--blue));
  color: #fff; border-radius: 0; padding: 42px 46px; margin: 48px 0;
}
.accent-band h2 { color: #fff; margin-bottom: 10px; }
.accent-band p { color: #fff; max-width: 840px; font-size: 16px; }
.accent-band .checklist li { color: #fff; }
.plain-block { margin: 48px 0; max-width: 880px; }
.plain-block h2 { margin-bottom: 10px; }
.plain-block p { color: #000000; font-size: 16px; }
@media (max-width: 900px) {
  .page-split { grid-template-columns: 1fr; gap: 22px; }
  .page-split.flip img { order: 0; }
  .accent-band { padding: 30px 26px; }
}

/* ---------- home: hero slider (mirrors live site) ---------- */
.slider { position: relative; height: min(72vh, 620px); min-height: 440px; background: var(--navy); overflow: hidden; }
.slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease;
  background-size: cover; background-position: center; display: flex; align-items: center;
}
.slide.on { opacity: 1; z-index: 1; }
.slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,16,38,0.88) 25%, rgba(8,16,38,0.25) 70%, transparent); }
.slide-inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; width: 100%; }
.slide h1, .slide .h1 { color: #fff; font-size: clamp(38px, 5.5vw, 66px); font-weight: 700; line-height: 1.05; }
.slide p { color: #d5def2; font-size: clamp(15px, 1.7vw, 19px); margin-top: 14px; max-width: 560px; }
.slide .btn { margin-top: 26px; }
.slider-dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 9px; }
.slider-dots button { width: 11px; height: 11px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.4); cursor: pointer; padding: 0; }
.slider-dots button.on { background: #fff; }

/* apex band */
.apex-band { background: #fff; border-bottom: 1px solid var(--line); }
.apex-inner { max-width: 1240px; margin: 0 auto; padding: 26px 24px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.apex-inner img { height: 74px; width: auto; }
.apex-inner p { color: var(--muted); font-size: 15.5px; max-width: 800px; }

/* value props */
.vprops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 40px; }
.vprop { text-align: center; padding: 0 8px; }
.vprop img { height: 62px; width: auto; margin-bottom: 16px; }
.vprop h3 { font-size: 18px; color: var(--blue-ink); margin-bottom: 8px; }
.vprop p { color: var(--muted); font-size: 14.5px; }

/* service tiles with real imagery */
.svc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 36px; }
.svc-tile {
  background: var(--card); border: 1px solid var(--line); border-radius: 0;
  overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.16s ease, box-shadow 0.16s ease;
  display: flex; flex-direction: column;
}
.svc-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.svc-tile img { height: 130px; width: 100%; object-fit: cover; }
.svc-tile .t { padding: 16px 16px 18px; }
.svc-tile h3 { font-size: 15.5px; color: var(--blue-ink); line-height: 1.3; }
.svc-tile a.more { font-size: 13.5px; font-weight: 600; display: inline-block; margin-top: 8px; }

/* harness split */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 46px; align-items: center; margin-top: 10px; }
.split img { border-radius: 0; box-shadow: var(--shadow); width: 100%; }

/* featured resources */
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
.res-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 0; overflow: hidden;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform 0.16s ease;
}
.res-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.res-card img { height: 165px; width: 100%; object-fit: cover; }
.res-card .t { padding: 18px 20px 20px; }
.res-card .kind { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-bright); }
.res-card h3 { font-size: 16.5px; color: var(--blue-ink); margin-top: 7px; line-height: 1.35; }

/* cta banner w/ image */
.cta-banner {
  background: linear-gradient(100deg, var(--navy) 30%, var(--blue) 110%);
  border-radius: 0; padding: 52px; color: #fff; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.cta-banner img { position: absolute; right: -20px; bottom: -20px; opacity: 0.35; height: 130%; pointer-events: none; }
.cta-banner h2 { color: #fff; position: relative; }
.cta-banner p { color: #d0dcf5; margin-top: 8px; position: relative; }
.cta-banner .btn { position: relative; }

/* media thumbs on blog cards */
.post-card .thumb.media { padding: 0; height: 170px; align-items: stretch; }
.post-card .thumb.media img, .post-card .thumb.media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Video-hero cards: the poster <img> is the no-JS baseline; the <video> overlays it and
   only fades in once media-lazy.js reports it playing, so a card can never render blank
   if the clip (or its init) is deferred. (2026-08-23 fix-blank-video-cards) */
.post-card .thumb.media video {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.35s ease;
}
.post-card .thumb.media video.is-playing { opacity: 1; }
.post-card .thumb.media .cat-label {
  position: absolute; left: 12px; bottom: 10px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  background: rgba(10, 20, 45, 0.62); backdrop-filter: blur(3px);
  padding: 3px 10px; border-radius: 0;
}
/* Labs blog: bold per-tool badges (matches the original standalone's toolrow) */
.toolrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.toolbadge {
  font-size: 11px; font-weight: 800; letter-spacing: 0.05em;
  padding: 3px 10px; border-radius: 0; text-transform: uppercase;
  background: var(--t-solid, #5b6579); color: var(--t-on, #fff);
}
.tb-fluent { background: #1c7fd6; }
.tb-ls-dyna { background: #c0392b; }
.tb-mechanical { background: #6a3fb5; }
.tb-rocky { background: #b06a12; }
.tb-sherlock { background: #0e7a5c; }
.tb-speos { background: #b8860b; }
.tb-optislang { background: #2f6b3a; }
.tb-aqwa { background: #106e8c; }
.tb-mech-lite-in-house { background: #555c68; }
.badge-showcase {
  background: linear-gradient(120deg, #000000, #1237a0); color: #fff;
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 0; letter-spacing: 0.05em;
}

/* Industry label on a card. Deliberately quieter than the tool badges: the tool is
   what a study USED, the industry is who it is FOR. Useful when scanning, but it
   must not compete with the title. */
.badge-ind {
  background: #eef2fb; color: var(--blue-ink); border: 1px solid #d7e0f5;
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 0; letter-spacing: 0.04em;
}

/* Industry filter chips — same shape as the tool chips, but one flat brand color
   rather than per-tool colors, so the two filter rows stay visually distinct. */
.chip-ind { background: #fff; border-color: var(--line); color: var(--blue-ink); padding: 6px 13px; font-size: 13px; }
.chip-ind:hover { border-color: var(--blue-bright); box-shadow: var(--shadow-sm); }
.chip-ind.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip-ind .cnt { color: var(--muted); opacity: 0.75; }
.chip-ind.active .cnt { color: #fff; opacity: 0.8; }

/* Faceted dead end: this chip would return nothing under the filters already
   applied. Dimmed rather than hidden, so the row does not reflow on every
   click and the visitor can see WHY an option is unavailable. */
.chip-zero { opacity: 0.32; }
.chip-zero:hover { border-color: var(--line); box-shadow: none; }

@media (max-width: 1080px) {
  .vprops { grid-template-columns: repeat(2, 1fr); }
  .svc-grid { grid-template-columns: repeat(3, 1fr); }
  .res-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .res-grid { grid-template-columns: 1fr; }
  .vprops { grid-template-columns: 1fr; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .main-nav {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    background: var(--navy-2); flex-direction: column; align-items: stretch; padding: 10px 0;
  }
  .main-nav.open { display: flex; }
  .nav-item > a { padding: 14px 24px; display: block; }
  .dropdown { position: static; border-radius: 0; box-shadow: none; background: rgba(255,255,255,0.06); border-top: 0; }
  .dropdown a { color: #cfd9ee; padding-left: 40px; }
  .dropdown a:hover { background: rgba(255,255,255,0.08); color: #fff; }
  .nav-toggle { display: block; }
  .cta-btn { margin: 10px 24px; text-align: center; }
  .ideas-layout { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: 1fr; }
  .band { padding: 32px 24px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* ---------- Sam style port: type treatment (2026-08-03) ----------
   Uppercase + wide tracking on the small UI labels. This is the detail doing
   most of the "premium" work in her mock — it costs nothing and touches no
   markup. Filter inputs, buttons and the meta lines only; body copy and
   headings are left alone. */
.btn,
.cta-btn,
.chip-surprise,
.tool-picker-trigger {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13.5px;
}
.filter-bar input[type="search"],
.filter-bar select {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
}
.filter-bar input[type="search"]::placeholder { text-transform: uppercase; letter-spacing: 0.06em; }
.fb-label,
.idea-meta a,
.vote-progress { text-transform: uppercase; letter-spacing: 0.07em; }


/* ============ Sam card hero — ported 2026-08-03 ============
   Her .hero rules, rescoped to .labs-hero so only the Labs home uses them.
   HOVER ONLY: her scroll-driven .in-view state is intentionally not wired up
   (Spencer, 2026-08-03) — at the top of the page it left the first card
   permanently highlighted, which read as a selected state. */
/* ---------- alt hero: card-hero header (RandSim blue + gold) ---------- */
/* Everything below is scoped under .labs-hero — the same class the plain-page hero
   above uses. These selectors (.card, .btn, bare h1, .sub) intentionally
   override the plain hero's, since only one hero variant renders on a given
   page (later rules here win). Gold values reuse var(--gold), same hex.
   Requires Inter + Space Grotesk to be linked in <head> — the rest of the site
   uses --font (Jost/Poppins), left untouched here. */
.labs-hero {
  position: relative;
  overflow: hidden;
  padding: 88px 48px 72px;
  font-family: 'Inter', sans-serif;
  background: var(--navy); /* fallback for pages without body.labs-home */
}
/* body.labs-home makes .labs-hero transparent so the page-wide black-to-blue fade
   (defined above, near body.page-dark) shows through here too — the radial
   glow below is a decorative layer on top of that, not a second base color. */
.labs-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 900px 600px at 15% 20%, rgba(18, 55, 160, 0.35), transparent 60%),
    radial-gradient(ellipse 800px 700px at 85% 80%, rgba(18, 55, 160, 0.45), transparent 60%);
  background-size: 200% 200%, 200% 200%;
  animation: driftGradient 18s ease-in-out infinite;
}
@keyframes driftGradient {
  0%   { background-position: 0% 0%, 100% 100%; }
  50%  { background-position: 60% 40%, 30% 60%; }
  100% { background-position: 0% 0%, 100% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .labs-hero::before { animation: none; }
}
.labs-hero-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
.labs-hero .gold{ color: var(--gold); }
.labs-hero .eyebrow {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px;
}
.labs-hero h1 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -0.01em;
  color: var(--text-hi); margin: 0 0 16px;
}
.labs-hero .sub { font-size: 17px; line-height: 1.6; color: #fff; max-width: 560px; margin: 0 0 56px; } /* Sam: white */

.labs-hero .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--hairline); }
.labs-hero .card {
  padding: 32px 26px 24px; border: none; border-right: 1px solid var(--hairline); position: relative;
  display: flex; flex-direction: column; height: 100%; text-decoration: none; background: transparent;
  transition: background 0.25s ease, transform 0.25s ease;
}
.labs-hero .card:last-child { border-right: none; }
.labs-hero .card:hover { background: var(--blue); transform: translateY(-4px); }
.labs-hero .card:hover h3 { color: var(--gold); }
.labs-hero .card:hover .num { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.labs-hero .card:hover .go { opacity: 1; transform: translateX(0); }

.labs-hero .card h3 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; color: var(--text-hi);
  margin: 0 0 10px; letter-spacing: -0.01em; transition: color 0.25s ease;
  display: flex; align-items: center; gap: 8px;
}
.labs-hero .go {
  font-size: 15px; opacity: 0; flex-shrink: 0; transform: translateX(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease; color: var(--text-hi);
}
.labs-hero .btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 52px;
  flex-shrink: 0; padding: 9px 16px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 400;
  line-height: 1.3; text-align: center; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--gold); background: transparent; border: 1px solid var(--gold); border-radius: 0;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.labs-hero .btn-label { flex: 1 1 auto; text-align: center; }
.labs-hero .card:hover .btn { background: var(--navy); border-color: var(--gold); color: var(--gold); }

.labs-hero .card .num {
  font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; color: var(--gold);
  background: rgba(236, 190, 29, 0.14); border: 1px solid rgba(236, 190, 29, 0.45);
  width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.labs-hero .card p { font-size: 14.5px; line-height: 1.6; color: var(--text-hi); margin: 0 0 24px; flex: 1 0 auto; }

@media (max-width: 900px) {
  .labs-hero .cards { grid-template-columns: repeat(2, 1fr); }
  .labs-hero .card:nth-child(2) { border-right: none; }
  .labs-hero .card:nth-child(1), .labs-hero .card:nth-child(2) { border-bottom: 1px solid var(--hairline); }
}
@media (max-width: 560px) {
  .labs-hero { padding: 64px 24px 48px; }
  .labs-hero .cards { grid-template-columns: 1fr; }
  .labs-hero .card { border-right: none !important; border-bottom: 1px solid var(--hairline); }
  .labs-hero .card:last-child { border-bottom: none; }
}

/* ============ Sam dark page bodies — ported 2026-08-03 ============
   Her Word doc: add page-dark to the blog body, labs-home to the Labs home.
   labs-home fades black at the top to solid Rand blue at the bottom (gradient
   sized to the document, so it reads as a fade while scrolling); page-dark
   pins its radial wash to the viewport instead. Both need the light-on-dark
   text fixes below, since our section type is near-black by default. */
body.page-dark {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(18, 55, 160, 0.35), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, rgba(18, 55, 160, 0.22), transparent 55%),
    linear-gradient(135deg, var(--navy) 0%, var(--blue-ink) 55%, var(--blue) 130%);
  background-attachment: fixed;
}
body.page-dark .hero { background: transparent; }

body.labs-home {
  background: linear-gradient(to bottom, var(--navy) 0%, var(--blue) 100%);
}
body.labs-home .hero { background: transparent; }

body.page-dark .section h2,
body.labs-home .section h2 { color: #fff; }
body.page-dark .section .lead,
body.labs-home .section .lead { color: #fff; }
body.page-dark .section > p,
body.labs-home .section > p { color: #fff; }
body.page-dark ul.checklist li,
body.labs-home ul.checklist li { color: #fff; }

/* Sam 2026-08-04: badge never underlines with the logo link; breathing room between
   the tool tags and WATCH THE RUN in the Recently Queued strip */
.labs-badge { text-decoration: none; display: inline-block; }
#queuedList .idea-meta { margin-top: 10px; }