/* Pulpa Madre OS design system. README "Theme" documents the tokens.
 * Primitives (--pm-*) are the only hex values. Components use semantic tokens only.
 * Composition: charcoal nav → white canvas with bordered white work surfaces → orange primary actions.
 * Contrast notes: charcoal on Orange 6.2:1, white on Sky/Orange ~2.9:1 (never used for text).
 * Owner's call: the Home status title is Zest text on white (1.5:1) and its kicker Sky text (2.9:1); both are below
 * WCAG AA and are brand accents only, never used for other text. */

@font-face {
  font-family: "Pulpa Madre Script";
  /* ?v= is the first 8 characters of the woff2's md5. Change it whenever the font files change, or browsers keep
     showing the old glyphs (fonts are cached aggressively, and the file name never changes). */
  src: url("/fonts/PulpaMadreScript-Regular.woff2?v=d303ec18") format("woff2"),
       url("/fonts/PulpaMadreScript-Regular.woff?v=d303ec18") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Primitives: brand palette */
  --pm-charcoal: #111820;
  --pm-white: #FFFFFF;
  --pm-sky: #00A3E0;
  --pm-orange: #FF6900;
  --pm-zest: #CCDF13;
  --pm-crema: #FAF3E0;
  --pm-lilac: #B19AD6;
  --pm-pink: #FFA3B5;
  --pm-hibiscus: #C41230;
  --pm-gold: #FFB81C;
  --pm-lime: #97D700;

  /* Shell and surfaces */
  --app-bg: var(--pm-white);
  --surface-primary: var(--pm-white);
  --surface-secondary: var(--pm-crema);   /* editorial moments, code, table heads */
  --surface-neutral: color-mix(in srgb, var(--pm-charcoal) 5%, var(--pm-white));   /* plain UI gray: tool chrome that must not read as a brand color (Brand page) */
  --surface-dark: var(--pm-charcoal);     /* nav, tooltips, selected tab */

  /* Text */
  --text-primary: var(--pm-charcoal);
  --text-muted: color-mix(in srgb, var(--pm-charcoal) 62%, transparent);  /* white/crema only: 5.0 / 4.8:1 */
  --text-inverse: var(--pm-white);
  --text-on-canvas: var(--pm-charcoal);

  /* Actions and UI accents */
  --action-primary: var(--pm-orange);
  --action-primary-text: var(--pm-white);   /* manual: white text on Fruit Energy (2.9:1) */
  --action-primary-hover: color-mix(in srgb, var(--pm-orange) 86%, var(--pm-charcoal));
  --ui-accent: var(--pm-sky);             /* link underlines, markers, focus halo, active nav on charcoal, kicker */

  /* Status */
  --status-live: var(--pm-zest);
  --status-success: var(--pm-lime);
  --status-warning: var(--pm-gold);
  --status-danger: var(--pm-hibiscus);

  /* Lines and states */
  --border: color-mix(in srgb, var(--pm-charcoal) 14%, transparent);
  --border-strong: color-mix(in srgb, var(--pm-charcoal) 42%, transparent);
  --border-card: color-mix(in srgb, var(--pm-sky) 45%, transparent);   /* card outlines */
  --hover: color-mix(in srgb, var(--pm-sky) 10%, transparent);
  --focus: var(--pm-charcoal);
  --focus-halo: color-mix(in srgb, var(--pm-sky) 45%, transparent);

  /* Actor identity (dots only). AI colors are hashed from the agent name, see accent() in src/views.ts. */
  --actor-global: var(--pm-sky);
  --actor-human: var(--pm-orange);
  --actor-system: color-mix(in srgb, var(--pm-charcoal) 30%, var(--pm-white));
  --actor-lilac: var(--pm-lilac);
  --actor-pink: var(--pm-pink);
  --actor-zest: var(--pm-zest);
  --actor-gold: var(--pm-gold);
  --actor-lime: var(--pm-lime);

  /* Typography */
  --font-display: "Syne", "DM Sans", system-ui, sans-serif;
  --font-ui: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Pulpa Madre Script", cursive;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg: 1.125rem;    /* 18 */
  --heading-sm: 1.375rem; /* 22 */
  --heading-md: 1.875rem; /* 30 */
  --heading-lg: 2.625rem; /* 42 */
  --heading-hero: 3.5rem; /* 56 */
  --display-tracking: -0.02em;            /* manual: Syne ExtraBold, tracking −15 to −25 (−0.015 to −0.025em) */
  --display-leading: 0.9;                 /* manual: leading 0.8–0.9× */
  --heading-color: var(--pm-zest);        /* owner's call: all headings Zest, uppercase (1.5:1 on white) */

  /* Shape and space */
  --radius-sm: 6px;
  --radius: 14px;
  --radius-pill: 99px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --gutter: var(--space-5);
  --page-max: 1140px;                    /* the whole app's max width, gutters included; bars keep full-bleed backgrounds but align their contents to it */
  --shadow-pop: 0 6px 18px color-mix(in srgb, var(--pm-charcoal) 22%, transparent);
  --surface-hero: var(--pm-sky);          /* Home hero band; everything on it is white */
  --text-on-hero: var(--pm-white);
  --surface-band: var(--pm-zest);         /* Home checklist band: solid Zest & Life; charcoal on it is 12:1 */
  --header-height: 116px;               /* unscrolled header; the Home hero fills the rest of the screen */
  color-scheme: light;
}

.a-global { --actor: var(--actor-global); }
.a-human { --actor: var(--actor-human); }
.a-system { --actor: var(--actor-system); }
.a-lilac { --actor: var(--actor-lilac); }
.a-pink { --actor: var(--actor-pink); }
.a-zest { --actor: var(--actor-zest); }
.a-gold { --actor: var(--actor-gold); }
.a-lime { --actor: var(--actor-lime); }

/* Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--app-bg); color: var(--text-on-canvas);
  font: 400 var(--text-base)/1.5 var(--font-ui);
}
main { max-width: var(--page-max); margin: 0 auto; padding: var(--space-6) var(--gutter) 48px; }

h1, h2, h3, .display, details.acc > summary {
  font-family: var(--font-display); font-weight: 800; letter-spacing: var(--display-tracking); line-height: var(--display-leading);
  text-transform: uppercase; color: var(--heading-color);
}
h1 { font-size: var(--heading-lg); margin: 0 0 var(--space-3); }
h2 { font-size: var(--heading-sm); margin: 0 0 var(--space-3); }
h1 .meta, h2 .meta, h3 .meta { font: 400 var(--text-sm)/1.4 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--text-muted); margin-left: var(--space-1); }
summary .dot { margin-left: var(--space-1); }
h3 { font-size: var(--text-lg); margin: var(--space-5) 0 var(--space-2); }
h3 a { text-decoration-color: currentColor; }
.wordmark { text-transform: none; color: var(--text-primary); }
main > p, main > .meta, main > .muted { color: var(--text-on-canvas); }

a {
  color: inherit; text-decoration: underline; text-decoration-color: var(--ui-accent);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--text-primary); }
main > p a, main > .meta a { text-decoration-color: var(--text-on-canvas); }
ul.entries a, .hero a, .tab, .button, .top a { text-decoration: none; }
ul.entries a { font-weight: 500; }
ul.entries a:hover { text-decoration: underline; text-decoration-color: var(--ui-accent); }
code {
  background: var(--surface-secondary); border: 1px solid var(--border); padding: 1px 6px; border-radius: var(--radius-sm);
  word-break: break-all; font-family: var(--font-mono); font-size: 0.9em;
}
::selection { background: color-mix(in srgb, var(--pm-sky) 35%, transparent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Header (same behavior as the TK Hibachi header): sticky charcoal bar, a 3-zone grid with the logo dead center.
   It is 116px tall with a 92px logo; past 8px of scroll, app.js adds .scrolled and it eases to 90px with a 66px logo.
   On phones it is 94px with a 44px centered logo, easing to 84px / 38px. Menu sits left; Settings and Log out right. */
.top {
  position: sticky; top: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4);
  height: var(--header-height); padding: 0 max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
  background: var(--surface-dark); color: var(--text-inverse);
  box-shadow: 0 1px 0 transparent;
  transition: height 0.4s ease, box-shadow 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}
.top.scrolled { height: calc(var(--header-height) - 26px); box-shadow: 0 6px 18px rgb(0 0 0 / 0.18); }
/* Over a hero (Home): transparent at the top, translucent blurred charcoal once scrolled. Other pages stay solid. */
.top--over { background: transparent; }
.top--over.scrolled {
  background: color-mix(in srgb, var(--pm-charcoal) 72%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.top :focus-visible { outline-color: var(--text-inverse); }
.top-left, .top-right { display: flex; align-items: center; gap: var(--space-2); }
.top-right { justify-content: flex-end; }
.top-right form { margin: 0; }
.top .brand { position: relative; display: inline-flex; align-items: center; color: var(--text-inverse); }
.top .os { position: absolute; left: 107%; top: 50%; translate: 0 -50%; font-size: var(--text-sm); padding: 5px 8px; }  /* Match the wordmark’s ~7% inter-word gap, including as it shrinks on scroll. */
.logo { display: block; height: 92px; width: auto; transition: height 0.4s ease; }
.top.scrolled .logo { height: 66px; }
.logo .mark { fill: currentColor; }   /* header + menu: the whole logo is white (lettering and fruit take currentColor) */
.top .header-logo-mobile { display: none; }
.top .header-logo { width: clamp(180px, 28vw, 300px); height: auto; transition: width 0.4s ease; }
.top.scrolled .header-logo { width: clamp(180px, 25vw, 260px); height: auto; }
.os {
  font: 800 var(--text-xs)/1 var(--font-display); letter-spacing: 0.02em; padding: 4px 6px; border-radius: var(--radius-sm);
  background: var(--status-live); color: var(--text-primary);
}
.icon { display: block; width: 22px; height: 22px; flex: none; }
.icon-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-pill);
  background: none; color: color-mix(in srgb, var(--pm-white) 78%, transparent); cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}
.icon-btn:hover { color: var(--text-inverse); background: color-mix(in srgb, var(--pm-white) 10%, transparent); }
.icon-btn[aria-current="page"] { color: var(--ui-accent); background: color-mix(in srgb, var(--pm-sky) 16%, transparent); }
/* Hamburger (TK Hibachi): three white lines at 100 / 70 / 40% that all run full width on hover, plus a "Menu" label. */
.hamburger {
  display: flex; align-items: center; gap: 13px; min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--text-inverse); cursor: pointer;
}
.hamburger:hover { background: none; }
.hamburger-lines { position: relative; flex: none; width: 32px; height: 17px; }
.hamburger-lines span {
  position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hamburger-lines span:nth-child(1) { top: 2px; }
.hamburger-lines span:nth-child(2) { top: 7.5px; width: 70%; }
.hamburger-lines span:nth-child(3) { top: 13px; width: 40%; }
.hamburger:hover .hamburger-lines span { width: 100%; }
.hamburger-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }  /* same as .kicker */
/* Scrolled (TK turns these brand red): hamburger lines and header icons go Zest & Life. */
.top.scrolled .hamburger-lines span { background: var(--pm-zest); }
.top.scrolled .icon-btn:not([aria-current="page"]) { color: var(--pm-zest); }

/* Menu overlay (TK Hibachi): full screen, a circle wipe out of the hamburger, numbered Syne links left, the logo right.
   Its contents sit in the --page-max column like the header. app.js sets --burger-x/-y (the hamburger's top-left) and
   --burger-cx/-cy (its center) on open, so Close lands exactly on the hamburger and the wipe grows from it. */
.menu {
  position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: 1.2fr 0.8fr;
  padding-inline: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
  background: radial-gradient(1200px 900px at 12% 8%, color-mix(in srgb, var(--pm-sky) 28%, var(--pm-charcoal)), var(--pm-charcoal) 70%);
  color: var(--text-inverse);
  clip-path: circle(0% at var(--burger-cx, 56px) var(--burger-cy, 58px)); visibility: hidden;
  transition: clip-path 0.8s cubic-bezier(0.65, 0.05, 0.36, 1), visibility 0s linear 0.8s;
}
.menu.open { clip-path: circle(150% at var(--burger-cx, 56px) var(--burger-cy, 58px)); visibility: visible; transition: clip-path 0.8s cubic-bezier(0.65, 0.05, 0.36, 1), visibility 0s; }
.menu :focus-visible { outline-color: var(--text-inverse); }
.menu-close {
  position: absolute; top: var(--burger-y, 36px); left: var(--burger-x, var(--gutter)); z-index: 2;
  display: flex; align-items: center; gap: 13px; min-height: 44px; padding: 0;  /* same box as .hamburger */
  border: 0; background: none; color: var(--text-inverse); cursor: pointer;
}
.menu-close:hover { background: none; color: var(--status-live); }
.menu-close-x { position: relative; flex: none; width: 32px; height: 17px; }  /* the hamburger lines' box, so the labels line up */
.menu-close-x::before, .menu-close-x::after {
  content: ""; position: absolute; top: calc(50% - 1px); left: 4px; width: 24px; height: 2px; background: var(--status-live);
}
.menu-close-x::before { transform: rotate(45deg); }
.menu-close-x::after { transform: rotate(-45deg); }
.menu-main { align-self: center; padding: 120px var(--space-6) 80px 0; }
.menu-list { display: flex; flex-direction: column; gap: 0.2rem; list-style: none; margin: 0; padding: 0; }
.menu-list a {
  display: inline-flex; align-items: baseline; width: max-content; max-width: 100%;
  font: 800 clamp(1.5rem, 7vw, 3.6rem)/1 var(--font-display); letter-spacing: var(--display-tracking); text-transform: uppercase; color: var(--text-inverse); text-decoration: none;
  opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease, color 0.3s ease;
}
.menu.open .menu-list a { opacity: 1; transform: none; transition-delay: calc(0.15s + var(--i, 0) * 0.07s); }
.menu.open .menu-list a:hover { color: var(--status-live); transform: translateX(14px); transition-delay: 0s; }
.menu-list a[aria-current="page"] { color: var(--status-live); }
.menu-num {
  font: 700 0.7rem/1 var(--font-ui); letter-spacing: 0.2em; color: var(--status-live); opacity: 0.8;
  vertical-align: super; margin-right: 0.6em;
}
.menu-aside {
  display: grid; place-items: center;
  padding: clamp(60px, 10vh, 120px) 0 clamp(60px, 10vh, 120px) clamp(30px, 5vw, 64px); border-left: 1px solid color-mix(in srgb, var(--pm-white) 12%, transparent);
}
.menu-aside .logo {
  width: 100%; max-width: 440px; height: auto;
  opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease;  /* same rise as the links */
}
.menu.open .menu-aside .logo { opacity: 1; transform: none; transition-delay: 0.3s; }  /* lands with the last links */
@media (max-width: 860px) {
  .menu { grid-template-columns: 1fr; align-content: center; }
  .menu-main { padding: 120px 0 40px; }
  .menu-aside { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--pm-white) 12%, transparent); padding: 40px 0; }
  .menu-aside .logo { max-width: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu, .menu.open, .menu-list a, .menu-aside .logo { transition: none; }
}

/* Work surfaces: white cards on the white canvas, framed by a hairline border. */
section, details.acc, form.surface, .surface, main > ul.entries, .tabs, .filters {
  background: var(--surface-primary); color: var(--text-primary); border: 1px solid var(--border-card); border-radius: var(--radius);
}
section { padding: var(--space-5); margin-bottom: var(--gutter); }
.surface, form.surface { padding: var(--space-5); margin-bottom: var(--gutter); }
main > ul.entries { padding: var(--space-2) var(--space-5); }

/* Home hero: a full-bleed Sky band, 100svh, that runs up behind the transparent header. Business status + AI status,
   centered, everything white on it (owner's call: white on Sky is 2.9:1). Agent marks keep their color except
   charcoal ones, which turn white. A chevron at the bottom jumps to the board below. */
.hero {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 56px;
  min-height: 100svh; margin-top: calc(-1 * var(--header-height));
  padding: calc(var(--header-height) + var(--space-6)) max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter))) 88px; text-align: center;  /* sides match the header */
  background: var(--surface-hero); color: var(--text-on-hero);
}
.hero :focus-visible { outline-color: var(--text-on-hero); }
.kicker { display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--space-3); }
.hero h1 { font-size: clamp(2.5rem, 8vw, 5.5rem); margin: 0 0 var(--space-4); color: var(--text-on-hero); }
.hero-body { max-width: 60ch; margin: 0 auto; font-size: var(--text-lg); font-weight: 500; }
.agent-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }
.agent-tile {
  position: relative; display: flex; align-items: center; gap: var(--space-3); min-width: 220px; padding: 14px 18px 14px 16px; text-align: left;
  border: 1.5px solid var(--text-on-hero); border-radius: var(--radius); color: var(--text-on-hero);
}
.agent-tile:hover { background: color-mix(in srgb, var(--pm-white) 14%, transparent); z-index: 5; }
.agent-tile strong { font-weight: 700; }
.agent-logo { display: block; flex: none; width: 32px; height: 32px; color: var(--text-on-hero); }
.agent-logo--none {
  display: grid; place-items: center; border-radius: 50%; background: var(--actor); color: var(--text-primary);
  font: 800 var(--text-base)/1 var(--font-display);
}
/* Status dot, pushed to the right edge: filled Zest & Life = connected, hollow Zest & Life ring = not connected. */
.status-dot { flex: none; width: 12px; height: 12px; margin-left: auto; border-radius: 50%; }
.status-dot.on { background: var(--pm-zest); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-zest) 35%, transparent); }
.status-dot.off { border: 2.5px solid var(--status-live); }
/* Connected / last seen / last write: a tooltip bubble after a short hover (or keyboard focus). */
.agent-tile .meta {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 10; width: max-content; max-width: min(320px, 80vw);
  background: var(--surface-dark); color: var(--text-inverse); border-radius: var(--radius-sm); padding: 6px 10px;
  box-shadow: var(--shadow-pop); font-size: var(--text-xs); line-height: 1.45; text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(-2px); pointer-events: none;
  transition: opacity 0.15s, transform 0.15s, visibility 0s linear 0.15s;
}
.agent-tile .meta::before {
  content: ""; position: absolute; top: -4px; left: 16px; width: 8px; height: 8px; background: var(--surface-dark); transform: rotate(45deg);
}
.agent-tile:hover .meta, .agent-tile:focus-visible .meta {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.15s 0.4s, transform 0.15s 0.4s, visibility 0s 0.4s;
}
.hero-cue {
  position: absolute; bottom: var(--space-4); left: 50%; translate: -50% 0;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--text-on-hero);
  animation: cue 2s ease-in-out infinite;
}
.hero-cue .icon { width: 28px; height: 28px; }
@keyframes cue { 50% { transform: translateY(6px); } }
/* Home bands below the hero: Sky hero (white on Sky) → Zest & Life checklist band → white board.
   On the light bands, section titles are charcoal Syne (readable) with a muted kicker; brand color goes into
   the marks that carry meaning. On the Zest & Life band everything is charcoal (ticks, progress, Add); Sky on the board. */
.band { padding: 72px var(--gutter); }
.band-inner { max-width: calc(var(--page-max) - 2 * var(--gutter)); margin: 0 auto; }  /* same content width as <main> */
.band--checklist { background: var(--surface-band); color: var(--text-primary); scroll-margin-top: calc(var(--header-height) - 26px); }
.band-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-4); }
.band-head .kicker { color: var(--text-muted); margin-bottom: var(--space-2); }
.band-head h2 { font-size: var(--heading-lg); color: var(--text-primary); margin: 0; }
.band-head--board { margin: var(--space-4) 0 var(--space-5); }
.progress-label { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.progress-label strong { color: var(--text-primary); }
.progress { height: 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--pm-charcoal) 14%, transparent); overflow: hidden; margin-bottom: var(--space-5); }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--text-primary); transition: width 0.4s ease; }
.checklist { list-style: none; margin: 0 0 var(--space-5); padding: 0; columns: 2 320px; column-gap: var(--space-6); }
.task {
  break-inside: avoid; display: flex; align-items: center; gap: var(--space-3); padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--pm-charcoal) 10%, transparent);
}
.task-toggle { margin: 0; display: contents; }
.task-toggle button {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 8px;
  background: var(--surface-primary); border: 2px solid var(--text-primary); color: transparent; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.task-toggle button:hover { background: var(--surface-primary); border-color: var(--text-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-charcoal) 18%, transparent); }
.task-toggle button .icon { width: 16px; height: 16px; stroke-width: 3; }
.task.done .task-toggle button { background: var(--text-primary); border-color: var(--text-primary); color: var(--pm-zest); }
.task-title { flex: 1; font-weight: 500; }
.task.done .task-title { color: color-mix(in srgb, var(--pm-charcoal) 65%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--pm-charcoal) 40%, transparent); }
.task-area {
  flex: none; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
  padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-primary); border: 1px solid var(--border);
}
/* Add: one centered pill; opening it reveals the form (title, area dropdown, custom area for "Other…"). */
.task-add-wrap { text-align: center; }
.task-add-open {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--text-primary); color: var(--text-inverse); font-weight: 700; list-style: none;
  transition: background 0.2s ease;
}
.task-add-open::-webkit-details-marker { display: none; }
.task-add-open:hover { background: color-mix(in srgb, var(--pm-charcoal) 85%, var(--pm-white)); }
.task-add-open .icon { width: 18px; height: 18px; color: var(--pm-zest); }
.task-add-wrap[open] .task-add-open { display: none; }
.task-add { display: flex; flex-wrap: wrap; gap: var(--space-2); text-align: left; }
.task-add select { flex: 0 1 180px; border-color: transparent; }
.task-add input[name=area_other] { flex: 0 1 180px; }
.task-add input[hidden] { display: none; }
.task-add .task-add-cancel { background: transparent; color: var(--text-primary); border-color: var(--text-primary); }
.task-add .task-add-cancel:hover { background: color-mix(in srgb, var(--pm-charcoal) 10%, transparent); border-color: var(--text-primary); }
.task-add input { border-color: transparent; }
.task-add button:not(.task-add-cancel) { background: var(--text-primary); border-color: var(--text-primary); color: var(--text-inverse); }
.task-add button:hover { background: color-mix(in srgb, var(--pm-charcoal) 85%, var(--pm-white)); border-color: transparent; }
.task-add input[name=title] { flex: 1 1 280px; }
/* Board cards: charcoal titles on white; the Sky +/− and outline stay the accent. */
.home-card > summary h2 { color: var(--text-primary); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .hero-cue { animation: none; } }

ul.entries { list-style: none; margin: 0; padding: 0; }
ul.entries li { padding: 10px 0; border-bottom: 1px solid var(--border); }
ul.entries li:last-child { border-bottom: 0; }
.body, .snippet { white-space: pre-wrap; color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }
.meta { color: var(--text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.muted { color: var(--text-muted); }
.small { font-size: var(--text-sm); }
.who { white-space: nowrap; }
.who .agent-logo { display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; color: var(--author-logo, #000); }
.who--claude .agent-logo { color: var(--author-logo, #D97757); }
/* Dark surfaces set the inherited override; light author labels use their brand color. */
.top, .menu, [data-backdrop="dark"], [data-theme="dark"] { --author-logo: #fff; }

/* Badges: quiet by default; color only where it carries meaning */
.badge {
  display: inline-block; font-size: var(--text-xs); font-weight: 500; line-height: 1.5; padding: 0 7px; margin-left: var(--space-1);
  border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--text-muted); vertical-align: middle;
}
.s-open { background: var(--status-warning); border-color: var(--status-warning); color: var(--text-primary); }
.s-archived, .s-superseded { text-decoration: line-through; }
.badge.blocker { background: var(--status-danger); border-color: var(--status-danger); color: var(--text-inverse); font-weight: 700; }
.badge.week { background: var(--status-live); border-color: var(--status-live); color: var(--text-primary); }

/* Forms (always on a white surface) */
input, select, textarea, button, .button {
  font: inherit; font-size: var(--text-base); color: var(--text-primary); background: var(--surface-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 9px 12px;
}
textarea { width: 100%; resize: vertical; font-family: var(--font-mono); font-size: var(--text-sm); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 0; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-halo);
}
input[type=checkbox] { accent-color: var(--pm-charcoal); width: 18px; height: 18px; }
button, .button {
  background: var(--action-primary); color: var(--action-primary-text); border-color: var(--action-primary);
  font-weight: 700; cursor: pointer; display: inline-block;
}
button:hover, .button:hover { background: var(--action-primary-hover); border-color: var(--action-primary-hover); }
button.secondary, .button.secondary { background: var(--surface-primary); color: var(--text-primary); border-color: var(--border-strong); }
button.secondary:hover, .button.secondary:hover { background: var(--hover); border-color: var(--text-primary); }
button.danger { background: var(--surface-primary); color: var(--status-danger); border-color: var(--status-danger); }
button.danger:hover { background: var(--status-danger); color: var(--text-inverse); }
button.small { padding: 3px 10px; font-size: var(--text-sm); }
button.link { background: none; border: 0; padding: 6px 0; font-weight: 400; }
button.link:hover { background: none; text-decoration: underline; }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack label { display: flex; flex-direction: column; gap: var(--space-1); font-weight: 500; font-size: var(--text-sm); }
label small { color: var(--text-muted); font-weight: 400; font-size: var(--text-xs); }
.row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }
.row label { display: flex; flex-direction: column; gap: var(--space-1); }
label.check { flex-direction: row; align-items: center; gap: var(--space-2); padding-bottom: 10px; }
.narrow { max-width: 440px; }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); margin-bottom: var(--gutter); }
.filters input[type=search] { flex: 1 1 240px; }
.inline { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.inline input { flex: 1 1 200px; }
.actions { display: flex; gap: var(--space-4); align-items: center; }

/* Login / consent: a single card with the one big script moment */
section.narrow { margin: 12vh auto 0; padding: var(--space-6); }
.wordmark { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-5); line-height: 1; }
.wordmark .script { font: 400 var(--heading-hero)/1 var(--font-brand); letter-spacing: 0; }

/* Messages: white card, colored edge; text stays charcoal except errors (Hibiscus passes on white, 6:1) */
.error, .notice, .hint {
  background: var(--surface-primary); color: var(--text-primary); border-left: 5px solid var(--ui-accent);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); margin: 0 0 var(--space-4);
}
.error { color: var(--status-danger); border-left-color: var(--status-danger); font-weight: 500; }
.notice { border-left-color: var(--status-success); }
.hint { border-left-color: var(--status-warning); }
.secret { background: var(--surface-secondary); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.secret code { display: block; margin: 6px 0 10px; padding: var(--space-2); background: var(--surface-primary); }

table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--space-2) 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { background: var(--surface-secondary); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
td form { margin: 0; }
section table { display: block; overflow-x: auto; }

/* Actor dot: identity color; filled = connected, ring = not connected. The hairline keeps pale colors visible on white. */
.dot {
  display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0;
  background: var(--actor, var(--actor-system));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pm-charcoal) 45%, transparent);
}
.dot.off { background: transparent; border: 2.5px solid var(--actor, var(--actor-system)); }
.dot.sm { width: 8px; height: 8px; margin-right: 4px; }

.footer-line { margin-top: var(--gutter); }

/* Brain tabs: a white segmented bar; the selected view is charcoal and keeps its actor dot */
.tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); margin: 0 0 var(--gutter); width: fit-content; max-width: 100%; }
.tab { padding: 7px 14px; color: var(--text-muted); border-radius: calc(var(--radius) - 4px); font-weight: 500; font-size: var(--text-sm); }
.tab:hover { color: var(--text-primary); background: var(--hover); }
.tab.on { color: var(--text-inverse); background: var(--surface-dark); font-weight: 700; }
.tab.on .dot { box-shadow: 0 0 0 1px color-mix(in srgb, var(--pm-white) 55%, transparent); }

/* Accordions: white cards with Syne titles */
details.acc { padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3); }
details.acc > summary { cursor: pointer; font-size: var(--text-lg); }
details.acc > summary::marker { color: var(--ui-accent); }
details.acc > summary:hover { text-decoration: underline; text-decoration-color: var(--text-primary); text-decoration-thickness: 2px; text-underline-offset: 4px; }
details.acc[open] > summary { margin-bottom: var(--space-3); }
.count { color: var(--text-muted); font: 400 var(--text-sm) var(--font-ui); letter-spacing: 0; text-transform: none; margin-left: 6px; }
.row label.grow { flex: 1 1 240px; }

/* Home cards: full width, stacked; collapsed shows the top item, open shows the list */
.home-card { padding: var(--space-5); margin-bottom: var(--gutter); }
details.acc.home-card > summary { font: inherit; text-transform: none; color: var(--text-primary); }
.home-card > summary h2 { display: inline; margin: 0; }
details.acc.home-card > summary:hover { text-decoration: none; }
/* +/− toggle instead of the disclosure arrow; hover brings the outline to full Sky */
details.acc.home-card > summary { list-style: none; display: block; }
details.acc.home-card > summary::-webkit-details-marker { display: none; }
details.acc.home-card > summary::before {
  content: "+"; display: inline-block; width: 1.1em; margin-right: var(--space-1);
  font: 800 var(--heading-sm)/1 var(--font-display); color: var(--ui-accent);
}
details.acc.home-card[open] > summary::before { content: "\2212"; }
.home-card { transition: border-color 0.15s; }
.home-card:hover { border-color: var(--ui-accent); }
.home-card .preview { margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border); font-size: var(--text-base); }
.home-card .preview .more { display: inline-block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--text-muted); }
.home-card[open] .preview { display: none; }
.home-card .preview a { text-decoration: none; font-weight: 500; }
.home-card .preview a:hover { text-decoration: underline; text-decoration-color: var(--ui-accent); }
.home-card .card-foot { margin: var(--space-3) 0 0; }
.promote { align-items: center; }

/* Small screens: tighter gutters and smaller display sizes */
/* Brand page (/brand). A short Sky hero with the name in the brand script, a sticky jump bar, then sections on white:
   logo studio, press kit, colors, type, voice & usage. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Pulpa Madre Script with the manual's alternates (see brandScript() in src/views.ts). */
.script { font-family: var(--font-brand); font-weight: 400; text-transform: none; letter-spacing: 0; }
.ss01 { font-feature-settings: "ss01"; }
.ss02 { font-feature-settings: "ss02"; }
.ss03 { font-feature-settings: "ss03"; }
.hero--short { min-height: 0; padding-bottom: 72px; }
.brand-title { font-size: clamp(3.5rem, 11vw, 8.5rem); line-height: 0.95; margin-bottom: var(--space-4); }
/* Let the Brand submenu span the page while keeping its sections at the content width. */
main:has(> .brand-nav) { max-width: none; }
main > section.brand-sec { max-width: calc(var(--page-max) - 2 * var(--gutter)); margin-inline: auto; }
.brand-nav {
  position: sticky; top: calc(var(--header-height) - 26px); z-index: 50; display: flex; gap: var(--space-1); overflow-x: auto;
  margin: 0 calc(-1 * var(--gutter)); padding: var(--space-2) max(var(--gutter), calc((100% - var(--page-max)) / 2 + 2 * var(--gutter)));  /* 100% is main's box, a gutter narrower each side */ background: color-mix(in srgb, var(--pm-white) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); scrollbar-width: none;
  transition: background-color 0.3s ease;
}
.brand-nav.is-stuck { background-color: var(--pm-zest); }
.brand-nav.is-stuck a { color: var(--text-primary); }
@media (prefers-reduced-motion: reduce) { .brand-nav { transition: none; } }
.brand-nav a { flex: none; padding: 6px 12px; border-radius: var(--radius-pill); text-decoration: none; font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); }
.brand-nav a:first-child { margin-inline-start: auto; }
.brand-nav a:last-child { margin-inline-end: auto; }
.brand-nav a:hover { color: var(--text-primary); background: var(--surface-neutral); }
.brand-nav a { transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; }
.brand-nav.is-stuck a.on { background: color-mix(in srgb, var(--pm-white) 65%, transparent); box-shadow: inset 0 0 0 1px var(--text-primary); }
@media (prefers-reduced-motion: reduce) { .brand-nav a { transition: none; } }
section.brand-sec { background: none; border: 0; border-radius: 0; padding: 0; margin: var(--space-6) 0 88px; scroll-margin-top: calc(var(--header-height) - 26px + 64px); }
.brand-sec .band-head h2 { color: var(--text-primary); }
.brand-sub { color: var(--text-primary); font-size: var(--text-base); margin: var(--space-5) 0 var(--space-3); }
.brand-sub .meta { text-transform: none; font-family: var(--font-ui); font-weight: 400; margin-left: var(--space-2); }

/* Studio: the logo big on top, a three-column control panel under it, one download bar. */
.studio { display: flex; flex-direction: column; gap: var(--space-4); }
.studio-stage { position: relative; }
.studio-preview { display: grid; place-items: center; aspect-ratio: 16 / 7; padding: 5% 12%; border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; transition: background-color 0.2s; }
.studio-preview svg { width: 100%; height: 100%; max-height: 100%; }
.studio-preview[data-backdrop="checker"], .studio-preview[data-backdrop="fill"] { background: repeating-conic-gradient(#eef0f2 0 25%, #fff 0 50%) 0 0 / 24px 24px; }
.studio-preview[data-backdrop="light"] { background: var(--pm-white); }
.studio-preview[data-backdrop="dark"] { background: var(--pm-charcoal); }
.studio-preview[data-backdrop="sky"] { background: var(--pm-sky); }
/* Preview backdrops: a small control floating in the preview's corner. */
.backdrops { position: absolute; top: var(--space-3); right: var(--space-3); display: flex; gap: 6px; padding: 6px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--pm-white) 92%, transparent); box-shadow: 0 1px 4px rgb(0 0 0 / 0.12); }
.backdrops[hidden] { display: none; }
.backdrop-btn { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--border-strong); cursor: pointer; }
.backdrop-btn.on { box-shadow: 0 0 0 2px var(--pm-white), 0 0 0 4px var(--text-primary); }
.bd-checker, .bd-checker:hover { background: repeating-conic-gradient(#dfe3e7 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.bd-light, .bd-light:hover { background: var(--pm-white); }
.bd-dark, .bd-dark:hover { background: var(--pm-charcoal); }
.bd-sky, .bd-sky:hover { background: var(--pm-sky); }
.backdrop-btn:hover { border-color: var(--text-primary); }
.studio-warn { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--pm-gold) 22%, white); font-size: var(--text-sm); }
.studio-panel {
  display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.05fr) minmax(0, 1.25fr); gap: var(--space-5) var(--space-6);
  padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius);
}
.panel-col { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.studio-panel [hidden] { display: none !important; }
.field { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.field-label strong, .field output { font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text-primary); font-size: var(--text-sm); }
.field-label strong { margin-left: var(--space-1); }
.field select { font-size: var(--text-base); letter-spacing: 0; text-transform: none; font-weight: 500; }
.field.range { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; }
.field.range input { width: 100%; accent-color: var(--pm-charcoal); padding: 0; border: 0; }
.studio-help { margin: calc(-1 * var(--space-2)) 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.text-btn { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--text-primary); font-size: var(--text-sm); font-weight: 500; text-decoration: underline; text-decoration-color: var(--ui-accent); text-underline-offset: 3px; cursor: pointer; }
.text-btn:hover { background: none; text-decoration-color: var(--text-primary); }
.panel-row { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.row-title { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.spacing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3) var(--space-5); }
.pad-actions .studio-help { margin: 0; flex-basis: 100%; }
.field-group { display: flex; flex-direction: column; gap: var(--space-2); }
.field-group > .field-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.field.sub { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: var(--text-sm); color: var(--text-primary); }
.field.sub output { font-size: var(--text-xs); color: var(--text-muted); }
.pad-actions { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
/* Below the minimum visibility: faded and crossed out, not clickable. */
.swatch.off { cursor: not-allowed; }
.swatch.off .swatch-chip { opacity: 0.22; }
.swatch.off::after { content: ""; position: absolute; left: 3px; right: 3px; top: 50%; height: 1.5px; background: var(--text-muted); transform: rotate(-45deg); pointer-events: none; }
.visibility-note { grid-column: 1 / -1; margin: 0; }
.studio-export { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.studio-caption { margin: 0 auto 10px 0; font-size: var(--text-sm); color: var(--text-muted); }
.field.size { min-width: 240px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, 24px); gap: 6px; }
.swatch { position: relative; cursor: pointer; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch-chip { display: block; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pm-charcoal) 18%, transparent); }
.swatch-chip--none { background: repeating-conic-gradient(#e3e6ea 0 25%, #fff 0 50%) 0 0 / 10px 10px; position: relative; }
.swatch-chip--none::after { content: ""; position: absolute; inset: 11px 2px; background: var(--status-danger); transform: rotate(-45deg); }
.swatch input:checked + .swatch-chip { box-shadow: 0 0 0 2px var(--surface-primary), 0 0 0 4px var(--text-primary); }
.swatch input:focus-visible + .swatch-chip { outline: 2px solid var(--focus); outline-offset: 5px; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span {
  display: inline-block; padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
  background: var(--surface-primary); color: var(--text-primary); font-size: var(--text-sm); font-weight: 500; cursor: pointer;
}
.pill span:hover { border-color: var(--text-primary); }
.pill input:checked + span { background: var(--text-primary); border-color: var(--text-primary); color: var(--text-inverse); }
.pill input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Press kit */
.kit-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.kit-form legend { display: block; width: 100%; padding: 0; margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary); }
.kit { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); gap: var(--space-5); align-items: start; padding: var(--space-5); border-radius: var(--radius); background: var(--pm-zest); color: var(--text-primary); }
.kit p { margin: 0 0 var(--space-3); }
.kit-list { margin: 0; padding-left: 1.1em; }
.kit-list li { margin-bottom: var(--space-1); }
.kit-form { display: flex; flex-direction: column; gap: var(--space-3); }
.kit-form fieldset { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.kit-form legend { width: 100%; }
.kit-form > button { align-self: flex-start; background: var(--text-primary); border-color: var(--text-primary); color: var(--text-inverse); }
.kit-form > button:hover { background: color-mix(in srgb, var(--pm-charcoal) 85%, var(--pm-white)); }
.kit .studio-help { color: var(--text-primary); }

/* Colors: groups fill their row (2 or 3 cards); the swatch shows the text color that reads on it. */
.color-grid { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.color-card { flex: 1 1 260px; display: flex; flex-direction: column; overflow: hidden; background: var(--surface-primary); border: 1px solid var(--border); border-radius: var(--radius); }
.color-fill { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-2); min-height: 132px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
.color-name { display: flex; flex-direction: column; font: 700 var(--text-lg)/1.15 var(--font-ui); text-transform: uppercase; max-width: 60%; }  /* as in the manual: DM Sans caps, Pantone under */
.color-name small { font-size: var(--text-base); font-weight: 400; text-transform: none; }
.color-read { font-size: var(--text-xs); font-weight: 700; cursor: help; }
.color-info { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4) var(--space-4); }
.color-codes { font-size: var(--text-xs); color: var(--text-muted); }
.copy-row { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-1) 0; }
.copy {
  display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 9px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700;
  background: var(--surface-neutral); border: 1px solid var(--border); color: var(--text-muted);
}
.copy span { font-family: var(--font-mono); font-weight: 400; color: var(--text-primary); }
.copy:hover { background: var(--surface-neutral); border-color: var(--text-primary); }
.copy.copied { background: var(--text-primary); border-color: var(--text-primary); color: var(--pm-zest); }
.copy.copied span { color: var(--text-inverse); }
.color-use { margin: var(--space-1) 0 0; font-size: var(--text-sm); }

/* Type */
.script-card { border: 1px solid var(--border-card); border-radius: var(--radius); padding: var(--space-5); margin-bottom: var(--space-3); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-5); }
.script-sample { grid-column: 1 / -1; margin: 0; font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 1.05; color: var(--pm-lilac); }
.script-meta p { margin: var(--space-1) 0 0; }
.glyphs { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); align-items: baseline; }
.glyphs dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.glyphs dd { margin: 0; font-size: 1.75rem; line-height: 1.15; overflow-wrap: anywhere; }
.glyphs .alts span { margin-right: 0.35em; }
.type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.type-card { border: 1px solid var(--border-card); border-radius: var(--radius); padding: var(--space-5); }
.type-card p { margin: var(--space-1) 0 0; }
.type-sample { font-size: 2rem; line-height: 1.05; color: var(--text-primary); margin: 0 0 var(--space-4) !important; }
.type-scale { list-style: none; margin: 0; padding: 0; }
.type-scale li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.scale-sample { line-height: 1; color: var(--text-primary); overflow-wrap: anywhere; }
/* Real ratios: 24 : 38.83 : 62.83 : 101.66 pt, with the 24 pt body shown at 16 px. */
.scale-0 { font-size: 67.8px; }
.scale-1 { font: 800 41.9px/var(--display-leading) var(--font-display); letter-spacing: var(--display-tracking); text-transform: uppercase; }
.scale-2 { font: 700 25.9px/1.2 var(--font-ui); }
.scale-3 { font: 400 16px/1.4 var(--font-ui); }
.scale-meta { font-size: var(--text-sm); }

.source-note { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-muted); }
/* Voice & usage: one line each until opened, so the section stays calm. */
.rule-list { display: flex; flex-direction: column; gap: var(--space-2); }
.rule-card { border: 1px solid var(--border-card); border-radius: var(--radius); padding: var(--space-4) var(--space-5); }
.rule-card summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: minmax(180px, 1fr) 2fr auto; gap: var(--space-4); align-items: baseline; }
.rule-card summary::-webkit-details-marker { display: none; }
.rule-card summary::after { content: "+"; font: 800 var(--heading-sm)/1 var(--font-display); color: var(--ui-accent); }
.rule-card[open] summary::after { content: "\2212"; }
.rule-card h3 { margin: 0; color: var(--text-primary); font-size: var(--text-base); }
.rule-lede { color: var(--text-muted); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-card[open] .rule-lede { visibility: hidden; }
.rule-card .body { color: var(--text-primary); margin-top: var(--space-3); line-height: 1.6; }
.rule-card:hover { border-color: var(--ui-accent); }

@media (max-width: 860px) {
  .kit, .script-card, .studio-panel { grid-template-columns: 1fr; }
  .studio-preview { aspect-ratio: 4 / 3; padding: 8%; }
  .type-scale li { grid-template-columns: 1fr; gap: var(--space-2); }
  .rule-card summary { grid-template-columns: 1fr auto; }
  .rule-lede { display: none; }
}

@media (max-width: 640px) {
  .band { padding: 48px var(--gutter); }
  .band-head h2 { font-size: var(--heading-md); }
  :root { --gutter: var(--space-4); --header-height: 94px; }
  main { padding-top: var(--space-5); }
  h1 { font-size: var(--heading-md); }
  .hero { gap: 40px; }
  .hero-body { font-size: var(--text-base); }
  .agent-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); width: 100%; }
  .agent-tile { min-width: 0; gap: 10px; padding: 12px; }
  .agent-logo { width: 26px; height: 26px; }
  .agent-tile strong { font-size: var(--text-sm); overflow-wrap: anywhere; }
  section, .surface, form.surface, section.narrow { padding: var(--space-4); }
  details.acc { padding: var(--space-3) var(--space-4); }
  .wordmark .script { font-size: var(--heading-lg); }
  .top { gap: var(--space-2); }
  .top.scrolled { height: calc(var(--header-height) - 10px); }
  .brand-nav { top: calc(var(--header-height) - 10px); }
  section.brand-sec { scroll-margin-top: calc(var(--header-height) - 10px + 64px); }
  .logo { height: 60px; }
  .top.scrolled .logo { height: 50px; }
  .top .os { display: none; }
  .top .header-logo { display: none; }
  .top .header-logo-mobile { display: block; height: 44px; }
  .top.scrolled .header-logo-mobile { height: 38px; }
  .top-left, .top-right { gap: 0; }
  .hamburger-label { display: none; }
  .menu { clip-path: circle(0% at 32px 47px); }
  .menu.open { clip-path: circle(150% at 32px 47px); }
  .menu-close { top: 25px; }
}

/* Operational voice guide: restrained surfaces, with live brain text. */
.voice-guide { margin-bottom: var(--space-4); }
.voice-pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.voice-pillar { border: 1px solid var(--border-card); border-radius: var(--radius); padding: var(--space-5); }
.voice-pillar .kicker { color: var(--text-muted); }
.voice-pillar h3, .voice-guidance h3 { color: var(--text-primary); font-size: var(--heading-sm); line-height: 1.1; margin: var(--space-2) 0 var(--space-3); }
.voice-pillar p { margin: 0; line-height: 1.55; }
.voice-guidance { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); padding: var(--space-5) 0; }
.voice-guidance ul { margin: 0; padding-left: 1.2em; }
.voice-guidance li + li { margin-top: var(--space-2); }
.voice-practice { background: var(--surface-neutral); border-radius: var(--radius); padding: var(--space-5); margin-bottom: var(--space-4); }
.voice-practice blockquote { font-family: var(--font-display); font-weight: 800; font-size: var(--heading-sm); margin: var(--space-3) 0 0; }
.completed-tasks { margin-bottom: var(--space-5); border-top: 1px solid var(--border-card); padding-top: var(--space-3); }
.completed-tasks summary { cursor: pointer; font-weight: 700; width: fit-content; }
.completed-tasks .checklist { margin-top: var(--space-3); }
[hidden] { display: none !important; }
@media (max-width: 640px) {
  .voice-pillars, .voice-guidance { grid-template-columns: 1fr; }
  .voice-pillar { padding: var(--space-4); }
}

/* Lab (R&D) and Suppliers: dense tables and fact grids on the same white surfaces. Color only where it carries
   meaning: the stage pill, test outcome, document marks. Missing data shows as a muted dash, never as zero. */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.page-head h1 { margin: 0; }
.page-head .kicker { color: var(--text-muted); margin-bottom: var(--space-2); }
.crumb { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.section-title { margin: var(--space-6) 0 var(--space-3); }
.section-title .count { font-size: var(--text-sm); }
section.flush { padding: 0; overflow: hidden; }
section.flush table { display: table; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.missing { color: var(--text-muted); }
.notes { white-space: pre-wrap; font-size: var(--text-sm); }

.stage, .sstatus, .outcome {
  display: inline-block; font: 700 var(--text-xs)/1.6 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase;
  padding: 1px 9px; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--text-primary); white-space: nowrap; vertical-align: middle;
}
.stage--reference, .stage--empty { background: var(--surface-secondary); }
.stage--hypothesis { background: var(--pm-lilac); border-color: var(--pm-lilac); }
.stage--testing { background: var(--status-warning); border-color: var(--status-warning); }
.stage--candidate { background: var(--status-live); border-color: var(--status-live); }
.stage--approved { background: var(--status-success); border-color: var(--status-success); }
.stage--retired, .stage--superseded { color: var(--text-muted); text-decoration: line-through; }
.sstatus--sampling, .sstatus--contacted { background: var(--status-warning); border-color: var(--status-warning); }
.sstatus--qualified { background: var(--status-success); border-color: var(--status-success); }
.sstatus--dropped { color: var(--text-muted); text-decoration: line-through; }
.outcome--promising { background: var(--status-success); border-color: var(--status-success); }
.outcome--revise { background: var(--status-warning); border-color: var(--status-warning); }
.outcome--reject { background: var(--status-danger); border-color: var(--status-danger); color: var(--text-inverse); }

/* calc. / est. / measured / hypothesis / source: what kind of number this is */
.ktag {
  display: inline-block; font: 500 10px/1.5 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 1px;
  padding: 0 5px; border-radius: var(--radius-sm); border: 1px dashed var(--border-strong); color: var(--text-muted);
}
.ktag--measured { border-style: solid; border-color: var(--status-success); background: color-mix(in srgb, var(--pm-lime) 22%, transparent); color: var(--text-primary); }
.ktag--hypothesis { border-color: var(--pm-lilac); }

.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3) var(--space-5); margin: var(--space-4) 0; }
.facts div { min-width: 0; }
.facts dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.facts dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

table.lines tr.group th { background: transparent; padding-top: var(--space-3); color: var(--text-primary); }
table.lines tbody.role-ice td, table.lines tbody.role-garnish td { color: var(--text-muted); }
table.lines tbody.role-ice td:first-child, table.lines tbody.role-garnish td:first-child { color: var(--text-primary); }
.formula-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); margin-top: var(--space-4); }
.button.small { padding: 3px 10px; font-size: var(--text-sm); }
.inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); margin: 0; }
.inline-form label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 500; }
details.sub { margin-top: var(--space-4); border-top: 1px solid var(--border); padding-top: var(--space-3); }
details.sub > summary { cursor: pointer; font-weight: 700; width: fit-content; margin-bottom: var(--space-3); }
details.sub:not([open]) > summary { margin-bottom: 0; }

table.line-editor td { padding: 4px; }
table.line-editor input, table.line-editor select { width: 100%; min-width: 70px; }
table.line-editor td:nth-child(2) input { min-width: 180px; }
table.line-editor td:nth-child(5) select { min-width: 220px; }

.doc { display: inline-block; font: 700 10px/1.6 var(--font-ui); letter-spacing: 0.05em; padding: 0 6px; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--text-muted); }
.doc--have { background: var(--status-success); border-color: var(--status-success); color: var(--text-primary); text-decoration: none; }
.doc--req { border-color: var(--status-warning); border-style: dashed; color: var(--text-primary); }
.missing-count { font-weight: 700; }
.complete { font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); }
.complete::before { content: "✓ "; }
section.product { scroll-margin-top: calc(var(--header-height) + 16px); }
.product-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); }
.product-head h3 { margin: 0; color: var(--text-primary); }
:target { scroll-margin-top: calc(var(--header-height) + 16px); }
@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr 1fr; }
  section.flush { overflow-x: auto; }
}
.scroll-x > table { display: table; min-width: 100%; }
td.nowrap { white-space: nowrap; }

/* ---------- Lab v2: experiment board + notebook ----------
   Read-first. Stage is carried by a restrained palette (Source Crema, Formulating Lilac, Testing Piña Gold, Candidate
   Zest, Approved Limón Real), always with charcoal text on light tints. No Sky outlines here: surfaces are tints and soft
   shadows. Human controls are small pills (.mini-btn) that reveal their form; measured numbers are solid lime chips,
   calc./est. numbers sit on dashed tiles. */
.lane--source { --lane: color-mix(in srgb, var(--pm-charcoal) 16%, var(--pm-crema)); --lane-tint: var(--pm-crema); }
.lane--formulating { --lane: var(--pm-lilac); --lane-tint: color-mix(in srgb, var(--pm-lilac) 18%, var(--pm-white)); }
.lane--testing { --lane: var(--pm-gold); --lane-tint: color-mix(in srgb, var(--pm-gold) 16%, var(--pm-white)); }
.lane--candidate { --lane: var(--pm-zest); --lane-tint: color-mix(in srgb, var(--pm-zest) 20%, var(--pm-white)); }
.lane--approved { --lane: var(--pm-lime); --lane-tint: color-mix(in srgb, var(--pm-lime) 18%, var(--pm-white)); }
.lane--parked { --lane: color-mix(in srgb, var(--pm-charcoal) 28%, var(--pm-white)); --lane-tint: var(--surface-neutral); }

.lane-pill {
  display: inline-block; font: 700 var(--text-xs)/1.6 var(--font-ui); letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 10px; border-radius: var(--radius-pill); background: var(--lane); color: var(--text-primary); white-space: nowrap;
}
.lane-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--lane); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pm-charcoal) 18%, transparent); }

/* Small controls: quiet pills that reveal a form or menu. Never orange; the page's one primary action is. */
.mini-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--surface-primary); color: var(--text-primary);
  font: 600 var(--text-sm)/1.2 var(--font-ui); text-decoration: none; cursor: pointer; list-style: none; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.mini-btn::-webkit-details-marker { display: none; }
.mini-btn:hover { background: var(--surface-neutral); border-color: var(--text-primary); }
.mini-btn .icon { width: 16px; height: 16px; }
.mini-btn--quiet { border-color: transparent; background: transparent; padding: 4px 8px; color: var(--text-muted); }
.mini-btn--quiet:hover { color: var(--text-primary); background: color-mix(in srgb, var(--pm-charcoal) 6%, transparent); border-color: transparent; }
details[open] > .mini-btn, details[open] > .mini-btn:hover { background: var(--surface-dark); color: var(--text-inverse); border-color: var(--surface-dark); }

/* Move menu: a popover of lanes. */
.move-menu { position: relative; }
.move-pop {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: 290px; max-width: calc(100vw - 32px);
  padding: 6px; background: var(--surface-primary); border-radius: 12px; box-shadow: var(--shadow-pop), 0 0 0 1px var(--border);
}
.move-pop form { margin: 0; }
.move-opt {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text-primary); text-align: left; font-weight: 400; font-size: var(--text-sm);
}
.move-opt:hover { background: var(--lane-tint, var(--hover)); border: 0; }
.move-opt .lane-dot { margin-top: 5px; }
.move-opt strong { display: block; font-weight: 700; }
.move-opt small { display: block; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.35; }
form[data-to] .move-opt:hover { background: color-mix(in srgb, var(--pm-charcoal) 5%, transparent); }
.move-alt { display: block; padding: 8px 10px 6px; font-size: var(--text-sm); }

/* Board page head */
.lab-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.lab-head h1 { margin: 0 0 var(--space-2); }
.lab-head .kicker { color: var(--text-muted); margin-bottom: var(--space-2); }
.lab-lede { margin: 0; max-width: 62ch; color: var(--text-muted); }
.lab-head-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.lab-pulse { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.lab-pulse li { padding: 6px 12px; border-radius: var(--radius-pill); background: var(--surface-neutral); font-size: var(--text-sm); color: var(--text-muted); }
.lab-pulse strong { color: var(--text-primary); font-size: var(--text-base); margin-right: 2px; font-variant-numeric: tabular-nums; }

/* "+ Experiment": Home's add pattern, opening as a small panel under the button. */
.add-pop { position: relative; }
.add-pop > summary.task-add-open { padding: 8px 16px; font-size: var(--text-sm); }
.add-pop[open] > summary.task-add-open { display: inline-flex; }
.add-pop .task-add {
  position: absolute; z-index: 30; right: 0; top: calc(100% + 8px); width: min(380px, calc(100vw - 32px)); flex-direction: column;
  padding: var(--space-4); background: var(--surface-primary); border-radius: var(--radius); box-shadow: var(--shadow-pop), 0 0 0 1px var(--border);
}
.add-pop .task-add input { border-color: var(--border-strong); flex: none; width: 100%; }
.add-pop .task-add-row { display: flex; gap: var(--space-2); }

/* The board: five tinted lanes on desktop */
.lanes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.lane { background: var(--lane-tint); border-radius: 16px; padding: var(--space-3); min-height: 340px; transition: box-shadow 0.15s ease, opacity 0.15s ease; }
.lane-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-2); padding: 2px 4px var(--space-3); }
.lane-head::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--lane); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pm-charcoal) 18%, transparent); }
.lane-title { margin: 0; font: 700 var(--text-sm)/1.2 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-primary); }
.lane-count { margin-left: auto; min-width: 24px; padding: 0 7px; text-align: center; border-radius: var(--radius-pill); background: var(--surface-primary); font: 700 var(--text-xs)/1.7 var(--font-ui); font-variant-numeric: tabular-nums; }
.lane-blurb { flex-basis: 100%; margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.lane-cards { display: flex; flex-direction: column; gap: var(--space-3); }
.lane-empty { margin: var(--space-2) 0 0; padding: var(--space-5) var(--space-2); text-align: center; font-size: var(--text-sm); color: var(--text-muted);
  border: 1.5px dashed color-mix(in srgb, var(--pm-charcoal) 16%, transparent); border-radius: 12px; }
.lane.is-drop-ok { box-shadow: 0 0 0 2px var(--text-primary); }
.lane.is-drop-ok .lane-empty { border-color: var(--text-primary); color: var(--text-primary); }
.lane.is-drop-no { opacity: 0.45; }

/* Experiment card */
.xcard {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: 14px 14px 10px; border-radius: 12px;
  background: var(--surface-primary); color: var(--text-primary);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--pm-charcoal) 10%, transparent), 0 0 0 1px color-mix(in srgb, var(--pm-charcoal) 7%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.xcard::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lane); }
.xcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop), 0 0 0 1px color-mix(in srgb, var(--pm-charcoal) 7%, transparent); }
.xcard[draggable=true] { cursor: grab; }
.xcard.is-dragging { opacity: 0.5; transform: rotate(-1.5deg); }
.xcard-top { display: flex; align-items: center; gap: 6px; min-height: 26px; margin: -4px -8px 0 0; font-size: 11px; color: var(--text-muted); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.xcard-mark { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--lane-tint); color: var(--text-primary); }
.xcard-mark .icon { width: 14px; height: 14px; }
.xcard-top .icon-btn { width: 26px; height: 26px; }
.xcard-top .move-menu { margin-left: auto; }
.xcard-version { min-width: 0; line-height: 1.2; }
.xcard-name { margin: 2px 0 0; font: 800 1rem/1.05 var(--font-display); overflow-wrap: break-word; letter-spacing: var(--display-tracking); text-transform: uppercase; color: var(--text-primary); }
.xcard-link { text-decoration: none; }
.xcard-link::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }   /* the whole card opens the notebook */
.xcard-link:focus-visible { outline: 0; }
.xcard:has(.xcard-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.xcard-signals { display: flex; flex-wrap: wrap; gap: 4px 10px; list-style: none; margin: 2px 0 0; padding: 0; font-size: var(--text-xs); }
.xcard-signals li { display: inline-flex; align-items: center; gap: 4px; }
.xcard-signals .icon { width: 13px; height: 13px; }
.xcard-signals .is-missing { color: var(--text-muted); }
.xcard-signals .is-done { font-weight: 700; }
.xcard .move-menu { position: relative; z-index: 2; }   /* above the card-wide link */
/* Card Move: a quiet icon that only firms up on hover/focus, so it never competes with the card. */
.icon-btn {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; list-style: none;
  color: color-mix(in srgb, var(--pm-charcoal) 45%, transparent); transition: background 0.15s ease, color 0.15s ease;
}
.icon-btn::-webkit-details-marker { display: none; }
.icon-btn .icon { width: 15px; height: 15px; }
.icon-btn:hover, .icon-btn:focus-visible { color: var(--text-primary); background: color-mix(in srgb, var(--pm-charcoal) 7%, transparent); }
details[open] > .icon-btn { color: var(--text-inverse); background: var(--surface-dark); }
.xcard.just-moved { animation: just-moved 1.6s ease-out 1; }
@keyframes just-moved { 0% { box-shadow: 0 0 0 0 var(--lane), 0 0 0 1px var(--border); } 30% { box-shadow: 0 0 0 6px var(--lane), 0 0 0 1px var(--border); } 100% { box-shadow: 0 1px 2px transparent, 0 0 0 1px var(--border); } }
@media (prefers-reduced-motion: reduce) { .xcard, .xcard:hover { transition: none; transform: none; } .xcard.just-moved { animation: none; box-shadow: 0 0 0 3px var(--lane); } }

.board-tabs { display: none; }
details.parked { margin-top: var(--space-5); }
details.parked > summary { cursor: pointer; font-weight: 700; width: fit-content; }
.parked-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }

/* ---------- Drink notebook ---------- */
.xhead { background: var(--lane-tint); border-radius: 20px; padding: var(--space-5) var(--space-6) var(--space-5); margin-bottom: var(--space-5); }
.xhead-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.xhead-id { min-width: 0; }
.xhead-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-2); }
.xhead-kicker .icon { width: 15px; height: 15px; }
.xhead h1 { color: var(--text-primary); font-size: clamp(2rem, 5vw, var(--heading-lg)); margin: 0 0 var(--space-3); }
.xhead-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: var(--text-sm); }
.xhead-meta > span + span::before { content: ""; }
.xhead-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* The one stage-aware action a notebook leads with (Log a test, Approve); everything else is under More. */
.mini-btn--lead { background: var(--surface-dark); border-color: var(--surface-dark); color: var(--text-inverse); }
.mini-btn--lead:hover { background: color-mix(in srgb, var(--pm-charcoal) 85%, var(--pm-white)); border-color: var(--surface-dark); }
.lead-form { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.lead-form button { display: inline-flex; align-items: center; gap: 6px; }
.lead-form button .icon { width: 16px; height: 16px; stroke-width: 2.5; }
.lead-note { font-size: var(--text-xs); color: var(--text-muted); }
.pop-label { margin: 6px 10px 2px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.pop-label:first-child { margin-top: 4px; }
a.move-opt { text-decoration: none; }
a.move-opt:hover { background: color-mix(in srgb, var(--pm-charcoal) 5%, transparent); }
a.move-opt > .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; }

.rail { display: flex; list-style: none; margin: var(--space-5) 0 var(--space-4); padding: 0; }
.rail-step { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.rail-step::before { content: ""; position: absolute; top: 11px; right: 50%; width: 100%; height: 3px; background: color-mix(in srgb, var(--pm-charcoal) 12%, transparent); z-index: 0; }
.rail-step:first-child::before { display: none; }
.rail-step.is-done::before, .rail-step.is-now::before { background: var(--text-primary); }
.rail-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-primary);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pm-charcoal) 22%, transparent); }
.rail-dot .icon { width: 14px; height: 14px; stroke-width: 3; }
.rail-step.is-done .rail-dot { background: var(--lane); box-shadow: inset 0 0 0 2px var(--text-primary); }
.rail-step.is-now .rail-dot { background: var(--lane); box-shadow: inset 0 0 0 2px var(--text-primary), 0 0 0 5px var(--surface-primary), 0 0 0 7px var(--text-primary); }
.rail-label { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.rail-step.is-done .rail-label { color: var(--text-primary); }
.rail-step.is-now .rail-label { color: var(--text-primary); font-weight: 700; }
.rail--parked .rail-step { opacity: 0.55; }

.next-move { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-3); background: var(--surface-primary); border-radius: 12px; padding: 12px 16px; }
.next-move .kicker { margin: 0; color: var(--text-muted); }
.next-move-body { flex: 1 1 320px; min-width: 0; }
.next-move-text { margin: 0; font-size: var(--text-lg); font-weight: 500; line-height: 1.35; }
.next-move-text.is-stale, .next-move-text.is-derived, .log-title.is-stale, .log-title.is-derived { color: var(--text-muted); }
.next-flag { display: inline-flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600;
  background: color-mix(in srgb, var(--pm-gold) 18%, var(--pm-white)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pm-gold) 70%, var(--pm-charcoal)); }
.next-flag .icon { flex: none; width: 14px; height: 14px; margin-top: 1px; }
.next-flag--quiet { padding: 0; background: none; box-shadow: none; font-weight: 400; color: var(--text-muted); }
.reveal--inline { margin-left: auto; }
.reveal--inline[open] { flex-basis: 100%; margin-left: 0; }
.inline-edit { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.inline-edit input { flex: 1; min-width: 0; }

.xgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-5); align-items: start; }
.xmain { min-width: 0; }

.bench { background: var(--surface-primary); border-radius: 18px; padding: var(--space-5); box-shadow: 0 0 0 1px var(--border); margin-bottom: var(--space-6); }
.bench--source { background: color-mix(in srgb, var(--pm-crema) 60%, var(--pm-white)); box-shadow: none; }
.bench-kicker { display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-2); }
.bench-title { margin: 0 0 var(--space-2); font-size: var(--heading-sm); color: var(--text-primary); }
.bench-title .muted { font: 500 var(--text-base)/1.3 var(--font-ui); text-transform: none; letter-spacing: 0; }
.bench-head .meta { margin: 0 0 var(--space-4); }
.bench-callout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); background: var(--surface-primary); border-radius: 12px; padding: var(--space-4); margin-bottom: var(--space-5);
  border-left: 5px solid var(--pm-lilac); }
.bench-callout p { flex: 1 1 340px; margin: 0; font-size: var(--text-sm); }
.bench-callout-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.bench-callout-actions form { margin: 0; }
.bench-callout-actions a { font-size: var(--text-sm); }
.bench-empty { margin: 0; }
.bench-notes { margin-top: var(--space-4); color: var(--text-muted); }
.bench-foot { margin-top: var(--space-4); }

.ing-group + .ing-group { margin-top: var(--space-4); }
.ing-head { margin: 0 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--border); font: 700 var(--text-xs)/1.4 var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.ings { list-style: none; margin: 0; padding: 0; }
.ing { display: grid; grid-template-columns: minmax(0, 1.3fr) 90px minmax(0, 1.4fr) auto; gap: var(--space-3); align-items: center; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--pm-charcoal) 6%, transparent); }
.ing:last-child { border-bottom: 0; }
.ing-name { font-weight: 500; min-width: 0; }
.ing-name small { display: block; font-weight: 400; color: var(--text-muted); font-size: var(--text-xs); }
.ing-qty { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.ing-src { min-width: 0; }
.ing-cost { text-align: right; font-size: var(--text-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.role-garnish .ing-name, .role-ice .ing-name, .role-garnish .ing-qty, .role-ice .ing-qty { color: var(--text-muted); }
.pchip { display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%; padding: 4px 10px 4px 8px; border-radius: 8px; font-size: var(--text-sm); line-height: 1.3; text-decoration: none;
  background: color-mix(in srgb, var(--pm-sky) 8%, var(--pm-white)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pm-sky) 35%, transparent); }
a.pchip:hover { box-shadow: inset 0 0 0 1.5px var(--text-primary); }
.pchip .icon { width: 14px; height: 14px; margin-top: 2px; }
.pchip > span { min-width: 0; overflow-wrap: anywhere; }
.pchip small { display: block; color: var(--text-muted); font-size: var(--text-xs); }
.pchip--missing { background: color-mix(in srgb, var(--pm-gold) 12%, var(--pm-white)); box-shadow: none; border: 1px dashed color-mix(in srgb, var(--pm-gold) 80%, var(--pm-charcoal)); color: var(--text-primary); font-size: var(--text-xs); font-weight: 500; }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); margin: var(--space-5) 0 0; }
.stats div { min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--border-strong); }
.stats dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.stats dd { margin: 4px 0 0; font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.stats dd small { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); }

.xsection { margin-bottom: var(--space-6); }
.xsection-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.xsection-head .reveal[open] { flex-basis: 100%; }
.sub-head { margin: 0; font-size: var(--text-lg); color: var(--text-primary); }
.reveal > summary { width: fit-content; }
.reveal-panel { margin-bottom: var(--space-5); }
.reveal-panel:target { display: block; }   /* no-script fallback: the #log-test link still opens it */
.reveal-panel .reveal-form { margin-top: 0; }
.reveal-title { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; }
.reveal-title .icon { width: 16px; height: 16px; }
.reveal-form { margin-top: var(--space-3); padding: var(--space-4); border-radius: var(--radius); background: var(--surface-primary); box-shadow: 0 0 0 1px var(--border); }

/* Experiment log: a vertical timeline, oldest first, ending in the next move */
.timeline { list-style: none; margin: 0; padding: 0; }
.log { display: grid; grid-template-columns: 76px 22px minmax(0, 1fr); gap: 0 var(--space-3); position: relative; }
.log::before { content: ""; position: absolute; left: calc(76px + var(--space-3) + 10px); top: 0; bottom: 0; width: 2px; background: color-mix(in srgb, var(--pm-charcoal) 12%, transparent); }
.log:first-child::before { top: 14px; }
.log:last-child::before { bottom: auto; height: 14px; }
.log-date { padding-top: 6px; text-align: right; font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-dot { position: relative; z-index: 1; width: 14px; height: 14px; margin: 9px 4px 0; border-radius: 50%; background: var(--surface-primary); box-shadow: inset 0 0 0 2.5px var(--text-primary); }
.log-body { padding: 4px 0 var(--space-4); min-width: 0; }
.log-title { margin: 0; font-weight: 500; }
.log-sub { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.log-who { margin: 4px 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.log--source .log-dot { background: color-mix(in srgb, var(--pm-charcoal) 16%, var(--pm-crema)); }
.log--version .log-dot { background: var(--pm-lilac); }
.log--test .log-dot { width: 18px; height: 18px; margin: 7px 2px 0; background: var(--pm-gold); }
.log--stage .log-dot { width: 10px; height: 10px; margin: 11px 6px 0; background: var(--text-primary); box-shadow: none; }
.log--stage .log-title { font-size: var(--text-sm); }
.stage-to--approved .log-dot { width: 18px; height: 18px; margin: 7px 2px 0; background: var(--pm-lime); box-shadow: inset 0 0 0 2.5px var(--text-primary); }
.log--next .log-dot { background: var(--surface-primary); box-shadow: inset 0 0 0 2px var(--text-primary); outline: 2px dashed var(--text-primary); outline-offset: 2px; }
.log--next .log-date { color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.06em; }
.log--next .log-title { font-size: var(--text-lg); }
.log-test { background: var(--surface-primary); border-radius: 12px; padding: 12px 14px; box-shadow: 0 0 0 1px var(--border); }
.log-test .log-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.measures { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.measure { display: inline-flex; flex-direction: column; padding: 4px 12px; border-radius: 10px; background: color-mix(in srgb, var(--pm-lime) 16%, var(--pm-white)); border: 1px solid var(--pm-lime);
  font-size: var(--text-lg); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.measure small { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.log-facts { display: grid; gap: 6px; margin: 10px 0 0; font-size: var(--text-sm); }
.log-facts div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--space-2); }
.log-facts dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); padding-top: 2px; }
.log-facts dd { margin: 0; }

/* Side column: neutral tiles, no outlines */
.xside { display: flex; flex-direction: column; gap: var(--space-3); }
.side-card { background: var(--surface-neutral); border-radius: 16px; padding: var(--space-4) var(--space-4) var(--space-4); }
.side-title { margin: 0 0 var(--space-3); font: 700 var(--text-xs)/1.3 var(--font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-primary); }
.side-meter { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.side-meter strong { font-size: var(--text-lg); }
.meter { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--pm-charcoal) 10%, transparent); overflow: hidden; margin-bottom: var(--space-3); }
.meter span { display: block; height: 100%; background: var(--pm-lime); border-radius: 3px; min-width: 0; }
.side-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.side-list li { font-size: var(--text-sm); line-height: 1.35; }
.side-list a { font-weight: 500; }
.side-list small { display: block; color: var(--text-muted); font-size: var(--text-xs); margin-top: 2px; }
.side-gap { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.side-gap .icon { width: 16px; height: 16px; margin-top: 1px; color: color-mix(in srgb, var(--pm-gold) 70%, var(--pm-charcoal)); }
.side-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: 700; text-decoration: none; }
.side-link .icon { width: 15px; height: 15px; }
.lineage { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.lineage li { position: relative; padding: 0 0 var(--space-3) 18px; font-size: var(--text-sm); }
.lineage li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--text-primary); }
.lineage li:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 17px; bottom: 2px; width: 2px; background: color-mix(in srgb, var(--pm-charcoal) 18%, transparent); }
.lineage li.is-working a { font-weight: 700; }
.lineage small { display: block; color: var(--text-muted); font-size: var(--text-xs); }
.lineage .stage { font-size: 10px; padding: 0 6px; }

/* Other versions: quiet disclosures */
details.vcard { border-radius: 12px; box-shadow: 0 0 0 1px var(--border); padding: 12px 16px; margin-bottom: var(--space-2); background: var(--surface-primary); }
details.vcard--source { background: color-mix(in srgb, var(--pm-crema) 50%, var(--pm-white)); }
details.vcard > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-2); cursor: pointer; list-style: none; }
details.vcard > summary::-webkit-details-marker { display: none; }
details.vcard > summary::before { content: "+"; font: 800 var(--text-lg)/1 var(--font-display); width: 1em; }
details.vcard[open] > summary::before { content: "\2212"; }
.vcard-name { font-weight: 700; }
.vcard-name .muted { font-weight: 400; }
.vcard-meta { margin-left: auto; font-size: var(--text-xs); color: var(--text-muted); }
.vcard-body { margin-top: var(--space-3); }
details.vcard:target { box-shadow: 0 0 0 2px var(--text-primary); }
.bench:target { box-shadow: 0 0 0 2px var(--text-primary); }
.formula-actions .mini-btn { align-self: center; }

@media (max-width: 960px) {
  .xgrid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  /* Mobile board: stage tabs, one lane at a time (all lanes stack if scripts are off). */
  .lanes { grid-template-columns: 1fr; }
  .lane { min-height: 0; }
  .board.js .board-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)) var(--space-3); padding: 2px var(--gutter) 6px; scrollbar-width: none; }
  .board.js .board-tabs::-webkit-scrollbar { display: none; }
  .board-tab { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong);
    background: var(--surface-primary); color: var(--text-primary); font-size: var(--text-sm); font-weight: 600; }
  .board-tab:hover { background: var(--surface-neutral); border-color: var(--text-primary); }
  .board-tab[aria-selected=true] { background: var(--lane); border-color: var(--text-primary); font-weight: 700; }
  .board-tab-count { min-width: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--pm-charcoal) 8%, transparent); font-size: var(--text-xs); text-align: center; }
  .board.js .lane:not(.is-on) { display: none; }
  .board.js .lane-head .lane-title, .board.js .lane-head .lane-count, .board.js .lane-head::before { display: none; }
  .xcard[draggable=true] { cursor: auto; }
}
@media (max-width: 640px) {
  .xhead { padding: var(--space-4); border-radius: 16px; margin-left: calc(-1 * var(--space-2)); margin-right: calc(-1 * var(--space-2)); }
  .rail-label { font-size: 9px; letter-spacing: 0.02em; }
  .bench { padding: var(--space-4); margin-left: calc(-1 * var(--space-2)); margin-right: calc(-1 * var(--space-2)); }
  .ing { grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--space-3); }
  .ing-src { grid-column: 1 / -1; }
  .ing-cost { grid-column: 1 / -1; text-align: left; }
  .ing-cost:empty { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .log { grid-template-columns: 22px minmax(0, 1fr); }
  .log::before { left: 10px; }
  .log-date { grid-column: 2; grid-row: 1; text-align: left; padding: 0; }
  .log-dot { grid-column: 1; grid-row: 1 / span 2; }
  .log-body { grid-column: 2; padding-top: 0; }
  .log-facts div { grid-template-columns: 1fr; gap: 0; }
  .move-pop { right: auto; left: 0; }
  .xcard .move-pop { left: auto; right: 0; }
  /* The notebook's More menu opens from the start of its action row, so it never runs off a phone screen. */
  .xhead-actions { position: relative; }
  .act-menu { position: static; }
  .act-menu .move-pop { left: 0; right: auto; }
}
.xcard:has(details[open]) { z-index: 5; }
.log-outcome--promising .log-dot { background: var(--pm-lime); }
.log-outcome--reject .log-dot { background: var(--pm-hibiscus); }