/* Command Intelligence site — one design system for every page.
   Light canvas, navy ink, Work Sans. Edit here, not in a page. */

:root {
  --navy: #002b54;
  --blue: #3b82f6;
  --blue-dark: #0f5bc4;
  --ink: #0f172a;
  --muted: #64748b;
  --canvas: #f4f7fb;
  --card: rgba(255, 255, 255, 0.92);
  --card-solid: #ffffff;
  --card-border: rgba(15, 23, 42, 0.12);
  --hairline: rgba(15, 43, 84, 0.12);
  --wash: rgba(15, 43, 84, 0.04);
  --chip-bg: #eaf2ff;
  --tint: rgba(29, 114, 242, 0.05);
  --tint-border: rgba(29, 114, 242, 0.3);
  --warn-bg: rgba(245, 158, 11, 0.09);
  --warn-border: rgba(180, 120, 0, 0.28);
  --warn-ink: #6b4e00;
  --font: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --shadow-card: 0 6px 20px rgba(15, 23, 42, 0.05);
  --shadow-hover: 0 18px 56px rgba(15, 23, 42, 0.14);
  --focus-ring: 0 0 0 3px rgba(29, 114, 242, 0.35);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Sticky chrome: the header, plus the filter bar that parks under it. Anchors must
     clear both, so deep links land on the heading rather than behind it. base.html
     measures the real heights and overwrites these; they are the no-JS fallback. */
  --header-h: 61px;
  --anchor-pad: 132px;
}

* { box-sizing: border-box; }

/* Filtering hides with the `hidden` attribute; a display rule elsewhere must not win */
[hidden] { display: none !important; }

/* clip, not hidden: the sticky scrims bleed a viewport-wide band past the text column,
   and 100vw counts the scrollbar. `clip` trims the overhang without making the root a
   scroll container, which `hidden` would do — that breaks position: sticky. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* The canvas colour lives on html so body's ::before can paint above it and still
   stay behind every bit of content. */
html { background: var(--canvas); }

body {
  margin: 0;
  min-height: 100vh;
  background: none;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding: 0;
}

/* Aurora — three soft fields drifting on a long loop. Pure CSS, no canvas, no
   dependency; it is the old static radial gradients given somewhere to go. */
body::before {
  content: "";
  position: fixed;
  inset: -30%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 44% at 22% 28%, rgba(29, 114, 242, 0.28), transparent 62%),
    radial-gradient(34% 40% at 80% 20%, rgba(8, 145, 178, 0.21), transparent 64%),
    radial-gradient(42% 48% at 64% 78%, rgba(99, 102, 241, 0.16), transparent 66%);
  filter: blur(36px);
  animation: aurora-drift 28s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes aurora-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-3%, 2.5%, 0) scale(1.09); }
  100% { transform: translate3d(2.5%, -2%, 0) scale(1.04); }
}

/* Shader aurora (assets/aurora.js) takes over only once it has drawn a frame. Until
   then — and forever, under reduced motion or without WebGL — the CSS aurora stands. */
.shader-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
html.shader-on body::before { display: none; }

/* Grain, so the gradients read as paper rather than as a screenshot of a gradient */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Headline words rise and sharpen in sequence. Split at build time, so the text is
   real text in the HTML and readable with no JS at all. */
.hero h1 .word {
  display: inline-block;
  animation: word-rise 720ms var(--ease) backwards;
  animation-delay: calc(var(--i) * 70ms);
}

@keyframes word-rise {
  from { opacity: 0; filter: blur(12px); transform: translateY(0.36em); }
  to { opacity: 1; filter: blur(0); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .hero h1 .word { animation: none; }
}

.shell {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Anything deep-linkable must clear the sticky header, wherever it sits in the page */
[id] { scroll-margin-top: var(--anchor-pad); }

/* Sticky header — brand lockup plus hub nav, always reachable */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(244, 247, 251, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.header-inner {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img {
  display: block;
  width: auto;
  height: 30px;
}

/* Hub nav — text links with an indicator that slides to whatever you are on or
   pointing at. One row always: on narrow screens the strip scrolls sideways rather
   than wrapping, so the header cannot grow to three rows and shove the page down. */
.site-nav {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end;
  align-items: center;
  gap: 22px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
  flex: 0 0 auto;
  padding: 2px 0;
  color: var(--muted);
  text-decoration: none;
  transition: color 180ms var(--ease);
}
.site-nav a:hover { color: var(--navy); }
.site-nav a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}
.site-nav a[aria-current="page"] { color: var(--blue-dark); }

/* The ink bar. Sits inside the scroller so it travels with the links. */
.nav-ink {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  border-radius: 2px;
  background: var(--blue-dark);
  opacity: 0;
  pointer-events: none;
  transition: transform 260ms var(--ease), width 260ms var(--ease),
    opacity 180ms var(--ease);
}
.nav-ink.is-on { opacity: 1; }

/* Fade only the edge that is actually cutting a label off, so a clipped word reads
   as "there is more this way" rather than as a rendering fault. Set by base.html. */
.site-nav[data-edge="end"] {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
}
.site-nav[data-edge="start"] {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px);
  mask-image: linear-gradient(90deg, transparent, #000 24px);
}
.site-nav[data-edge="both"] {
  -webkit-mask-image: linear-gradient(
    90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent
  );
  mask-image: linear-gradient(
    90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent
  );
}

/* Home hero */
.hero { padding: 26px 0 8px; }
.hero h1 {
  max-width: 900px;
  margin: 0 0 18px;
  font-size: clamp(36px, 6vw, 62px);
}
.hero .hero-lede {
  max-width: 640px;
  margin: 0 0 26px;
  color: var(--muted);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.6;
}
.hero .hero-lede strong { color: var(--navy); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }


/* Latest update, called out on the home page */
.latest {
  display: block;
  margin: 0;
  padding: 22px 24px;
  border: 1px solid var(--card-border);
  border-radius: 15px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
.latest:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.latest:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.latest .latest-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.latest .when {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.latest h2 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.latest p {
  max-width: 68ch;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.latest .go { display: inline-block; margin-top: 12px; color: var(--blue-dark); font-size: 12px; font-weight: 600; }
.latest + section { margin-top: 40px; }

/* Pillars on the home page — count comes from site.json, so the grid must not care */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 12px;
}
.pillar {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--card-border);
  border-radius: 15px;
  background: var(--card);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
.pillar:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.pillar:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pillar strong {
  display: block;
  margin-bottom: 6px;
  color: var(--navy);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.pillar span { display: block; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* The one people should read first gets the weight; the others stay quiet */
.pillar.is-lead {
  border-color: var(--tint-border);
  background: linear-gradient(180deg, var(--chip-bg) 0%, var(--card-solid) 60%);
}
.pillar-lead {
  display: inline-flex !important;
  margin-bottom: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--blue-dark);
  color: #fff !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 800px) {
  .pillars { grid-template-columns: 1fr; }
}

section { margin: 40px 0 0; }

/* Masthead */
.masthead { margin-bottom: 26px; }
.kicker {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
h1 {
  max-width: 820px;
  margin: 0 0 14px;
  color: var(--navy);
  font-size: clamp(32px, 5vw, 50px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.055em;
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.pills li,
.pill {
  display: inline-flex;
  padding: 7px 10px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.summary {
  max-width: 820px;
  margin: 0 0 24px;
  color: var(--navy);
  font-size: clamp(18px, 2.2vw, 21px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

/* Prose — markdown output */
.prose { max-width: 820px; }
.prose > * { max-width: 760px; }
.prose h2 {
  max-width: 760px;
  margin: 40px 0 8px;
  color: var(--navy);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  scroll-margin-top: var(--anchor-pad);
}
.prose h3 {
  margin: 26px 0 6px;
  color: var(--navy);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  scroll-margin-top: var(--anchor-pad);
}
.prose h4 {
  margin: 20px 0 4px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
}
.prose p, .prose li {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.prose p { margin: 0 0 1em; }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.3rem; }
.prose li { margin-bottom: 0.35em; }
.prose strong { color: var(--navy); font-weight: 600; }
.prose a { color: var(--blue-dark); }
.prose hr {
  max-width: 760px;
  margin: 32px 0;
  border: 0;
  border-top: 1px solid var(--hairline);
}
.prose blockquote {
  margin: 0 0 1em;
  padding: 12px 16px;
  border: 1px dashed var(--tint-border);
  border-radius: 12px;
  background: var(--tint);
}
.prose blockquote p:last-child { margin-bottom: 0; }

code {
  font-family: var(--mono);
  font-size: 0.82em;
  font-weight: 500;
  background: var(--wash);
  color: var(--navy);
  padding: 0.12em 0.4em;
  border-radius: 6px;
  overflow-wrap: anywhere;
}
pre {
  max-width: 760px;
  margin: 0 0 1em;
  padding: 14px 16px;
  overflow-x: auto;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--card-solid);
}
pre code { background: none; padding: 0; font-size: 12px; }

/* Tables */
.table-scroll { max-width: 100%; overflow-x: auto; margin: 0 0 1em; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--hairline);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
  vertical-align: top;
}

/* Cards */
.card,
.q {
  padding: 18px 20px;
  margin: 0 0 12px;
  border: 1px solid var(--card-border);
  border-radius: 15px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.q { max-width: 900px; scroll-margin-top: var(--anchor-pad); transition: border-color 200ms var(--ease); }
.q:target { border-color: rgba(29, 114, 242, 0.45); background: var(--card-solid); }
.q > h3 { margin-top: 0; }
.q p, .q li { max-width: 68ch; font-size: 14px; }
.q p:last-child { margin-bottom: 0; }

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.grid-2.plain { list-style: none; margin: 0 0 1em; padding: 0; max-width: none; }
.grid-2.plain li.card { margin: 0; }
.grid-2 .card > strong {
  display: block;
  margin-bottom: 4px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.grid-2 .card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* Roadmap prototype cards */
a.card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
a.card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
a.card > strong {
  font-size: 17px !important;
  letter-spacing: -0.02em;
}

.proto-card {
  display: flex;
  flex-direction: column;
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
.proto-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.proto-title { margin: 0 0 8px; font-size: 17px; letter-spacing: -0.02em; }
.proto-title a { color: var(--navy); text-decoration: none; }
.proto-title a:hover { color: var(--blue-dark); }
.proto-title a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.proto-card > p { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.proto-open {
  margin-top: auto;
  padding-top: 10px;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.proto-open:hover { text-decoration: underline; }
.proto-open:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.proto-card .chips .pill,
a.card > .pill {
  margin: 0 0 10px;
  padding: 5px 8px;
  border: 0;
  background: var(--chip-bg);
  color: var(--blue-dark);
  font-size: 10px;
}

.proto-card .chips,
a.card .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.pill-next {
  border: 0 !important;
  background: #fff3d6 !important;
  color: #7a5200 !important;
  font-weight: 700;
  text-decoration: none;
}
.pill-next:hover { background: #ffe9ad !important; }
.proto-card.is-next,
a.card.is-next { border-color: rgba(180, 120, 0, 0.35); }

/* Workstream cards — epic-backed work, linked to Jira and to the prototypes below.
   Same shell as a prototype card so the two layers read as one system. */
.work-card {
  display: flex;
  flex-direction: column;
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
.work-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.work-card .proto-title a { color: var(--navy); text-decoration: none; }
.work-card .proto-title a:hover { color: var(--blue-dark); }
.work-card .proto-title a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.work-card > p { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.55; }

/* CXAI epic key as a link into Jira */
.pill-epic {
  border: 0 !important;
  background: #e6ecff !important;
  color: #34419b !important;
  font-weight: 700;
  text-decoration: none;
}
.pill-epic:hover { background: #d3ddff !important; }

.ws-explore {
  margin: auto 0 0 !important;
  padding-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.ws-explore strong { color: var(--navy); }
.ws-explore a { color: var(--blue-dark); text-decoration: none; }
.ws-explore a:hover { text-decoration: underline; }
.ws-explore a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.ws-none { font-style: italic; }

/* Maturity, read from inventory/ — the audit is the source, the card only reports it */
.foundation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px !important;
  font-family: var(--mono);
  font-size: 10px !important;
  line-height: 1.5 !important;
  color: var(--muted) !important;
}
.foundation a { color: var(--blue-dark); text-decoration: none; }
.foundation a:hover { text-decoration: underline; }
.tier {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tier-production { background: #dcfce7; color: #14532d; }
.tier-dev { background: var(--chip-bg); color: var(--blue-dark); }
.tier-prototype { background: #ede9fe; color: #4c1d95; }
.tier-absent,
.tier-none { background: rgba(15, 43, 84, 0.06); color: var(--muted); }
.tier-inline { color: var(--muted); }

.proto-card .owns,
a.card .owns {
  margin: 0 !important;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--wash);
  color: var(--ink) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}
.proto-card .owns strong,
a.card .owns strong { color: var(--navy); }

.proto-card .job,
.proto-card .impact,
.work-card .job,
.work-card .impact {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
}
.work-card .job,
.work-card .impact { color: var(--ink); }
.proto-card .job strong,
.proto-card .impact strong,
.work-card .job strong,
.work-card .impact strong { color: var(--navy); }

/* Section label + deck */
.section-kicker {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.section-deck {
  max-width: 760px;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* Callouts */
.note {
  margin: 24px 0 0;
  padding: 14px 16px;
  border: 1px dashed var(--tint-border);
  border-radius: 12px;
  background: var(--tint);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.note strong {
  display: block;
  margin-bottom: 5px;
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.note a { color: var(--blue-dark); }
.note-warn {
  border-color: var(--warn-border);
  background: var(--warn-bg);
  color: var(--warn-ink);
}
.note-warn strong { color: #533c00; }

/* Figures */
figure {
  max-width: 540px;
  margin: 28px 0;
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: 15px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
figure img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

/* Sticky scrims — the filter bar and the group headers that park beneath it. The wash
   that keeps them legible over the aurora is painted by a pseudo-element bleeding the
   full viewport width, like the header does, and feathered top and bottom. Painting it
   on the element itself cut a hard-edged rectangle the width of the text column. */
.tools::before,
.ship-head::before,
.prompt-head::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -6px calc(50% - 50vw) -18px;
  background: rgba(244, 247, 251, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6px, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 6px, #000 calc(100% - 18px), transparent 100%);
}

/* The scrim paints over the element's own border, so the group headers underline
   themselves with a positioned rule that lands above it. */
.ship-head::after,
.prompt-head::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--hairline);
}

/* Filter bar — FAQ, feed, and /shipped/. Sticks under the header so the lookup is
   reachable from anywhere in a long page */
.tools {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 26px 0 0;
  padding: 10px 0;
}
.tools input {
  flex: 1 1 320px;
  max-width: 420px;
  padding: 10px 14px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--card-solid);
  box-shadow: var(--shadow-card);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
}
.tools input::placeholder { color: var(--muted); }
.tools input:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.filter-count {
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
}

/* Facet chips — derived from the entries on the page, never authored */
.facets { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; }
.facet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--card-solid);
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.facet:hover { color: var(--navy); border-color: rgba(15, 43, 84, 0.3); }
.facet:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.facet.is-on {
  border-color: var(--tint-border);
  background: var(--chip-bg);
  color: var(--blue-dark);
}
.facet-n { color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 500; }
.facet.is-on .facet-n { color: var(--blue-dark); }

/* Feed rows — release notes and notebook posts in one list */
.feed-row .feed-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
}
.badge {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.badge-release { background: #dcfce7; color: #14532d; }
.badge-notebook { background: #ede9fe; color: #4c1d95; }
.feed-row .foundation { margin: 6px 0 0 !important; }
.row-source { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.row-source a { color: var(--blue-dark); }

/* /shipped/ — one line per feature, grouped by the release that delivered it.
   The date and release title live in the group header; repeating them on every row
   is noise. */
.ship-group { margin: 0; }
.ship-head {
  position: sticky;
  /* base.html measures --anchor-pad as header + filter bar + 12, so this parks the
     group header directly under the filter bar rather than behind it */
  top: calc(var(--anchor-pad) - 12px);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  padding: 10px 0 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ship-head a { color: var(--navy); text-decoration: none; }
.ship-head a:hover { color: var(--blue-dark); text-decoration: underline; }
.ship-date {
  color: var(--blue-dark);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
}
.ship-count {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
}
.ship-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ship-copy { padding: 4px 11px; }
@media print { .ship-copy { display: none !important; } }

.ship-list { list-style: none; margin: 0 0 26px; padding: 0; }
.ship-row {
  display: grid;
  grid-template-columns: minmax(160px, 240px) 1fr auto;
  align-items: baseline;
  gap: 4px 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--wash);
}
.ship-row:last-child { border-bottom: 0; }
.ship-row:target { background: var(--tint); }
.ship-name { color: var(--navy); font-size: 14px; font-weight: 600; }
.ship-what { color: var(--muted); font-size: 13px; line-height: 1.55; }
.ship-link {
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  opacity: 0;
  transition: opacity 150ms var(--ease);
}
/* Generated content so a page-wide text selection does not copy the glyph */
.ship-link::after { content: "#"; }
.ship-row:hover .ship-link,
.ship-link:focus-visible { opacity: 1; }
.ship-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
@media (hover: none) { .ship-link { opacity: 0.4; } }

/* Only reachable when every row is filtered out — no page-specific JS needed */
.ship-empty {
  margin: 24px 0;
  color: var(--muted);
  font-size: 14px;
}
main:has(.ship-row:not([hidden])) .ship-empty,
main:not(:has(.ship-row)) .ship-empty { display: none; }

@media (max-width: 700px) {
  .ship-row { grid-template-columns: 1fr auto; }
  .ship-what { grid-column: 1 / -1; }
}

/* /try/ — prompts you paste into the product, grouped by the screen you're on */
.prompt-group { margin: 0; }
.prompt-head {
  position: sticky;
  top: calc(var(--anchor-pad) - 12px);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  padding: 10px 0 8px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.prompt-src {
  margin-left: auto;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
}
.prompt-src:hover { color: var(--blue-dark); text-decoration: underline; }

.prompt-list { list-style: none; margin: 0 0 26px; padding: 0; }
.prompt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--wash);
}
.prompt:last-child { border-bottom: 0; }
.prompt-text {
  flex: 1 1 auto;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}
.prompt-copy {
  flex: 0 0 auto;
  padding: 5px 13px;
  border: 1px solid var(--tint-border);
  border-radius: 999px;
  background: var(--card-solid);
  color: var(--blue-dark);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}
.prompt-copy:hover { background: var(--chip-bg); }
.prompt-copy:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.prompt-copy.is-copied {
  border-color: transparent;
  background: #dcfce7;
  color: #14532d;
}
@media print { .prompt-copy { display: none !important; } }

/* Shipped on a roadmap card — the note that claimed it, never inferred */
.pill-shipped {
  border: 0 !important;
  background: #dcfce7 !important;
  color: #14532d !important;
  font-weight: 700;
  text-decoration: none;
}
.pill-shipped:hover { background: #bbf7d0 !important; }

/* Table of contents pills */
.toc {
  margin: 20px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--card-border);
  border-radius: 15px;
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.toc strong {
  display: block;
  margin-bottom: 10px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.toc a {
  display: inline-flex;
  padding: 7px 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--card-solid);
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.toc a:hover { border-color: rgba(29, 114, 242, 0.35); }
.toc a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.toc-count {
  margin-left: 7px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
}

/* What's next — links down to each card where it already lives */
.next-row { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-meta { color: var(--muted); font-weight: 500; }

/* Update index rows */
.issue-list { list-style: none; margin: 0; padding: 0; }
.issue-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.issue-list li:last-child { border-bottom: 0; }
/* The row title only — a descendant selector here also hits the ref links and the
   source line, blowing 10px mono chips up to 15px navy headings. */
.issue-list > li > a {
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.issue-list > li > a:hover { color: var(--blue-dark); }
.issue-list .when {
  display: block;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
}

/* Archive rows get a one-line summary */
.issue-list .row-summary {
  margin: 4px 0 0;
  max-width: 68ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* Newer / older / all-updates row at the foot of an archived note */
.note-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}

/* Deep-link handle on each FAQ answer — visible on hover or keyboard focus */
.q > h3 { position: relative; }
.q > h3 .anchor {
  margin-left: 8px;
  color: var(--blue-dark);
  font-weight: 600;
  text-decoration: none;
  opacity: 0;
  transition: opacity 150ms var(--ease);
}
.q:hover > h3 .anchor,
.q > h3 .anchor:focus-visible { opacity: 1; }
.q > h3 .anchor:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
@media (hover: none) {
  .q > h3 .anchor { opacity: 0.45; }
}

/* Back to top */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-card);
  color: var(--blue-dark);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.to-top.is-on { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--chip-bg); color: var(--navy); }
.to-top:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Buttons / links */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--tint-border);
  border-radius: 999px;
  background: var(--card-solid);
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn.btn-primary {
  border-color: transparent;
  background: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
  color: #fff;
}
.btn.btn-primary:hover { color: #fff; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

footer.site-footer {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
}
footer.site-footer a { color: var(--blue-dark); text-decoration: none; }
footer.site-footer a:hover { text-decoration: underline; }

@media (max-width: 800px) {
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Fallback only — base.html measures the real header height at runtime */
  :root { --header-h: 56px; --anchor-pad: 120px; }
  .shell { padding: 24px 14px 60px; }
  .header-inner { padding: 8px 14px; gap: 12px; }
  .brand img { height: 22px; }
  .site-nav {
    justify-content: flex-start;
    gap: 16px;
    font-size: 12px;
  }
  .q, .card { padding: 16px; }
  figure img { max-width: 100%; }
}

@media print {
  body { background: #fff; padding: 0; }
  .shell { width: 100%; padding: 0; }
  .site-header, .toc, .to-top, .note-nav, .tools { display: none !important; }
  .ship-head::before, .prompt-head::before { display: none; }
  .q > h3 .anchor { display: none; }
  .card, .q, figure, .toc { box-shadow: none; }
  .q, figure, .card { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}