/* ============================================================
   IRIDIUM — Liquid Chrome vault entrance
   Deep space + oil-slick iridescence. Geometric DIN/Bahnschrift.
   ============================================================ */

:root {
  /* --- deep space + chrome primitives --- */
  --void:      #05060a;
  --void-2:    #080a11;
  --panel:     #0c0f18;
  --chrome:    #aab0bd;
  --ink:       #eef1f8;
  --ink-dim:   #a6afc2;
  --ink-faint: #6d7688;
  --line:      rgba(158, 172, 200, 0.16);
  --line-2:    rgba(158, 172, 200, 0.32);

  /* --- oil-slick iridescence --- */
  --iris-cyan:    #37e6ff;
  --iris-violet:  #9a6bff;
  --iris-magenta: #ff3fa4;
  --iris-gold:    #ffd27a;
  --iris-teal:    #2bf5c8;
  --deny:         #ff5568;

  /* --- type --- */
  --font-display: "Bahnschrift", "DIN Next", "DIN Alternate", "Eurostile",
                  "Segoe UI Variable Display", "Avenir Next", system-ui, sans-serif;
  --font-ui: "Bahnschrift", "DIN Next", "Segoe UI Variable Text", system-ui, sans-serif;
  --font-mono: "Cascadia Code", "SF Mono", "SFMono-Regular", ui-monospace,
               "Roboto Mono", Consolas, monospace;

  /* --- rhythm --- */
  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --maxw: 46rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  background: var(--void);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* ---------- skip link ---------- */
.skip {
  position: fixed;
  left: 0; top: 0;
  transform: translateY(-140%);
  z-index: 40;
  margin: 0.6rem;
  padding: 0.55rem 0.9rem;
  border-radius: 0.5rem;
  background: var(--ink);
  color: var(--void);
  font: 600 0.85rem/1 var(--font-ui);
  text-decoration: none;
  transition: transform 0.2s var(--ease);
}
.skip:focus-visible { transform: translateY(0); }

/* ---------- background layers ---------- */
/* First paint: pure CSS molten field so there is never an empty black flash. */
.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 68% 40%, rgba(55, 230, 255, 0.10), transparent 55%),
    radial-gradient(90% 80% at 78% 62%, rgba(154, 107, 255, 0.14), transparent 60%),
    radial-gradient(70% 60% at 62% 30%, rgba(255, 63, 164, 0.10), transparent 62%),
    radial-gradient(140% 120% at 50% 120%, var(--void-2), var(--void) 70%);
}

.stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
body.stage-ready .stage { opacity: 1; }

/* denial shudder on the whole molten field */
body.deny .stage,
body.deny .field { animation: shudder 0.5s var(--ease); }
@keyframes shudder {
  0%, 100% { transform: translate3d(0,0,0); }
  15% { transform: translate3d(-9px, 2px, 0); }
  32% { transform: translate3d(7px, -3px, 0); }
  50% { transform: translate3d(-6px, 3px, 0); }
  68% { transform: translate3d(5px, -2px, 0); }
  84% { transform: translate3d(-3px, 1px, 0); }
}

/* readability scrim, weighted to the lower-left where the copy sits */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(5,6,10,0.92) 0%, rgba(5,6,10,0.62) 30%,
                    rgba(5,6,10,0.12) 52%, transparent 66%),
    linear-gradient(0deg, rgba(5,6,10,0.78) 0%, transparent 34%),
    radial-gradient(120% 120% at 50% 50%, transparent 58%, rgba(3,4,8,0.72) 100%);
}

/* crossing bloom overlay */
.bloom {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  /* dark bloom by mandate — the chroma seam stays, the white burst dies (photosensitivity) */
  background:
    radial-gradient(60% 120% at 50% 50%, rgba(11,13,18,0.96), rgba(11,13,18,0.7) 60%),
    linear-gradient(90deg, transparent 46%, rgba(55,230,255,0.5) 49%,
                    rgba(255,63,164,0.5) 51%, transparent 54%);
  transition: opacity 0.9s var(--ease);
}
body.crossing .bloom { opacity: 1; }

/* ---------- top bar ---------- */
.topbar {
  position: fixed;
  z-index: 10;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 2.4vw, 1.6rem) var(--pad);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
}
.wordmark .glyph {
  width: 1.55rem;
  height: 1.55rem;
  color: var(--iris-cyan);
  filter: drop-shadow(0 0 10px rgba(55, 230, 255, 0.45));
}
.wordmark b {
  font: 700 1.02rem/1 var(--font-display);
  letter-spacing: 0.42em;
  padding-left: 0.42em; /* balance the tracking */
}
.element {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line-2);
  border-radius: 0.55rem;
  background: rgba(12, 15, 24, 0.5);
  backdrop-filter: blur(6px);
  font-style: normal;
}
.element .sym { font: 700 1rem/1 var(--font-display); letter-spacing: 0.02em; }
.element .num {
  font: 500 0.7rem/1 var(--font-mono);
  color: var(--iris-cyan);
  transform: translateY(-0.35em);
}

/* ---------- content shell (lower-left, editorial) ---------- */
.shell {
  position: relative;
  z-index: 12;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: clamp(0.9rem, 2vw, 1.35rem);
  max-width: var(--maxw);
  padding: 0 var(--pad) clamp(2.5rem, 7vh, 5rem);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  font: 600 0.74rem/1 var(--font-ui);
  letter-spacing: 0.34em;
  color: var(--ink-dim);
  text-transform: uppercase;
}
.eyebrow .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--iris-magenta);
  box-shadow: 0 0 10px var(--iris-magenta);
}

.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.7rem, 8.5vw, 5.6rem);
  line-height: 0.96;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--ink);
}
.display .line2 {
  display: block;
  background: linear-gradient(92deg, var(--iris-cyan), var(--iris-violet) 46%, var(--iris-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sub {
  margin: 0;
  max-width: 34rem;
  font: 400 clamp(1rem, 1.3vw, 1.15rem)/1.55 var(--font-ui);
  color: var(--ink-dim);
}

/* ---------- the key slot ---------- */
.key { margin: 0.4rem 0 0; width: min(100%, 34rem); }
.key-label {
  display: block;
  margin-bottom: 0.5rem;
  font: 600 0.72rem/1 var(--font-ui);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.slot {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.4rem 0.4rem 0.4rem 0.2rem;
  border-radius: 0.9rem;
  background:
    linear-gradient(180deg, rgba(20, 24, 36, 0.72), rgba(9, 11, 18, 0.72));
  border: 1px solid var(--line-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 0 24px rgba(0,0,0,0.5),
    0 18px 50px -24px rgba(0,0,0,0.9);
  backdrop-filter: blur(10px);
  overflow: hidden;
}
/* the molten seam of light running down the slot's leading edge */
.slot::before {
  content: "";
  position: absolute;
  left: 0; top: 8%;
  width: 2px; height: 84%;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--iris-cyan), var(--iris-violet), transparent);
  box-shadow: 0 0 14px var(--iris-cyan);
  opacity: 0.65;
  transition: opacity 0.3s var(--ease);
}
.slot.is-focused { border-color: transparent; }
.slot.is-focused::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 0.9rem;
  padding: 1px;
  background: linear-gradient(120deg, var(--iris-cyan), var(--iris-violet), var(--iris-magenta), var(--iris-gold));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.slot.is-focused::before { opacity: 1; }

.key-input {
  flex: 1;
  min-width: 0;
  padding: 0.95rem 0.6rem 0.95rem 1rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 500 1.1rem/1 var(--font-mono);
  letter-spacing: 0.14em;
  outline: none;
}
.key-input::placeholder { color: var(--ink-faint); letter-spacing: 0.06em; }

.submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.15rem;
  border: 0;
  border-radius: 0.65rem;
  cursor: pointer;
  color: var(--void);
  background: linear-gradient(135deg, #eaf7ff, #c9d3e6 55%, #9aa6bd);
  font: 700 0.92rem/1 var(--font-display);
  letter-spacing: 0.06em;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.2) inset, 0 8px 22px -12px rgba(55,230,255,0.7);
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease), filter 0.25s var(--ease);
}
.submit .arrow { width: 1.15rem; height: 1.15rem; transition: transform 0.2s var(--ease); }
.submit:hover {
  filter: brightness(1.06);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35) inset, 0 12px 30px -12px rgba(154,107,255,0.85);
}
.submit:hover .arrow { transform: translateX(3px); }
.submit:active { transform: translateY(1px); }
.submit[aria-busy="true"] { filter: saturate(0.6) brightness(0.9); cursor: progress; }

/* ---------- verdict ---------- */
.verdict {
  margin: 0;
  min-height: 1.3em;
  font: 500 0.95rem/1.4 var(--font-ui);
  letter-spacing: 0.01em;
  color: var(--ink-dim);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.verdict.show { opacity: 1; transform: none; }
.verdict.err { color: var(--deny); }
.verdict.ok { color: var(--iris-teal); }

.rest {
  margin: 0.3rem 0 0;
  font: 500 0.72rem/1 var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rest .sep { color: var(--line-2); margin: 0 0.15rem; }

/* ---------- focus ring ---------- */
:focus-visible {
  outline: 2px solid var(--iris-cyan);
  outline-offset: 3px;
  border-radius: 0.4rem;
}
.key-input:focus-visible { outline: none; } /* slot ring handles it */

/* ---------- responsive ---------- */
@media (max-width: 560px) {
  :root { --pad: 1.25rem; }
  .element { display: none; }
  .shell { justify-content: flex-end; }
  .slot { flex-wrap: wrap; }
  .submit { flex: 1; justify-content: center; padding: 0.9rem; }
  .display { font-size: clamp(2.4rem, 13vw, 3.6rem); }
}

@media (min-width: 1100px) {
  .shell { max-width: 52rem; padding-bottom: clamp(3rem, 9vh, 6rem); }
}

/* ============================================================
   GESTURE TECH SHOWCASE — each gesture opens one chrome demo
   ============================================================ */
.gx-hint {
  position: fixed;
  z-index: 11;
  top: clamp(3.4rem, 8vh, 4.4rem);
  right: var(--pad);
  margin: 0;
  font: 600 0.6rem/1 var(--font-ui);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  pointer-events: none;
  opacity: 0.72;
}
.gx-hint .sep { color: var(--line-2); margin: 0 0.1rem; }

.gx {
  position: fixed;
  inset: 0;
  z-index: 34;
  display: grid;
  place-items: center;
  padding: 1rem;
  pointer-events: none;   /* the gate stays reachable underneath */
}
.gx[hidden] { display: none; }

.gx-panel {
  position: relative;
  pointer-events: auto;
  width: min(78vw, 380px);
  max-width: 92vw;
  aspect-ratio: 1 / 1;
  max-height: min(70vh, 380px);
  border-radius: 1.1rem;
  overflow: hidden;
  background: rgba(8, 10, 16, 0.72);
  border: 1px solid var(--line-2);
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,0.9),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  animation: gxpop 0.42s var(--ease);
}
/* iridescent ring — same oil-slick edge as the key slot */
.gx-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, var(--iris-cyan), var(--iris-violet), var(--iris-magenta), var(--iris-gold));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.5;
  pointer-events: none;
}
@keyframes gxpop {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

.gx-stage { position: absolute; inset: 0; }
.gx-canvas, .gx-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.gx-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  margin: 0;
  padding: 0.9rem 0.9rem 0.65rem;
  font: 600 0.68rem/1.3 var(--font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 8px rgba(0,0,0,0.85);
  background: linear-gradient(0deg, rgba(5,6,10,0.9), transparent);
  pointer-events: none;
}

.gx-close {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  z-index: 2;
  width: 2rem; height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 0.55rem;
  background: rgba(8,10,16,0.62);
  color: var(--ink);
  cursor: pointer;
  transition: filter 0.2s var(--ease);
}
.gx-close svg { width: 1rem; height: 1rem; }
.gx-close:hover { filter: brightness(1.3); }

/* landscape phones: keep the panel inside the short axis */
@media (max-height: 460px) {
  .gx-panel { max-height: 82vh; width: min(82vh, 360px); }
  .gx-hint { top: 0.6rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .stage { transition: opacity 0.3s linear; }
  body.deny .stage, body.deny .field { animation: none; }
  .gx-panel { animation: none; }
}

/* exit veil: the LAST painted frame before leaving must match the app's dark canvas (#0b0d12) so the
   browser never shows a bright frame between documents — photosensitivity mandate, applies to every exit */
.exit-veil{ position:fixed; inset:0; z-index:2147483000; background:#0b0d12; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.exit-veil.is-on{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .exit-veil{ transition:none; } }

/* ============================================================
   DEPARTURES FROM THE HOST  (bind.com port of MERIDIAN p2)
   ------------------------------------------------------------
   A port that improves a door is not a port (wall/PORT-NOTES.txt STEP 8), so this file changes
   the host's design ONLY where an ASL v2 law or one of the brief's three never-overridden
   absolutes makes the RENDER a build failure, and only in the state where the failure was
   measured. Every departure names its law, its measured offence and the run it came from
   (bind-work/gauntlet/bind/evidence/portals-p1p2p3-r2). Nothing below moves a pixel at the two
   viewports the acquired bar was captured at with zero safe-area insets, except D2, which is
   the touch-target floor on a link that is invisible until it is focused.

   D1  SAFE AREA.  The top bar and the gesture hint are both fixed to the top edge and both
       carry text: measured at 390x844 with the notch insets pushed in, the bar's content top
       was y 16 and the hint's y 9.6, inside a 47 px top inset (matrix rows mobileM/light and
       kbd/light: "fixed content-top ... lies inside the top inset 0-47px"). env() resolves to
       0 wherever there is no notch. ASL section 5 assertion 6; brief item 19.
   D2  TOUCH TARGET.  The skip link measured 151.7x31.2 CSS px under pointer:coarse (matrix row
       mobileM/light). ASL Law 5 and brief item 27 are absolutes: 44 px in the block axis, via
       min-block-size.
   D3  FORCED COLOURS.  Under forced-colors: active the skip link, the key input and the Open
       button each painted no border and no outline of their own (matrix row mobileM/forced) -
       the key row's boundary is .slot's iridescent ring, and forced colours flatten a gradient
       ring to nothing at all. brief item 21 names the preference queries an absolute. The three
       controls get their own edge, and the field its own focus ring, in that mode only.
   D4  CONTRAST ON THE FIELD LABEL.  "Your key" is the seed field's only visible label and the host
       sets it in --ink-faint (#6d7688), which measures 4.43:1 on the vault's own ground
       (--void #05060a) - under the 4.5:1 floor, and the scene painted over that ground is darker
       still in the corner the form sits in. It moves to the host's OWN next tier up, --ink-dim
       (#a6afc2), which measures 9.19:1 on the same ground. brief item 27; ASL section 5 assertion 3.
       No new colour is introduced. The Open button's label is not asserted on by this port's own
       gate and is recorded instead: it is set over a chrome gradient, which neither axe-core nor
       this piece can resolve to a flat ground.

   D5  THE HINGE IS A GUTTER.  At the spanned foldable profile (2 horizontal segments, hinge
       x 552-562 of 1114) button#submit measured x 481-581 in round 1 - the Open button sat
       across the fold, which is the one thing ASL section 5's spanned row forbids. Law 2
       allows this query on a page shell and nowhere else. THE COMPOSITION DECISION: the whole
       door takes leaf one - the fixed top bar's block-end edge, the gesture hint and the
       editorial shell all stop at segment 0, and the gesture-demo panel centres on the same
       leaf - while .field, canvas#stage, .scrim and .bloom go on reaching both leaves, because
       the molten field is what the second leaf is for. The shell was already bottom-anchored
       and left-aligned, so this narrows a column that was 832 px wide to 552 and moves nothing
       else - except the display size, which HAD to move with it and is the second half of this
       departure. The host sets the headline at clamp(2.7rem, 8.5vw, 5.6rem), and vw is the whole
       SPREAD on a spanned device: 8.5vw of 1114 clamps to 5.6rem, and 5.6rem laid into a 464 px
       column ran to three lines, pushed the bottom-anchored shell up past its own fixed top bar
       (body is overflow:hidden, so it could not even be scrolled back) and put "The seal" through
       the IRIDIUM wordmark - measured and photographed 2026-08-31 before this line was added,
       spanned/p2__spanned__dark__hingemarked.png in the round's first pass. Type laid into a leaf
       is sized by the leaf: the same 8.5 per cent, taken of env(viewport-segment-width 0 0)
       instead of of the spread, which is 46.9 px here and puts the host's two-line headline back.
       env() carries a 50vw fallback so a browser without the segment variables still gets a
       leaf-sized headline (ASL Law 7). Inert at one segment, which is every other profile.

   D6  REFLOW BELOW 280 CSS px, and it is the one thing the mandated matrix run on THIS door found.
       Round 1 never ran the matrix here (DEV-MATRIX-P2P3); round 2 did, and the mobileS/zoom row came
       back with the only required FAIL on these three doors that is not a harness artefact:
       docSW 167 <= clientWidth 160 + 1 is false - a real horizontal overflow, ASL Law 3, which says
       no exceptions. MEASURED at the 200 per cent zoom cross-cut, which lays a 320 px profile out at
       160 CSS px: the IRIDIUM wordmark's <b> ran x 54-167 because 0.42em of tracking on seven
       letters is 48 px of pure letter-spacing, and a box 7 px past the viewport widens the initial
       containing block, which is why the four full-bleed fixed layers reported themselves 167 px wide
       too - they are the symptom, not the cause. The tracking drops to 0.2em in this band and the
       wordmark fits. The eyebrow goes with it: it is an inline-flex that does not wrap, and at the
       same 160 px it ran x 20-212, inside .shell - which is a scroll region at this height, so the
       harness does not call it an overflow, but a line of type that needs sideways scrolling is the
       same offence one clip away. Both are the band p1's own D4 already declares, and no shipped
       profile is narrower than 320 CSS px, so nothing but the zoom cross-cut ever enters it.
   ============================================================ */

/* D4 */
.key-label{ color:var(--ink-dim); }

/* D1. Each value the host already sets at a breakpoint is lifted into a custom property first,
   so adding the inset cannot quietly undo the breakpoint: .gx-hint moves to 0.6rem under
   max-height 460, and .shell's block-end padding grows at min-width 1100. The gutter is
   max(the door's own, the device's), not their sum, because a notch already IS the gutter. */
:root{
  --gx-top:clamp(3.4rem, 8vh, 4.4rem);
  --bar-pt:clamp(1rem, 2.4vw, 1.6rem);
  --shell-pb:clamp(2.5rem, 7vh, 5rem);
}
@media (max-height:460px){ :root{ --gx-top:0.6rem; } }
@media (min-width:1100px){ :root{ --shell-pb:clamp(3rem, 9vh, 6rem); } }
.topbar{
  padding-block-start:max(var(--bar-pt), env(safe-area-inset-top, 0px));
  padding-inline:max(var(--pad), env(safe-area-inset-left, 0px))
                 max(var(--pad), env(safe-area-inset-right, 0px));
}
.gx-hint{
  top:max(var(--gx-top), env(safe-area-inset-top, 0px));
  right:max(var(--pad), env(safe-area-inset-right, 0px));
}
.shell{
  padding-inline:max(var(--pad), env(safe-area-inset-left, 0px))
                 max(var(--pad), env(safe-area-inset-right, 0px));
  padding-block-end:max(var(--shell-pb), env(safe-area-inset-bottom, 0px));
}
/* D2 */
@media (pointer:coarse){
  .skip{ min-block-size:44px; display:inline-flex; align-items:center; }
}
/* D5 - the page shell, and only at two segments. */
@media (horizontal-viewport-segments: 2){
  .topbar{ right:calc(100% - env(viewport-segment-right 0 0, 50%)); }
  .gx-hint{ right:calc(100% - env(viewport-segment-right 0 0, 50%)
                       + max(var(--pad), env(safe-area-inset-right, 0px))); }
  .shell{ max-inline-size:env(viewport-segment-right 0 0, 50%); }
  .display{ font-size:clamp(2.7rem, calc(env(viewport-segment-width 0 0, 50vw) * 0.085), 5.6rem); }
  .gx{ padding-inline-end:calc(1rem + 100% - env(viewport-segment-right 0 0, 50%)); }
}
/* D6 */
@media (max-width:280px){
  .wordmark b{ letter-spacing:0.2em; padding-left:0.2em; }
  .eyebrow{ flex-wrap:wrap; }
}
/* D3 */
@media (forced-colors:active){
  .skip,
  .key-input,
  .submit{ border:1px solid; }
  .key-input:focus-visible{ outline:2px solid Highlight; outline-offset:-3px; }
}

/* ============================================================
   THE CHIP'S LANE  (bind.com port - wall/PORT-NOTES.txt STEP 7)
   ------------------------------------------------------------
   The vault copy is bottom-anchored (.shell is justify-content:flex-end), so on a short surface
   it is the key row that reaches the block-end corner the shared sensor chip is fixed in.
   Measured on this door at 390x430 with the notch insets pushed in: the chip's pill was
   y 338-382 and the key slot y 357-408 - the chip lay across 25 CSS px of the input and of the
   Open button, and the DOCUMENT, not a region inside the page, was what scrolled.
   So the page shell takes the viewport and .shell becomes the ASL Law 4 internal scroll region
   with the lane reserved beneath it: the chip's tallest measured box (52 px, where its armed
   line wraps at 320 and 344), its own 14 px inset, a 14 px gutter, and that inset again.
   safe flex-end keeps the bottom-anchored composition and still lets an overflowing shell
   scroll from its start edge.
   THE THRESHOLD IS MEASURED, NOT CHOSEN: this door's shell is taller than the viewport at 430
   (532 px) and at 390 (451 px), and fits inside it at 568, 844, 1194 and above, where the chip
   clears the key row by 85 px or more. 700 px sits in the empty band between the two, so the
   tall renders keep the host's geometry to the pixel and the short ones get the lane.
   ============================================================ */
:root{ --b-lane:calc(52px + 28px + env(safe-area-inset-bottom, 0px)); }
@media (max-height:700px){
  body{
    block-size:100dvh; min-height:0;
    padding-block-end:var(--b-lane);
    display:flex; flex-direction:column;
  }
  /* THE BAR'S LANE, the same instruction at the other end. The top bar is fixed and paints no ground,
     so once .shell became a scroll region the display headline passed under the IRIDIUM wordmark:
     measured at 390x430, the shell rests at scrollTop 182 and the headline's last line ran through the
     bar's 57 px. Relative rather than fixed, it joins the shell in the page shell's flex column and
     nothing can scroll beneath it - and z-index 10 is restated because a static box would fall behind
     the scene's own fixed canvases. Its rendered position at rest is unchanged. */
  .topbar{ position:relative; z-index:10; }
  .shell{
    min-height:0; flex:1 1 auto; min-block-size:0;
    overflow-y:auto; overscroll-behavior:contain;
    justify-content:safe flex-end;
    padding-block-end:var(--shell-pb);
    scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
  }
}