/* =====================================================================
   yaoireporter — shared design system
   ---------------------------------------------------------------------
   One stylesheet, every page. The devlog (index.html) and The Lab
   (the-lab.html) both link this file. Change a token here, both pages
   move together. This is the single source of truth for the design.

   Note on "edit once": the stylesheet centralises the LOOK. The
   masthead/footer CONTENT (nav links, wordmark) is centralised in
   build.py — both pages are generated, both stamp the same masthead.

   Sections:
     1. Tokens          design variables — colours, fonts, spacing
     2. Base            resets, body, links
     3. Masthead        corner wordmark, logo, nav
     4. Page head       eyebrow, headline, lede
     5. Metric strip    the small counters
     6. Phase bar       single current-phase progress bar + sentence
     7. Timeline        the build-log entries
     8. Tag system      the six categories + their emoji
     9. Sparkle         the recurring motif
    10. Footer
    11. Motion          page-load stagger
    12. Responsive
   ===================================================================== */


/* ---- 1. TOKENS ------------------------------------------------------ */
:root {
  /* surfaces */
  --bg:         #fff8f3;   /* warm cream page */
  --surface:    #ffffff;   /* card white */
  --surface-2:  #fff1ec;   /* soft coral wash */

  /* ink */
  --ink:        #431407;   /* primary — warm dark brown (the logo outline) */
  --ink-soft:   #6b4636;   /* body / summaries */
  --ink-mute:   #b08968;   /* quiet labels, captions */

  /* coral family — STRUCTURE: headings, the phase bar, hairlines */
  --coral-1:    #fb7185;
  --coral-2:    #f43f5e;
  --coral-3:    #e11d48;

  /* tangerine — STATE: LIVE. the current/new/in-progress signal */
  --tangerine:  #fb923c;

  /* amber — STATE: OLD. archived weeks, settled history */
  --amber-bg:   #fdebd4;
  --amber-ink:  #b45309;

  /* lines + code */
  --line:       #f3ddd0;
  --line-soft:  #fbeee6;
  --code-bg:    #fde8e0;
  --code-ink:   #c2410c;

  /* tag category accents — one per pill, see section 8 */
  --tag-runtime:   #e11d48;
  --tag-narrative: #fb923c;
  --tag-api:       #d6336c;
  --tag-alerts:    #f59e0b;
  --tag-tooling:   #b45309;
  --tag-website:   #fb7185;

  /* type */
  --font-display: 'Aleo', Georgia, serif;            /* headlines, titles, numerals */
  --font-body:    'Manrope', system-ui, sans-serif;  /* prose */
  --font-label:   'Karla', system-ui, sans-serif;    /* labels, pills, dates */
  --font-mono:    'SFMono-Regular', ui-monospace, Consolas, monospace;

  /* layout */
  --measure: 1080px;       /* page max-width */
  --pad:     32px;         /* page side padding */
  --radius:  16px;         /* card radius — rounded, not too round */
}


/* ---- 2. BASE -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  /* soft nebulous flare — tight, on-brand, deliberately quiet so the
     page still reads as calm cream, not a gradient banner */
  background-image:
    radial-gradient(ellipse 55% 42% at 10% -2%, rgba(251,146,60,0.06), transparent 70%),
    radial-gradient(ellipse 48% 38% at 94% 2%, rgba(244,63,94,0.05), transparent 72%);
  background-attachment: fixed;
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.wrap { max-width: var(--measure); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }


/* ---- 3. MASTHEAD ---------------------------------------------------- */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 26px;
  padding-bottom: 26px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-logo {
  width: 34px; height: 34px; flex-shrink: 0;
  object-fit: contain; background: transparent;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wordmark .dim { color: var(--coral-2); }

.nav { display: flex; align-items: center; gap: 3px; }
.nav a {
  position: relative;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding: 6px 4px 8px;
  transition: color 0.15s ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 2px;
  height: 2px;
  background: var(--coral-1);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}
.nav a:hover::after { transform: scaleX(1); }
.nav a:hover { color: var(--coral-3); }
/* current page — a defined soft box: gentle fill + hairline border.
   Present and clearly "you are here", but quiet — between a loud fill
   and an invisible wash. The border is what gives it a noticeable edge. */
.nav a.current {
  color: var(--coral-3);
}
.nav a.current::after {
  transform: scaleX(1);
  animation: nav-underline 0.4s ease forwards;
}
@keyframes nav-underline {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.nav a.current:hover { color: var(--coral-3); }


/* ---- 4. PAGE HEAD --------------------------------------------------- */
.pagehead { padding-top: 30px; padding-bottom: 6px; }
.eyebrow {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral-2);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.pagehead h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-transform: lowercase;
  margin-bottom: 14px;
}
.pagehead h1 em { font-style: italic; color: var(--coral-3); }
.pagehead .lede {
  font-size: 15.5px;
  color: var(--ink-soft);
  max-width: 660px;
}


/* ---- 5. METRIC STRIP ------------------------------------------------ */
/* Deliberately small. A quiet dateline-style readout, not buttons.
   Numbers in Aleo, labels in Karla caps, thin dividers between.
   One metric — Bugs fixed — carries a wink (the bug glyph). */
.metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-top: 20px;
  padding: 12px 4px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.metric {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 16px;
  border-right: 1px solid var(--line);
}
.metric:last-child { border-right: none; }
.metric b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--coral-3);
  line-height: 1;
}
.metric span {
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
/* the one metric with personality — a small in-palette bug (burnt
   amber, the "investigation" tone) that wiggles on hover. Drawn as
   SVG so it sits in the warm palette, not the emoji's lime green. */
.metric-bugs .bug-glyph {
  display: inline-block;
  width: 13px; height: 13px;
  margin-right: 3px;
  vertical-align: -1px;
  color: var(--tag-tooling);
  transition: transform 0.2s ease;
}
.metric-bugs .bug-glyph svg { width: 100%; height: 100%; fill: currentColor; }
.metric-bugs:hover .bug-glyph {
  animation: bug-crawl 0.6s ease;
}
@keyframes bug-crawl {
  0%, 100% { transform: translateX(0) rotate(0); }
  25%      { transform: translateX(2px) rotate(8deg); }
  50%      { transform: translateX(-1px) rotate(-6deg); }
  75%      { transform: translateX(2px) rotate(5deg); }
}


/* ---- 6. PHASE BAR --------------------------------------------------- */
/* Single bar — the current phase only. Links to The Lab.
   Carries a one-line phase description pulled from phases-ext.txt. */
.phase {
  display: block;
  text-decoration: none;
  margin-top: 22px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.phase:hover {
  border-color: var(--coral-1);
  box-shadow: 0 4px 18px rgba(244,63,94,0.08);
}
.phase-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.phase-label {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.phase-pct {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--coral-3);
}
/* the phase description sentence — sits between label and bar */
.phase-sentence {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 11px;
}
.phase-track {
  height: 8px;
  background: var(--code-bg);
  border-radius: 99px;
  overflow: hidden;
}
.phase-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--coral-1), var(--coral-3));
}
.phase-detail {
  margin-top: 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.phase-count {
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.phase-more {
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--coral-3);
  display: flex;
  align-items: center;
  gap: 5px;
}


/* ---- 7. TIMELINE ---------------------------------------------------- */
.section-label {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 22px;
}

.timeline { padding-top: 26px; padding-bottom: 80px; }

.entry {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 36px;
  padding: 34px 0;
  border-top: 1px solid var(--line);
}
.entry:first-of-type { border-top: none; padding-top: 12px; }

/* left rail — marker, title, tags, recap. Each zone separated by space. */
.rail { position: relative; }

.rail-marker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;            /* break: marker -> title */
}
.dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--coral-2);
  border: 2.5px solid var(--bg);
  box-shadow: 0 0 0 2px var(--coral-2);
  flex-shrink: 0;
}
.rail-date {
  font-family: var(--font-label);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rail-week {
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--coral-2);
  background: var(--surface-2);
  border-radius: 99px;
  padding: 2px 9px;
}
.rail h2 {
  font-family: var(--font-display);
  font-weight: 500;                /* the skinnier Aleo cut */
  font-size: 22px;
  text-transform: lowercase;
  line-height: 1.24;
  letter-spacing: -0.01em;
  margin-bottom: 16px;            /* break: title -> tags */
}

.recap {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);          /* muted, not a rose-deep shout */
  line-height: 1.75;
  padding-top: 4px;
}

/* right card — summary + bullet breakdown */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 22px rgba(244, 63, 94, 0.06);
  overflow: hidden;
}
.card-summary {
  padding: 20px 22px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft);
}
.breakdown { padding: 4px 0; }
.item {
  display: flex;
  gap: 13px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line-soft);
  align-items: flex-start;
}
.item:last-child { border-bottom: none; }
.item-emoji {
  font-size: 17px;
  line-height: 1.55;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
.item-text {
  font-size: 13.5px;
  line-height: 1.66;
  color: var(--ink-soft);
}
.item-text strong { color: var(--ink); font-weight: 600; }
.item-text code {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--code-bg);
  color: var(--code-ink);
  padding: 1.5px 6px;
  border-radius: 5px;
}

/* collapsed (older) weeks — a one-line summary that expands */
.entry.collapsed .card { display: none; }
.entry.collapsed .rail h2 { margin-bottom: 12px; }
.entry-toggle {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--coral-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.entry-toggle:hover { color: var(--coral-2); }
.entry.expanded .card { display: block; }


/* ---- 8. TAG SYSTEM -------------------------------------------------- */
/* Six categories. Each owns a colour AND an emoji. A bullet's emoji
   declares its category; the pills summarise which categories a week
   touched. Emoji = category, never decoration. The set:
       Runtime           rose-deep    wrench
       Narrative Systems tangerine    masks
       API               magenta      satellite
       Alerts            amber        bell
       Tooling           burnt-amber  telescope (the magnifying glass)
       Website           coral        sparkle
   Bugs (bug emoji) are cross-cutting — a state, not a category. */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tag {
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.tag::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
  background: var(--dotc, var(--coral-2));
}
.tag.t-runtime   { --dotc: var(--tag-runtime); }
.tag.t-narrative { --dotc: var(--tag-narrative); }
.tag.t-api       { --dotc: var(--tag-api); }
.tag.t-alerts    { --dotc: var(--tag-alerts); }
.tag.t-tooling   { --dotc: var(--tag-tooling); }
.tag.t-website   { --dotc: var(--tag-website); }


/* ---- 9. SPARKLE ----------------------------------------------------- */
/* The recurring motif — echoes the logo's sparkles. Appears in exactly
   four roles and nowhere else: section/eyebrow labels, the live/current
   marker, the shipped status (on The Lab), and a hover reward on cards.
   A sparkle marks a moment — it never just fills space. */
.spark {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.12em;
  fill: currentColor;
  flex-shrink: 0;
}
.section-label .spark,
.eyebrow .spark { color: var(--tangerine); }

/* role: the live/current-week marker — a sparkle instead of a dot */
.dot-live {
  width: 15px; height: 15px;
  color: var(--tangerine);
  flex-shrink: 0;
}
.dot-live .spark { width: 100%; height: 100%; vertical-align: 0; }

/* role: hover reward — a sparkle fades in at the card's corner */
.card-spark {
  position: absolute;
  top: 12px; right: 14px;
  width: 14px; height: 14px;
  color: var(--tangerine);
  opacity: 0;
  transform: scale(0.6) rotate(-20deg);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}
.entry:hover .card-spark {
  opacity: 0.9;
  transform: scale(1) rotate(0deg);
}


/* ---- 10. FOOTER ----------------------------------------------------- */
.foot {
  border-top: 1px solid var(--line);
  padding-top: 26px;
  padding-bottom: 46px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
}
.foot span {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
}
/* small text reads uppercase — lowercase is reserved for big headlines */
.foot-caps span {
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.foot a { color: var(--coral-3); text-decoration: none; }
.foot a:hover { text-decoration: underline; }


/* ---- 11. MOTION ----------------------------------------------------- */
/* One orchestrated page-load: entries rise in a gentle stagger. */
@media (prefers-reduced-motion: no-preference) {
  .entry {
    opacity: 0;
    transform: translateY(14px);
    animation: rise 0.5s ease forwards;
  }
  .entry:nth-of-type(1) { animation-delay: 0.05s; }
  .entry:nth-of-type(2) { animation-delay: 0.11s; }
  .entry:nth-of-type(3) { animation-delay: 0.17s; }
  .entry:nth-of-type(4) { animation-delay: 0.23s; }
  .entry:nth-of-type(5) { animation-delay: 0.29s; }
  .entry:nth-of-type(6) { animation-delay: 0.35s; }
  @keyframes rise { to { opacity: 1; transform: translateY(0); } }
}


/* ---- 12. RESPONSIVE ------------------------------------------------- */
@media (max-width: 760px) {
  :root { --pad: 20px; }
  .entry { grid-template-columns: 1fr; gap: 16px; }
  .metric { padding: 2px 12px; }
  .metric:first-child { padding-left: 4px; }
}


/* ---- 13. THE LAB ---------------------------------------------------- */
/* The features page (the-lab.html). All new, all additive — no selector
   above is touched. Uses only existing tokens. Two component families:
   the five-phase overview row, and the phase sections of feature boxes. */

/* The Lab's page head needs no bottom metric strip — a touch more air. */
.pagehead-lab { padding-bottom: 4px; }

/* --- 13a. the five-phase overview row --- */
/* Five boxes, one per phase. A soft tangerine fill rises with progress —
   nebulous and low-opacity, in keeping with the page's quiet flares.
   Inside each box: eyebrow pinned to the top, name centred in the
   leftover space, progress count pinned to the bottom. */
.lab-overview { padding-top: 22px; }
.lab-ov-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.lab-ov-box {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 128px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
              transform 0.15s ease;
}
.lab-ov-box:hover {
  border-color: var(--coral-1);
  box-shadow: 0 4px 18px rgba(244, 63, 94, 0.08);
  transform: translateY(-2px);
}
.lab-ov-current {
  border-color: var(--tangerine);
  border-width: 1.5px;
}
.lab-ov-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(251, 146, 60, 0.07), rgba(251, 146, 60, 0.05));
  pointer-events: none;
}
.lab-ov-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top,
              rgba(251, 146, 60, 0.32) 0%,
              rgba(251, 146, 60, 0.15) 45%,
              rgba(251, 146, 60, 0.04) 80%,
              rgba(251, 146, 60, 0) 100%);
  pointer-events: none;
}
.lab-ov-text {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 13px;
}
.lab-ov-eyebrow {
  font-family: var(--font-label);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.lab-ov-current .lab-ov-eyebrow { color: var(--amber-ink); }
.lab-ov-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.22;
  text-transform: lowercase;
  color: var(--ink);
  margin: auto 0;
}
.lab-ov-count {
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* --- 13b. the phase sections --- */
.lab { padding-top: 30px; padding-bottom: 80px; }
.lab-phase {
  border-top: 1px solid var(--line);
  padding: 28px 0;
}
.lab-phase:first-of-type { border-top: none; padding-top: 16px; }
.lab-phase-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.lab-phase-heading {
  display: flex;
  align-items: baseline;
  gap: 11px;
  flex-wrap: wrap;
}
.lab-phase-eyebrow {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-ink);
}
.lab-phase-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 23px;
  text-transform: lowercase;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lab-phase-count {
  margin-left: auto;
  font-family: var(--font-label);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.lab-phase-desc {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 10px 0 18px;
}
details.lab-phase > summary {
  cursor: pointer;
  list-style: none;
}
details.lab-phase > summary::-webkit-details-marker { display: none; }
details.lab-phase > summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid var(--ink-mute);
  border-bottom: 2px solid var(--ink-mute);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
details.lab-phase[open] > summary::after { transform: rotate(-135deg); }
details.lab-phase > summary:hover .lab-phase-name { color: var(--coral-3); }
.lab-phase-body { padding-top: 4px; }

/* --- 13c. the feature boxes --- */
/* A status rail down the left edge, a status-matched wash that sweeps in
   on hover, a 3px lift, and a corner sparkle. The three statuses each own
   a colour throughout: coral = shipped, tangerine = in-progress,
   muted-brown = soon. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.feature-box {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease,
              box-shadow 0.18s ease;
}
.feature-box:hover { transform: translateY(-3px); }
.feature-rail {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  z-index: 1;
}
.feature-wash {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 0;
  pointer-events: none;
}
.feature-box:hover .feature-wash { opacity: 1; }
.feature-corner-spark {
  position: absolute;
  top: 11px; right: 13px;
  width: 13px; height: 13px;
  color: var(--tangerine);
  opacity: 0;
  transform: scale(0.6) rotate(-20deg);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
  z-index: 2;
}
.feature-corner-spark .spark { width: 100%; height: 100%; vertical-align: 0; }
.feature-box:hover .feature-corner-spark {
  opacity: 0.9;
  transform: scale(1) rotate(0deg);
}
.feature-pill {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-label);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
}
.feature-pill .spark { width: 10px; height: 10px; }
.feature-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.32;
  color: var(--ink);
}
.status-shipped .feature-rail { background: var(--coral-2); }
.status-shipped .feature-wash {
  background: linear-gradient(90deg,
              rgba(244, 63, 94, 0.09), transparent 72%);
}
.status-shipped:hover {
  border-color: var(--coral-1);
  box-shadow: 0 6px 18px rgba(244, 63, 94, 0.10);
}
.status-shipped .feature-pill {
  background: var(--surface-2);
  color: var(--coral-3);
}
.status-shipped .feature-pill .spark { color: var(--tangerine); }
.status-progress .feature-rail { background: var(--tangerine); }
.status-progress .feature-wash {
  background: linear-gradient(90deg,
              rgba(251, 146, 60, 0.11), transparent 72%);
}
.status-progress:hover {
  border-color: var(--tangerine);
  box-shadow: 0 6px 18px rgba(251, 146, 60, 0.13);
}
.status-progress .feature-pill {
  background: var(--amber-bg);
  color: var(--amber-ink);
}
.status-soon .feature-rail { background: #dcc5b5; }
.status-soon .feature-wash {
  background: linear-gradient(90deg,
              rgba(176, 137, 104, 0.08), transparent 72%);
}
.status-soon:hover {
  border-color: #dcc5b5;
  box-shadow: 0 6px 16px rgba(176, 137, 104, 0.10);
}
.status-soon .feature-pill {
  background: var(--line-soft);
  color: var(--ink-mute);
}

/* --- 13d. responsive --- */
@media (max-width: 760px) {
  .lab-ov-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .lab-ov-grid { grid-template-columns: 1fr; }
}