/* HICHEM PUBLIC V2.6 — deterministic responsive geometry
   Carried forward from V2.5 and retuned for the V2.6 component set.

   Principles preserved verbatim from V2.5:
   - every grid track is minmax(0, …) so no track can be pushed by its content;
   - objects are bounded, never allowed to grow indefinitely on wide desktop;
   - stacking happens early, before two tracks can collide;
   - the Working Map has a dedicated mobile drawing;
   - every interactive target reaches 44px on touch widths;
   - Samsung-class 360 / 384 / 412 CSS px are first-class widths;
   - the composition must survive a desktop browser at 80% zoom.

   This file is geometry only: widths, tracks, spacing, stacking, touch targets,
   safe-area behavior. It invents no visual language — that lives in surface-v26.css. */

:root{
  --geo-frame:82rem;
  --geo-reading:70rem;
  --geo-gutter:clamp(20px,3.8vw,64px);
  --geo-gap:clamp(32px,4.2vw,64px);
  --geo-room-y:clamp(72px,7vw,120px);
}
html,body{max-width:100%;overflow-x:clip}
body{padding-bottom:calc(var(--dock-h) + 24px)}

:where(.frame,.hero__grid,.hall__grid,.home-map,.home-map__visual,.home-map__inspector,
.doors,.door,.aperture,.legend,.cabinet-grid,.sendable-grid,.receipt-grid,.continuity-grid,
.hyp-grid,.study-grid,.receipt-pair,.plate,.plate__frame,.constellation-grid,.spectra-grid,
.agent-grid,.manifest-grid,.anatomy,.corpus-panel,.region-readout,.agent-card,.room__head,
.lineage,.cite,.surface-dock,.footer__inner,.prefs){min-width:0}

/* No global mid-word breaking. Premium typography breaks only where a component asks for it;
   surface-v26.css names the three places that genuinely need it (hashes, URLs, code). */
:where(h1,h2,h3,p,blockquote,dd,dt,summary,strong){overflow-wrap:break-word;hyphens:none}
:where(img,svg){max-width:100%;height:auto}

.frame{max-width:var(--geo-frame);padding-inline:var(--geo-gutter)}
.frame--read{max-width:var(--geo-reading)}
.hero,.room{overflow:clip}
.room{padding-block:var(--geo-room-y)}
.room__head{gap:var(--geo-gap)}

/* Spatial species set the vertical cadence. Not every room breathes the same way. */
.room[data-species="monument"]{--geo-room-y:clamp(88px,9vw,150px)}
.room[data-species="chamber"] {--geo-room-y:clamp(72px,7vw,118px)}
.room[data-species="study"]   {--geo-room-y:clamp(55px,5.2vw,89px)}
.room[data-species="plate"]   {--geo-room-y:clamp(55px,5.5vw,96px)}
.room[data-species="aperture"]{--geo-room-y:clamp(89px,8.5vw,144px)}
.room[data-species="silence"] {--geo-room-y:clamp(96px,11vw,190px)}

/* ── HALL ───────────────────────────────────────────────────── */
.hero{min-height:clamp(620px,78svh,820px);padding-block:clamp(54px,6vh,88px)}
.hero__grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:var(--geo-gap)}
.hero__grid>*{min-width:0}
.hero__claim{font-size:clamp(46px,4.65vw,76px);line-height:1.035;max-width:16.5em}
.hero__claim span:last-child{margin-inline-start:.48em}
.hero__title{font-size:clamp(62px,6.8vw,104px);line-height:.88}
.hero__visual{width:min(100%,36rem);max-width:36rem;justify-self:end;transform:none}
.hero__visual svg{display:block;width:100%;overflow:visible}
.hero::after{width:clamp(460px,42vw,760px);inset-inline-end:clamp(-210px,-9vw,-84px)}

/* ── HOME ───────────────────────────────────────────────────── */
.home-map{grid-template-columns:minmax(0,1fr) minmax(250px,290px);gap:var(--geo-gap)}
.home-map__visual{overflow:hidden;padding-block:14px}
.home-map__visual svg.home-map__wide{display:block;width:100%}
.home-map__visual svg.home-map__mobile{display:none}
.node-list button,.readout{min-width:0}
.doors{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,55px)}
.door{min-width:0}
.law-moment{max-width:34em}
.aperture{grid-template-columns:minmax(0,1fr) 68px minmax(0,1fr);gap:0}
.legend{grid-template-columns:minmax(0,1fr);gap:13px}
.legend>div{grid-template-columns:minmax(120px,10rem) minmax(0,1fr);gap:clamp(13px,2vw,34px)}

/* ── CABINET ────────────────────────────────────────────────── */
.cabinet-grid{grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);gap:var(--geo-gap)}
.gate-specimen{min-width:0;min-height:520px;padding:clamp(30px,3.5vw,48px)}
.gate-symbol{width:min(190px,42%);height:auto;aspect-ratio:1;margin:42px auto 24px}
.sendable-grid{grid-template-columns:minmax(0,.60fr) minmax(280px,.40fr);gap:var(--geo-gap)}
.message-sheet,.judgment{min-width:0;min-height:460px}
.receipt-grid{grid-template-columns:minmax(0,.62fr) minmax(260px,.38fr);gap:var(--geo-gap)}
.study-grid{grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);gap:var(--geo-gap)}
.receipt-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,42px)}
.continuity-grid{grid-template-columns:minmax(0,.62fr) minmax(260px,.38fr);gap:var(--geo-gap)}
.continuity-orbit{width:min(100%,42rem);justify-self:center;transform:none}
.hyp-grid{grid-template-columns:minmax(240px,.30fr) minmax(0,.70fr);gap:var(--geo-gap)}
.hyp-stage{min-width:0;min-height:460px}
.recovery-run{grid-template-columns:minmax(0,1fr)}

/* Archival plates are optical anchors: they may be wide, never unbounded. */
.plate{width:100%;margin-inline:auto}
.plate--terminal{max-width:64rem}
.plate--document .plate__frame{padding:clamp(26px,3vw,44px)}
.plate__frame{padding:clamp(26px,3.2vw,48px)}
.plate--compact .plate__frame{padding:clamp(20px,2.4vw,32px)}
.plate__fields{grid-template-columns:minmax(120px,11rem) minmax(0,1fr)}

/* ── SYSTASYS ───────────────────────────────────────────────── */
.constellation-grid,.spectra-grid,.agent-grid,.manifest-grid{grid-template-columns:minmax(240px,.30fr) minmax(0,.70fr);gap:var(--geo-gap)}
.region-readout,.agent-card{min-width:0;min-height:420px;padding-inline-start:clamp(38px,4vw,64px)}
.systasys-constellation{width:min(100%,39rem);max-width:39rem;justify-self:end;transform:none}
.systasys-constellation svg{display:block;width:100%;overflow:visible}
.spectra-loop li>button{grid-template-columns:48px minmax(9rem,.52fr) minmax(0,.48fr)}
.spectra-readout{max-width:100%;padding-inline-start:44px}
.anatomy__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(21px,3vw,42px)}
.corpus-panel.is-active{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px)}
.lineage{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,55px)}
.lineage li{grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:13px}

/* ── CHROME ─────────────────────────────────────────────────── */
/* The dock is room navigation. Its geometry follows however many room links are present. */
.surface-dock{right:12px;bottom:12px;width:max-content;max-width:calc(100vw - 24px);grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:auto}
.surface-dock>a{min-width:0;white-space:nowrap}
html[dir="rtl"] .surface-dock{right:auto;left:12px}
.footer__inner{grid-template-columns:minmax(0,1fr) auto;gap:clamp(21px,3vw,55px)}
.prefs{grid-auto-flow:column;gap:clamp(18px,2.4vw,34px)}

/* ══ Stack before any track can collide. Intentionally earlier than a classic tablet breakpoint. ══ */
@media (max-width:1260px){
  .hero{min-height:auto}
  .hero__grid,.cabinet-grid,.sendable-grid,.receipt-grid,.continuity-grid,.hyp-grid,
  .study-grid,.constellation-grid,.spectra-grid,.agent-grid,.manifest-grid{grid-template-columns:1fr}
  .hero__visual,.systasys-constellation{justify-self:center;width:min(100%,36rem);max-width:36rem}
  .hero__claim{max-width:18em}
  .home-map{grid-template-columns:1fr}
  .home-map__inspector{display:grid;grid-template-columns:minmax(180px,.30fr) minmax(0,.70fr);gap:24px}
  .home-map__inspector .segmented{grid-column:1/-1}
  .home-map__inspector .readout{margin-top:18px}
  .doors{grid-template-columns:1fr;gap:0}
  .receipt-pair{grid-template-columns:1fr}
  .continuity-orbit{justify-self:center}
  .gate-specimen,.message-sheet,.judgment,.hyp-stage{min-height:auto}
  .region-readout,.agent-card{min-height:auto;border-left:0;border-top:1px solid var(--ink);padding-left:0;padding-top:38px}
  .room--dark .region-readout,.room--dark .agent-card{border-top-color:var(--light-rule)}
  .spectra-readout{padding-inline-start:0}
  .corpus-panel.is-active{grid-template-columns:1fr}
  .lineage{grid-template-columns:1fr}
  html[dir="rtl"] .region-readout,html[dir="rtl"] .agent-card{padding-right:0;border-right:0;border-top:1px solid var(--ink)}
}

/* ══ Tablet and large phones. ══ */
@media (max-width:760px){
  :root{--geo-gutter:clamp(18px,5vw,24px);--geo-room-y:68px;--dock-h:50px}
  body{padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom,0px) + 16px)}
  .room[data-species="monument"]{--geo-room-y:80px}
  .room[data-species="chamber"] {--geo-room-y:72px}
  .room[data-species="study"]   {--geo-room-y:55px}
  .room[data-species="plate"]   {--geo-room-y:55px}
  .room[data-species="aperture"]{--geo-room-y:80px}
  .room[data-species="silence"] {--geo-room-y:89px}
  .topbar__state{display:none}.topbar__inner{justify-content:space-between;gap:10px}.topbar__link{margin-left:auto}
  .hero{padding-block:46px 56px}.hero__grid{gap:24px}
  .hero__claim{font-size:clamp(36px,10.8vw,50px);line-height:1.04;letter-spacing:-.04em}.hero__claim span:last-child{margin-inline-start:0}
  .hero__title{font-size:clamp(48px,15vw,72px)}
  .hero__visual,.systasys-constellation{width:min(100%,31rem);margin:12px auto 0;filter:drop-shadow(0 16px 30px rgba(24,24,21,.05))}
  .hero::after{width:108vw;inset-inline-end:-62vw;top:20%;opacity:.48}
  .room__head{display:block;margin-bottom:34px}.room__aside{margin-top:10px;white-space:normal}
  .statement{font-size:clamp(33px,10vw,48px)}
  .home-map__visual svg.home-map__wide{display:none}.home-map__visual svg.home-map__mobile{display:block;width:min(100%,20rem);margin-inline:auto}.home-map__visual{overflow:visible}
  .home-map__inspector{display:block}.home-map__inspector .readout{margin-top:18px}
  .aperture{grid-template-columns:1fr;gap:0}
  .legend>div{grid-template-columns:1fr;gap:6px}
  .law summary{grid-template-columns:30px minmax(0,1fr) 18px}.law__body{grid-template-columns:30px minmax(0,1fr)}.law__body p,.law__body em{grid-column:2}
  .gate-controls{grid-template-columns:1fr}.gate-controls button{border-inline-end:0;border-bottom:1px solid var(--light-rule)}.gate-controls button:last-child{border-bottom:0}
  .message-sheet{padding:30px 22px}.message-sheet p{font-size:clamp(24px,7.5vw,36px)}
  .judgment__tabs{grid-template-columns:1fr}.judgment__tabs button{border-inline-end:0;border-bottom:1px solid var(--rule)}
  .plate__frame{padding:24px 18px}
  .plate__fields{grid-template-columns:minmax(0,auto) minmax(0,1fr)}
  .hypotheses{grid-template-columns:1fr}.fan-lines{display:none}.observation{width:100%}
  .spectra-loop li>button{grid-template-columns:34px minmax(0,1fr);padding:16px 0}.spectra-loop small{grid-column:2}
  .spectra-readout{grid-template-columns:1fr;padding:18px 0 0}.spectra-readout p,.spectra-readout small{grid-column:1}
  .anatomy__list{grid-template-columns:1fr}
  .agent-card dl div{grid-template-columns:1fr;gap:7px}
  .manifest-list div{align-items:flex-start}
  .lineage li{grid-template-columns:1fr;gap:2px}
  /* The dock is one adaptive row. It may carry the three legacy room links in a
     no-script document or the four-room public set once Traces is present; the
     body reservation and touch geometry stay identical either way. */
  .surface-dock{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto;max-width:none;grid-template-columns:none;grid-template-rows:auto;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);overflow:hidden}
  html[dir="rtl"] .surface-dock{left:8px;right:8px}
  .surface-dock>a{min-height:48px;width:auto;min-width:0;border-inline-end:1px solid rgba(24,24,21,.13);padding:8px 6px;overflow:hidden}
  .surface-dock>a:last-child{border-inline-end:0}
  .footer__inner{grid-template-columns:1fr;gap:24px}
  .prefs{grid-auto-flow:column;justify-content:start;gap:28px}
}

/* ══ Samsung-class phones: Galaxy width family 360 / 384 / 412 CSS px. ══ */
@media (max-width:430px){
  :root{--geo-gutter:18px;--geo-room-y:60px}
  .hero{padding-top:38px}
  .hero__claim{font-size:clamp(34px,10.6vw,44px);line-height:1.055}.hero__title{font-size:clamp(44px,14.8vw,62px)}
  .hero__visual,.systasys-constellation{width:calc(100% - 4px);max-width:26rem}
  .statement{font-size:clamp(31px,9.7vw,42px)}
  .room__head{margin-bottom:30px}
  .segmented button,.node-list button{min-height:44px}
  .segmented button{padding-inline:6px}
  .law summary{gap:9px}
  .quiet-button,.agent-tabs button,.corpus-tabs button,.hyp-controls button,.judgment__tabs button,
  .gate-controls button,.spectra-loop li>button,.region-list button,.lang__select,.prefs__toggle{min-height:44px}
  .gate-specimen,.message-sheet,.hyp-stage{padding-left:18px;padding-right:18px}
  .region-readout h3,.agent-card h3{font-size:clamp(32px,9.8vw,43px)}
  .manifest-list div{display:grid;grid-template-columns:1fr;gap:8px}.manifest-list b{justify-self:start;white-space:normal}
  .plate__frame{padding:20px 15px}
  .surface-dock>a{padding-inline:4px}
  .prefs{gap:20px}
}

@media (max-width:379px){
  :root{--geo-gutter:17px}
  .hero__claim{font-size:clamp(33px,10.4vw,40px)}
  .surface-dock{left:6px;right:6px}.surface-dock>a{padding-inline:3px}
  .prefs{gap:16px}
}

@media (hover:none){
  .hero__visual,.systasys-constellation,.continuity-orbit{filter:none}
  /* Sacrifice order, step 1: backdrop blur is the first thing to go on mobile GPUs. */
  .surface-dock{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)}
}
@media (prefers-reduced-motion:reduce){.hero__visual,.systasys-constellation,.continuity-orbit{transform:none}}

/* Bring the continuity orbit under the same mobile envelope as the other figures,
   so vector label sizing has one predictable scale instead of three. */
@media (max-width:760px){
  .continuity-orbit{width:min(100%,31rem);margin-inline:auto}
}