/* ==========================================================================
   exp35 . p35-product.css
   Page stylesheet owned by the /product builder. Styles exactly one page:

     product.html            PLAN-35-IA §8.1  "the whole model, no offer"

   Load order: LAST, after site.css / themes.css / exp33.css / hero-v2.css /
   hdr-event.css. Every class below is prefixed .pr-; nothing here reaches a
   shared component, a partial, or another page.

   COLOUR IS A CONTRACT, NOT DECORATION (BUILDER-35-COMMON):
     var(--pass)     verified
     var(--fail)     violated
     var(--stale)    changed / must be earned again
     var(--unknown)  structure at rest, nothing claimed yet
     var(--signal)   affordance ONLY -- the section index and the links.
                     It never paints a state on this page.

   TYPE: var(--mono) for IDs, labels, diagram text and record fields.
         var(--prose) for every sentence a human reads. Body >= 1.05rem,
         line-height >= 1.6, measure <= 68ch (site.css floors, not overridden).

   MOTION: the shell's arrival ink, unchanged. pathLength="1" + .dr with
   --d / --dur for strokes, .fx with --td for text, [data-reveal] for blocks.
   site.js adds .in on arrival. prefers-reduced-motion holds the final frame
   through site.css's own guard; nothing here animates outside that mechanism.

   All 7 themes: paper, riso, terminal (default), brutal, acid, olo, night.
   ========================================================================== */


/* ==========================================================================
   0. ADDITIVE STATE TOKENS
   --------------------------------------------------------------------------
   assets/theme-verified.css carries the cross-theme defaults for --stale and
   --unknown, but it is loaded only by index.html. This page repeats the SAME
   contract locally so the token names mean the same thing here as they do in
   the built sections. Values match theme-verified.css where it defines them.
   Both are mid-tone on purpose: legible on the warm ground and on the dark
   grounds without a per-theme fork for every component.
   ========================================================================== */
:root{ --stale:#AF7317; --unknown:#7E7E79; }
/* the tube has one hue, so a gray "inactive" reads as a dead pixel. A
   desaturated phosphor keeps the theme's identity and still sits far enough
   below --pass (#2BFF6F) that structure never reads as verified. These are
   the SAME two rules theme-verified.css ships, value for value: the token
   contract must not drift between this page and the built sections. */
html[data-theme="terminal"]{ --unknown:#6FAE86; }


/* ==========================================================================
   1. HERO  -- sparse. One sentence of category, one of definition, one action.
   ========================================================================== */
.pr-hero{padding:clamp(3rem,6.4vw,5.6rem) 0 clamp(2rem,3.6vw,3rem);}
.pr-hero h1{max-width:17ch;text-wrap:balance;}
.pr-sub{
  /* rides the sitewide hero-lead scale (2026-08-27 leads-fill-the-column
     ruling) — this page-owned sub must not lag the shell's .hero-sub */
  margin:clamp(1.3rem,2vw,1.8rem) 0 0;
  font-family:var(--prose);
  font-size:clamp(1.2rem,1rem + .6vw,1.38rem);line-height:1.6;
  color:var(--ink-60);max-width:var(--measure-hero,64ch);
}
.pr-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.5rem;margin:clamp(1.8rem,3vw,2.5rem) 0 0;}


/* ==========================================================================
   2. THE OBJECT MODEL  -- the page's one essential figure.
   It sits between the hero and the eight sections because everything below
   is a walk through it. The tree shape IS the argument: one component, and
   everything Proof records about it, hanging off it.
   ========================================================================== */
.pr-model{padding:0 0 clamp(3rem,5vw,4.4rem);}
.pr-model .fig{margin:1.4rem 0 0;max-width:900px;}
.pr-lab{
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40);
  margin:0 0 .3rem;max-width:none;
}
/* the same label, used as a sub-head inside a section body */
.pr-body .pr-lab{margin:2.1rem 0 .2rem;}
.pr-model-say{
  margin:.2rem 0 0;font-family:var(--prose);
  font-size:clamp(1.02rem,1.3vw,1.12rem);line-height:1.6;color:var(--ink);max-width:56ch;
}
/* the figure scrolls inside its own box below ~640px rather than pushing the
   document sideways -- the shell's own .fig-scroll pattern, tuned to this
   viewBox so it stops scrolling as soon as the labels are legible. */
.pr-model .fig-scroll svg{min-width:620px;}

/* tree ink. Structure at rest is --unknown in every theme: nothing in a
   schema is verified, violated or stale, so no state colour appears here. */
.pr-tree .st{stroke:var(--unknown,var(--hair-strong));stroke-width:1.25;}
.pr-tree .pr-rule{stroke:var(--hair);stroke-width:1;}
.pr-tree .pr-l0{font-size:12.5px;font-weight:600;letter-spacing:.13em;fill:var(--ink);}
.pr-tree .pr-l1{font-size:11.5px;font-weight:500;letter-spacing:.11em;fill:var(--ink);}
.pr-tree .pr-l2{font-size:11px;letter-spacing:.04em;fill:var(--ink-60);}
.pr-tree .pr-gl{font-size:10.5px;letter-spacing:.01em;fill:var(--muted);}


/* ==========================================================================
   3. THE EIGHT SECTIONS
   A left rail carries the index and the one-word subject; the body carries
   the heading, the prose and the evidence. Two columns keep eight sections
   scannable without turning the page into a stack of identical bands.
   ========================================================================== */
.pr-sec{padding:clamp(3.2rem,5vw,4.6rem) 0;}
.pr-row{display:grid;grid-template-columns:minmax(0,11.5rem) minmax(0,1fr);gap:0 clamp(1.8rem,3.6vw,3.6rem);align-items:start;}
.pr-rail{display:flex;flex-direction:column;gap:.35rem;padding-top:.5rem;}
.pr-n{font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.1em;color:var(--signal);}
.pr-rl{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40);}
.pr-body{min-width:0;}
.pr-body h2{margin:0 0 .9rem;max-width:22ch;text-wrap:balance;}
.pr-body .lead{margin:0 0 1rem;}
.pr-body .lead:last-of-type{margin-bottom:0;}
.pr-body .fig{margin:2rem 0 0;}
.pr-body .fig-scroll svg{min-width:560px;}
.pr-note{
  margin:1.5rem 0 0;font-family:var(--prose);font-size:1.05rem;line-height:1.6;
  color:var(--ink);max-width:62ch;
}
.pr-note b{font-weight:600;}
.pr-after{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.5rem;margin:1.5rem 0 0;}

/* ------------------------------------------------------------------
   SOURCE LINE (section 3). A figure that names published identifiers
   owes the reader the route to them. Same idiom public-proof.html uses
   under each step of the chain: the repository path IS the link label,
   set in mono at caption scale so it reads as provenance, not as a CTA.
   ------------------------------------------------------------------ */
.pr-src{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .55rem;
  margin:.55rem 0 0;max-width:none;
  font-family:var(--mono);font-size:.72rem;line-height:1.7;
  letter-spacing:.02em;color:var(--muted);overflow-wrap:anywhere;
}
.pr-src .s{color:var(--hair-strong);}
.pr-src a{color:var(--signal);text-decoration:none;border-bottom:1px solid rgba(var(--signal-rgb),.35);}
.pr-src a:hover{border-bottom-color:var(--signal);}

/* ------------------------------------------------------------------
   REAL PORTAL CAPTURES (sections 1, 2, 3 and 8).
   PLAN-35-IA §10 asks for the actual product rather than illustrations,
   so four screens of the public portal sit next to the four drawings.
   The chrome comes from site.css .frame / .frame-bar / .frame-cap, which
   already carries every theme fork, so nothing is restyled here. The
   captures render in the portal's own colours (natural-screenshot ruling
   2026-08-27, themes.css). Only the rhythm inside .pr-body is set, plus
   the one-time branch disclosure that governs all four.
   ------------------------------------------------------------------ */
.pr-shot{margin:2rem 0 0;}
.pr-shot + .pr-shotnote{margin-top:.7rem;}
.pr-shotnote{
  margin:.7rem 0 0;max-width:68ch;
  font-family:var(--mono);font-size:.72rem;line-height:1.7;
  letter-spacing:.01em;color:var(--muted);
}
.pr-shotnote b{color:var(--ink);font-weight:600;}
.pr-shotnote a{color:var(--signal);text-decoration:none;border-bottom:1px solid rgba(var(--signal-rgb),.35);white-space:nowrap;}
.pr-shotnote a:hover{border-bottom-color:var(--signal);}
.pr-shot .frame-cap b{color:var(--ink);font-weight:600;}

/* small figure ink, shared by the four supporting diagrams */
.pr-fig .st{stroke-width:1.25;}
.pr-fig .pr-dim{stroke:var(--unknown,var(--hair-strong));}
.pr-fig .pr-box{fill:none;stroke:var(--hair-strong);stroke-width:1;}
.pr-fig .pr-k{font-size:11px;font-weight:600;letter-spacing:.12em;fill:var(--ink);}
.pr-fig .pr-m{font-size:10.5px;letter-spacing:.02em;fill:var(--muted);}
.pr-fig .pr-d{font-size:10.5px;letter-spacing:.12em;fill:var(--ink-40);}
.pr-fig .pr-off{fill:var(--unknown,var(--muted));}


/* ==========================================================================
   4. RECORD FIELD LIST  (section 4) -- what a change record carries.
   A record is a document, not a screenshot: mono label, prose value, one
   hairline per row.
   ========================================================================== */
.pr-fields{
  list-style:none;margin:.9rem 0 0;padding:0;
  border-top:1px solid var(--hair);
}
.pr-fields li{
  display:grid;grid-template-columns:1.9rem minmax(0,1fr);gap:0 1rem;
  padding:.72rem 0;border-bottom:1px solid var(--hair);
  font-family:var(--prose);font-size:1.02rem;line-height:1.5;color:var(--ink);
}
.pr-fields li > span{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-40);padding-top:.28em;}

/* the vocabulary triple (plan §2.3), three definitions, no colour */
.pr-terms{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:1rem;}
.pr-terms li{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:.2rem 1.4rem;align-items:baseline;}
.pr-tt{font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.06em;color:var(--ink);}
.pr-td{font-family:var(--prose);font-size:1.02rem;line-height:1.55;color:var(--ink-60);margin:0;max-width:52ch;}


/* ==========================================================================
   5. STATE CHIPS  (section 5) -- the only place on this page where state
   colour is allowed, because these ARE the states.
   ========================================================================== */
.pr-states{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--hair);}
.pr-states li{
  display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:.25rem 1.4rem;align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--hair);
}
.pr-st{display:inline-flex;align-items:baseline;gap:.55rem;font-family:var(--mono);font-size:.84rem;font-weight:600;letter-spacing:.09em;}
.pr-st i{font-style:normal;font-size:.95em;}
.pr-st.is-pass{color:var(--pass);}
.pr-st.is-stale{color:var(--stale,var(--fail));}
.pr-st.is-fail{color:var(--fail);}
.pr-sd{margin:0;font-family:var(--prose);font-size:1.02rem;line-height:1.55;color:var(--ink-60);max-width:52ch;}


/* ==========================================================================
   6. TWO COLUMNS  (section 6) -- one model, two front doors.
   ========================================================================== */
.pr-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 3rem;margin:2rem 0 0;}
.pr-col > h3{
  margin:0 0 .9rem;padding-bottom:.6rem;border-bottom:1px solid var(--hair);
  font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-40);
}
.pr-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.62rem;}
.pr-col li{
  position:relative;padding-left:1.15rem;
  font-family:var(--prose);font-size:1.02rem;line-height:1.55;color:var(--ink-60);max-width:44ch;
}
.pr-col li::before{
  content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--unknown,var(--hair-strong));
}


/* ==========================================================================
   6b. THE FILM BAND + THE MCP BEAT (2026-08-27)
   The film mounts inline right under the hero: the plate chassis itself is
   .vplate in assets/video.css (shared with the modal machinery); this block
   only sets the band's rhythm. The MCP section reuses the try-out grammar
   agents.html#connect established (.p35-mcp), restated under this page's
   .pr- prefix, plus one worked exchange plate showing what an agent gets.
   ========================================================================== */
.pr-film{padding:0 0 clamp(2.6rem,4.4vw,3.8rem);}
.pr-film .pr-lab{margin:0 0 .6rem;}

/* the worked exchange: one question in the prompt voice, the answer as the
   record fields an agent receives. Everything in it restates objects already
   shown in the captures above -- nothing here is invented. */
.pr-mcpx{
  margin:.9rem 0 0;padding:1.15rem 1.25rem 1.2rem;
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);
}
.pr-mcpx-q{
  display:flex;align-items:baseline;gap:.55rem;
  margin:0 0 1rem;max-width:none;
  font-family:var(--mono);font-size:.85rem;font-weight:500;letter-spacing:.02em;
  color:var(--ink);
}
.pr-mcpx-q span{flex:0 0 auto;color:var(--muted);}
.pr-mcpx-a{margin:0;display:grid;gap:.6rem;}
.pr-mcpx-a > div{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:.15rem 1.2rem;}
.pr-mcpx-a dt{
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-40);padding-top:.16em;
}
.pr-mcpx-a dd{
  margin:0;font-family:var(--mono);font-size:.8rem;line-height:1.65;
  color:var(--ink-60);overflow-wrap:anywhere;max-width:70ch;
}
.pr-mcpx-cap{
  margin:1.1rem 0 0;padding-top:.85rem;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:.75rem;line-height:1.7;color:var(--muted);max-width:70ch;
}
.pr-mcpx-cap a,
.pr-mcp-cap a{color:var(--signal);text-decoration:none;border-bottom:1px solid rgba(var(--signal-rgb),.35);}
.pr-mcpx-cap a:hover,
.pr-mcp-cap a:hover{border-bottom-color:var(--signal);}

/* the try-out plate: same offer, same well, same caveat line as
   agents.html#connect (.p35-mcp), under this page's prefix. */
.pr-mcp{
  margin:2rem 0 0;padding:1.15rem 1.25rem 1.2rem;
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);
  scroll-margin-top:92px;
}
.pr-mcp-h{
  font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);margin:0 0 .5rem;
}
.pr-mcp-p{margin:0 0 .9rem;font-family:var(--prose);font-size:.98rem;line-height:1.55;color:var(--ink);max-width:56ch;}
.pr-mcp-url{
  display:flex;align-items:baseline;gap:.6rem;
  margin:0;padding:.66rem .85rem .72rem;max-width:none;
  background:var(--paper);border:1px solid var(--hair);border-radius:var(--radius);
}
.pr-mcp-ps{
  flex:0 0 auto;font-family:var(--mono);font-size:.78rem;line-height:1.5;
  color:var(--muted);user-select:none;-webkit-user-select:none;
}
.pr-mcp-url code{
  font-family:var(--mono);font-size:.78rem;line-height:1.5;letter-spacing:.01em;
  color:var(--ink);min-width:0;overflow-wrap:anywhere;
  user-select:all;-webkit-user-select:all;
}
.pr-mcp-cap{
  margin:1.1rem 0 0;padding-top:.85rem;border-top:1px solid var(--hair);
  font-family:var(--mono);font-size:.75rem;line-height:1.7;color:var(--muted);max-width:none;
}
/* the seeded-branch caveat is its own line of the cap, not a trailing clause */
.pr-mcp-cap .portal-note{display:block;margin:.15rem 0 0;}


/* ==========================================================================
   7. CLOSE  (section 8)
   ========================================================================== */
.pr-keep{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem .55rem;}
.pr-keep li{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;color:var(--ink-60);
  border:1px solid var(--hair);padding:.36rem .62rem;
}
.pr-end{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.5rem;margin:2rem 0 0;}


/* ==========================================================================
   8. THEME REPAIRS
   Display themes restyle every h2 and h3 into a headline. The rail label and
   the column heads are machine labels that happen to be h3s, so they are held
   at label scale and the terminal prompt prefix is dropped from them.
   ========================================================================== */
html[data-theme="terminal"] .pr-col > h3,
html[data-theme="riso"] .pr-col > h3,
html[data-theme="brutal"] .pr-col > h3,
html[data-theme="acid"] .pr-col > h3{
  font-size:.74rem;line-height:1.4;letter-spacing:.13em;color:var(--ink-40);text-shadow:none;
}
html[data-theme="terminal"] .pr-col > h3::before{content:none;}
/* terminal re-keys --fig-st to --unknown for every .fig; the tree asks for
   --unknown by name, so the two agree and nothing needs a fork. brutal
   thickens every .fig .st, which would make the schema out-weigh the prose. */
html[data-theme="brutal"] .pr-tree .st{stroke-width:2;}
html[data-theme="brutal"] .pr-fig .st{stroke-width:2;}
html[data-theme="brutal"] .pr-fields,
html[data-theme="brutal"] .pr-fields li,
html[data-theme="brutal"] .pr-states,
html[data-theme="brutal"] .pr-states li,
html[data-theme="brutal"] .pr-col > h3{border-color:#000;}
html[data-theme="brutal"] .pr-keep li{border-width:2px;}
/* olo reads as text at 1.7:1 on paper; the deep member of the hue carries the
   index, exactly as themes.css does for .kicker and .tile-n. */
html[data-theme="olo"] .pr-n,
html[data-theme="olo"] .pr-shotnote a,
html[data-theme="olo"] .pr-src a{color:var(--signal-ink,var(--signal));}
/* olo re-keys --pass to the olo hue, which reads at 1.7:1 as TEXT on the warm
   ground. The state word takes the deep member of the same hue, exactly as
   themes.css does for .kicker, .tile-n and the accent. The meaning does not
   move: this is still the verified colour, at a luminance you can read. */
html[data-theme="olo"] .pr-st.is-pass{color:var(--signal-ink,var(--pass));}


/* ==========================================================================
   9. RESPONSIVE  -- one pass at 1440, stacks cleanly at 390, no horizontal
   scroll on the document (wide figures scroll inside their own box).
   ========================================================================== */
@media (max-width:900px){
  .pr-row{grid-template-columns:1fr;gap:1rem 0;}
  .pr-rail{flex-direction:row;align-items:baseline;gap:.8rem;padding-top:0;}
  .pr-body h2{max-width:none;}
  .pr-cols{grid-template-columns:1fr;gap:2rem;}
}
@media (max-width:640px){
  .pr-hero h1{max-width:none;}
  .pr-mcpx-a > div{grid-template-columns:1fr;gap:.15rem;}
  .pr-mcpx-a dt{padding-top:0;}
  .pr-fields li{grid-template-columns:1fr;gap:.2rem;}
  .pr-fields li > span{padding-top:0;}
  .pr-terms li,.pr-states li{grid-template-columns:1fr;}
  .pr-col li,.pr-sd,.pr-td{max-width:none;}
  .pr-shotnote{max-width:none;}
  .pr-shotnote a{white-space:normal;}
}