/*
 * Areveo Artifact Stylesheet
 *
 * Scope: .artifact wrapper only. Loaded conditionally on pages using the
 * "Artifact" page template (see functions.php).
 *
 * Vocabulary for AI-generated artifact content:
 *   Backgrounds: --bg, --bg-tinted, --bg-deep
 *   Text:        --text-heading, --text-body, --text, --text-soft, --text-muted,
 *                --text-on-deep, --text-on-deep-soft
 *   Accents:     --accent (primary), --accent-warm (secondary), --accent-warm-lift (tertiary)
 *   Status:      --ok, --warn, --stop (+ -tint variants)
 *   Structure:   --border, --border-soft, --code-bg, --radius, --radius-lg
 *   Fonts:       --font-sans (Poppins), --font-serif (Iowan/Charter), --font-mono (SF Mono)
 *   Measure:     --measure (70ch), --measure-prose (760px)
 *
 * Typography defaults apply to bare HTML inside .artifact. Named classes
 * (.section, .claim, .diagram, etc.) provide structural patterns used by
 * the existing pages.
 *
 * Proposal vocabulary (see "Proposal patterns" near the end of this file):
 *   .callout(.ok/.warn/.stop), .phase-card, .vs/.vs-col, .cards/.card,
 *   .estimator, .gantt, ol.steps, .chip, .hero-meta, and bare `table`.
 *
 * When Claude generates a new artifact for this site, it can use these
 * tokens freely. Custom classes for one-off artifacts should live inline
 * with that artifact's content, not here.
 *
 * ----------------------------------------------------------------------------
 * FOUR RULES THAT GOVERN EVERY EDIT TO THIS FILE
 *
 * 1. SCOPED. Every selector is prefixed with `.artifact` (or `.artifact-wrapper`
 *    for the full-bleed ground). Nothing here can reach the rest of the site,
 *    and the extra class raises specificity above the parent theme's bare
 *    element selectors and above the customizer's generated inline CSS - which
 *    sets `h1..h6 { color: #555 }` and, in the parent sheet,
 *    `h1..h6 { text-transform: uppercase }`. Both are bare-element rules, so
 *    `.artifact h1` beats them. artifact.css is also enqueued with the child
 *    handle as a dependency, so it loads after that inline block.
 *
 * 2. NO COLLIDING CLASS NAMES IN THE CONTENT. The pages use
 *    `.artifact-container`, `.artifact-header` and `.artifact-footer` rather
 *    than `.container` / `.site-header` / `.site-footer`, because Bootstrap
 *    3.3.6 and the customizer's inline CSS both define the originals.
 *    `.artifact .container` IS supported below as a convenience for artifacts
 *    authored elsewhere (the proposal template uses that name), and at (0,2,0)
 *    it outranks Bootstrap's (0,1,0) width rules - but new content should
 *    prefer `.artifact-container`.
 *
 * 3. NO GLOBAL FONT-SIZE. The scale root is `.artifact { font-size: 17px }`,
 *    not `html`, because the site's Additional CSS sets `body { font-size:16px }`
 *    for everything else. Everything inside is sized in `em` so the scale
 *    cascades from that one declaration. SVG text keeps px sizing - SVG text
 *    does not participate in the em scale and the diagram viewBoxes assume px.
 *
 * 4. RETINT IN CSS, NOT IN THE CONTENT. The migrated pages carry the original
 *    standalone palette as SVG presentation attributes (teal #2a5f5a, a warm
 *    gold tier ramp, #d8d0bd / #ccc hairlines). Those are remapped by attribute
 *    selector below rather than by rewriting ~70 attributes across two pages.
 *    CSS properties beat SVG presentation attributes, so this always wins, and
 *    re-exporting a source SVG cannot silently reintroduce the old palette.
 *
 * ----------------------------------------------------------------------------
 * PALETTE PROVENANCE (2026-09-12 repoint)
 *
 * The previous sheet used Claude's default artifact aesthetic: warm cream
 * ground (#f7f4ed), serif display type, teal accents. This revision repoints
 * the vocabulary at the areveo theme - white ground, Poppins throughout,
 * the theme's own Customizer colors - while keeping the structural instincts
 * (numbered sections, tinted bands, cards, diagrams, generous whitespace).
 *
 * Theme values used verbatim:
 *   #536c7b  footer blue-gray  -> --accent
 *   #758d86  primary sage      -> --accent-warm
 *   #d0b190  link tan          -> --accent-warm-lift, --tier-3
 *   #8e7963  link hover brown  -> --accent-warm-strong
 *   #2d2d2d  heading ink       -> --text, --bg-deep
 *
 * 2026-09-13 (round 3) closes the remaining gaps against the live site:
 * the tinted band is the theme's neutral #f4f4f4 rather than a warm cream,
 * headings take the Customizer's #555 and body copy its #333, links take the
 * site's tan pair, h2 drops into the site's 28-30px band and picks up the
 * 170x1px sage rule from `.line > span`, section padding matches
 * `.acme-featured-image`, and the last two serif defaults are gone.
 *   Poppins 300/400/500/600, already enqueued site-wide by the parent theme
 *   (acmethemes/core.php line 105) - no extra enqueue needed for this template.
 */

/* ============================================
   Design tokens
   ============================================ */

.artifact-wrapper,
.artifact {
  /* Backgrounds */
  --bg: #ffffff;
  --bg-tinted: #f4f4f4;
  --bg-deep: #2d2d2d;

  /* Text

     --text-heading and --text-body are the site's own values, taken from the
     Customizer's inline block (`h1..h6 { color: #555 }`) and its body color.
     --text (#2d2d2d) stays: it is the ink for `strong`, the `.tag` chip, and
     every SVG label in the diagrams, and it is the same value as --bg-deep,
     which the on-dark pairings are balanced against. */
  --text-heading: #555555;
  --text-body: #333333;
  --text: #2d2d2d;
  --text-soft: #4a463f;
  --text-muted: #847d6e;
  --text-on-deep: #f7f4ed;
  --text-on-deep-soft: rgba(247, 244, 237, 0.72);

  /* Accents - theme palette */
  --accent: #536c7b;           /* footer blue-gray (primary) */
  --accent-warm: #758d86;      /* sage (secondary) */
  --accent-warm-lift: #d0b190; /* theme tan (tertiary/link) */

  /* --accent-warm-lift is a FILL tone. At 2.02:1 on white it cannot carry body
     or label text. This is the theme's own link-hover value, the same hue
     darkened to 4.15:1, and it is what small type in the warm family uses. */
  --accent-warm-strong: #8e7963;

  /* Status - for proposals */
  --ok: #3d6b4a;
  --warn: #9a7433;
  --stop: #a34a32;
  --ok-tint: #e6ede6;
  --warn-tint: #f2ead8;
  --stop-tint: #f2e2dc;

  /* Structure */
  --border: #e5e5e5;
  --border-soft: #efefef;
  --border-deep: rgba(247, 244, 237, 0.22);
  --code-bg: #f2f2f2;
  --code-text: #2d2d2d;
  --radius: 4px;
  --radius-lg: 6px;

  /* Type stacks */
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-serif: "Iowan Old Style", "Charter", "Georgia", "Cambria", serif;
  --font-mono: "SF Mono", "Menlo", "Consolas", "Monaco", monospace;

  /* Measure */
  --measure: 70ch;
  --measure-prose: 760px;

  /* DEPTH RAMP, five steps, light -> dark. Shared by the tier diagram on
     /context-layer/ and the AI stage boxes and cost bands on
     /context-layer-notes/.

     Deliberately kept in the WARM family (built on the theme's tan #d0b190 and
     brown #8e7963) rather than remapped into the sage/blue-gray family. In both
     diagrams the ramp is the semantic OPPOSITE of --accent: the warm line is
     "cost that never stops", the blue-gray line is "cost paid once". Recoloring
     the ramp to the accent family would collapse that opposition into one hue.

     Step 5 is the theme brown darkened one notch (#8e7963 -> #7f6c57) so the
     white `.on-dark` labels that sit on it clear 4.5:1 - the theme brown itself
     manages only 4.15:1, as did the gold it replaces. Step 4 is lightened for
     the same reason in the other direction: the dark `.tier-desc` labels that
     sit on it now read at 5.10:1 against --text. */
  --tier-1: #f2e9dd;
  --tier-2: #e2d0b7;
  --tier-3: #d0b190;
  --tier-4: #b09a80;
  --tier-5: #7f6c57;

  /* Per-artifact override: the template emits .artifact--<slug>, so a single
     page can retune a token without a second stylesheet. */
  --lede-measure: 36ch;
}

.artifact--context-layer-notes {
  --lede-measure: 40ch;
}

/* The proposal's lede is two clauses of running prose rather than the
   single short line the 36ch default is cut for. */
.artifact--areveo-i2m-proposal {
  --lede-measure: 46ch;
}

/* ============================================
   Scope roots
   ============================================ */

/* Full-bleed ground. The Artifact template places this as a direct child of
   body, outside the theme's `#content .container`, so the ground runs edge to
   edge and the article centers its own column.

   NOTE: the measure lives on .artifact-container / .container, NOT on .artifact
   itself. Constraining .artifact would box the full-bleed `.section-tinted`
   bands that both existing pages rely on. */
.artifact-wrapper {
  background: var(--bg);
  color: var(--text-body);
}

/* The typographic scale root. Replaces `html { font-size: 17px }`. */
.artifact {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.artifact *,
.artifact *::before,
.artifact *::after {
  box-sizing: border-box;
}

/* ============================================
   Typography defaults

   These give bare HTML inside .artifact sane rendering with no wrapper classes,
   and they re-assert the artifact's own type over the theme and Bootstrap rules
   that target bare `p`, `h1`-`h6`, `a` and `li`. Every rule here is overridden
   by the component rules further down.
   ============================================ */

.artifact h1,
.artifact h2,
.artifact h3,
.artifact h4,
.artifact h5,
.artifact h6 {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--text-heading);
  /* Normal tracking, matching the site. The tightened tracking this replaced
     was a holdover from the serif display face; h1 keeps a touch of it below
     because it is the one heading large enough to need it. */
  letter-spacing: normal;
  /* Explicit. The parent theme uppercases every heading site-wide, which is
     right for nav and section furniture and wrong for long-form reading. */
  text-transform: none;
}

.artifact h1 {
  font-size: clamp(2.4em, 5vw, 3.4em);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

/* 27.2px-30.6px against the 17px scale root, which puts artifact h2 in the
   site's own 28px/30.8px band. Kept in `em` rather than `rem` so it still
   cascades from `.artifact { font-size }` - see rule 3 in the file header. */
.artifact h2 {
  font-size: clamp(1.6em, 2.5vw, 1.8em);
  line-height: 1.2;
  margin: 40px 0 24px;
}

/* The site's section signature: a 170x1px sage rule under the heading, from
   `.line > span` in the parent sheet. There it sits under a centered
   `.main-title h2`; artifact h2s head left-aligned prose, so the rule
   left-aligns with the text it belongs to.

   Spacing is carried entirely by this margin plus the h2's own margin-bottom,
   not by padding on the h2 - `.artifact .section h2` resets that margin, and
   padding would have stacked underneath it. */
.artifact h2::after {
  content: "";
  display: block;
  width: 170px;
  height: 1px;
  background: var(--accent-warm);
  margin: 14px 0 0;
}

.artifact h3 {
  font-size: 1.25em;
  margin: 32px 0 12px;
}

.artifact p {
  font-family: var(--font-sans);
  color: var(--text-body);
  margin: 0 0 1.2em;
  max-width: var(--measure);
}

/* The site's own link pair, from the Customizer inline block: #d0b190 going
   to #8e7963 on hover.

   CONTRAST NOTE. #d0b190 is 2.02:1 on white - well under AA for body text.
   That is the site's existing value, matched here deliberately so artifact
   prose does not read as a different property, and it is why the underline is
   not optional on these links: the underline, not the hue, is what marks them.
   If the site link color is ever revisited, this rule follows it. */
.artifact a {
  color: var(--accent-warm-lift);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(208, 177, 144, 0.4);
  text-decoration-color: color-mix(in srgb, var(--accent-warm-lift) 40%, transparent);
}

.artifact a:hover,
.artifact a:focus {
  color: var(--accent-warm-strong);
  text-decoration-color: currentColor;
}

/* Inherits --font-sans. The serif that used to run here was the last of the
   old artifact aesthetic; the site has no serif anywhere else. --font-serif
   stays defined for opt-in use, but nothing in the defaults reaches for it. */
.artifact em {
  font-style: italic;
}

.artifact strong {
  font-weight: 600;
  color: var(--text);
}

.artifact blockquote {
  font-style: italic;
  border-left: 3px solid var(--accent);
  padding-left: 20px;
  color: var(--text-soft);
  margin: 24px 0;
  max-width: var(--measure);
}

.artifact code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--code-bg);
  color: var(--code-text);
  padding: 2px 6px;
  border-radius: var(--radius);
}

.artifact pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  line-height: 1.5;
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin: 24px 0;
  overflow-x: auto;
}

.artifact pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

.artifact ul,
.artifact ol {
  margin: 0 0 1.2em;
  padding-left: 24px;
  max-width: var(--measure);
}

.artifact li {
  margin-bottom: 0.4em;
  line-height: 1.6;
}

.artifact figure {
  margin: 32px 0;
}

.artifact figcaption {
  font-size: 0.9em;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
  margin-top: 12px;
  max-width: var(--measure);
}

.artifact hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 40px 0;
}

/* ============================================
   Layout

   `width: 100%` with border-box padding keeps a visual gutter at every width
   without a media query: below 760px the column shrinks to the viewport and the
   28px padding becomes the gutter.

   `.container` is supported alongside `.artifact-container` so artifacts
   authored against the standalone template drop in unchanged. At (0,2,0) it
   outranks Bootstrap's `.container` width rules (750/970/1170px), which are
   (0,1,0) - media queries add no specificity.
   ============================================ */

.artifact .artifact-container,
.artifact .container {
  width: 100%;
  max-width: var(--measure-prose);
  margin: 0 auto;
  padding: 0 28px;
}

/* ============================================
   Header - was .site-header
   ============================================ */

/* 58px, not 96: the site's title band already sits directly above this header on
   every artifact page, so the two stacked spaces read as one gap. 96 was the
   standalone template's figure, where nothing preceded the header. The matching cut
   for non-artifact templates is `#content.site-content` in style.css - change one
   and look at the other. The 64px below is untouched; it separates the header from
   the first section, which has no band of its own to lean on. */
.artifact .artifact-header {
  padding: 58px 0 64px;
  border-bottom: 1px solid var(--border);
}

.artifact .eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 24px;
}

.artifact .artifact-header h1 {
  margin: 0 0 24px;
}

.artifact .lede {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.35em;
  line-height: 1.5;
  color: var(--text-soft);
  margin: 0;
  max-width: var(--lede-measure);
}

/* ============================================
   Sections
   ============================================ */

/* 50px matches `.acme-featured-image`, the site's own tinted band. No
   border-bottom: the alternating white/tinted grounds already separate the
   sections, and a hairline on top of that reads as a second system. */
.artifact .section {
  padding: 50px 0;
}

.artifact .section-tinted {
  background: var(--bg-tinted);
}

.artifact .section-label {
  font-family: var(--font-mono);
  font-size: 0.75em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 16px;
}

/* Bottom margin sits below the sage rule, so it is the gap the reader sees
   between the rule and the first paragraph. 24px echoes `.main-title`'s 20px. */
.artifact .section h2 {
  margin: 0 0 24px;
}

.artifact .section h3 {
  margin: 36px 0 12px;
}

.artifact .section p {
  margin: 0 0 18px;
  max-width: var(--measure);
}

.artifact .standfirst {
  font-size: 1.15em;
  line-height: 1.6;
  color: var(--text-soft);
  margin-bottom: 24px !important;
}

/* ============================================
   Lists
   ============================================ */

.artifact .problem-list,
.artifact .agent-list,
.artifact .scope-list,
.artifact .point-list {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  max-width: var(--measure);
}

.artifact .problem-list li,
.artifact .agent-list li,
.artifact .scope-list li,
.artifact .point-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
  line-height: 1.6;
}

.artifact .problem-list li::before,
.artifact .agent-list li::before,
.artifact .scope-list li::before,
.artifact .point-list li::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

/* ============================================
   Cards - .benefit (context-layer) and .claim (notes)

   Same shape, two names. The fill inverts against its band: tinted on the white
   ground, white inside a tinted section. The old sheet used a translucent white
   for both, which is invisible now that --bg is white.
   ============================================ */

.artifact .benefit,
.artifact .claim {
  margin: 28px 0;
  padding: 22px 24px;
  background: var(--bg-tinted);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: var(--measure);
}

.artifact .section-tinted .benefit,
.artifact .section-tinted .claim {
  background: var(--bg);
}

.artifact .benefit h3,
.artifact .claim h3 {
  margin: 0 0 8px;
  font-size: 1.1em;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--accent);
}

.artifact .benefit p,
.artifact .claim p {
  margin: 0;
  font-size: 0.98em;
  line-height: 1.6;
}

.artifact .claim p + p {
  margin-top: 12px;
}

/* Unfinished work: warm border, tagged heading. The border uses the tan fill
   tone; the heading uses the darkened companion, because the tan is unreadable
   as type - see the token note. */
.artifact .claim-wip {
  border-left-color: var(--accent-warm-lift);
}

.artifact .claim-wip h3 {
  color: var(--accent-warm-strong);
}

/* Dark type on the tan fill: 6.80:1. */
.artifact .tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  vertical-align: 0.18em;
  margin-left: 10px;
  padding: 2px 7px;
  border-radius: var(--radius);
  background: var(--accent-warm-lift);
  color: var(--text);
}

/* ============================================
   Build steps
   ============================================ */

.artifact .build-steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 32px 0;
  max-width: none;
}

.artifact .build-steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 56px;
  margin-bottom: 32px;
  max-width: var(--measure);
}

.artifact .build-steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--accent);
  font-weight: 600;
  width: 40px;
}

.artifact .build-steps h3 {
  margin: 0 0 6px;
  font-family: var(--font-sans);
  font-size: 1.05em;
  font-weight: 600;
  color: var(--text);
}

.artifact .build-steps p {
  margin: 0;
  font-size: 0.98em;
  color: var(--text-soft);
}

.artifact .build-note {
  margin-top: 32px;
  padding: 18px 22px;
  background: var(--bg-tinted);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  font-size: 0.98em;
  max-width: var(--measure);
}

.artifact .section-tinted .build-note {
  background: var(--bg);
}

/* ============================================
   Code blocks - .codeblock figure wrapper (notes page)
   ============================================ */

.artifact .codeblock {
  margin: 28px 0;
  max-width: 100%;
}

.artifact .code-label {
  font-family: var(--font-mono);
  font-size: 0.72em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.artifact .codeblock pre {
  margin: 0;
  padding: 20px 22px;
  line-height: 1.55;
}

/* Resets the inline-code treatment from the `.artifact code` rule above. */
.artifact .codeblock pre code {
  font-family: var(--font-mono);
  font-size: 0.8em;
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--code-text);
  white-space: pre;
}

.artifact .codeblock figcaption {
  margin-top: 12px;
}

/* ============================================
   Diagrams (SVG)
   ============================================ */

.artifact .diagram {
  margin: 40px 0;
  max-width: 100%;
}

.artifact .diagram svg {
  width: 100%;
  height: auto;
  background: var(--bg);
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.artifact .diagram figcaption {
  margin-top: 14px;
}

/* COMPLETING THE REPOINT INSIDE THE DIAGRAMS.
   ------------------------------------------------------------------------
   The diagram markup carries the original standalone palette as SVG
   presentation attributes on unclassed <line>, <path> and <rect> elements:
   46 stroke="#2a5f5a" and 7 fill="#2a5f5a" (connector arrows, arrowhead
   markers, box outlines and the two dark "answer" boxes), the five-step gold
   tier ramp, and #ccc / #d8d0bd hairlines from the old cream palette.

   Remapping the tokens alone would leave all of that behind, putting teal
   diagrams and warm-cream rules next to blue-gray section furniture.

   CSS properties beat SVG presentation attributes, so the remap happens here
   rather than by rewriting ~70 attributes across two pages of content. Matching
   on the old literal value keeps it surgical: nothing else in the diagrams
   moves, and re-exporting a source SVG cannot silently reintroduce the old
   palette. */

.artifact .diagram svg [stroke="#2a5f5a"] {
  stroke: var(--accent);
}

.artifact .diagram svg [fill="#2a5f5a"] {
  fill: var(--accent);
}

/* Hairlines and axes from the cream palette. */
.artifact .diagram svg [stroke="#ccc"],
.artifact .diagram svg [stroke="#d8d0bd"] {
  stroke: var(--border);
}

.artifact .diagram svg [stroke="#847d6e"] {
  stroke: var(--text-muted);
}

.artifact .diagram svg [fill="#847d6e"] {
  fill: var(--text-muted);
}

/* The gold tier ramp -> the theme's warm ramp. See the --tier-* token note. */
.artifact .diagram svg [fill="#e8ddc7"] { fill: var(--tier-1); }
.artifact .diagram svg [fill="#d4c8a8"] { fill: var(--tier-2); }
.artifact .diagram svg [fill="#b8a978"] { fill: var(--tier-3); }
.artifact .diagram svg [fill="#a39260"] { fill: var(--tier-4); }
.artifact .diagram svg [fill="#8d7b48"] { fill: var(--tier-5); }
.artifact .diagram svg [stroke="#8d7b48"] { stroke: var(--tier-5); }

/* PRE-EXISTING BUG, FIXED HERE.
   The architecture diagram on /context-layer/ has two <text> elements on the
   dark "AI tools" box that carry fill="#fff" and fill="#e8ddc7" as presentation
   attributes but do NOT carry `.on-dark`. A presentation attribute loses to any
   selector, so `.artifact .arch-title { fill: var(--text) }` was winning and
   painting that label in near-black on a dark fill. Targeting the literal value
   on `text` fixes it without touching the content. The element selector also
   keeps this from colliding with the tier-1 rect rule above, and `fill="#fff"`
   on the many white rects is untouched. */
.artifact .diagram svg text[fill="#fff"] {
  fill: var(--text-on-deep);
}

.artifact .diagram svg text[fill="#e8ddc7"] {
  fill: var(--text-on-deep-soft);
}

/* --------------------------------------------
   SVG text classes.

   These keep px font sizes - SVG text does not participate in the em scale
   above, and the diagrams' viewBox coordinates assume px.
   -------------------------------------------- */

.artifact .diagram-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  fill: var(--accent);
  text-anchor: middle;
}

.artifact .diagram-legend {
  font-family: var(--font-sans);
  font-size: 10px;
  fill: var(--text-muted);
  font-style: italic;
  text-anchor: middle;
}

.artifact .diagram-note {
  font-family: var(--font-sans);
  font-size: 12px;
  fill: var(--text-muted);
  font-style: italic;
}

/* Boxes ---------------------------------------------------------------- */

.artifact .source-box rect,
.artifact .ai-box rect,
.artifact .team-box rect {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 1.2;
}

.artifact .source-box text,
.artifact .ai-box text {
  font-family: var(--font-sans);
  font-size: 13px;
  fill: var(--text);
}

.artifact .team-box text {
  font-family: var(--font-sans);
  font-size: 11px;
  fill: var(--text);
}

/* Not-yet-shipped elements: dashed outline, held back visually */
.artifact .source-box.planned rect,
.artifact .team-box.planned rect {
  stroke-dasharray: 4 3;
  opacity: 0.55;
}

.artifact .source-box.planned text,
.artifact .team-box.planned text {
  opacity: 0.55;
}

.artifact .flow-planned {
  stroke-dasharray: 4 3;
}

/* Server / tier diagram ------------------------------------------------ */

.artifact .server-title {
  font-family: var(--font-sans);
  font-size: 13px;
  fill: var(--text-muted);
  font-style: italic;
}

.artifact .server-sub {
  font-family: var(--font-sans);
  font-size: 12px;
  fill: var(--text-soft);
}

.artifact .tier-text {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  fill: var(--text);
}

.artifact .tier-name {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  fill: var(--text);
  letter-spacing: 0.05em;
}

.artifact .tier-desc {
  font-family: var(--font-sans);
  font-size: 13px;
  fill: var(--text);
}

.artifact .tier-meta {
  font-family: var(--font-sans);
  font-size: 11px;
  fill: var(--text-soft);
  font-style: italic;
}

.artifact .depth-arrow {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--text-muted);
  letter-spacing: 0.1em;
}

/* Steps ---------------------------------------------------------------- */

.artifact .step-num {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: var(--accent);
  font-weight: 700;
}

.artifact .step-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  fill: var(--text);
}

.artifact .step-detail {
  font-family: var(--font-sans);
  font-size: 12px;
  fill: var(--text-soft);
}

.artifact .step-code {
  font-family: var(--font-mono);
  font-size: 13px;
  fill: var(--accent);
  font-weight: 600;
}

/* Architecture diagram ------------------------------------------------- */

.artifact .arch-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  fill: var(--text);
}

.artifact .arch-title-sm {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  fill: var(--text);
}

.artifact .arch-sub {
  font-family: var(--font-sans);
  font-size: 12px;
  fill: var(--text-muted);
  font-style: italic;
}

.artifact .arch-detail {
  font-family: var(--font-sans);
  font-size: 12px;
  fill: var(--text-soft);
}

.artifact .arch-detail-em {
  font-family: var(--font-sans);
  font-size: 12px;
  fill: var(--accent);
  font-weight: 600;
}

/* Plot / chart (notes page) -------------------------------------------- */

.artifact .axis-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  fill: var(--text-muted);
}

.artifact .plot-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  fill: var(--text);
}

.artifact .plot-note {
  font-family: var(--font-sans);
  font-size: 11px;
  fill: var(--text-soft);
  font-style: italic;
}

/* Stage boxes (notes page) --------------------------------------------- */

.artifact .stage-box rect,
.artifact .client-box rect {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 1.4;
}

/* The AI stages carry the warm ramp. These must be CSS rather than fill=""
   attributes, which the rule above would otherwise win against. */
.artifact .stage-box.ai-1 rect { fill: var(--tier-3); }
.artifact .stage-box.ai-2 rect { fill: var(--tier-4); }
.artifact .stage-box.ai-3 rect { fill: var(--tier-5); }

.artifact .stage-box text {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  fill: var(--text);
  text-anchor: middle;
}

.artifact .client-box text {
  font-family: var(--font-sans);
  font-size: 13px;
  fill: var(--text);
  text-anchor: middle;
}

/* Text sitting on a dark fill. A presentation fill="" attribute loses to the
   class rules above, so the override has to come from CSS as well. */
.artifact .tier-name.on-dark,
.artifact .tier-text.on-dark,
.artifact .tier-desc.on-dark,
.artifact .step-num.on-dark,
.artifact .step-title.on-dark,
.artifact .stage-box.on-dark text,
.artifact .arch-title.on-dark {
  fill: var(--text-on-deep);
}

.artifact .tier-meta.on-dark,
.artifact .step-detail.on-dark {
  fill: var(--text-on-deep-soft);
}

/* ============================================
   Footer - was .site-footer
   ============================================ */

.artifact .artifact-footer {
  padding: 40px 0;
  text-align: center;
  font-size: 0.85em;
  color: var(--text-muted);
}

.artifact .artifact-footer p {
  margin: 0 0 6px;
  max-width: none;
  color: var(--text-muted);
}

.artifact .artifact-footer p:last-child {
  margin-bottom: 0;
}

/* The footer keeps --accent rather than taking the site's tan. This is 0.85em
   type, and the tan is 2.02:1 - readable enough as a body link carried by its
   underline, not as small print. The decoration-color has to be restated with
   it, or the link inherits the tan underline from `.artifact a` and renders
   blue-gray text under a tan rule. */
.artifact .artifact-footer a {
  color: var(--accent);
  text-decoration-color: rgba(83, 108, 123, 0.4);
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.artifact .artifact-footer a:hover,
.artifact .artifact-footer a:focus {
  color: var(--accent-warm-strong);
  text-decoration-color: currentColor;
}

/* ============================================
   Proposal patterns (2026-09-19)

   Structural vocabulary for long-form proposals, ported from the i2M
   proposal's standalone stylesheet. That sheet already spoke in tokens
   (--accent, --warn, --ok, --border, --measure), so the port is mostly
   three mechanical changes plus two judgment calls:

   MECHANICAL
   1. Every selector gains the `.artifact` prefix (governing rule 1).
   2. Every `rem` becomes `em` (governing rule 3). Where the original
      nested one sized element inside another - `.sub` inside
      `.est-check-label`, `.phase-num` inside `.gantt-label`, `th` inside
      `table` - the em value is the QUOTIENT, not the original number,
      because em compounds and rem does not. Those three are marked below.
   3. Panel backgrounds were `rgba(255,255,255,0.4-0.55)`, a translucent
      lift off the old cream ground. On the white --bg that reads as
      nothing at all, so panels take solid `var(--bg)` and rely on their
      border. This is also what makes them read as raised inside a
      `.section-tinted` band, which is where half of them sit.

   JUDGMENT
   4. `.phase-header` was `#1f1d1a` with light text. Flipped to
      `var(--bg-tinted)` with `var(--text-heading)`, keeping the page in
      the light palette family rather than punching three dark bands
      through it.
   5. Display type that was `--font-serif` (`.card h3`, `.phase-header h3`,
      `.est-base .title`) is now the inherited Poppins 500. No serif in
      prose is the whole point of the 2026-09-12 repoint.

   The status tokens these lean on - --ok/--warn/--stop and their tints -
   were added to this sheet FROM this proposal's palette, so they land
   back on their original values.
   ============================================ */

/* Hero meta strip -------------------------------------------------------
   The label/value row under the lede. Sits inside .artifact-header, which
   already supplies the padding and the bottom rule. */
.artifact .hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.75em;
  letter-spacing: 0.05em;
}

.artifact .hero-meta > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 0.933em, not 0.7em: nested inside .hero-meta's 0.75em. 0.7/0.75. */
.artifact .hero-meta .label {
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.933em;
}

.artifact .hero-meta .value {
  color: var(--text-heading);
  font-weight: 500;
}

/* Status callouts -------------------------------------------------------
   Base is the primary accent; .ok/.warn/.stop take the status tokens.
   Nothing in the i2M proposal uses these yet - section 08 states its two
   risks as plain prose - but they are the sheet's status vocabulary and
   the print rules below assume they exist. */
.artifact .callout {
  padding: 22px 26px;
  background: var(--bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: var(--measure);
  margin: 28px 0;
}

.artifact .callout h3 {
  color: var(--accent);
  font-size: 1.05em;
  margin: 0 0 8px;
}

.artifact .callout p {
  color: var(--text-body);
}

.artifact .callout p:last-child {
  margin-bottom: 0;
}

.artifact .callout.ok {
  border-left-color: var(--ok);
  background: var(--ok-tint);
}

.artifact .callout.ok h3 {
  color: var(--ok);
}

.artifact .callout.warn {
  border-left-color: var(--warn);
  background: var(--warn-tint);
}

.artifact .callout.warn h3 {
  color: var(--warn);
}

.artifact .callout.stop {
  border-left-color: var(--stop);
  background: var(--stop-tint);
}

.artifact .callout.stop h3 {
  color: var(--stop);
}

/* Phase cards ----------------------------------------------------------- */
.artifact .phase-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin: 24px 0;
  overflow: hidden;
  background: var(--bg);
}

.artifact .phase-header {
  background: var(--bg-tinted);
  padding: 22px 28px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}

.artifact .phase-header h3 {
  color: var(--text-heading);
  font-size: 1.3em;
  margin: 0;
}

.artifact .phase-header .phase-weeks {
  font-family: var(--font-mono);
  font-size: 0.72em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

.artifact .phase-body {
  padding: 28px;
}

.artifact .phase-body p:not(:last-child) {
  margin-bottom: 16px;
}

.artifact .phase-sessions {
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.artifact .phase-sessions li {
  padding: 6px 0 6px 20px;
  position: relative;
  font-size: 0.93em;
  line-height: 1.5;
}

.artifact .phase-sessions li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 10px;
  height: 1px;
  background: var(--accent);
}

.artifact .phase-components {
  margin: 16px 0;
  padding: 0;
  list-style: none;
  counter-reset: comp;
}

.artifact .phase-components li {
  counter-increment: comp;
  padding: 10px 0 10px 42px;
  position: relative;
  font-size: 0.93em;
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
}

.artifact .phase-components li:last-child {
  border-bottom: none;
}

/* 0.86em, not 0.8em: nested inside the li's 0.93em. 0.8/0.93. */
.artifact .phase-components li::before {
  content: counter(comp, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.86em;
  font-weight: 600;
  color: var(--accent);
  position: absolute;
  left: 0;
  top: 12px;
}

.artifact .phase-components li strong {
  color: var(--text);
  display: block;
  margin-bottom: 2px;
}

.artifact .phase-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.artifact .phase-produces .label,
.artifact .phase-success .label {
  font-family: var(--font-mono);
  font-size: 0.7em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}

.artifact .phase-produces .label {
  color: var(--text-muted);
}

.artifact .phase-produces p {
  font-size: 0.93em;
  color: var(--text-soft);
  margin: 0;
}

/* Same treatment as .callout.warn, inline inside the card. */
.artifact .phase-success {
  padding: 14px 18px;
  background: var(--warn-tint);
  border-left: 3px solid var(--warn);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.artifact .phase-success .label {
  color: var(--warn);
}

.artifact .phase-success p {
  font-size: 0.9em;
  color: var(--text);
  line-height: 1.55;
  font-style: italic;
  margin: 0;
}

/* Two-column comparison ------------------------------------------------- */
.artifact .vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0;
}

.artifact .vs-col {
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
}

.artifact .vs-col.in {
  border-left: 3px solid var(--accent);
}

.artifact .vs-col.out {
  border-left: 3px solid var(--accent-warm);
}

.artifact .vs-col h3 {
  font-family: var(--font-mono);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

.artifact .vs-col.in h3 {
  color: var(--accent);
}

/* The sage --accent-warm is 3.4:1 on white, which clears the 3:1 bar for
   this heading only because it is 600-weight. The list marks below use it
   as a mark, not as text. */
.artifact .vs-col.out h3 {
  color: var(--accent-warm-strong);
}

.artifact .vs-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.artifact .vs-col li {
  padding: 7px 0;
  font-size: 0.93em;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.artifact .vs-col.in li::before {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 1.5px;
  background: var(--accent);
  margin-top: 0.75em;
}

/* 1.075em, not 1em: nested inside the li's 0.93em. 1/0.93. */
.artifact .vs-col.out li::before {
  content: "\00d7";
  flex-shrink: 0;
  color: var(--accent-warm);
  font-family: var(--font-mono);
  font-size: 1.075em;
  line-height: 1.4;
  width: 12px;
  font-weight: 500;
}

/* Outcome cards --------------------------------------------------------- */
.artifact .cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0;
}

.artifact .card {
  padding: 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.artifact .card h3 {
  color: var(--text-heading);
  font-size: 1.1em;
  margin: 0 0 10px;
}

.artifact .card p {
  font-size: 0.95em;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0;
}

/* Cost estimator --------------------------------------------------------
   Markup and behavior are unchanged from the standalone document; the JS
   binds `#estimator input` and writes `#est-total`, neither of which this
   sheet touches. */
.artifact .estimator {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  padding: 32px;
  margin: 32px 0;
}

.artifact .est-base {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.artifact .est-base .label {
  font-family: var(--font-mono);
  font-size: 0.75em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.artifact .est-base .title {
  font-size: 1.15em;
  color: var(--text-heading);
  font-weight: 500;
}

.artifact .est-base .fee {
  font-family: var(--font-mono);
  font-size: 1.5em;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.artifact .est-section {
  margin-top: 24px;
}

.artifact .est-section-label {
  font-family: var(--font-mono);
  font-size: 0.7em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-weight: 600;
}

.artifact .est-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}

.artifact .est-row:last-child {
  border-bottom: none;
}

.artifact .est-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.artifact .est-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
}

.artifact .est-check-label {
  flex: 1;
  font-size: 0.95em;
  line-height: 1.5;
}

/* 0.895em, not 0.85em: nested inside .est-check-label's 0.95em. 0.85/0.95. */
.artifact .est-check-label .sub {
  display: block;
  font-size: 0.895em;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.5;
}

.artifact .est-fee {
  font-family: var(--font-mono);
  font-size: 0.95em;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.artifact .est-fee.included {
  color: var(--text-muted);
  font-weight: 400;
}

/* The vendor-evaluation caveat. Same treatment as .callout.warn, indented
   to sit under its checkbox row. */
.artifact .est-note {
  padding: 10px 14px;
  margin: 8px 0 0 30px;
  background: var(--warn-tint);
  border-left: 2px solid var(--warn);
  font-size: 0.85em;
  color: var(--text);
  border-radius: 0 var(--radius) var(--radius) 0;
  line-height: 1.5;
}

.artifact .est-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 2px solid var(--text);
}

.artifact .est-total .label {
  font-family: var(--font-mono);
  font-size: 0.85em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 600;
}

.artifact .est-total .amount {
  font-family: var(--font-mono);
  font-size: 1.75em;
  font-weight: 600;
  color: var(--text);
}

.artifact .est-terms {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--border);
  font-size: 0.8em;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Gantt chart -----------------------------------------------------------
   Eight week columns plus a label gutter. The bar colors are categorical,
   not a ramp: --accent for discovery, --accent-warm for authoring,
   --accent-warm-lift for review. */
.artifact .gantt {
  margin: 28px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
}

.artifact .gantt-header,
.artifact .gantt-row {
  display: grid;
  grid-template-columns: 180px repeat(8, 1fr);
  align-items: center;
}

.artifact .gantt-header {
  background: var(--bg-tinted);
  border-bottom: 1px solid var(--border);
}

.artifact .gantt-header .gantt-cell {
  padding: 12px 8px;
  font-family: var(--font-mono);
  font-size: 0.7em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-right: 1px solid var(--border);
  text-align: center;
  font-weight: 600;
}

.artifact .gantt-header .gantt-cell:first-child {
  text-align: left;
  padding-left: 16px;
}

.artifact .gantt-header .gantt-cell:last-child {
  border-right: none;
}

.artifact .gantt-row {
  border-bottom: 1px solid var(--border);
  min-height: 52px;
}

.artifact .gantt-row:last-child {
  border-bottom: none;
}

.artifact .gantt-label {
  padding: 14px 16px;
  font-size: 0.9em;
  color: var(--text-body);
  border-right: 1px solid var(--border);
}

/* 0.756em, not 0.68em: nested inside .gantt-label's 0.9em. 0.68/0.9. */
.artifact .gantt-label .phase-num {
  font-family: var(--font-mono);
  font-size: 0.756em;
  color: var(--accent);
  display: block;
  margin-bottom: 3px;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.artifact .gantt-week {
  height: 100%;
  border-right: 1px solid var(--border);
  position: relative;
  min-height: 52px;
}

.artifact .gantt-week:last-child {
  border-right: none;
}

.artifact .gantt-bar {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 3px;
  right: 3px;
  background: var(--accent);
  border-radius: 2px;
}

.artifact .gantt-bar.warm {
  background: var(--accent-warm);
}

.artifact .gantt-bar.review {
  background: var(--accent-warm-lift);
}

.artifact .gantt-milestone {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: var(--text-heading);
  border-radius: 50%;
  border: 2px solid var(--bg);
}

.artifact .gantt-milestone-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.62em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.artifact .gantt-caption {
  font-size: 0.87em;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 16px;
  max-width: var(--measure);
  line-height: 1.55;
}

/* Numbered steps -------------------------------------------------------- */
.artifact ol.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 28px 0;
  max-width: var(--measure);
}

.artifact ol.steps > li {
  counter-increment: step;
  padding-left: 48px;
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.artifact ol.steps > li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.artifact ol.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.95em;
  font-weight: 600;
  color: var(--accent);
  position: absolute;
  left: 0;
  top: 2px;
}

.artifact ol.steps .owner {
  font-family: var(--font-mono);
  font-size: 0.68em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 8px;
  display: inline-block;
  padding: 3px 10px;
  background: var(--bg-tinted);
  border-radius: 3px;
  margin-right: 8px;
}

.artifact ol.steps li strong {
  color: var(--text);
  font-weight: 600;
}

/* Asides ----------------------------------------------------------------
   A quieter paragraph than body copy: the "raw session notes are available
   on request" line in Phase 1, the vendor-vetting note in section 03.
   Replaces two inline styles that sized themselves in rem and so escaped
   the .artifact em scale entirely. */
.artifact .aside-note {
  font-size: 0.9em;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.55;
  max-width: var(--measure);
}

/* Chips ----------------------------------------------------------------- */
.artifact .chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  background: var(--bg-tinted);
  color: var(--text-soft);
  border: 1px solid var(--border);
  margin-right: 6px;
  font-weight: 600;
}

/* Tables ----------------------------------------------------------------
   Bare `table` inside .artifact. `border-radius` with `border-collapse:
   collapse` does not clip the corner cells on its own, hence the explicit
   corner radii on the first and last header cells. */
.artifact table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.95em;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

/* 0.737em, not 0.7em: nested inside the table's 0.95em. 0.7/0.95. */
.artifact thead th {
  font-family: var(--font-mono);
  font-size: 0.737em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 16px;
  background: var(--bg-tinted);
  border-bottom: 1px solid var(--border);
  color: var(--text-soft);
}

.artifact thead th:first-child {
  border-top-left-radius: var(--radius);
}

.artifact thead th:last-child {
  border-top-right-radius: var(--radius);
}

.artifact tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.5;
  color: var(--text-body);
}

.artifact tbody tr:last-child td {
  border-bottom: none;
}

/* "Confirmed" markers in the §01 and §07 tables. --ok, not --accent-warm:
   this is 0.737em uppercase mono, and the sage is 3.4:1 on white, under
   the 4.5:1 small-text bar. --ok is the same semantic (verified) at
   6.4:1, and it is the token this sheet already carries for the purpose. */
.artifact tbody td.confirmed {
  font-family: var(--font-mono);
  font-size: 0.737em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ok);
  white-space: nowrap;
}

/* ============================================
   Responsive

   The artifact column is 760px wide with border-box padding, so it is already
   identical at Bootstrap's 1200px and 992px breakpoints and becomes fluid on
   its own below 760px. The two steps below are the original page's, with the
   base font-size step moved from `html` to `.artifact`.
   ============================================ */

@media (max-width: 720px) {
  .artifact {
    font-size: 16px;
  }

  .artifact .artifact-header {
    padding: 64px 0 40px;
  }

  .artifact .section {
    padding: 40px 0;
  }

  .artifact .build-steps > li {
    padding-left: 48px;
  }

  .artifact .diagram svg {
    padding: 12px;
  }

  .artifact .codeblock pre {
    padding: 16px 14px;
  }

  .artifact .codeblock pre code {
    font-size: 0.74em;
  }
}

@media (max-width: 500px) {
  .artifact .artifact-container,
  .artifact .container {
    padding: 0 20px;
  }

  .artifact .lede {
    font-size: 1.15em;
  }
}
/* ============================================
   Responsive - proposal patterns

   Placed after the two blocks above rather than merged into them so the
   proposal vocabulary stays in one contiguous run of the sheet. Nothing
   here sets a property those blocks set, so the later position changes
   no outcome.
   ============================================ */

@media (max-width: 720px) {
  /* Both two-up grids collapse. */
  .artifact .vs,
  .artifact .cards {
    grid-template-columns: 1fr;
  }

  .artifact .hero-meta {
    gap: 20px;
  }

  .artifact .phase-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .artifact .phase-body {
    padding: 22px 20px;
  }

  .artifact .estimator {
    padding: 24px 20px;
  }

  .artifact .est-base {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .artifact .est-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .artifact .est-fee {
    align-self: flex-end;
  }

  .artifact .est-total .amount {
    font-size: 1.4em;
  }

  /* The gantt keeps its eight columns and scrolls sideways instead of
     collapsing - a week grid with fewer than eight columns is not a week
     grid. min-width holds the columns above finger width. */
  .artifact .gantt {
    overflow-x: auto;
  }

  .artifact .gantt-header,
  .artifact .gantt-row {
    grid-template-columns: 110px repeat(8, minmax(36px, 1fr));
    min-width: 460px;
  }

  .artifact .gantt-label {
    padding: 12px 8px;
    font-size: 0.82em;
  }

  .artifact .gantt-header .gantt-cell {
    padding: 12px 4px;
    font-size: 0.65em;
    letter-spacing: 0.08em;
  }

  .artifact ol.steps > li {
    padding-left: 40px;
  }

  .artifact table {
    display: block;
    overflow-x: auto;
  }
}

/* ============================================
   Print

   Ported from the standalone proposal. The original's job was to strip a
   dark ground and three dark card headers; this palette is already light,
   so what is left is flattening the panels to a hairline border, keeping
   the two tinted callout families legible in grayscale, and stopping
   cards and sections from breaking across pages.
   ============================================ */

@media print {
  .artifact-wrapper,
  .artifact {
    background: var(--bg);
    color: var(--text);
  }

  .artifact .section,
  .artifact .artifact-header {
    padding: 32px 0;
    page-break-inside: avoid;
  }

  .artifact .section-tinted {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }

  .artifact .callout,
  .artifact .estimator,
  .artifact .phase-card,
  .artifact .card,
  .artifact .vs-col,
  .artifact .gantt {
    background: var(--bg);
    border: 1px solid var(--border);
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .artifact .phase-header {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }

  /* The two tinted families survive as a light wash - they carry meaning
     (caveat / status) that a flat white would erase. */
  .artifact .est-note,
  .artifact .phase-success,
  .artifact .callout.warn {
    background: var(--warn-tint);
  }

  .artifact .gantt-header {
    background: var(--bg-tinted);
  }

  /* The only literal values in this sheet, and deliberately so. The three
     bar hues - blue-gray, sage, tan - are close enough in luminance that a
     grayscale printer collapses them into one bar. This is a neutral ramp
     for a monochrome medium, not a palette decision, so there is no token
     it should be reaching for. */
  .artifact .gantt-bar {
    background: #555555;
  }

  .artifact .gantt-bar.warm {
    background: #888888;
  }

  .artifact .gantt-bar.review {
    background: #bbbbbb;
  }

  .artifact .artifact-footer {
    background: var(--bg);
    color: var(--text-muted);
    border-top: 1px solid var(--border);
  }
}

/* ============================================
   Token discipline (/token-savings/, 2026-09-25)

   Folded in from the page's former standalone styles.css, matching how
   the /context-layer/ pages' diagram classes live in this sheet. Every
   color resolves through a token; SVG marks are colored by class because
   presentation attributes cannot take var().

   Diagram color logic, shared across the page's four diagrams:
     --accent (blue-gray)  structure, and tokens actually spent
     --accent-warm (sage)  the controlled or cheaper path
     --text-muted          connectors in the secondary diagram
     --border              hairlines and dividers
   ============================================ */

/* --------------------------------------------
   Open-problems callout (section 06)
   -------------------------------------------- */

.artifact .open-problems .chip {
  margin-bottom: 12px;
}

.artifact .open-problems .point-list {
  margin: 14px 0 0;
}

.artifact .open-problems .point-list li {
  font-size: 0.98em;
}

.artifact .open-problems .point-list li:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------
   Diagram shapes
   -------------------------------------------- */

.artifact .diagram .dial-panel {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 1.4;
}

.artifact .diagram .dial-panel.heavy {
  stroke-width: 2;
}

.artifact .diagram .hairline {
  stroke: var(--border);
  stroke-width: 1;
}

.artifact .diagram .hairline.dashed {
  stroke-dasharray: 3 4;
}

.artifact .diagram .flow {
  stroke: var(--accent);
  stroke-width: 1.5;
}

.artifact .diagram .flow.muted {
  stroke: var(--text-muted);
  stroke-width: 1.2;
}

.artifact .diagram .arrowhead {
  fill: var(--accent);
}

.artifact .diagram .arrowhead.muted {
  fill: var(--text-muted);
}

/* Lever ticks: the things you can pull, so they take the secondary accent. */
.artifact .diagram .lever-tick {
  stroke: var(--accent-warm);
  stroke-width: 1.5;
}

/* Cost pills: outlined on the cheap side, filled on the expensive side. */
.artifact .diagram .cost-pill {
  fill: var(--bg-tinted);
  stroke: var(--border);
  stroke-width: 1;
}

.artifact .diagram .cost-pill.spent {
  fill: var(--accent);
  stroke: none;
}

/* Cost bars (section 03): full spend in the primary, controlled paths in sage. */
.artifact .diagram .cost-bar {
  fill: var(--accent);
}

.artifact .diagram .cost-bar.controlled {
  fill: var(--accent-warm);
}

/* Prose vs schema (section 04). The prose lines are filler texture, so they
   sit back in a translucent muted tone rather than taking an accent. */
.artifact .diagram .prose-line rect {
  fill: var(--text-muted);
  fill-opacity: 0.3;
}

.artifact .diagram .schema-key rect {
  fill: var(--accent);
}

.artifact .diagram .schema-value rect {
  fill: var(--accent-warm);
}

/* Paid AI pass (section 05). artifact.css's .stage-box.ai-* modifiers carry
   the warm tier ramp; this page keeps to the blue-gray/sage pair instead.
   Label color comes from the shared .stage-box.on-dark rule. */
.artifact .diagram .stage-box.paid rect {
  fill: var(--accent);
}

/* --------------------------------------------
   Diagram text

   The two-dial panel's 900-wide viewBox renders smaller than the 800-wide
   siblings, so lever text runs a size up to land at the same apparent size.
   px sizing, as with every SVG text class in artifact.css.
   -------------------------------------------- */

.artifact .diagram .lever {
  font-family: var(--font-sans);
  font-size: 14px;
  fill: var(--text-soft);
}

.artifact .diagram .cost-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  fill: var(--text);
  text-anchor: middle;
}

.artifact .diagram .cost-label.on-dark {
  fill: var(--text-on-deep);
}