/* ===========================================================================
   HOME · CLIENT PROOF  (#hp1)  —  THE OPEN RAIL      applied 2026-09-10

   Version 05 ("Next-Gen") of /doctor/homepage-ui-lab-v2.html, brought onto
   the live homepage. It replaces the fixed-height slide box that was here;
   home-proof/hp.css is kept in the same folder as the record of it.

   THE IDEA, and what changed because of it

     The proof used to live inside an appliance: a bordered box with a
     window, a ladder down its right edge and two step buttons. The evidence
     was the smallest thing in it. Here there is no box at all — the
     screenshots run edge to edge across the section and fade out at both
     margins, so the first thing the eye lands on is a client's actual
     WhatsApp thread rather than the frame around it.

     The chooser is attached to what it drives: a row of underlined words
     with their counts, sitting directly on top of the rail, so picking a
     kind is visibly the same gesture as changing what is below it.

   COLOUR IS THE PAGE'S, NOT THE LAB'S. Version 05 runs on falling gradients
   and a near-black button. Here every colour comes from a system this site
   already runs, and this file invents none of them:

     the ground        site/shelf.css — the shelf every section stands on
     the chosen tab    site/paper.css — the selection ladder's own ink, and
                       the underline is that same ink, because a selection
                       here is a state and never wears the action's colour
     the dots          site/hier.css tier 4 — a page indicator is decoration,
                       so it is neutral grey
     the button        site/cta.css — the Glacier fill, its near-black label
                       and its 1px edge, exactly as #about5's and #faq10's

   The values written below for those four are only the fallbacks those
   files correct; each of them loads after this one.

   WHAT IT DOES NOT TOUCH
     · the section's title, which keeps the rules it already had
     · the evidence itself — the artefacts, their order, their counts and
       their masking notice all come from evidence-type-r4/_r4-data.js
     · the full-size reader, which is still the lab's own R4X.reader
     · the section's ground, edges and vertical breath, which belong to
       site/shelf.css

   Everything is scoped to #hp1, and every class carries an hp- prefix:
   .rail, .note, .cta, .tab, .dots and .bleed are all names this page uses
   or could use elsewhere.
   =========================================================================== */

#hp1{
  position: relative;

  /* --- the palette map: lab token -> site token ---
     evidence-type-r4/_r4.css draws .r4-cell and the full-size reader from
     these. Re-pointing them is why not one of its rules had to be rewritten. */
  --pf9-paper: var(--paper);
  --pf9-card:  var(--paper);
  --pf9-mat:   #F6F8FC;
  --pf9-ink:   var(--ink);
  --pf9-ink2:  var(--ink-2);
  --pf9-ink3:  var(--ink-3);
  --pf9-line:  var(--line);
  --pf9-line2: #D9DEE5;
  --pf9-accent: var(--accent);
  --pf9-accent2:#1557B0;
  --pf9-soft:  #EAF2FE;
  --pf9-warm:  #FAFBFC;
  --pf9-mono:  var(--mono);
  --pf9-sans:  var(--sans);

  --hp-edge: var(--pad);
  --hp-cellh: clamp(250px, 26vw, 340px);
  --hp-fade: var(--sh-shelf, #F4F7FC);   /* the ground the rail fades into */
  --r4-gap: 16px;
  --hp-t: .22s cubic-bezier(.22,.7,.24,1);
}

/* index.html carries no [hidden] rule of its own, and the panels are
   switched with the attribute. An author rule beats the UA sheet, and the
   panel's own display:block below would otherwise silently win. */
#hp1 [hidden]{ display: none !important; }

/* ---------- the title — unchanged ---------------------------------------- */
#hp1 .hp-head{ padding: 0 var(--hp-edge); text-align: center; }
#hp1 .hp-eyebrow{
  margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-2); font-weight: 500;
}
#hp1 .hp-head h2{
  margin: .36em auto 0; max-width: 16ch; font-weight: 800; letter-spacing: -.05em;
  line-height: .98; font-size: clamp(38px, 5.6vw, 64px); text-wrap: balance;
}
#hp1 .hp-head h2 i{ font-style: normal; color: var(--accent); }
#hp1 .hp-head .hp-sub{
  margin: clamp(12px, 1.3vw, 16px) auto 0; max-width: 56ch;
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.58; color: var(--ink-2);
}

/* ---------- the chooser: words, counts, one underline -------------------- */
#hp1 .hp-tabs{
  margin: clamp(24px, 3vw, 40px) var(--hp-edge) clamp(20px, 2.4vw, 30px);
  display: flex; justify-content: center; gap: clamp(18px, 2vw, 26px);
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--line);
}
#hp1 .hp-tabs::-webkit-scrollbar{ display: none; }
#hp1 .hp-tab{
  position: relative; flex: none;
  display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap;
  padding: 0 0 13px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 550; color: var(--ink-3);
  transition: color var(--hp-t);
}
#hp1 .hp-tab em{ font-style: normal; font-size: 11px; color: var(--ink-4); }
/* The selection mark, drawn on the line the tabs stand on. Its colour is the
   site's own selection ink, set by site/paper.css's ladder — a selection on
   this site is a state, never an offer, so it is never the action's colour.
   The value here is only the fallback that file corrects. */
#hp1 .hp-tab::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--ink); transform: scaleX(0); transform-origin: center;
  transition: transform var(--hp-t);
}
#hp1 .hp-tab[aria-selected="true"]{ color: var(--ink); font-weight: 700; }
#hp1 .hp-tab[aria-selected="true"]::after{ transform: scaleX(1); }
@media (hover: hover) and (pointer: fine){
  #hp1 .hp-tab:hover{ color: var(--ink); }
}

/* ---------- the rail: the evidence, edge to edge ------------------------- */
#hp1 .hp-bleed{ position: relative; width: 100%; }
/* both margins dissolve into the section's own ground, so the rail reads as
   continuing past the screen rather than stopping at a border */
#hp1 .hp-bleed::before,
#hp1 .hp-bleed::after{
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 2;
  width: clamp(18px, 6vw, 84px); pointer-events: none;
}
#hp1 .hp-bleed::before{ left: 0;  background: linear-gradient(90deg,  var(--hp-fade), transparent); }
#hp1 .hp-bleed::after { right: 0; background: linear-gradient(270deg, var(--hp-fade), transparent); }

#hp1 .hp-rail{
  display: flex; align-items: flex-start; gap: var(--r4-gap);
  padding: 6px var(--hp-edge);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* a snap rail lands its first cell on the container edge and eats its own
     lead padding unless the scroll port is inset to match it */
  scroll-padding-inline-start: var(--hp-edge);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
#hp1 .hp-rail::-webkit-scrollbar{ display: none; }

/* One height for every artefact of every kind, with the width following the
   artefact's own ratio — a portrait WhatsApp thread and a landscape
   dashboard are then the same size on the page, which is the only way a rail
   of mixed shapes reads as one row. */
#hp1 .hp-rail .r4-cell{
  flex: none; height: var(--hp-cellh); width: auto; aspect-ratio: var(--r);
  scroll-snap-align: start; border-radius: 16px; cursor: zoom-in;
  border-color: #E4E9F0; background: var(--paper);
  box-shadow: 0 1px 2px rgba(11,13,18,.04), 0 10px 26px rgba(11,13,18,.07);
  transition: border-color var(--hp-t), transform var(--hp-t), box-shadow var(--hp-t);
  /* 135 artefacts, each its own SVG document: without this every one of them
     is parsed and rasterised the moment the section nears the viewport. The
     box is unaffected — its width comes from the height and the ratio. */
  content-visibility: auto;
  contain-intrinsic-size: auto 340px auto 250px;
}
@media (hover: hover) and (pointer: fine){
  #hp1 .hp-rail .r4-cell:hover{
    border-color: #D2D8E0; transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(11,13,18,.12);
  }
}

#hp1 .hp-dots{ display: flex; justify-content: center; gap: 6px; padding-top: 16px; }
#hp1 .hp-dots[hidden]{ display: none !important; }
/* a page indicator is tier-4 decoration on this site's interaction ladder,
   so it is told in neutral grey and never spends the action colour */
#hp1 .hp-dots button{
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--hr-quiet-2, #C4CBD7); transition: width var(--hp-t), background var(--hp-t);
}
#hp1 .hp-dots button[aria-current="true"]{ width: 26px; background: var(--hr-quiet, #7A828F); }

/* ---------- the notice ---------------------------------------------------- */
#hp1 .hp-note{
  margin: clamp(18px, 2.2vw, 26px) auto 0; padding: 0 var(--hp-edge);
  max-width: 80ch; text-align: center;
  font-size: 12px; line-height: 1.6; color: var(--ink-3);
}

/* ---------- where the proof leads ---------------------------------------- */
#hp1 .hp-cta{
  margin: clamp(18px, 2.2vw, 28px) var(--hp-edge) 0;
  display: flex; align-items: center; gap: clamp(16px, 2vw, 26px); flex-wrap: wrap;
  padding: clamp(20px, 2.2vw, 28px);
  background: var(--paper); border: 1px solid #E4E9F0; border-radius: 20px;
}
#hp1 .hp-ctatx{ flex: 1 1 380px; min-width: 0; }
#hp1 .hp-ctah{
  margin: 0; font-size: clamp(17px, 1.5vw, 20px); font-weight: 750;
  letter-spacing: -.028em; line-height: 1.2; color: var(--ink);
}
#hp1 .hp-ctap{
  margin: 6px 0 0; max-width: 62ch;
  font-size: 13px; line-height: 1.55; color: var(--ink-3);
}
/* the page's action button — the same shape, weight and blue as #about5's
   .ab-btn and #faq10's .faq-cta */
#hp1 .hp-ctab{
  flex: none; margin-left: auto;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 0 22px; border-radius: 11px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  transition: background var(--hp-t);
}
#hp1 .hp-ctab svg{
  flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--hp-t);
}
@media (hover: hover) and (pointer: fine){
  #hp1 .hp-ctab:hover{ background: #1557B0; }
  #hp1 .hp-ctab:hover svg{ transform: translateX(3px); }
}

/* ---------- looking at one, full size — unchanged ------------------------ */
#hp1 .hp-lb{
  position: fixed; inset: 0; z-index: 900; background: rgba(11,13,18,.86);
}
#hp1 .hp-lb[hidden]{ display: none !important; }
#hp1 .hp-lb .r4-read{ background: transparent; }
#hp1 .hp-lb .r4-hold{ padding: clamp(14px,3vw,44px); }
#hp1 .hp-lb .r4-hold img{ border-radius: 12px; }
#hp1 .hp-lb .r4-x{
  right: clamp(12px,2vw,26px); top: clamp(12px,2vw,26px);
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  border-color: transparent; background: var(--paper); color: var(--ink);
  font-size: 14px; font-weight: 650;
}
#hp1 .hp-lb .r4-scroll{ scrollbar-color: rgba(255,255,255,.4) transparent; }
#hp1 .hp-lb .r4-scroll::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.34); }
@media (hover: hover) and (pointer: fine){
  #hp1 .hp-lb .r4-x:hover{ background: var(--accent); color: #fff; }
}

/* ---------- phone: the page's own gutter, and its left-aligned head ------ */
@media (max-width: 760px){
  #hp1{
    --hp-edge: var(--gut, 18px);
    --hp-cellh: clamp(230px, 62vw, 300px);
    --r4-gap: 10px;
  }
  #hp1 .hp-head{ text-align: left; }
  #hp1 .hp-head h2{ margin-inline: 0; max-width: none; font-size: clamp(38px, 11.6vw, 50px); }
  #hp1 .hp-head .hp-sub{ margin-inline: 0; max-width: none; }
  /* the chooser starts at the gutter and is swiped, rather than being
     centred and half off both edges */
  #hp1 .hp-tabs{ justify-content: flex-start; gap: 20px; }
  #hp1 .hp-tab{ font-size: 13.5px; padding-bottom: 11px; }
  #hp1 .hp-note{ text-align: left; font-size: 11.5px; }
  #hp1 .hp-cta{ padding: 18px; border-radius: 16px; }
  #hp1 .hp-ctah{ font-size: 16px; }
  #hp1 .hp-ctap{ max-width: none; font-size: 12.5px; }
  #hp1 .hp-ctab{ margin-left: 0; width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce){
  #hp1 *, #hp1 *::before, #hp1 *::after{ transition: none !important; }
}