/* page.css — page-local rules, assembled from parts/*.css. Semantic tokens only. */

/* ---- bu-built.css ---- */
.bu-lead { background: var(--color-bg-surface); border: 1px solid var(--color-border); padding: var(--spacing-xl); margin-top: var(--spacing-lg); }
.bu-lead__kicker, .bu-card__kicker { font: 600 13px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-fg-muted); margin: 0 0 var(--spacing-xs); }
.bu-lead h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--type-h2); line-height: 1.15; margin: 0 0 var(--spacing-md); color: var(--color-fg); }
.bu-lead__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-xl); }
.bu-list { margin: 0; padding-left: 1.1em; }
.bu-list li { margin-bottom: var(--spacing-xs); max-width: 60ch; }
.bu-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--spacing-sm); align-items: center; margin: var(--spacing-lg) 0 0; }
.bu-flow__col { display: flex; flex-wrap: wrap; gap: 6px; }
.bu-flow__col--out { flex-direction: column; flex-wrap: nowrap; }
.bu-chip { border: 1px solid var(--color-border-strong); padding: 6px 10px; font-size: 14px; color: var(--color-fg); background: var(--color-bg); }
.bu-core { border: 1px solid var(--color-bg-inverse); background: var(--color-bg-inverse); color: var(--color-fg-on-inverse); padding: var(--spacing-md); text-align: center; font-family: var(--font-display); font-size: 24px; }
.bu-core small { display: block; font: 400 13px var(--font-body); margin-top: 2px; }
.bu-arrow { font-size: 22px; color: var(--color-fg-muted); text-align: center; }
.bu-out { border: 1px solid var(--color-accent); padding: 6px 10px; font-size: 14px; color: var(--color-fg); background: var(--color-bg); }
.bu-flow__cap { margin: var(--spacing-xs) 0 0; font-size: 14px; color: var(--color-fg-muted); }
.bu-here { margin: var(--spacing-lg) 0 0; padding-top: var(--spacing-md); border-top: 1px solid var(--color-border); }
.bu-here strong { color: var(--color-fg); }
.bu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-lg); margin-top: var(--spacing-lg); }
.bu-card { background: var(--color-bg-surface); border: 1px solid var(--color-border); padding: var(--spacing-lg); }
.bu-card h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--type-h3); line-height: 1.2; margin: 0 0 var(--spacing-sm); color: var(--color-fg); }
.bu-card dl { margin: 0; }
.bu-card dt { font: 600 13px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-fg-muted); margin-top: var(--spacing-sm); }
.bu-card dd { margin: 2px 0 0; font-size: 15px; line-height: 1.5; color: var(--color-fg); }
.bu-tech { margin: var(--spacing-sm) 0 0; font-size: 14px; color: var(--color-fg-muted); }
.bu-note { margin: var(--spacing-lg) 0 0; font-size: 14px; color: var(--color-fg-muted); max-width: 70ch; }
@media (max-width: 900px) {
  .bu-lead__body { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-md); }
  .bu-flow { grid-template-columns: minmax(0, 1fr); }
  .bu-arrow { transform: rotate(90deg); }
}
@media (max-width: 700px) {
  .bu-grid { grid-template-columns: minmax(0, 1fr); }
  .bu-lead { padding: var(--spacing-md); }
  .bu-card { padding: var(--spacing-md); }
}


/* ---- bu-fit.css ---- */
.fr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-lg); margin-top: var(--spacing-xl); }
.fr-card { background: var(--color-bg-surface); border: 1px solid var(--color-border); padding: var(--spacing-lg); }
.fr-card h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--type-h3); margin: 0 0 var(--spacing-sm); color: var(--color-fg); }
.fr-contact { margin-top: var(--spacing-md); }
@media (max-width: 700px) { .fr-grid { grid-template-columns: minmax(0, 1fr); } .fr-card { padding: var(--spacing-md); } }
.footer-contact { margin: 0; font-size: 15px; color: var(--color-fg-on-inverse-soft); }
.footer-contact a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }


/* ---- copy.css ---- */
/* Body links on light grounds: the pack's quiet link colour, underlined so colour is not the only cue. */
.cp-link {
  color: var(--color-accent-secondary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.cp-link:hover { text-decoration-thickness: 2px; }

.cp-status, .cp-fit { margin-top: var(--spacing-xl); }
.cp-pair { gap: var(--spacing-lg); margin-top: var(--spacing-md); }
.cp-pair .card-kicker { margin-bottom: var(--spacing-xs, 4px); }
/* Numerals in lists: carry them in ink. */
.cp-fit .lineup-n, .cp-status .lineup-n { color: var(--color-fg); }
/* Footer column heading is an h2 for heading order; same look as the system's .footer-col h4. */
.footer-col h2.cp-footer-h {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-fg-on-inverse-muted);
  margin-bottom: 16px;
  font-weight: 500;
}
/* Footer: cream band, text at full strength (components.css fades it with opacity, which fails contrast). */
.footer-tag, .footer-bottom { opacity: 1; color: var(--color-fg-on-inverse-muted); }
.footer-col a { opacity: 1; }
.footer-brand-row { gap: 12px; }
.footer-brand-row .mark { flex: none; width: 28px; height: 28px; }
.footer-brand-row .word { margin-left: 0; font-family: var(--font-display); font-size: 26px; }
.footer-disclaimer { font-size: 14px; line-height: 1.6; max-width: 60ch; margin: 0 0 var(--spacing-lg); color: var(--color-fg-on-inverse-soft); }
.footer-bottom { flex-wrap: wrap; gap: 8px 24px; }

/* status: compact today-vs-finished table */
.cp-table { width: 100%; margin-top: var(--spacing-lg); border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.cp-table th, .cp-table td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--color-border); }
.cp-table thead th { font-size: var(--type-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-fg-muted); }
.cp-table tbody th { font-family: var(--font-display); font-size: 17px; white-space: nowrap; }
.cp-state { display: block; margin-top: 2px; font: 500 13px var(--font-body); color: var(--color-fg-muted); white-space: normal; }
.cp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 720px) {
  .cp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cp-table, .cp-table tbody, .cp-table tr, .cp-table th, .cp-table td { display: block; }
  .cp-table td { padding: 4px 0; border: 0; }
  .cp-table td::before { display: block; font: 700 13px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-fg-muted); }
  .cp-table td:nth-of-type(1)::before { content: "Today"; }
  .cp-table td:nth-of-type(2)::before { content: "Finished state"; }
  .cp-table tbody th { border-bottom: 0; padding: 14px 0 4px; }
  .cp-table tr { border-bottom: 1px solid var(--color-border); padding-bottom: 12px; }
}

@media (max-width: 600px) {
  .cp-table tbody tr { display: block; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--color-border); background: var(--color-bg-surface); }
  .cp-table tbody th { padding: 0 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
  .cp-table .cp-state { margin: 0; }
  .cp-table td { font-size: 15px; padding: 2px 0; }
  .cp-table td::before { display: inline; margin-right: 6px; }
  .cp-table td:nth-of-type(2) { color: var(--color-fg-muted); }
}

/* Gilchrist control voice: components.css loads after tokens.css and sets the display face on .btn, so restate it here. */
.btn { font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0.08em; min-height: 44px; }


/* ---- fit.css ---- */
.cp-fit .lineup-item { display: block; }
.cp-fit .lineup-item > summary {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 20px;
  align-items: baseline;
  cursor: pointer;
  list-style: none;
}
.cp-fit .lineup-item > summary::-webkit-details-marker { display: none; }
.cp-fit .lineup-item > p { margin-left: 66px; }
.cp-fit .lineup-item > summary:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 4px; }
@media (max-width: 600px) {
  .cp-fit .lineup-item { padding: 0; }
  .cp-fit .lineup-item > summary {
    grid-template-columns: 32px 1fr 24px;
    gap: 10px;
    align-items: center;
    min-height: 48px;
    padding: 8px 0;
  }
  .cp-fit .lineup-item > summary::after { content: "+"; font-size: 22px; color: var(--color-fg-muted); text-align: center; }
  .cp-fit .lineup-item[open] > summary::after { content: "\2212"; }
  .cp-fit .lineup-title { font-size: 16px; margin-bottom: 0; }
  .cp-fit .lineup-item > p { margin: 0 0 14px 42px; }
  .cp-fit .lineup-item:first-child { padding-top: 0; }
  .lineup-foot { margin-top: 20px; padding-top: 16px; }
}


/* ---- hero.css ---- */
/* hero: text only (the point-field canvas was removed 2026-10-03) */
.page-hero .hero-stat .hero-stat__src { margin: 4px 0 0; font-size: var(--type-caption); line-height: 1.4; color: var(--color-fg-muted); }
@media (max-width: 600px) {
  .page-hero { padding: var(--spacing-lg) 0 var(--spacing-lg); }
  .page-hero .hero-eyebrow { margin-bottom: 12px; }
  .page-hero h1 { font-size: 34px; line-height: 1.08; margin-bottom: 14px; }
  .page-hero .hero-sub { font-size: 17px; margin-bottom: 18px; }
  .page-hero .hero-grid { gap: 20px; }
  .page-hero .hero-cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .page-hero .hero-cta-row .btn { min-height: 44px; padding: 0 12px; justify-content: center; font-size: 13px; letter-spacing: 0.08em; }
  .page-hero .hero-cta-row .btn:first-child { grid-column: 1 / -1; min-height: 48px; justify-content: space-between; padding: 0 20px; }
  .page-hero .hero-grid > * { min-width: 0; }
  .page-hero .hero-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
  .page-hero .hero-side .hero-stat:first-child, .page-hero .hero-side .hero-stat:last-child { grid-column: 1 / -1; }
  .page-hero .hero-stat { padding-top: 10px; }
  .page-hero .hero-stat .label { font-size: 13px; }
}


/* ---- id-ideas.css ---- */
.id-ideas { margin-top: var(--spacing-lg); }
.id-group + .id-group { margin-top: var(--spacing-lg); }
.id-group__title { margin: 0; font-family: var(--font-display); font-size: var(--type-h3); font-weight: 400; color: var(--color-fg); }
.id-group__sub { margin: 2px 0 var(--spacing-sm); color: var(--color-fg-muted); font-size: 15px; }
.id-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--spacing-sm); }
.id-card { margin: 0; padding: 0; border: 1px solid var(--color-border); background: var(--color-bg-surface); }
.id-card--built { border-color: var(--color-border-strong); }
.id-card > details { display: flex; flex-direction: column; gap: 6px; padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md); height: 100%; box-sizing: border-box; }
.id-card > details > summary { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0; padding: 0; }
.id-card > details > summary:hover { background: none; }
.id-card__name { margin: 0; font-family: var(--font-body); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--color-fg); }
.id-card__line, .id-card__why { margin: 0; font-size: 15px; line-height: 1.45; color: var(--color-fg); }
.id-card__line { display: block; }
.id-card__why { color: var(--color-fg-muted); }
.id-card__why strong { color: var(--color-fg); font-weight: 600; }
.id-card__meta { margin: auto 0 0; padding-top: 2px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; line-height: 1.3; }
.id-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--color-fg); font-weight: 500; }
.id-chip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--color-gold-line); flex: none; }
.id-chip--w::before { background: var(--color-gold-line); }
.id-built { color: var(--color-accent); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.3; }
.id-note { margin-top: var(--spacing-md); max-width: 72ch; }
/* wide: cards are always open, so the summary is a plain heading block */
@media (min-width: 601px) {
  .id-card > details > summary { cursor: default; pointer-events: none; }
  .id-card > details > summary::after { display: none; }
}
@media (max-width: 600px) {
  .id-ideas { margin-top: var(--spacing-md); }
  .id-group + .id-group { margin-top: var(--spacing-md); }
  .id-group__sub { margin-bottom: 8px; font-size: 14px; }
  .id-cards { grid-template-columns: 1fr; gap: 6px; }
  .id-card > details { padding: 0; gap: 0; }
  .id-card > details > summary { position: relative; min-height: 44px; padding: 10px 44px 10px 14px; gap: 2px; }
  .id-card > details > summary::after { position: absolute; right: 16px; top: 18px; margin: 0; }
  .id-card > details[open] > summary::after { margin: 0; top: 22px; }
  .id-card__name { font-size: 16px; }
  .id-card > details:not([open]) .id-card__line { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .id-card > details > .id-card__why, .id-card > details > .id-card__meta { margin: 0; padding: 0 14px; }
  .id-card > details > .id-card__why { padding-bottom: 4px; }
  .id-card > details > .id-card__meta { padding-bottom: 12px; }
}


/* ---- nav.css ---- */
/* nav: sticky fix. components.css sets overflow-x:hidden on html AND body; the body value
   then stops propagating to the viewport, so body becomes a scroll container and the sticky
   header sticks to a box that never scrolls. clip clips without creating a scroll container. */
body { overflow-x: clip; }

html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

main section[id] { scroll-margin-top: var(--sitenav-h, 88px); }

.site-header .nav-row { padding-top: 12px; padding-bottom: 12px; gap: 16px; }

/* the mark is inline SVG: body takes the text colour, the small head takes the gold line colour */
.nav-logo .mark { width: 28px; height: 30px; color: var(--color-fg); }
.sitenav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 4px; }
.sitenav__list a {
  display: block; position: relative; padding: 8px 10px; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-fg-muted); white-space: nowrap;
}
.sitenav__list a:hover { color: var(--color-fg); }
.sitenav__list a:focus-visible,
.sitenav__toggle:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }
.sitenav__list a[aria-current="true"] { color: var(--color-fg); font-weight: 700; }
.sitenav__list a[aria-current="true"]::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px;
  background: var(--color-gold-line);
}

.sitenav__toggle {
  display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  background: transparent; color: var(--color-fg); font: 600 14px var(--font-body); cursor: pointer;
}
.sitenav__bars, .sitenav__bars::before, .sitenav__bars::after {
  display: block; width: 16px; height: 2px; background: currentColor;
}
.sitenav__bars { position: relative; }
.sitenav__bars::before, .sitenav__bars::after { content: ""; position: absolute; left: 0; }
.sitenav__bars::before { top: -5px; }
.sitenav__bars::after { top: 5px; }

.sitenav__progress { height: 3px; }
.sitenav__bar { display: block; height: 100%; width: 100%; background: var(--color-gold-line); transform: scaleX(var(--read, 0)); transform-origin: left; }

/* collapse below 1100px when JS is available; without JS the list simply wraps */
@media (max-width: 1099px) {
  .js-nav .sitenav__toggle { display: inline-flex; }
  .js-nav .sitenav {
    position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg);
    border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-md);
  }
  .js-nav .sitenav:not(.is-open) { display: none; }
  .js-nav .sitenav__list { flex-direction: column; flex-wrap: nowrap; padding: 8px var(--gutter) 12px; }
  .js-nav .sitenav__list a { padding: 13px 8px; min-height: 44px; box-sizing: border-box; font-size: 15px; border-bottom: 1px solid var(--color-border); }
  .js-nav .sitenav__list a[aria-current="true"]::after { left: 8px; right: auto; width: 24px; bottom: 6px; }
}

.nav-hint {
  position: fixed; right: 16px; bottom: 16px; z-index: 40; display: none; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  background: var(--color-bg); color: var(--color-fg-muted); font: 500 13px var(--font-body);
  opacity: 0; pointer-events: none;
}
.nav-hint.is-on { opacity: 1; }
.nav-hint kbd { font: 700 13px var(--font-body); color: var(--color-fg); border: 1px solid var(--color-border-strong); padding: 0 5px; }
@media (hover: hover) and (pointer: fine) and (min-width: 1100px) { .nav-hint { display: inline-flex; } }

/* phones: compact header, 44px menu button, safe areas */
.site-header { padding-top: env(safe-area-inset-top, 0); }
@media (max-width: 600px) {
  .site-header .nav-row { padding-top: 6px; padding-bottom: 6px; gap: 8px; padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  .site-header .nav-logo { font-size: 15px; gap: 8px; min-width: 0; }
  .site-header .nav-logo .mark { width: 24px; height: 26px; }
  .sitenav__toggle { min-width: 44px; padding: 0 12px; }
}
@media (max-width: 340px) { .sitenav__toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

/* skip-link target: main takes focus (tabindex -1) without drawing a ring around the whole page */
#main:focus { outline: none; }

/* theme toggle: a 44px round button at the end of the header row; the logo takes the free space so the row stays packed right */
.site-header .nav-logo { margin-right: auto; }
.theme-toggle {
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--color-border-strong); border-radius: 0;
  background: transparent; color: var(--color-fg); cursor: pointer;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: var(--color-bg-surface); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-fg); outline-offset: 2px; }
.theme-toggle svg { grid-area: 1 / 1; }
.theme-toggle[aria-pressed="false"] .theme-toggle__sun,
.theme-toggle[aria-pressed="true"] .theme-toggle__moon { display: none; }
@media (forced-colors: active) { .theme-toggle { border-color: ButtonText; color: ButtonText; } }


/* ---- overview.css ---- */
/* How I work: the PIV loop diagram. Four steps joined by a line; the last returns to the first. */
.piv { margin: 32px 0 0; }
.piv__loop { list-style: none; margin: 0; padding: 0 0 28px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; position: relative; counter-reset: piv; }
.piv__loop::after { /* return path from Learn back to Plan */
  content: ""; position: absolute; left: 12.5%; right: 12.5%; bottom: 0; height: 20px;
  border: 1px dashed var(--color-fg-muted); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.piv__step { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 16px 16px; margin: 0 8px; background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); counter-increment: piv; }
.piv__step + .piv__step::before { /* connector from the previous card */
  content: ""; position: absolute; top: 50%; left: -17px; width: 16px; height: 1px; background: var(--color-fg-muted);
}
.piv__name { font: 700 18px var(--font-body); color: var(--color-fg); display: flex; align-items: center; gap: 8px; }
.piv__name::before { content: counter(piv); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-bg-inverse); color: var(--color-fg-on-inverse); font-size: 13px; }
.piv__what { font-size: 15px; line-height: 1.4; color: var(--color-fg); }
.piv__who { margin-top: 6px; font: 600 13px var(--font-body); color: var(--color-fg-muted); display: flex; align-items: center; gap: 6px; }
.piv__who::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--color-fg-muted); box-sizing: border-box; }
.piv__who--me { color: var(--color-fg); }
.piv__who--me::before { background: var(--color-accent); border-color: var(--color-accent); }
.piv__cap { margin-top: 12px; font-size: 14px; color: var(--color-fg-muted); }
@media (max-width: 760px) {
  .piv__loop { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; padding-bottom: 0; }
  .piv__loop::after { display: none; }
  .piv__step { margin: 0 6px; padding: 14px 12px 12px; }
  .piv__step + .piv__step::before { display: none; }
  .piv__name { font-size: 16px; }
  .piv__what { font-size: 14px; }
}
#how .max-prose + .max-prose { margin-top: 16px; }
@media (max-width: 760px) {
  .piv__loop { column-gap: 12px; }
  .piv__step { margin: 0; }
}


/* ---- pi-product.css ---- */
.pi-intro { margin-top: 0; }
.pi-sides { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm); margin-top: var(--spacing-md); }
.pi-side { padding: var(--spacing-sm); border: 1px solid var(--color-border); background: var(--color-bg-surface); }
.pi-side__title, .pi-model__title, .pi-index__title { margin: 0 0 8px; font-family: var(--font-display); font-size: var(--type-h3); font-weight: 400; color: var(--color-fg); }
.pi-list { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: 16px; line-height: 1.5; color: var(--color-fg); }
.pi-model { margin-top: var(--spacing-md); padding: 0 var(--spacing-md); border: 1px solid var(--color-border-strong); background: var(--color-bg-surface); }
.pi-model > summary { min-height: 56px; }
.pi-model > summary .pi-model__title { margin: 0; }
.pi-model[open] { padding-bottom: var(--spacing-md); }
.pi-model__lede { margin: 0 0 var(--spacing-sm); max-width: 72ch; color: var(--color-fg); }
.pi-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-sm); }
.pi-field { display: flex; flex-direction: column; gap: 4px; }
.pi-field label { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--color-fg); }
.pi-field input { min-height: 44px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--color-fg); background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: 0; box-sizing: border-box; width: 100%; }
.pi-hint { font-size: 13px; line-height: 1.3; color: var(--color-fg-muted); }
.pi-out { margin-top: var(--spacing-md); display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm); border-top: 1px solid var(--color-border-strong); padding-top: var(--spacing-sm); }
.pi-out__item { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.pi-out__label { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-fg-muted); }
.pi-out__value { font-family: var(--font-display); font-size: var(--type-h2); line-height: 1.1; color: var(--color-fg); }
.pi-chart { grid-column: 1 / -1; display: grid; gap: 8px; margin-top: var(--spacing-xs); }
.pi-bar { margin: 0; display: grid; grid-template-columns: 150px 1fr minmax(64px, max-content); gap: 12px; align-items: center; font-size: 14px; color: var(--color-fg); }
.pi-bar__track { display: block; height: 18px; border: 1px solid var(--color-border); background: var(--color-bg); }
.pi-bar__fill { display: block; height: 100%; width: 0; transition: width 0.3s var(--ease-out); }
.pi-bar__fill--all { background: var(--color-border-strong); }
.pi-bar__fill--back { background: var(--color-accent); }
.pi-bar__fill--left { background: var(--color-fg-muted); }
.pi-bar__num { text-align: right; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .pi-bar__fill { transition: none; } }
.pi-model__note { margin: var(--spacing-sm) 0 0; max-width: 78ch; }
.pi-index { margin-top: var(--spacing-xl); }
.pi-index__title { margin: 0 0 var(--spacing-xs); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-fg-muted); }
.pi-index__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.pi-index__list li { margin: 0; min-width: 0; }
.pi-index__link { display: flex; gap: 12px; align-items: flex-start; box-sizing: border-box; height: 100%; min-height: 44px; padding: 12px 16px; border: 1px solid var(--color-border-strong); margin-left: -1px; background: var(--color-bg-surface); color: var(--color-fg); text-decoration: none; }
.pi-index__list li:first-child .pi-index__link { margin-left: 0; }
.pi-index__link:hover { border-color: var(--color-fg); position: relative; }
.pi-index__link[aria-current="true"] { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg); position: relative; }
.pi-index__link[aria-current="true"] .pi-index__sub, .pi-index__link[aria-current="true"] .pi-index__n { color: var(--cta-fg); }
.pi-index__link strong { display: block; font-weight: 600; }
.pi-index__sub { display: block; font-size: 14px; line-height: 1.4; color: var(--color-fg-muted); }
.pi-index__n { font-family: var(--font-display); font-size: 24px; line-height: 1; color: var(--color-accent); }
.pi-sources { margin-top: var(--spacing-xs); font-size: 14px; }
.pi-sources ul { margin: 8px 0 0; padding-left: 1.1em; display: grid; gap: 6px; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 800px) {
  .pi-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .pi-index { margin-top: var(--spacing-md); }
  .pi-index__link { flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 6px; text-align: center; font-size: 14px; line-height: 1.25; }
  .pi-index__sub { display: none; }
  .pi-index__n { font-size: 18px; }
  .pi-sides { grid-template-columns: 1fr; margin-top: var(--spacing-sm); }
  .pi-model { padding: 0 14px; margin-top: var(--spacing-sm); }
  .pi-model[open] { padding-bottom: 14px; }
  .pi-form { grid-template-columns: 1fr; gap: 12px; }
  .pi-out { grid-template-columns: 1fr; }
  .pi-out__value { font-size: 28px; }
  .pi-bar { grid-template-columns: 1fr minmax(64px, max-content); gap: 4px 12px; }
  .pi-bar__label { grid-column: 1 / -1; }
  .pi-bar__track { grid-column: 1; }
}


/* ---- proto-ask.css ---- */
/* proto-ask: "Ask your venue" sketch. Semantic tokens only. Prefix pa-. */
.pa { margin: var(--spacing-xl) 0 0; }
.pa p { margin: 0; max-width: none; }
.pa .pa-title { margin: 0 0 var(--spacing-xs); font-family: var(--font-display); font-size: var(--type-h3); font-weight: 400; color: var(--color-fg); }
.pa .pa-label { display: inline-block; margin-bottom: var(--spacing-sm); padding: 2px var(--spacing-sm); border: 1.5px dashed var(--color-border-strong); background: var(--color-bg-surface); color: var(--color-fg); font-size: 14px; line-height: 1.5; font-weight: 600; }
.pa .pa-lead { max-width: 72ch; margin-bottom: var(--spacing-xs); font-size: 16px; line-height: 1.6; color: var(--color-fg); }
.pa .pa-tag { display: inline-block; margin-right: var(--spacing-xs); padding: 0 6px; border: 1px solid var(--color-accent); background: var(--color-bg-surface); color: var(--color-accent); font-size: var(--type-caption); font-weight: 700; }
.pa .pa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pa.is-js .pa-nojs { display: none; }
.pa .pa-nojs { margin: var(--spacing-sm) 0; font-weight: 600; }
.pa [hidden] { display: none !important; }

/* tabs (phones only) */
.pa .pa-tablist { display: none; }
.pa .pa-panel { margin-top: var(--spacing-lg); min-width: 0; }
.pa .pa-tab { min-height: 44px; padding: 8px; border: 1.5px solid var(--color-border-strong); background: var(--color-bg-surface); color: var(--color-fg); font: inherit; font-weight: 700; cursor: pointer; }
.pa .pa-tab[aria-selected="true"] { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg); }

/* phone beside the team desk */
.pa .pa-layout { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: var(--spacing-xl); align-items: start; }
.pa .pa-stage { min-width: 0; display: grid; gap: var(--spacing-xs); }
.pa .pa-side-h { font-size: 14px; font-weight: 700; color: var(--color-fg-muted); }
.pa .pa-phone { padding: 10px; border-radius: 32px; background: var(--color-bg-inverse); }
.pa .pa-bar { padding: 4px var(--spacing-md) 8px; color: var(--color-fg-on-inverse-soft); font-size: var(--type-caption); font-weight: 700; }
.pa .pa-screens { border-radius: 22px; background: var(--color-bg-surface); color: var(--color-fg); min-height: 520px; display: flex; }
.pa .pa-view { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md); font-size: 15px; line-height: 1.45; }
.pa .pa-h { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 400; line-height: 1.25; color: var(--color-fg); }
.pa .pa-h:focus { outline: none; }
.pa .pa-h:focus-visible { outline: 3px solid var(--color-accent-secondary); outline-offset: 3px; }
.pa .pa-line, .pa .pa-a { color: var(--color-fg); }
.pa .pa-a { font-size: 17px; line-height: 1.5; }
.pa .pa-sub { font-size: 14px; font-weight: 700; color: var(--color-fg-muted); }
.pa .pa-note { color: var(--color-fg-muted); font-size: 14px; }
.pa .pa-q { font-size: 14px; color: var(--color-fg-muted); }
.pa .pa-q-l { font-weight: 700; color: var(--color-fg); }
.pa .pa-msg { min-height: 1.45em; font-size: 14px; font-weight: 600; color: var(--color-fg); }
.pa .pa-msg:empty { display: none; }
.pa .pa-src { display: flex; flex-wrap: wrap; gap: 6px; }
.pa .pa-chip { display: inline-block; padding: 2px 8px; border: 1px solid var(--color-border-strong); background: var(--color-bg); color: var(--color-fg); font-size: 13px; font-weight: 600; }
.pa .pa-chip::before { content: ""; display: inline-block; width: 8px; height: 10px; margin-right: 6px; border: 1.5px solid var(--color-fg); }
.pa .pa-flag { display: inline-block; align-self: flex-start; padding: 4px 10px; border: 1.5px solid var(--t-alert); color: var(--t-alert); font-weight: 700; }
.pa .pa-flag::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--t-alert); }
.pa .pa-price { margin: 0; display: grid; gap: 4px; padding: var(--spacing-sm); border: 1px solid var(--color-border); background: var(--color-bg); }
.pa .pa-price div { display: flex; justify-content: space-between; gap: var(--spacing-sm); align-items: baseline; }
.pa .pa-price dt { color: var(--color-fg-muted); }
.pa .pa-price dd { margin: 0; font-weight: 700; }
.pa .pa-big { font-family: var(--font-display); font-size: 26px; }
.pa .pa-writeup { display: grid; gap: 4px; padding: var(--spacing-sm); border: 1.5px dashed var(--color-border-strong); background: var(--color-bg); }
.pa .pa-writeup p:not(.pa-side-h) { font-size: 14px; color: var(--color-fg); }
.pa .pa-actions { margin-top: auto; display: grid; gap: var(--spacing-sm); }
.pa .pa-btn { min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--color-border-strong); background: var(--color-bg); color: var(--color-fg); font: inherit; font-weight: 700; cursor: pointer; }
.pa .pa-btn:hover, .pa .pa-btn-main { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg); }
.pa .pa-btn-main:hover { background: var(--cta-bg-active); border-color: var(--cta-bg-active); }
.pa .pa-link { min-height: 44px; padding: 8px; border: 0; background: none; color: var(--color-accent-secondary); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.pa .pa-foot { text-align: center; }
.pa .pa-nudge { display: grid; gap: 2px; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--t-alert); background: var(--color-bg); color: var(--color-fg); font: inherit; text-align: left; cursor: pointer; }
.pa .pa-nudge span { color: var(--color-fg-muted); font-size: 14px; }
.pa .pa-sugs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pa .pa-sug { width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--color-border-strong); background: var(--color-bg); color: var(--color-fg); font: inherit; text-align: left; cursor: pointer; }
.pa .pa-sug:hover { background: var(--color-bg-surface); box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.pa .pa-form { display: grid; gap: 4px; }
.pa .pa-flabel { font-size: 14px; font-weight: 600; }
.pa .pa-frow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.pa .pa-input { min-height: 44px; min-width: 0; padding: 8px 12px; border: 1.5px solid var(--color-border-strong); background: var(--color-bg); color: var(--color-fg); font: inherit; font-size: 16px; }
.pa :is(.pa-btn, .pa-link, .pa-sug, .pa-nudge, .pa-input, .pa-tab):focus-visible { outline: 3px solid var(--color-accent-secondary); outline-offset: 2px; }

/* team desk */
.pa .pa-desk { min-width: 0; display: grid; gap: var(--spacing-sm); padding: var(--spacing-md); border: 1.5px solid var(--color-border-strong); background: var(--color-bg-surface); align-content: start; }
.pa .pa-desk-h { margin: 0; font-family: var(--font-display); font-size: var(--type-h3); font-weight: 400; color: var(--color-fg); }
.pa .pa-card { padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); background: var(--color-bg); }
.pa .pa-card-h { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--color-fg); }
.pa .pa-dl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 15px; line-height: 1.45; color: var(--color-fg); }
.pa .pa-dl li:only-child:empty { display: none; }
.pa .pa-need { position: relative; padding-left: 18px; }
.pa .pa-need::before { content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--t-alert); }

/* decision cards */
.pa .pa-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); }
.pa .pa-dc { padding: var(--spacing-md); border: 1.5px solid var(--color-border-strong); background: var(--color-bg-surface); }
.pa .pa-dc-h { margin: 0 0 var(--spacing-sm); font-family: var(--font-display); font-size: 19px; font-weight: 400; color: var(--color-fg); }
.pa .pa-dc dl { margin: 0; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.pa .pa-dc dl > div { display: grid; gap: 0; }
.pa .pa-dc dt { font-weight: 700; color: var(--color-fg); }
.pa .pa-dc dd { margin: 0; color: var(--color-fg); }

/* flow map: SVG wide, route list as a line when narrow */
.pa .pa-map { container-type: inline-size; margin: 0; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); background: var(--color-bg-surface); }
.pa .pa-map-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px var(--spacing-md); margin-bottom: 4px; font-weight: 700; font-size: 14px; }
.pa .pa-here { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.pa .pa-here::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); }
.pa .pa-svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.pa .pa-svg text { font-size: 15px; font-weight: 600; fill: var(--color-fg-muted); }
.pa .pa-svg .pa-el { font-weight: 500; paint-order: stroke; stroke: var(--color-bg-surface); stroke-width: 4px; stroke-linejoin: round; }
.pa .pa-el.is-taken { fill: var(--color-fg); }
.pa .pa-n rect { fill: var(--color-bg-surface); stroke: var(--color-fg-muted); stroke-width: 1; }
.pa .pa-n.is-vis rect { stroke: var(--color-fg); stroke-width: 1.75; }
.pa .pa-n.is-vis text { fill: var(--color-fg); }
.pa .pa-n.is-cur rect { fill: var(--color-bg-inverse); stroke: var(--color-bg-inverse); }
.pa .pa-n.is-cur text { fill: var(--color-fg-on-inverse-strong); }
.pa .pa-dot { display: none; fill: var(--color-accent); stroke: var(--color-bg-surface); stroke-width: 2; }
.pa .pa-n.is-cur .pa-dot { display: inline; }
.pa .pa-e { fill: none; stroke: var(--color-border-strong); stroke-width: 1.5; marker-end: url(#pa-mk-lt); }
.pa .pa-e.is-taken { stroke: var(--color-fg); stroke-width: 2.25; marker-end: url(#pa-mk-ink); }
.pa .pa-mk-lt path { fill: var(--color-fg-muted); }
.pa .pa-mk-ink path { fill: var(--color-fg); }
.pa .pa-route { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@container (max-width: 727px) {
  .pa .pa-svg { display: none; }
  .pa .pa-route { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; list-style: none; display: grid; font-size: 15px; line-height: 1.3; }
  .pa .pa-stop { position: relative; padding: 0 0 8px 26px; color: var(--color-fg-muted); }
  .pa .pa-stop::before { content: ""; position: absolute; left: 5px; top: 4px; width: 10px; height: 10px; border: 1.5px solid var(--color-border-strong); border-radius: 50%; background: var(--color-bg-surface); z-index: 1; }
  .pa .pa-stop::after { content: ""; position: absolute; left: 9px; top: 16px; bottom: -2px; width: 1.5px; background: var(--color-border-strong); }
  .pa .pa-stop:last-child::after { display: none; }
  .pa .pa-stop-t { display: inline-block; padding: 0 6px; margin-left: -6px; font-weight: 600; }
  .pa .pa-aside { font-size: 14px; }
  .pa .pa-stop.is-vis { color: var(--color-fg); }
  .pa .pa-stop.is-vis::before { border-color: var(--color-fg); background: var(--color-fg); }
  .pa .pa-stop.is-cur::before { border-color: var(--color-fg); background: var(--color-accent); }
  .pa .pa-stop.is-cur .pa-stop-t { background: var(--color-bg-inverse); color: var(--color-fg-on-inverse-strong); }
  .pa .pa-forks { list-style: none; margin: 1px 0 0; padding: 0; font-size: 14px; color: var(--color-fg-muted); }
  .pa .pa-forks li { position: relative; padding-left: 16px; }
  .pa .pa-forks li::before { content: ""; position: absolute; left: 2px; top: 1px; width: 8px; height: 8px; border-left: 1.5px solid var(--color-border-strong); border-bottom: 1.5px solid var(--color-border-strong); }
  .pa .pa-forks li.is-taken { color: var(--color-fg); font-weight: 600; }
  .pa .pa-forks li.is-taken::before { border-color: var(--color-fg); }
}

@media (max-width: 960px) {
  .pa .pa-layout { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-lg); }
  .pa .pa-stage { max-width: 420px; }
}
@media (max-width: 720px) { .pa .pa-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .pa { margin-top: var(--spacing-md); }
  .pa.is-js .pa-tablist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-sm); margin-top: var(--spacing-sm); }
  .pa .pa-panel { margin-top: var(--spacing-sm); }
  .pa .pa-stage { max-width: none; }
  .pa .pa-screens { min-height: 0; }
  .pa .pa-title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .pa *, .pa *::before, .pa *::after { transition: none !important; animation: none !important; }
}

/* QA: a long unbroken typed question must wrap, not widen the page */
.pa .pa-view, .pa .pa-desk { overflow-wrap: anywhere; }


/* ---- proto-day.css ---- */
/* proto-day: "Your day" prototype. Prefix pd__, scoped to .pd. Semantic tokens only. */
.pd { margin: var(--spacing-xl) 0 0; }
.pd p { margin: 0; max-width: none; }
.pd .pd__title { margin: 0 0 var(--spacing-xs); font-family: var(--font-display); font-size: 20px; color: var(--color-fg); }
.pd .pd__label { display: inline-block; margin-bottom: var(--spacing-sm); padding: 2px var(--spacing-sm); border: 1.5px dashed var(--color-border-strong); background: var(--color-bg); color: var(--color-fg); font-size: 14px; line-height: 1.5; font-weight: 600; }
.pd .pd__noscript { padding: var(--spacing-sm); border: 1px solid var(--color-border); }
.pd .pd__lead { max-width: 72ch; margin-bottom: var(--spacing-xs); font-size: 16px; line-height: 1.6; color: var(--color-fg); }
.pd .pd__tag { display: inline-block; margin-right: var(--spacing-xs); padding: 0 6px; border: 1px solid var(--color-accent); background: var(--color-bg); color: var(--color-accent); font-size: var(--type-caption); font-weight: 700; }
.pd .pd__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* layout: phone left, flow and decisions right; one column under 960px; tabs under 600px */
.pd .pd__grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); grid-template-areas: "tabs tabs" "screens flow" "screens notes"; grid-template-rows: auto auto 1fr; gap: var(--spacing-lg); align-items: start; }
.pd .pd__stage { grid-area: screens; display: grid; gap: var(--spacing-md); min-width: 0; }
.pd .pd__flow { grid-area: flow; display: grid; gap: var(--spacing-sm); min-width: 0; align-content: start; }
.pd .pd__notes { grid-area: notes; min-width: 0; }
.pd .pd__tablist { grid-area: tabs; display: none; }
.pd [role="tabpanel"][hidden], .pd .pd__flow[hidden], .pd .pd__notes[hidden], .pd .pd__stage[hidden] { display: none; }

/* phone */
.pd .pd__phone { padding: 10px; border-radius: 28px; background: var(--color-bg-inverse); }
.pd .pd__bar { padding: 2px var(--spacing-md) 8px; color: var(--color-fg-on-inverse); font-size: var(--type-caption); font-weight: 700; }
.pd .pd__screens { display: flex; border-radius: 18px; background: var(--color-bg); color: var(--color-fg); min-height: 460px; }
.pd .pd__screen { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-md); font-size: 15px; line-height: 1.45; border-radius: 18px; }
.pd .pd__screen[hidden] { display: none; }
.pd .pd__screen:focus-visible { outline-offset: -3px; }
.pd .pd__screen--edge { border: 1.5px dashed var(--color-border-strong); }
.pd .pd__h { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.25; color: var(--color-fg); }
.pd .pd__h5 { margin: var(--spacing-xs) 0 0; font-size: 14px; font-weight: 700; color: var(--color-fg); }
.pd .pd__h:focus, .pd .pd__summary:focus { outline: none; }
.pd .pd__h:focus-visible, .pd .pd__summary:focus-visible { outline: 3px solid var(--color-accent-secondary); outline-offset: 3px; }
.pd .pd__note, .pd .pd__sub { color: var(--color-fg-muted); font-size: 14px; }
.pd .pd__sub { display: block; font-weight: 400; }
.pd .pd__line { color: var(--color-fg); }
.pd .pd__summary { font-weight: 600; font-size: 14px; }
.pd .pd__msg { min-height: 1.45em; font-size: 14px; font-weight: 600; color: var(--color-fg); }
.pd .pd__msg:empty { display: none; }
.pd .pd__actions { margin-top: auto; display: grid; gap: var(--spacing-sm); }
.pd .pd__list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }

/* buttons and inputs: 44px targets, 16px inputs */
.pd .pd__btn { min-height: 44px; padding: 8px 14px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-fg); font: inherit; font-weight: 700; cursor: pointer; }
.pd .pd__btn:hover { background: var(--cta-bg); color: var(--cta-fg); }
.pd .pd__btn:active { background: var(--cta-bg-active); color: var(--cta-fg); }
.pd .pd__link { min-height: 44px; padding: 8px; border: 0; background: none; color: var(--color-accent-secondary); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.pd button:focus-visible, .pd select:focus-visible, .pd input:focus-visible, .pd summary:focus-visible { outline: 3px solid var(--color-accent-secondary); outline-offset: 2px; }
.pd .pd__field { display: grid; gap: 4px; }
.pd .pd__field label { font-size: 14px; font-weight: 600; }
.pd select, .pd input[type="number"] { min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-fg); font: inherit; font-size: 16px; width: 100%; box-sizing: border-box; }
.pd .pd__opts { margin: 0; padding: 0; border: 0; display: grid; gap: var(--spacing-sm); min-width: 0; }
.pd .pd__opts legend { padding: 0; margin-bottom: 4px; font-size: 14px; font-weight: 600; }
.pd .pd__opt { position: relative; display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--color-border-strong); background: var(--color-bg); cursor: pointer; box-sizing: border-box; }
.pd .pd__opt:has(input:checked) { background: var(--color-bg-surface); box-shadow: inset 0 0 0 1.5px var(--color-border-strong); }
.pd .pd__opt:has(input:focus-visible) { outline: 3px solid var(--color-accent-secondary); outline-offset: 2px; }
.pd .pd__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pd .pd__opt::before { content: ""; flex: none; box-sizing: border-box; width: 18px; height: 18px; margin-top: 2px; border: 1.5px solid var(--color-fg); border-radius: 50%; background: var(--color-bg); }
.pd .pd__opt:has(input:checked)::before { background: radial-gradient(var(--color-fg) 0 4px, var(--color-bg) 5px); }
.pd .pd__opt > span { display: grid; gap: 2px; min-width: 0; }

/* toggles: "Your day" / "What the team gets", and the three sheets */
.pd .pd__seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.pd .pd__seg--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pd .pd__seg button { min-height: 44px; padding: 6px 4px; border: 1.5px solid var(--color-border-strong); margin-left: -1.5px; background: var(--color-bg); color: var(--color-fg); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: grid; place-content: center; justify-items: center; }
.pd .pd__seg button:first-child { margin-left: 0; }
.pd .pd__seg button[aria-pressed="true"] { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg); position: relative; }
.pd .pd__cnt { display: block; font-size: 13px; font-weight: 500; }

/* timeline and sheets */
.pd .pd__tl, .pd .pd__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pd .pd__ev, .pd .pd__row { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: var(--spacing-sm); padding: 8px 0; border-top: 1px solid var(--color-border); font-size: 14px; }
.pd .pd__row--wide { grid-template-columns: minmax(0, 1fr); }
.pd .pd__time { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-fg); }
.pd .pd__alert { display: grid; gap: var(--spacing-sm); padding: var(--spacing-sm); margin-bottom: var(--spacing-sm); border: 1.5px dashed var(--color-border-strong); font-size: 14px; }
.pd .pd__chk, .pd .pd__chg, .pd .pd__flag { display: inline-block; padding: 0 6px; border: 1px solid var(--color-border-strong); font-size: 13px; font-weight: 700; color: var(--color-fg); background: var(--color-bg-surface); }
.pd .pd__flag { display: block; margin-top: 4px; border-style: dashed; }
.pd .pd__sheet[hidden] { display: none; }
.pd .pd__rules { font-size: 14px; }
.pd .pd__rules summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--color-accent-secondary); }
.pd .pd__rules ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--color-fg); }

/* decision cards */
.pd .pd__dcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); }
.pd .pd__dc { padding: var(--spacing-md); border: 1px solid var(--color-border); background: var(--color-bg); display: grid; gap: var(--spacing-sm); align-content: start; }
.pd .pd__dc-h { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 1.25; color: var(--color-fg); }
.pd .pd__dl { margin: 0; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.pd .pd__dl > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.pd .pd__dl dt { font-weight: 700; color: var(--color-fg); }
.pd .pd__dl dd { margin: 0; color: var(--color-fg); }

@media (max-width: 960px) {
  .pd .pd__grid { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xl); }
  .pd .pd__stage { max-width: 420px; }
}
@media (max-width: 720px) { .pd .pd__dcs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .pd { margin-top: var(--spacing-md); }
  .pd .pd__grid { grid-template-areas: "tabs" "screens" "flow" "notes"; grid-template-rows: none; gap: var(--spacing-sm); }
  .pd.is-js .pd__tablist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-sm); }
  .pd .pd__tab { min-height: 44px; padding: 8px; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-fg); font: inherit; font-weight: 700; cursor: pointer; }
  .pd .pd__stage { max-width: none; }
  .pd .pd__title { font-size: 18px; }
  .pd .pd__label { font-size: 13px; }
  .pd .pd__screens { min-height: 0; }
}

/* flow map: the full journey, tracked live. Wide: SVG. Narrow: the route list drawn as a line. */
.pd .pd__map { --fm-draw: 420ms; --fm-ease: cubic-bezier(.2, .7, .2, 1); --fm-fade: 300ms; container-type: inline-size; margin: 0; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); background: var(--color-bg); }
.pd .pd__map-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px var(--spacing-md); margin-bottom: 4px; font-weight: 700; font-size: 14px; }
.pd .pd__here { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--color-fg); }
.pd .pd__here::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); }
.pd:not(.is-js) .pd__here { display: none; }
.pd .pd__svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.pd .pd__svg text { font-size: 15px; font-weight: 600; fill: var(--color-fg-muted); }
.pd .pd__svg .pd__el { font-weight: 500; paint-order: stroke; stroke: var(--color-bg); stroke-width: 4px; stroke-linejoin: round; transition: fill var(--fm-draw) var(--fm-ease); }
.pd .pd__n rect { fill: var(--color-bg); stroke: var(--color-fg-muted); stroke-width: 1; transition: fill 160ms ease-out, stroke 160ms ease-out; }
.pd .pd__n text { transition: fill 160ms ease-out; }
.pd .pd__n.is-vis rect { stroke: var(--color-fg); stroke-width: 1.75; }
.pd .pd__n.is-vis text { fill: var(--color-fg); }
.pd .pd__n.is-cur rect { fill: var(--color-bg-inverse); stroke: var(--color-bg-inverse); }
.pd .pd__n.is-cur text { fill: var(--color-fg-on-inverse-strong); }
.pd .pd__dot { display: none; fill: var(--color-accent); stroke: var(--color-bg); stroke-width: 2; }
.pd .pd__n.is-cur .pd__dot { display: inline; }
.pd .pd__base { fill: none; stroke: var(--color-border); stroke-width: 1.5; marker-end: url(#pd-mk-lt); }
.pd .pd__inks .pd__e { fill: none; stroke: var(--color-fg); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; marker-end: none; transition: opacity var(--fm-fade) ease-out, stroke-dashoffset 0s var(--fm-fade); }
.pd .pd__inks .pd__e.is-taken { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset var(--fm-draw) var(--fm-ease), opacity 0s; }
.pd .pd__inks .pd__e.is-drawn { marker-end: url(#pd-mk-ink); }
.pd .pd__el.is-taken { fill: var(--color-fg); }
.pd .pd__mk--lt path { fill: var(--color-fg-muted); }
.pd .pd__mk--ink path { fill: var(--color-fg); }
.pd .pd__route { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; list-style: none; }
@container (max-width: 727px) {
  .pd .pd__svg { display: none; }
  .pd .pd__route { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; padding: 0; display: grid; font-size: 15px; line-height: 1.3; }
  .pd .pd__stop { position: relative; padding: 0 0 8px 26px; color: var(--color-fg-muted); }
  .pd .pd__stop::before { content: ""; position: absolute; left: 5px; top: 4px; width: 10px; height: 10px; border: 1.5px solid var(--color-border-strong); border-radius: 50%; background: var(--color-bg); z-index: 1; }
  .pd .pd__stop::after { content: ""; position: absolute; left: 9px; top: 16px; bottom: -2px; width: 1.5px; background: var(--color-border-strong); }
  .pd .pd__stop:last-child::after { display: none; }
  .pd .pd__stop-t { display: inline-block; padding: 0 6px; margin-left: -6px; font-weight: 600; }
  .pd .pd__aside { font-size: 14px; }
  .pd .pd__stop.is-vis { color: var(--color-fg); }
  .pd .pd__stop.is-vis::before { border-color: var(--color-fg); background: var(--color-fg); }
  .pd .pd__stop.is-vis::after { width: 2px; left: 8.5px; background: var(--color-fg); }
  .pd .pd__stop.is-cur::before { border-color: var(--color-fg); background: var(--color-accent); }
  .pd .pd__stop.is-cur .pd__stop-t { background: var(--color-bg-inverse); color: var(--color-fg-on-inverse-strong); }
  .pd .pd__forks { list-style: none; margin: 1px 0 0; padding: 0; display: grid; font-size: 14px; color: var(--color-fg-muted); }
  .pd .pd__forks li { position: relative; padding-left: 16px; }
  .pd .pd__forks li::before { content: ""; position: absolute; left: 2px; top: 1px; width: 8px; height: 8px; border-left: 1.5px solid var(--color-border-strong); border-bottom: 1.5px solid var(--color-border-strong); }
  .pd .pd__forks li.is-taken { color: var(--color-fg); }
  .pd .pd__forks li.is-taken::before { border-color: var(--color-fg); }
}
@media (prefers-reduced-motion: reduce) {
  .pd .pd__map { --fm-draw: 0ms; --fm-fade: 0ms; }
  .pd .pd__map *, .pd .pd__map *::before, .pd .pd__map *::after { transition: none !important; }
}
@media (forced-colors: active) {
  .pd .pd__seg button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}

/* the team's desk: live summary of the three sheets, beside the phone */
.pd .pd__desk { min-width: 0; display: grid; gap: var(--spacing-sm); align-content: start; }
.pd .pd__desk-h { margin: 0; }
.pd .pd__desk .pd__note { margin: 0; }
.pd .pd__card { padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); background: var(--color-bg); }
.pd .pd__card-h { margin: 0 0 4px; display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-sm); font-size: 16px; font-weight: 700; color: var(--color-fg); }
.pd .pd__card-h .pd__cnt { display: inline; font-size: 13px; font-weight: 500; color: var(--color-fg-muted); }
.pd .pd__card-h .pd__cnt.is-changed { font-weight: 700; color: var(--color-fg); }
.pd .pd__dl { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; line-height: 1.45; color: var(--color-fg); }
.pd .pd__full > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--color-accent-secondary); }
.pd .pd__full[open] > summary { margin-bottom: var(--spacing-xs); }


/* ---- proto-room.css ---- */
#proto-room {
  margin: var(--spacing-xl) 0 0;
}
#proto-room p { margin: 0; max-width: none; }
#proto-room .pr-title {
  margin: 0 0 var(--spacing-sm);
  font-family: var(--font-display);
  font-size: var(--type-h3);
  color: var(--color-fg);
}
#proto-room .pr-label {
  display: inline-block;
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-md);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-fg);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
}
#proto-room .pr-lead {
  max-width: 72ch;
  margin-bottom: var(--spacing-xs);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-fg);
}
#proto-room .pr-tag {
  display: inline-block;
  margin-right: var(--spacing-xs);
  padding: 0 6px;
  border: 1px solid var(--color-accent-secondary);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-accent-secondary);
  font-size: var(--type-caption);
  font-weight: 700;
}

#proto-room .pr-grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  grid-template-areas: "tabs tabs" "screens flow" "screens notes";
  grid-template-rows: auto auto 1fr;
  gap: var(--spacing-lg);
  align-items: start;
}
#proto-room .pr-stage { display: grid; gap: var(--spacing-md); min-width: 0; }
#proto-room .pr-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* phone */
#proto-room .pr-phone {
  padding: 10px;
  border-radius: 32px;
  background: var(--color-bg-inverse);
}
#proto-room .pr-bar {
  padding: 4px var(--spacing-md) 8px;
  color: var(--color-fg-on-inverse-soft);
  font-size: var(--type-caption);
  font-weight: 700;
}
#proto-room .pr-views {
  color: var(--color-fg);
  min-height: 360px;
  display: flex;
}
#proto-room .pr-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
  font-size: 15px;
  line-height: 1.45;
  border-radius: 22px;
}
#proto-room .pr-view:focus-visible { outline-offset: -3px; }
#proto-room .pr-view[hidden] { display: none; }
#proto-room .pr-h {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.25;
  color: var(--color-fg);
}
#proto-room .pr-note { color: var(--color-fg-muted); font-size: 14px; }
#proto-room .pr-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}
#proto-room .pr-msg { min-height: 1.45em; font-size: 14px; font-weight: 600; color: var(--t-alert); }
#proto-room .pr-actions {
  margin-top: auto;
  display: grid;
  gap: var(--spacing-sm);
}
#proto-room .pr-btn {
  min-height: 44px;
  padding: 8px 14px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-fg);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
#proto-room .pr-btn:hover { background: var(--color-bg-surface); }
#proto-room .pr-link {
  min-height: 44px;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--color-accent-secondary);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* options: identical weight */
#proto-room .pr-opts { margin: 0; padding: 0; border: 0; display: grid; gap: var(--spacing-sm); min-width: 0; }
#proto-room .pr-legend { padding: 0; margin-bottom: var(--spacing-sm); font-size: 14px; color: var(--color-fg-muted); }
#proto-room .pr-opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-height: 44px;
  padding: 10px 12px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  cursor: pointer;
}
#proto-room .pr-opt:has(input:checked) {
  background: var(--color-bg-surface);
  box-shadow: inset 0 0 0 1.5px var(--color-border-strong);
}
#proto-room .pr-opt:has(input:focus-visible) {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}
#proto-room .pr-radio { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--color-fg); }
#proto-room .pr-opt-body { display: grid; gap: 2px; }
#proto-room .pr-opt-name { font-weight: 700; }
#proto-room .pr-opt-cost { font-size: 14px; color: var(--color-fg-muted); }
#proto-room .pr-custom { display: grid; gap: 4px; }
#proto-room .pr-field-label { font-size: 14px; font-weight: 600; }
#proto-room .pr-input {
  min-height: 44px;
  padding: 8px 12px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-fg);
  font: inherit;
}

/* decision cards */
#proto-room .pr-notes { display: grid; gap: var(--spacing-md); }
#proto-room .pr-dc {
  padding: var(--spacing-md);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  display: grid;
  gap: var(--spacing-sm);
}
#proto-room .pr-dc-screen { font-size: var(--type-caption); font-weight: 700; color: var(--color-fg-muted); }
#proto-room .pr-dl { margin: 0; display: grid; gap: 6px; font-size: 15px; line-height: 1.45; }
#proto-room .pr-dl > div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: var(--spacing-sm); }
#proto-room .pr-dl dt { font-weight: 700; color: var(--color-fg); }
#proto-room .pr-dl dd { margin: 0; color: var(--color-fg); }

@media (max-width: 960px) {
  #proto-room .pr-grid { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-xl); }
  #proto-room .pr-stage { max-width: 420px; }
}
@media (max-width: 480px) {
  #proto-room .pr-stage { max-width: none; }
    #proto-room .pr-dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

#proto-room .pr-title { font-size: 20px; margin-bottom: var(--spacing-xs); }
#proto-room .pr-label { margin-bottom: var(--spacing-sm); font-size: 14px; padding: 2px var(--spacing-sm); }
#proto-room .pr-dcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-md); }
#proto-room .pr-dcs .pr-dl > div,
#proto-room .pr-more .pr-dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
#proto-room .pr-dl { font-size: 14px; gap: 4px; }
#proto-room .pr-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--color-accent-secondary); }
#proto-room .pr-more[open] .pr-dc { margin-top: var(--spacing-sm); }
@media (max-width: 720px) { #proto-room .pr-dcs { grid-template-columns: minmax(0, 1fr); } }

/* tabs: desktop shows every panel; the control only appears on phones */
#proto-room .pr-stage { grid-area: screens; }
#proto-room .pr-flow { grid-area: flow; display: grid; gap: var(--spacing-sm); min-width: 0; align-content: start; }
#proto-room .pr-notes { grid-area: notes; }
#proto-room .pr-tablist { display: none; grid-area: tabs; }
#proto-room .pr-input { font-size: 16px; }
#proto-room [role="tabpanel"][hidden] { display: none; }
@media (max-width: 600px) {
  #proto-room { margin-top: var(--spacing-md); }
  #proto-room .pr-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tabs" "screens" "flow" "notes"; grid-template-rows: none; gap: var(--spacing-sm); }
  #proto-room.is-js .pr-tablist {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-sm);
  }
  #proto-room .pr-tab {
    min-height: 44px;
    padding: 8px;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-fg);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }
  #proto-room .pr-tab[aria-selected="true"] { background: var(--color-bg-inverse); color: var(--color-fg-on-inverse-strong); }
  #proto-room .pr-stage { max-width: none; }
  #proto-room .pr-title { font-size: 18px; }
  #proto-room .pr-label { font-size: 13px; }
  #proto-room .pr-views { min-height: 0; }
  }

/* flow map: full journey, tracked live (wide: SVG; narrow: the route list drawn as a line). Shared motion spec: a taken edge draws into its node, the node fills after. */
#proto-room .pr-map { --fm-draw: 420ms; --fm-ease: cubic-bezier(.2, .7, .2, 1); --fm-fade: 300ms; container-type: inline-size; margin: 0; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
#proto-room .pr-map-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px var(--spacing-md); margin-bottom: 4px; font-weight: 700; font-size: 14px; }
#proto-room .pr-here { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--color-fg); }
#proto-room .pr-here::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); }
#proto-room:not(.is-js) .pr-here { display: none; }
#proto-room .pr-svg { display: block; width: 100%; height: auto; font-family: var(--font-body); }
#proto-room .pr-svg text { font-size: 15px; font-weight: 600; fill: var(--color-fg-muted); }
#proto-room .pr-svg .pr-el, #proto-room .pr-svg .pr-meta-t { font-weight: 500; }
#proto-room .pr-svg .pr-el { paint-order: stroke; stroke: var(--color-bg); stroke-width: 4px; stroke-linejoin: round; transition: fill var(--fm-draw) var(--fm-ease); }
#proto-room .pr-n rect { fill: var(--color-bg); stroke: var(--color-fg-muted); stroke-width: 1; transition: fill 160ms ease-out, stroke 160ms ease-out; }
#proto-room .pr-n text { transition: fill 160ms ease-out; }
#proto-room .pr-n--stub rect { stroke-dasharray: 3 3; }
#proto-room .pr-n.is-vis rect { stroke: var(--color-fg); stroke-width: 1.75; }
#proto-room .pr-n.is-vis text { fill: var(--color-fg); }
#proto-room .pr-n.is-cur rect { fill: var(--color-bg-inverse); stroke: var(--color-bg-inverse); }
#proto-room .pr-n.is-cur text { fill: var(--color-fg-on-inverse-strong); }
#proto-room .pr-dot-s { display: none; fill: var(--color-accent); stroke: var(--color-bg); stroke-width: 2; }
#proto-room .pr-n.is-cur .pr-dot-s { display: inline; }
/* light base rails: the whole journey, always visible */
#proto-room .pr-base, #proto-room .pr-e--dash, #proto-room .pr-e--rail { fill: none; stroke: var(--color-border); stroke-width: 1.5; marker-end: url(#pr-mk-lt); }
#proto-room .pr-e--dash { stroke-dasharray: 5 4; }
#proto-room .pr-e--rail { stroke-dasharray: 2 3; }
#proto-room .pr-e--dash, #proto-room .pr-e--rail { transition: stroke var(--fm-draw) var(--fm-ease); }
#proto-room .pr-e--dash.is-taken, #proto-room .pr-e--rail.is-taken { stroke: var(--color-fg); stroke-width: 2; }
#proto-room .pr-e--dash.is-drawn, #proto-room .pr-e--rail.is-drawn { marker-end: url(#pr-mk-ink); }
/* ink overlay: draws in when taken; arrowhead appears when the draw ends; fades (no reverse draw) on Start again */
#proto-room .pr-inks .pr-e { fill: none; stroke: var(--color-fg); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; marker-end: none; transition: opacity var(--fm-fade) ease-out, stroke-dashoffset 0s var(--fm-fade); }
#proto-room .pr-inks .pr-e.is-taken { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset var(--fm-draw) var(--fm-ease), opacity 0s; }
#proto-room .pr-inks .pr-e.is-drawn { marker-end: url(#pr-mk-ink); }
#proto-room .pr-el.is-taken { fill: var(--color-fg); }
#proto-room .pr-mk--lt path { fill: var(--color-fg-muted); }
#proto-room .pr-mk--ink path { fill: var(--color-fg); }
#proto-room .pr-route { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@container (max-width: 727px) {
  #proto-room .pr-svg { display: none; }
  #proto-room .pr-route { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; list-style: none; padding: 0; display: grid; font-size: 15px; line-height: 1.3; }
  #proto-room .pr-stop { position: relative; padding: 0 0 6px 26px; color: var(--color-fg-muted); }
  #proto-room .pr-stop::before { content: ""; position: absolute; left: 5px; top: 4px; width: 10px; height: 10px; border: 1.5px solid var(--color-border-strong); border-radius: 50%; background: var(--color-bg); z-index: 1; transition: background-color 160ms ease-out, border-color 160ms ease-out; }
  /* the segment: light rail underneath, ink layer grows from the top when the route is taken */
  #proto-room .pr-stop::after { content: ""; position: absolute; left: 9px; top: 16px; bottom: -2px; width: 2px; background: linear-gradient(var(--color-fg), var(--color-fg)) top left / 2px 0 no-repeat, linear-gradient(var(--color-border-strong), var(--color-border-strong)) center / 1.5px 100% no-repeat; transition: background-size 0s; }
  #proto-room .pr-stop:nth-last-child(2)::after { display: none; }
  #proto-room .pr-stop--talk { margin-top: 2px; padding-top: 8px; border-top: 1.5px dashed var(--color-border-strong); }
  #proto-room .pr-stop--talk::before { top: 12px; border-style: dashed; }
  #proto-room .pr-stop--talk::after { display: none; }
  #proto-room .pr-stop-t { display: inline-block; padding: 0 6px; margin-left: -6px; border-radius: var(--radius-sm); font-weight: 600; transition: background-color 160ms ease-out, color 160ms ease-out; }
  #proto-room .pr-aside { font-size: 14px; }
  #proto-room .pr-stop.is-vis { color: var(--color-fg); }
  #proto-room .pr-stop.is-vis::before { border-color: var(--color-fg); background: var(--color-fg); }
  #proto-room .pr-stop.is-seg::after { background-size: 2px 100%, 1.5px 100%; transition: background-size var(--fm-draw) var(--fm-ease); }
  #proto-room .pr-stop.is-cur::before { border-color: var(--color-fg); background: var(--color-accent); }
  #proto-room .pr-stop.is-cur .pr-stop-t { background: var(--color-bg-inverse); color: var(--color-fg-on-inverse-strong); }
  #proto-room .pr-forks { list-style: none; margin: 1px 0 0; padding: 0; display: grid; gap: 0; font-size: 14px; color: var(--color-fg-muted); }
  #proto-room .pr-forks li { position: relative; padding-left: 16px; }
  #proto-room .pr-forks li::before { content: ""; position: absolute; left: 2px; top: 1px; width: 8px; height: 8px; border-left: 1.5px solid var(--color-border-strong); border-bottom: 1.5px solid var(--color-border-strong); }
  #proto-room .pr-forks li.is-taken { color: var(--color-fg); }
  #proto-room .pr-forks li.is-taken::before { border-color: var(--color-fg); }
}
@media (prefers-reduced-motion: reduce) {
  #proto-room .pr-map { --fm-draw: 0ms; --fm-fade: 0ms; }
  #proto-room .pr-map *, #proto-room .pr-map *::before, #proto-room .pr-map *::after { transition: none !important; }
}
#proto-room .pr-h:focus { outline: none; }
#proto-room .pr-h:focus-visible { outline: 3px solid var(--color-accent-secondary); outline-offset: 3px; }
#proto-room .pr-btn[hidden] { display: none; }
#proto-room .pr-custom[hidden] { display: none; }

/* ---- See your room: additions ---- */
#proto-room .pr-body { border-radius: 22px; background: var(--color-bg); overflow: hidden; }
#proto-room .pr-bar { display: flex; justify-content: space-between; gap: var(--spacing-sm); }
#proto-room .pr-field { display: grid; gap: 4px; }
#proto-room select.pr-input { width: 100%; }
#proto-room .pr-check { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 4px 2px; font-size: 15px; cursor: pointer; }
#proto-room .pr-check input { width: 18px; height: 18px; flex: none; accent-color: var(--color-fg); }
#proto-room .pr-check:has(input:focus-visible) { outline: 3px solid var(--color-accent-secondary); outline-offset: 2px; }
#proto-room .pr-btn--main { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg); }
#proto-room .pr-btn--main:hover { background: var(--cta-bg-active); }
#proto-room .pr-btn:focus-visible, #proto-room .pr-link:focus-visible, #proto-room .pr-toggle:focus-visible, #proto-room .pr-tab:focus-visible, #proto-room .pr-input:focus-visible { outline: 3px solid var(--color-accent-secondary); outline-offset: 2px; }
#proto-room .pr-line { font-size: 15px; }
#proto-room .pr-view[hidden] { display: none; }
#proto-room .pr-opt-cost[data-warn]::before { content: "Not available on your date. "; font-weight: 700; color: var(--t-alert); }

/* palettes: illustration colours are content, not interface colours */
#proto-room [data-palette="sage"]     { --pr-cloth: #F1EEDF; --pr-bloom: #9DB08F; --pr-leaf: #5F7A5A; --pr-flame: #E7C766; }
#proto-room [data-palette="blush"]    { --pr-cloth: #F4D9D6; --pr-bloom: #E39AA2; --pr-leaf: #7D8E69; --pr-flame: #E0B85E; }
#proto-room [data-palette="midnight"] { --pr-cloth: #2D3C5C; --pr-bloom: #C9A15A; --pr-leaf: #4E6B60; --pr-flame: #D9B25F; }
#proto-room [data-palette="heather"]  { --pr-cloth: #D9D3C7; --pr-bloom: #8F7BA8; --pr-leaf: #6C7A66; --pr-flame: #E3C57A; }
#proto-room .pr-chips { margin-left: auto; display: flex; gap: 3px; align-self: center; }
#proto-room .pr-chips i { width: 14px; height: 24px; border: 1px solid var(--color-border-strong); }
#proto-room .pr-chips i:nth-child(1) { background: var(--pr-cloth); }
#proto-room .pr-chips i:nth-child(2) { background: var(--pr-bloom); }
#proto-room .pr-chips i:nth-child(3) { background: var(--pr-leaf); }

/* the room */
#proto-room .pr-room { position: relative; margin: 0; background: var(--color-bg-surface); border-bottom: 1px solid var(--color-border); color: var(--color-fg); }
#proto-room .pr-room[data-cam] { background: color-mix(in srgb, var(--color-fg) 14%, var(--color-bg)); }
#proto-room #pr-svg { display: block; width: 100%; height: auto; }
#proto-room #pr-svg :where(path, rect, ellipse, circle) { fill: none; stroke: currentColor; stroke-width: .9; stroke-linejoin: round; stroke-linecap: round; }
#proto-room #pr-svg .pr-faint { opacity: .4; }
#proto-room #pr-svg .pr-dash { stroke-dasharray: 4 3; }
#proto-room #pr-svg .pr-brk { stroke-width: 2.2; stroke: var(--color-accent); }
#proto-room #pr-svg .pr-cl { fill: var(--pr-cloth); transition: fill 240ms ease-out; }
#proto-room #pr-svg .pr-bl { fill: var(--pr-bloom); transition: fill 240ms ease-out; }
#proto-room #pr-svg .pr-lf { fill: var(--pr-leaf); transition: fill 240ms ease-out; }
#proto-room #pr-svg .pr-flame { fill: var(--pr-flame); stroke-width: .6; transition: fill 240ms ease-out; }
#proto-room #pr-svg .pr-ch { fill: var(--color-bg); }
#proto-room #pr-svg .pr-shade { fill: currentColor; stroke: none; opacity: .1; }
#proto-room #pr-svg .pr-vase { fill: var(--color-bg); }
#proto-room #pr-svg .pr-wax { fill: var(--color-bg); stroke-width: .7; }
#proto-room .pr-dec, #proto-room .pr-bare, #proto-room .pr-lawn { display: none; }
#proto-room [data-room="glasshouse"] .pr-r-glasshouse, #proto-room [data-room="gallery"] .pr-r-gallery, #proto-room [data-room="garden"] .pr-r-garden { display: inline; }
#proto-room [data-room="garden"] .pr-walls, #proto-room [data-room="garden"] .pr-boards { display: none; }
#proto-room [data-room="garden"] .pr-lawn { display: inline; }
#proto-room [data-cam] .pr-bare { display: inline; }
#proto-room [data-cam] .pr-dec, #proto-room [data-cam] .pr-shell { display: none; }
#proto-room [data-cam] #pr-tables { filter: drop-shadow(0 0 3px var(--color-accent)); }
#proto-room .pr-room-cap { padding: 6px var(--spacing-md) 8px; font-size: 13px; line-height: 1.4; color: var(--color-fg-muted); }
#proto-room .pr-pill { position: absolute; top: 8px; left: 8px; padding: 2px 8px; background: var(--color-bg-inverse); color: var(--color-fg-on-inverse-strong); font-size: 13px; font-weight: 700; }
#proto-room .pr-pill::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--t-alert); }
#proto-room .pr-pill[hidden] { display: none; }

/* price lines */
#proto-room .pr-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
#proto-room .pr-lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--spacing-sm); padding: 6px 0; border-bottom: 1px solid var(--color-border); font-size: 14px; line-height: 1.35; }
#proto-room .pr-lines .pr-l-sub { grid-column: 1; color: var(--color-fg-muted); font-size: 13px; }
#proto-room .pr-lines .pr-l-amt { grid-row: 1; grid-column: 2; font-weight: 700; }
#proto-room .pr-lines .pr-l-un { grid-column: 1 / -1; display: grid; gap: 4px; padding: 4px 0; font-size: 14px; }
#proto-room .pr-lines .pr-l-un b { color: var(--t-alert); }
#proto-room .pr-lines .is-un .pr-l-name { text-decoration: line-through; }
#proto-room .pr-total { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
#proto-room .pr-total strong { font-family: var(--font-display); font-size: 28px; }
#proto-room .pr-btn--sm { min-height: 44px; }

/* camera toggle and team desk */
#proto-room .pr-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--color-border-strong); background: var(--color-bg); color: var(--color-fg); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
#proto-room .pr-toggle[aria-pressed="true"] { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg); }
#proto-room .pr-toggle-dot { width: 12px; height: 12px; flex: none; border: 2px solid currentColor; border-radius: 50%; }
#proto-room .pr-toggle[aria-pressed="true"] .pr-toggle-dot { background: currentColor; }
#proto-room .pr-phone[data-cam] .pr-bar-mode { color: var(--t-alert); }
#proto-room .pr-desk { padding: var(--spacing-md); border: 1.5px dashed var(--color-border-strong); background: var(--color-bg); display: grid; gap: var(--spacing-sm); }
#proto-room .pr-desk.is-sent { border-style: solid; }
#proto-room .pr-desk-h { margin: 0; font-family: var(--font-display); font-size: 18px; color: var(--color-fg); }
#proto-room .pr-desk-state { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
#proto-room .pr-dot { width: 10px; height: 10px; border: 2px solid var(--color-fg); border-radius: 50%; }
#proto-room .pr-desk.is-sent .pr-dot { background: var(--t-good); border-color: var(--t-good); }
#proto-room .pr-desk-dl { margin: 0; display: grid; gap: 4px; font-size: 14px; line-height: 1.4; }
#proto-room .pr-desk-dl > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: var(--spacing-sm); }
#proto-room .pr-desk-dl dt { font-weight: 700; }
#proto-room .pr-desk-dl dd { margin: 0; }
@media (prefers-reduced-motion: reduce) { #proto-room #pr-svg * { transition: none !important; } }
#proto-room .pr-msg--ok { color: var(--color-fg); font-weight: 500; }

/* QA: camera mode contrast (light theme: 3.0 and 3.5 before) */
#proto-room .pr-phone[data-cam] .pr-bar-mode { color: #FF8A7A; }
#proto-room .pr-room[data-cam] .pr-room-cap { color: var(--color-fg); }

#proto-room .pr-noscript { margin: var(--spacing-sm) 0; padding: var(--spacing-sm); border: 1px solid var(--color-border); }


/* ---- pz-layout.css ---- */
/* pz-layout: page rhythm and the secondary-detail disclosures (layout pass, 2026-10-05). Semantic tokens only. */

/* section rhythm: tighter than the shell default */
.section { padding: var(--spacing-3xl) 0; }
.page-hero { padding: var(--spacing-3xl) 0 var(--spacing-2xl); }
.page-hero h1 { margin-bottom: var(--spacing-lg); }
.page-hero .hero-sub { margin-bottom: var(--spacing-xl); }
.section-label { margin-bottom: var(--spacing-lg); }
.section-split { gap: var(--spacing-3xl); }
/* hero: both columns start at the top, so the stats sit beside the headline instead of dropping to its foot */
.page-hero .hero-grid { align-items: start; }
.page-hero .hero-side { align-self: start; justify-content: flex-start; gap: var(--spacing-lg); }
#proto-ask, #proto-room, #proto-day { scroll-margin-top: calc(var(--sitenav-h, 64px) + 16px); }
@media (max-width: 900px) { .section-split { gap: var(--spacing-md); } }
@media (max-width: 600px) {
  .section { padding: var(--spacing-xl) 0; }
  .page-hero { padding: var(--spacing-lg) 0 var(--spacing-lg); }
  .section-label { margin-bottom: var(--spacing-md); }
}

/* built: the small cards are a compact list on phones; wide screens keep them open */
.bu-card > details > summary { display: block; min-height: 0; padding: 0; }
.bu-card > details > summary:hover { background: none; }
.bu-card > details > summary h3 { margin: 0 0 var(--spacing-sm); }
.bu-card > details > summary .bu-card__kicker { display: block; }
.bu-flowd > summary { display: none; }
@media (min-width: 601px) {
  .bu-card > details > summary { cursor: default; pointer-events: none; }
  .bu-card > details > summary::after { display: none; }
}
@media (max-width: 600px) {
  .bu-grid { gap: 6px; margin-top: var(--spacing-md); }
  .bu-card { padding: 0; }
  .bu-card > details > summary { position: relative; min-height: 44px; padding: 10px 44px 10px 14px; }
  .bu-card > details > summary::after { position: absolute; right: 16px; top: 22px; margin: 0; }
  .bu-card > details[open] > summary::after { margin: 0; top: 26px; }
  .bu-card > details > summary h3 { margin: 0; font-size: 18px; }
  .bu-card > details > :not(summary) { margin-left: 14px; margin-right: 14px; }
  .bu-card > details > .bu-tech { margin-bottom: 14px; }
  .bu-flowd > summary { display: flex; padding: 0; border-top: 1px solid var(--color-border); margin-top: var(--spacing-md); font-weight: 600; }
  .bu-flowd > summary:hover { background: none; }
  .bu-flowd .bu-flow { margin-top: var(--spacing-sm); }
  .bu-lead { padding: 14px; }
  .bu-here { margin-top: var(--spacing-md); padding-top: var(--spacing-sm); }
}

/* fit: two columns on wide screens, honest-gaps and plan cards tighter */
@media (min-width: 901px) {
  .cp-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--spacing-2xl); }
  .cp-fit .lineup-item:nth-child(-n+2) { border-top: 0; padding-top: 0; }
}
.fr-grid { margin-top: var(--spacing-lg); gap: var(--spacing-md); }
.fr-card { padding: var(--spacing-md) var(--spacing-lg); }
@media (max-width: 600px) {
  .fr-grid { margin-top: var(--spacing-md); gap: var(--spacing-sm); }
  .fr-card { padding: 14px; }
}

/* wide: always-open details read as plain blocks, so no chevron and no toggling */
@media (min-width: 601px) {
  details[data-wide-open] > summary::after { display: none; }
  details[data-wide-open] > summary { cursor: default; }
  .pd__rules[data-wide-open] > summary:hover { background: none; }
}

.section-label .line { border-radius: 0; }


/* ---- pz-proto.css ---- */
/* pz-proto: one anatomy for the three sketches (header, phone + desk, flow map, decisions).
   Loaded after proto-*.css and prefixed with #product so it wins over their per-sketch rules. Semantic tokens only. */
#product .px-off { display: none !important; }
#product .px { margin: var(--spacing-lg) 0 0; }
#product .px [hidden] { display: none !important; }

/* header: title, concept-sketch notice, need, test question */
#product .px .px-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-sm) var(--spacing-lg); margin: 0 0 var(--spacing-lg); align-items: start; }
#product .px .px-title { grid-column: 1 / -1; margin: 0; font-family: var(--font-display); font-size: var(--type-h3); font-weight: 400; line-height: 1.2; color: var(--color-fg); }
#product .px .px-notice { grid-column: 1 / -1; justify-self: start; margin: 0; padding: 4px 12px; border: 1px dashed var(--color-border-strong); border-radius: 0; background: var(--color-bg-surface); color: var(--color-fg); font-size: 14px; font-weight: 500; line-height: 1.45; }
#product .px .px-lead { max-width: none; margin: 0; font-size: 16px; line-height: 1.5; color: var(--color-fg); }
#product .px .px-tag { display: inline-block; margin: 0 8px 0 0; padding: 0 6px; border: 1px solid var(--color-accent); border-radius: 0; background: var(--color-bg-surface); color: var(--color-accent); font-size: var(--type-caption); font-weight: 700; }

/* body: tabs (phones only), then phone + desk, flow map, decisions */
#product .px .px-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-template-rows: none; gap: var(--spacing-lg); align-items: start; }
#product .px .px-grid > * { grid-area: auto; margin: 0; min-width: 0; max-width: none; }
#product .px .px-stage { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: var(--spacing-xl); align-items: start; margin: 0; }
#product .px .px-stage > * { grid-area: auto; min-width: 0; max-width: none; }
#product .px .pa-stage, #product .px .pr-stage, #product .px .pd__stage { margin: 0; }
#product .px .px-aside { display: grid; gap: var(--spacing-md); }

/* the desk beside the phone: same card everywhere */
#product .px :is(.pa-desk, .pr-desk, .pd__desk, .pd__rules) { padding: var(--spacing-md); border: 1px solid var(--color-border-strong); border-radius: 0; background: var(--color-bg-surface); }
#product .px :is(.pa-desk-h, .pr-desk-h, .pd__desk-h) { margin: 0 0 var(--spacing-xs); font-family: var(--font-display); font-size: var(--type-h3); font-weight: 400; color: var(--color-fg); }
#product .px .pd__rules > summary { min-height: 44px; padding: 0; font-family: var(--font-display); font-size: var(--type-h3); font-weight: 400; color: var(--color-fg); }
#product .px .pd__rules ul { margin-top: var(--spacing-sm); font-size: 15px; line-height: 1.45; }

/* panels read as titled blocks when the tabs are hidden */
#product .px .px-sub { margin: 0 0 var(--spacing-sm); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-fg-muted); }

/* decisions: first card, then a disclosure for the rest */
#product .px .px-dcs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spacing-sm); }
#product .px .px-more { margin-top: var(--spacing-sm); }
#product .px .px-more > summary { min-height: 44px; font-weight: 700; color: var(--color-accent-secondary); }
#product .px .px-more[open] > .px-dcs { margin-top: var(--spacing-sm); }
#product .px .px-more[open] .px-dc { margin-top: 0; }
#product .px .px-dc { margin: 0; padding: var(--spacing-md); border: 1px solid var(--color-border-strong); border-radius: 0; background: var(--color-bg-surface); display: grid; gap: var(--spacing-sm); align-content: start; }
#product .px .px-dc-h { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 400; line-height: 1.25; color: var(--color-fg); }
#product .px .px-dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-sm) var(--spacing-lg); font-size: 14px; line-height: 1.45; }
#product .px .px-dl > div { display: block; }
#product .px .px-dl dt { font-weight: 700; color: var(--color-fg); }
#product .px .px-dl dd { margin: 0; color: var(--color-fg); }

/* flow map card: same frame in all three */
#product .px :is(.pa-map, .pr-map, .pd__map) { margin: 0; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: 0; background: var(--color-bg-surface); }

@media (max-width: 900px) {
  #product .px .px-head { grid-template-columns: minmax(0, 1fr); }
  #product .px .px-stage { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-lg); }
  #product .px .px-stage > :first-child { max-width: 420px; }
}
@media (max-width: 600px) {
  #product .px .px-head { gap: 6px; margin-bottom: var(--spacing-md); }
  #product .px .px-title { font-size: 20px; }
  #product .px .px-notice { font-size: 13px; padding: 3px 8px; }
  #product .px .px-lead { font-size: 15px; }
  #product .px .px-grid { gap: var(--spacing-sm); }
  #product .px .px-stage { gap: var(--spacing-md); }
  #product .px .px-stage > :first-child { max-width: none; }
  #product .px .px-sub { display: none; }
  #product .px .px-dc { padding: 14px; }
  #product .px :is(.pa-desk, .pr-desk, .pd__desk, .pd__rules) { padding: 14px; }
  /* the three inner tabs share one look */
  #product .px :is(.pa-tab, .pr-tab, .pd__tab) { border: 1px solid var(--color-border-strong); border-radius: 0; background: var(--color-bg-surface); color: var(--color-fg); }
  #product .px :is(.pa-tab, .pr-tab, .pd__tab)[aria-selected="true"] { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg); }
  #product .px :is(.pa-tablist, .pr-tablist, .pd__tablist) { gap: 0; }
}

/* the phone bezel is the one rounded shape. In dark mode the inverse token turns cream, so the bezel becomes a dark slab with a light edge */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #product .px :is(.pa-phone, .pr-phone, .pd__phone) { background: var(--color-border); box-shadow: 0 0 0 1px var(--color-fg-muted); }
  :root:not([data-theme="light"]) #product .px :is(.pa-bar, .pr-bar, .pd__bar) { color: var(--color-fg); }
}
:root[data-theme="dark"] #product .px :is(.pa-phone, .pr-phone, .pd__phone) { background: var(--color-border); box-shadow: 0 0 0 1px var(--color-fg-muted); }
:root[data-theme="dark"] #product .px :is(.pa-bar, .pr-bar, .pd__bar) { color: var(--color-fg); }

/* one bezel radius, one inner-screen radius */
#product .px :is(.pa-phone, .pr-phone, .pd__phone) { border-radius: 32px; }
#product .px :is(.pa-screens, .pr-body, .pr-view, .pd__screens, .pd__screen) { border-radius: 22px; }


/* ---- zw-cta.css ---- */
/* zw-cta: calls to action and selected states. Gilchrist is outlined and square; hover and selected
   fill with ink and a white label. Three tokens, so dark mode can re-bind them:
     --cta-bg         ink            white label 19.9:1
     --cta-bg-active  warm ink       white label 14.8:1
     --cta-fg         white */
:root {
  --cta-bg: var(--gl-ink);
  --cta-bg-active: var(--gl-ink-soft);
  --cta-fg: var(--gl-white);
}

/* outlined buttons fill on hover */
.btn.btn-secondary:hover { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg); }
.btn.btn-secondary:active { background: var(--cta-bg-active); color: var(--cta-fg); border-color: var(--cta-bg-active); }

/* skip link */
a.skip-link { background: var(--cta-bg); color: var(--cta-fg); }

/* selected tabs and pressed segmented buttons (use these classes in section parts) */
[role="tab"][aria-selected="true"], .seg button[aria-pressed="true"] { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--cta-bg); }


/* ---- zw-polish.css ---- */
/* zw-polish: restrained motion layer. Progressive enhancement; every movement sits under
   prefers-reduced-motion: no-preference. Owns the page easing curves. */
:root {
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.3, 1.3, .5, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --ease-spring: linear(0, .32 8%, .78 20%, 1.03 34%, 1.01 48%, 1); }
}

@media (prefers-reduced-motion: no-preference) {
  /* headline underline draws once as its heading enters the viewport (static and full where unsupported) */
  @supports (animation-timeline: view()) {
    .headline:has(.hl) { view-timeline: --zw-hl block; }
    .headline .hl::after {
      transform-origin: left center;
      animation: zw-hl-draw linear both;
      animation-timeline: --zw-hl;
      animation-range: entry 40% cover 30%;
    }
  }
  /* reading progress on the compositor; nav.js keeps driving --read where this is unsupported */
  @supports (animation-timeline: scroll()) {
    .sitenav__bar { animation: zw-read linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes zw-hl-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes zw-read { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* screen swap (zw-motion.js, only if a section part builds a stepped prototype): zw-motion.js sets [data-vton] on the screens container while it swaps; the rule below names it. */
@media (prefers-reduced-motion: no-preference) {
  :root { view-transition-name: none; }
  [data-vton] { view-transition-name: zw-screens; view-transition-class: zw-screens; }
  ::view-transition-group(*.zw-screens) { animation-duration: 180ms; animation-timing-function: var(--ease-out); }
  ::view-transition-old(*.zw-screens) { animation: 180ms var(--ease-out) both zw-vt-out; }
  ::view-transition-new(*.zw-screens) { animation: 180ms var(--ease-out) both zw-vt-in; }
  [data-vtdir="back"]::view-transition-old(*.zw-screens) { animation-name: zw-vt-out-back; }
  [data-vtdir="back"]::view-transition-new(*.zw-screens) { animation-name: zw-vt-in-back; }
}
@keyframes zw-vt-out { to { opacity: 0; translate: -6px 0; } }
@keyframes zw-vt-in { from { opacity: 0; translate: 6px 0; } }
@keyframes zw-vt-out-back { to { opacity: 0; translate: 6px 0; } }
@keyframes zw-vt-in-back { from { opacity: 0; translate: -6px 0; } }


/* ---- zx-dark.css ---- */
/* zx-dark: dark mode by overriding semantic tokens only. Active when the system asks for dark (unless the
   page pins data-theme="light") or when data-theme="dark". Warm near-black ground, cream copy, gold accent.
   Derived: the live Gilchrist site has no dark theme. Gold passes as text on dark (#C9A36B 7.9:1 on #141311).
     ground #0F0E0C   surface #1A1815   band #171512   band surface #211E1A   footer #141311
     fg #F4F1EB 16.6:1 on ground    muted #B9B3A5 8.9:1 on ground, 7.2:1 on band surface */
:root {
  --gd-ground:  #0F0E0C;
  --gd-surface: #1A1815;
  --gd-band:    #171512;
  --gd-band-surface: #211E1A;
  --gd-footer:  #141311;
  --gd-line:    #3A3631;
  --gd-fg:      #F4F1EB;
  --gd-muted:   #B9B3A5;
  --gd-gold:    #C9A36B;
  --gd-gold-hi: #E0C08C;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-fg: var(--gd-fg);
    --color-fg-muted: var(--gd-muted);
    --color-bg: var(--gd-ground);
    --color-bg-surface: var(--gd-surface);
    --color-border: var(--gd-line);
    --color-border-strong: var(--gd-fg);
    --color-white: var(--gd-fg);
    --color-accent: var(--gd-gold);
    --color-accent-hover: var(--gd-gold-hi);
    --color-accent-active: var(--gd-gold-hi);
    --color-accent-fg: #090909;
    --color-accent-secondary: var(--gd-gold);
    --color-gold-line: #B28A56;
    --color-bg-inverse: var(--gd-fg);
    --color-fg-on-inverse: #090909;
    --color-fg-on-inverse-strong: #090909;
    --t-good: #4CC79A;
    --t-alert: #FF8A7A;
    --cta-bg: var(--gd-fg);
    --cta-bg-active: var(--gd-gold-hi);
    --cta-fg: #090909;
    --gl-ink: var(--gd-fg);
    --gl-ink-soft: var(--gd-fg);
    --gl-white: var(--gd-ground);
    --gl-gold: #B28A56;
    --gl-cream: var(--gd-band);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-fg: var(--gd-fg);
  --color-fg-muted: var(--gd-muted);
  --color-bg: var(--gd-ground);
  --color-bg-surface: var(--gd-surface);
  --color-border: var(--gd-line);
  --color-border-strong: var(--gd-fg);
  --color-white: var(--gd-fg);
  --color-accent: var(--gd-gold);
  --color-accent-hover: var(--gd-gold-hi);
  --color-accent-active: var(--gd-gold-hi);
  --color-accent-fg: #090909;
  --color-accent-secondary: var(--gd-gold);
  --color-gold-line: #B28A56;
  --color-bg-inverse: var(--gd-fg);
  --color-fg-on-inverse: #090909;
  --color-fg-on-inverse-strong: #090909;
  --t-good: #4CC79A;
  --t-alert: #FF8A7A;
  --cta-bg: var(--gd-fg);
  --cta-bg-active: var(--gd-gold-hi);
  --cta-fg: #090909;
  --gl-ink: var(--gd-fg);
  --gl-ink-soft: var(--gd-fg);
  --gl-white: var(--gd-ground);
  --gl-gold: #B28A56;
  --gl-cream: var(--gd-band);
}

/* bands and footer stay a step apart from the ground in dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band { --color-bg: var(--gd-band); --color-bg-surface: var(--gd-band-surface); }
  :root:not([data-theme="light"]) .site-footer {
    --color-bg-inverse: var(--gd-footer); --color-fg-on-inverse: var(--gd-fg); --color-fg-on-inverse-strong: #FFFFFF;
    --color-fg-on-inverse-muted: var(--gd-muted); --color-fg-on-inverse-soft: var(--gd-fg); --color-inverse-line: var(--gd-line);
    border-top-color: var(--gd-line);
  }
}
:root[data-theme="dark"] .band { --color-bg: var(--gd-band); --color-bg-surface: var(--gd-band-surface); }
:root[data-theme="dark"] .site-footer {
  --color-bg-inverse: var(--gd-footer); --color-fg-on-inverse: var(--gd-fg); --color-fg-on-inverse-strong: #FFFFFF;
  --color-fg-on-inverse-muted: var(--gd-muted); --color-fg-on-inverse-soft: var(--gd-fg); --color-inverse-line: var(--gd-line);
  border-top-color: var(--gd-line);
}


/* ---- zy-a11y.css ---- */
/* zy-a11y: low-vision fixes (2026-10-04). Loads after the parts it adjusts and before zz-no-stripes.css.
   Default look is unchanged except: no text under 13px, and 44px tap areas on the header mark and footer links.
   Everything else only applies under forced colours, prefers-contrast: more, or while focusing. */

/* 2.4.11: a control scrolled into view by Tab / Shift+Tab never lands under the sticky header.
   On focusables only (sections keep their own scroll-margin, so nav jumps are unchanged); */
main :is(a[href], button, input, select, textarea, summary, [tabindex]) { scroll-margin-top: calc(var(--sitenav-h, 64px) + 16px); }

/* skip link: fully clipped until focused, so it cannot leak into captures or overlay content */
.skip-link:not(:focus-visible) { clip-path: inset(50%); pointer-events: none; }

/* minimum text size 13px (kickers, hero stamp and stat labels) */
.section-label { font-size: 13px; letter-spacing: 0.15em; }
.hero-eyebrow .stamp { font-size: 13px; }
.hero-stat .label, .page-hero .hero-stat .label { font-size: 13px; }

/* target size: the header mark is a 24px image; give it a 44px hit area without moving it */
.site-header .nav-logo { min-width: 44px; min-height: 44px; padding: 10px; margin: -10px; justify-content: center; box-sizing: border-box; }
/* footer links were 19px tall: 44px rows */
.footer-col ul:has(> li > a) { margin-block: -12px; }
.footer-col li:has(> a) { margin-bottom: 0; }
.footer-col li > a { display: inline-block; padding-block: 12px; line-height: 20px; }

/* forced colours (Windows High Contrast): backgrounds are flattened, so states and status dots drawn with fills vanish */
@media (forced-colors: active) {
  /* selected tabs and pressed buttons: system highlight */
  [role="tab"][aria-selected="true"], .seg button[aria-pressed="true"], [aria-current="step"] {
    forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight;
  }
  [role="tab"] { border: 1px solid ButtonText; }
  /* checked options keep a visible edge */
  label:has(> input:checked), label:has(input[type="radio"]:checked) { outline: 2px solid Highlight; outline-offset: -2px; }
  /* status: a dot plus a word. Filled = CanvasText, open ring = in progress */
  .gl-dot::before { forced-color-adjust: none; background: CanvasText; border-color: CanvasText; }
  .gl-dot--open::before { background: transparent; border: 2px solid CanvasText; box-sizing: border-box; }
  :focus-visible { outline: 3px solid Highlight; }
}

/* prefers-contrast: more: hairlines and dividers use the muted text colour instead of sand */
@media (prefers-contrast: more) {
  :root { --color-border: var(--color-fg-muted); }
}


/* ---- zy-disclosure.css ---- */
/* one disclosure style for every <details> on the page: right-aligned chevron, rotates when open */
main details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
main details > summary::-webkit-details-marker { display: none; }
main details > summary::before { content: none; display: none; }
main details > summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin: 0 6px 4px auto;
  border-style: solid; border-color: var(--color-fg-muted); border-width: 0 2px 2px 0;
  transform: rotate(45deg); transition: transform 0.2s ease, border-color 0.2s ease;
}
main details[open] > summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
main details > summary:hover::after { border-color: var(--color-fg); }
main details > summary:hover { background: var(--color-bg-surface); }
@media (prefers-reduced-motion: reduce) { main details > summary::after { transition: none; } }

/* fit rows keep their grid; chevron sits in the last column on phones, hidden on wide screens where rows are always open */
.cp-fit .lineup-item > summary { display: grid; }
@media (min-width: 601px) { .cp-fit .lineup-item > summary::after { display: none; } .cp-fit .lineup-item > summary:hover { background: none; cursor: default; } }
@media (max-width: 600px) {
  .cp-fit .lineup-item > summary::after, .cp-fit .lineup-item[open] > summary::after { content: ""; justify-self: center; margin: 0 0 4px; }
  .cp-fit .lineup-item[open] > summary::after { margin: 4px 0 0; }
}

/* disclosures open rather than snap: height eases where interpolate-size exists (Chrome), content fades elsewhere.
   End states apply always; the transition only while html.zw-dtoggle is set (nav.js, on a summary click). */
@media (prefers-reduced-motion: no-preference) {
  main details::details-content { block-size: 0; opacity: 0; overflow-x: visible; overflow-y: clip; overflow-clip-margin: 6px; }
  main details[open]::details-content { block-size: auto; opacity: 1; }
  .zw-dtoggle main details { interpolate-size: allow-keywords; }
  .zw-dtoggle main details > :not(summary) { interpolate-size: numeric-only; }
  .zw-dtoggle main details::details-content {
    transition: block-size .26s var(--ease-out), opacity .2s ease, content-visibility .26s allow-discrete;
  }
}


/* ---- zz-no-stripes.css ---- */
/* zz-no-stripes: loads last. No decorative accent stripes (top strips, left bars) anywhere. Do not add them in section parts;
   tools/final_check.js flags any asymmetric border of 2px or more in --color-accent. Arrow triangles and state markers are fine. */