/* ==========================================================================
   plan-1.css — shared stylesheet (version 1) for terracotta editorial
   plan/architecture previews (html-previews repo).

   Sources: AGENTS.md "Design system" (verbatim where given) + rules present
   in >= 2 of: agentic-form-filling-2026-06-10 (canonical), forms-on-content-
   2026-07-08 (pilot), streaming-edits-2026-07-01, ts-agent-framework-
   redesign-2026-06-26, voice-intake-2026-07-02.
   Canonical order for divergences: AGENTS.md > canonical page > most recent.
   See css-divergence-notes.md for every call made here.

   NOTE: fonts are NOT loaded here — each page keeps the Google Fonts <link>
   from AGENTS.md (Bricolage Grotesque + Inter).
   ========================================================================== */

/* 1. tokens */
/* AGENTS.md :root — verbatim. Pages may append page-local tokens below these. */
:root {
  --bg: #FFFDFA;        /* page background (cream) */
  --ink: #181615;       /* headings / strong text */
  --text: #1f2430;      /* body text */
  --muted: #5c6470;     /* secondary text */
  --border: #d9dce3;    /* hairlines, card borders */
  --card-bg: #ffffff;
  --accent: #B5491F;    /* terracotta: links, accents, key marks */
  --amber: #FFB163;     /* warm highlight: rules, reaction/anchor accents */
  --display: "Bricolage Grotesque", "Inter", -apple-system, sans-serif;
  --mono: "SF Mono", "SFMono-Regular", "Menlo", "Consolas", monospace;
  --measure: 740px;     /* centered reading column; body, h2/h3, figures share it */
}

/* 2. base & type */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  /* AGENTS.md type scale: body Inter ~1.06rem/1.65 (pilot variant; the four
     older pages set 15px/1.6 and may override). */
  font: 400 1.06rem/1.65 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 1180px; margin-inline: auto; padding: 2.4rem 1.4rem 3rem; }
a { color: var(--accent); text-decoration-color: #E8B79B; text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--accent); }
main h2 {
  font-family: var(--display); font-weight: 700; font-size: 1.62rem;
  letter-spacing: -0.015em; line-height: 1.15; color: var(--ink);
  margin: 3rem auto 0.8rem; max-width: var(--measure);
}
main h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.14rem;
  letter-spacing: -0.008em; color: var(--ink); margin: 2rem 0 0.5rem;
}
.prose { max-width: var(--measure); margin-inline: auto; }
article.prose { margin-block: 3.4rem; }
.prose p, .prose li { font-size: 0.99rem; }
.prose p { margin: 0 0 1.05rem; }
.prose ul { margin: 0 0 1.05rem; padding-left: 1.3rem; }
.prose ol { margin: 0 0 1.05rem; padding-left: 1.5rem; }
.prose li { margin-bottom: 0.45rem; }
.prose ol li { margin-bottom: 0.6rem; padding-left: 0.2rem; }
.prose ol li::marker { color: var(--accent); font-weight: 700; }
.prose strong { color: var(--ink); }
p.sub { color: var(--muted); margin: 0 auto 1.4rem; max-width: var(--measure); }
/* inline code — identical recipe in 4 pages; selector is the union they use */
.prose code, figcaption code, td code, th code, li code, .cap code, .sub code {
  font: 0.86em var(--mono); background: #F7F1E9; border: 1px solid #EFE3D4;
  border-radius: 4px; padding: 1px 5px; color: #43392F;
}

/* 3. shell */
.crumbs {
  max-width: var(--measure); margin: 0 auto; padding: 18px 20px 0;
  font: 600 0.72rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
/* House pages nest the crumbs inside the hero content column: they sit
   left-aligned just above the eyebrow, and the hero glow fills the full top of
   the page instead of being clipped by a separate crumbs bar above it. */
.hero-inner .crumbs { max-width: none; margin: 0 0 1.1rem; padding: 0; font-weight: 400; }

/* hero — AGENTS.md verbatim */
.hero { position: relative; overflow: hidden; background-color: #FFFCF8; border-bottom: 1px solid #F0E4D8; }
.hero .blob { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(70px); will-change: transform; }
.blob-1 { width: 560px; height: 460px; left: 58%; top: -22%; background: radial-gradient(closest-side, rgba(232,131,98,0.62), transparent 72%); animation: drift1 26s ease-in-out infinite alternate; }
.blob-2 { width: 520px; height: 480px; left: -12%; top: 8%;  background: radial-gradient(closest-side, rgba(246,183,138,0.58), transparent 72%); animation: drift2 32s ease-in-out infinite alternate; }
.blob-3 { width: 640px; height: 420px; left: 24%; top: 55%; background: radial-gradient(closest-side, rgba(255,177,99,0.40), transparent 74%); animation: drift3 38s ease-in-out infinite alternate; }
.blob-4 { width: 380px; height: 360px; left: 78%; top: 42%; background: radial-gradient(closest-side, rgba(238,148,112,0.42), transparent 70%); animation: drift4 29s ease-in-out infinite alternate; }
/* grain — as shipped by the canonical page (and 3 others): 0.28 + soft-light.
   AGENTS.md said 0.5/no-blend but was mis-transcribed from its own source
   page; amended in the same PR that ships this file. */
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.28; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); }
.hero-inner {
  position: relative; z-index: 2; max-width: 1180px; margin-inline: auto;
  padding: 4.2rem 1.4rem 3.4rem;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 3rem; align-items: center;
}
.hero .eyebrow {
  font: 600 12px/1 "Inter", sans-serif; letter-spacing: 0.14em; text-transform: uppercase;
  color: #9C4A21; margin: 0 0 1.2rem;
}
.hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 4.2rem); line-height: 1.02; letter-spacing: -0.022em;
  color: var(--ink); margin: 0 0 1.2rem; max-width: 17ch;
}
.hero .standfirst { font: 400 1.07rem/1.65 "Inter", sans-serif; color: #3D3733; max-width: 62ch; margin: 0 0 1.1rem; }
.hero .byline { font: 600 13px "Inter", sans-serif; color: #5A4F47; margin: 0 0 1.6rem; }
.hero .meta { display: flex; flex-wrap: wrap; gap: 8px; }
.hero .meta span {
  font: 500 12px "Inter", sans-serif; color: #5A4F47;
  background: rgba(255,255,255,0.55); border: 1px solid rgba(24,22,21,0.12);
  border-radius: 999px; padding: 6px 13px;
}
/* hero-art container only — every scene inside it (.ha-*, .rt-*) is page-local */
.hero-art { position: relative; }

footer {
  max-width: var(--measure); margin: 48px auto 0; padding: 18px 20px 56px;
  border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--muted);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
footer a { color: var(--accent); }

/* details/summary: only streaming-edits ships an accordion today (.acc) —
   stays page-local until a second page needs one. */

@media (max-width: 920px) {
  .hero-inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .hero-art { max-width: 460px; }
  .twocol { grid-template-columns: 1fr; }
}

/* 4. components */
figure { margin: 2.4rem auto; }
figcaption { font-size: 0.85rem; color: var(--muted); margin: 0.6rem auto 0; max-width: var(--measure); }
.cap { font-size: 0.82rem; color: var(--muted); margin-bottom: 1.4rem; }
.pull {
  font-family: var(--display); font-weight: 600; font-size: 1.32rem; line-height: 1.35;
  color: var(--ink); border-left: 3px solid var(--amber);
  padding: 0.15rem 0 0.15rem 1.1rem; margin: 1.7rem 0; max-width: 46ch;
}
.tldr {
  max-width: var(--measure); background: var(--card-bg); border: 1px solid var(--border);
  border-left: 4px solid var(--accent); border-radius: 0 10px 10px 0;
  padding: 16px 20px; margin: 32px auto 1.6rem; font-size: 0.98rem;
}
.toc { margin: 0 auto 2.4rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1rem; }
.chip { border: 1px solid var(--border); background: var(--card-bg); border-radius: 999px; padding: 3px 12px; font-size: 0.82rem; color: var(--muted); }

.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 940px; margin: 1.4rem auto; }
.panel { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; background: var(--card-bg); }
/* panel status/colour variants (.good/.bad/.pick/.managed/.s2s …) are page-local */

.tablewrap { max-width: 1040px; margin: 1.6rem auto; overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.88rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
table.data th { text-align: left; font: 700 11px "Inter", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: #FBF6EF; padding: 9px 12px; border-bottom: 1px solid var(--border); }
table.data td { padding: 9px 12px; border-bottom: 1px solid #EFEAE2; vertical-align: top; line-height: 1.5; }
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: #FFFCF8; }

.stepstrip { display: flex; gap: 9px; align-items: stretch; flex-wrap: wrap; }
.stepstrip .step { flex: 1 1 150px; min-width: 150px; border: 1px solid var(--border); border-radius: 9px; background: #fff; padding: 10px 12px; }
.stepstrip .step .st-h { font: 700 11px var(--mono); color: var(--accent); margin-bottom: 5px; }
.stepstrip .step .st-b { font: 11.5px/1.5 "Inter", sans-serif; color: #4a463f; }
.stepstrip .arr { align-self: center; color: var(--muted); font: 700 15px "Inter", sans-serif; }

.bodyfig { margin: 1.35rem 0 1.8rem; font-family: "Inter", sans-serif; }

/* ops trace — the developer's view of the agent loop (agentic-form-filling +
   voice-intake). Containers (.ops-frame / .ops), method colours (.m-*) and
   the .dot background are page-local semantics. */
.ops-head { display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 16px; background: #1B2433; color: #E8ECF3; font: 600 13px "Inter", sans-serif; }
.ops-head .dot { width: 8px; height: 8px; border-radius: 50%; }
.ops-head .muted { color: #8A94A6; font-weight: 400; margin-left: auto; font: 12px var(--mono); }
.ops-scroll { max-height: 480px; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; background: #F7F8FB; }
/* The scroll container is a flex column, so its cards would otherwise shrink to
   fit max-height instead of overflowing, and .op-card clips what it loses. */
.ops-scroll > * { flex-shrink: 0; }
.op-note { font: 12px/1.5 "Inter", sans-serif; color: #707A8C; margin: 7px 2px 0; }
.op-card { border: 1px solid #E1E5EC; border-radius: 9px; background: #fff; overflow: hidden; }
.op-call { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-bottom: 1px solid #EEF1F5; flex-wrap: wrap; }
.op-method { font: 600 11.5px var(--mono); letter-spacing: .02em; padding: 3px 9px; border-radius: 5px; }
.op-target { font: 12px var(--mono); color: #707A8C; word-break: break-all; }
.op-block { padding: 10px 13px; }
.op-block + .op-block { border-top: 1px solid #F3F5F8; }
.op-block .lbl { font: 600 10px "Inter", sans-serif; letter-spacing: .09em; text-transform: uppercase; color: #98A1B0; margin-bottom: 5px; }
.op-block pre { margin: 0; font: 12px/1.6 var(--mono); color: #2A3140; white-space: pre-wrap; word-break: break-word; }

/* 5. motion */
@keyframes drift1 { to { transform: translate(-70px, 50px) scale(1.12); } }
@keyframes drift2 { to { transform: translate(60px, -40px) scale(1.08); } }
@keyframes drift3 { to { transform: translate(-50px, -55px) scale(1.15); } }
@keyframes drift4 { to { transform: translate(-80px, 30px) scale(0.92); } }
/* AGENTS.md-verbatim guard; covers everything this file animates (the blobs)
   plus the common hero-art class names. Pages extend it for their own
   page-local animations (carets, sparks, pulses, pops). */
@media (prefers-reduced-motion: reduce) {
  .hero .blob, .ha-float, .ha-caret, .ha-spark { animation: none !important; }
}