/* ============================================================
   AGENT T — the T is for TIME
   Brutalist phosphor-CRT temporal access terminal.
   Black + bone, one hot amber-phosphor accent.
   ============================================================ */

:root{
  --bg:        #0a0b0a;   /* bone-black */
  --bg-2:      #0d100d;   /* panel */
  --ink:       #e8e4d8;   /* bone (body) */
  --ink-dim:   #9a9a8c;   /* muted bone */
  --ink-faint: #63655c;   /* faint */
  --amber:     #ffb000;   /* phosphor accent */
  --amber-2:   #ffcb52;   /* bright phosphor */
  --alarm:     #ff5442;   /* access-denied */
  --line:      rgba(232,228,216,.12);
  --line-hot:  rgba(255,176,0,.55);
  --glow:      0 0 14px rgba(255,176,0,.35);

  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", "SF Mono",
          "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --fs-word: clamp(2.2rem, 8vw, 5.4rem);
  --edge: clamp(10px, 2.6vw, 30px);
  --pad-x: clamp(16px, 4vw, 40px);
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
  background-image:
    radial-gradient(120% 90% at 50% 8%, rgba(255,176,0,.05), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.9), transparent 60%);
}

.defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* ---------- CRT phosphor canvas (decorative) ---------- */
#crt{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:60;
  pointer-events:none;
}

/* ---------- screen / frame ---------- */
.scr{
  position:relative;
  z-index:1;
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:var(--edge);
}

/* THE FRAME — every child row is fully contained inside this border.
   Border lives here; corner ticks are INSET so nothing sits outside. */
.frame{
  position:relative;
  width:min(760px, 100%);
  max-height:calc(100dvh - (var(--edge) * 2));
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  border:1px solid var(--line-hot);
  background:
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 40%),
    var(--bg-2);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 40px 120px -40px rgba(0,0,0,.9),
    inset 0 0 120px -40px rgba(255,176,0,.06);
  overflow:hidden;               /* clip any effect bleed to the border */
}
/* hard corner registration ticks — INSET so they read inside the panel */
.frame::before,
.frame::after{
  content:""; position:absolute; width:9px; height:9px; pointer-events:none;
  border:1px solid var(--amber); z-index:4;
}
.frame::before{ top:5px;    left:5px;   border-right:0; border-bottom:0; }
.frame::after{  bottom:5px; right:5px;  border-left:0;  border-top:0; }

/* ---------- top status bar ---------- */
.bar{
  display:flex; align-items:center; gap:12px;
  min-width:0;
  padding:12px var(--pad-x);
  border-bottom:1px solid var(--line);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
  background:linear-gradient(180deg, rgba(255,176,0,.04), transparent);
}
.bar__id{
  display:inline-flex; align-items:center; gap:8px;
  min-width:0;
  color:var(--ink);
  font-weight:600; letter-spacing:.22em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sigil{ color:var(--amber); flex:none; }
.hot{ color:var(--amber); }
.dim{
  color:var(--ink-faint); font-weight:400; letter-spacing:.12em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* .bar__meta removed with the cell it laid out - see index.html, THE ACCESSORY (bind.com port r2).
   The block-end alignment it also carried is restated on .bar__stat in DEPARTURES below. */
.bar__stat{
  display:inline-flex; align-items:center; gap:8px; flex:none;
  color:var(--amber);
  padding-left:12px; border-left:1px solid var(--line);
  white-space:nowrap;
}
.led{
  width:8px; height:8px; flex:none; border-radius:50%;
  background:var(--amber);
  box-shadow:var(--glow);
  animation:pulse 2.4s ease-in-out infinite;
}
.bar__stat.is-alarm{ color:var(--alarm); }
.bar__stat.is-alarm .led{ background:var(--alarm); box-shadow:0 0 14px rgba(255,84,66,.6); }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* ---------- terminal body (scrolls internally if ever too tall) ---------- */
.term{
  padding:clamp(16px,3.4vw,34px) var(--pad-x) clamp(18px,3.4vw,32px);
  display:flex; flex-direction:column;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--line-hot) transparent;
}
.term::-webkit-scrollbar{ width:8px; }
.term::-webkit-scrollbar-thumb{ background:var(--line-hot); }

.log{
  margin:0 0 clamp(14px,2.4vw,22px);
  font-size:.72rem;
  line-height:1.75;
  color:var(--ink-faint);
  white-space:pre-wrap;
  min-height:5.25em;
  letter-spacing:.02em;
}
.log b{ color:var(--amber); font-weight:400; }
.log .ok{ color:#7fbf6a; }

/* headline */
.head{ margin:0 0 12px; line-height:1; }
.head__kicker{
  display:block;
  font-size:.7rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--amber);
  margin-bottom:.8rem;
}
.head__word{
  display:block; position:relative;
  font-size:var(--fs-word);
  font-weight:700; letter-spacing:-.02em;
  color:var(--ink);
  text-shadow:-.5px 0 rgba(255,84,66,.28), .5px 0 rgba(90,180,255,.22);
}

/* ---------- CHRONOMETER STAGE (gesture-tech showcase) ---------- */
.chrono{
  position:relative;
  margin:clamp(12px,2.4vw,18px) 0 clamp(14px,2.4vw,20px);
  min-height:clamp(84px, 15vw, 132px);
  border:1px solid var(--line);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 2px, transparent 2px 3px),
    rgba(0,0,0,.42);
  overflow:hidden;
  display:grid;
  place-items:center;
  isolation:isolate;
}
.chrono__slab{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  padding:.35em 0;
}
.slab__t{
  font-size:clamp(2.1rem, 10.5vw, 4.4rem);
  font-weight:600;
  letter-spacing:.06em;
  color:var(--amber);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 12px rgba(255,176,0,.4), 0 0 34px rgba(255,176,0,.18);
  font-variation-settings:"wght" 600;
  will-change:font-variation-settings, transform, filter;
}
/* emboss (tilt-backward) — hard brutalist relief via SVG feConvolveMatrix */
.chrono.is-emboss .slab__t{
  filter:url(#embossFx);
  color:#cfcabb;
  text-shadow:none;
}
/* weight-axis morph (click-hold) is driven inline by JS on .slab__t */

/* fx canvases overlay the slab, on top, one active at a time */
.chrono__fx,
.chrono__gl{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  opacity:0; pointer-events:none;
  transition:opacity .18s ease;
}
.chrono.is-fx2d  .chrono__fx{ opacity:1; }
.chrono.is-fxgl  .chrono__gl{ opacity:1; }
/* when a canvas effect is live, hide the DOM slab beneath it */
.chrono.is-fx2d .chrono__slab,
.chrono.is-fxgl .chrono__slab{ opacity:0; }

.chrono__tag{
  position:absolute; z-index:3; left:0; bottom:0;
  padding:3px 8px;
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bg); background:var(--amber);
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chrono.is-fire .chrono__tag{ background:var(--amber-2); }

.lede{
  max-width:52ch;
  margin:0 0 clamp(20px,3.4vw,30px);
  color:var(--ink-dim);
  font-size:.86rem; line-height:1.7;
}

/* ---------- the gate ---------- */
.gate{ display:flex; flex-direction:column; gap:14px; }
.gate__label{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
}
.gate__labeltx{ color:var(--ink); }
/* .gate__hint removed with the span it sized - see index.html, THE ACCESSORY (bind.com port r1). */

.prompt{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.35);
  padding:0 10px 0 12px;
  min-height:56px;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.prompt:focus-within{
  border-color:var(--line-hot);
  box-shadow:var(--glow), inset 0 0 0 1px rgba(255,176,0,.25);
  background:rgba(255,176,0,.03);
}
.prompt__sigil{
  flex:none; color:var(--amber);
  font-size:.82rem; letter-spacing:.02em; opacity:.85; user-select:none;
  white-space:nowrap;
}
.prompt__in{
  flex:1 1 auto; min-width:0;
  appearance:none; border:0; outline:0; background:transparent;
  color:var(--ink);
  font:inherit; font-size:1rem; letter-spacing:.14em;
  padding:16px 0; caret-color:var(--amber);
}
.prompt__in::placeholder{ color:var(--ink-faint); letter-spacing:.14em; }

.reveal{
  flex:none; display:grid; place-items:center;
  width:38px; height:38px;
  border:1px solid transparent; background:transparent;
  color:var(--ink-dim); cursor:pointer;
  transition:color .15s ease, border-color .15s ease;
}
.reveal:hover{ color:var(--amber); }
.reveal .eye-slash{ opacity:0; transition:opacity .12s ease; }
.reveal[aria-pressed="true"] .eye-open{ opacity:.35; }
.reveal[aria-pressed="true"] .eye-slash{ opacity:1; color:var(--amber); }

/* submit — brutalist bar button */
.submit{
  position:relative; margin-top:6px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:56px; padding:0 20px;
  border:1px solid var(--amber); background:var(--amber);
  color:#0a0b0a;
  font:inherit; font-size:.92rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase; cursor:pointer;
  transition:transform .08s ease, box-shadow .16s ease, background .16s ease, color .16s ease, opacity .16s ease;
  box-shadow:var(--glow);
}
.submit:hover{ background:var(--amber-2); box-shadow:0 0 22px rgba(255,176,0,.5); }
.submit:active{ transform:translateY(1px); }
.submit__key{
  display:grid; place-items:center; width:26px; height:26px;
  border:1px solid rgba(10,11,10,.4); font-size:.9rem; letter-spacing:0;
}
.submit.is-busy{ pointer-events:none; }
.submit.is-busy .submit__tx{ visibility:hidden; }
.submit.is-busy::after{
  content:""; position:absolute; inset:0; margin:auto;
  width:16px; height:16px;
  border:2px solid rgba(10,11,10,.35); border-top-color:#0a0b0a;
  border-radius:50%; animation:spin .7s linear infinite;
}
.submit:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* verdict / aria-live */
.verdict{
  margin:6px 0 0; min-height:1.4em;
  font-size:.78rem; letter-spacing:.06em; color:var(--ink-dim);
}
.verdict__default{ color:var(--ink-faint); }
.verdict.is-error{ color:var(--alarm); }
.verdict.is-ok{ color:var(--amber-2); }
.verdict.is-wait{ color:var(--amber); }

/* ---------- footer (fully contained, wraps gracefully) ---------- */
.foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
  padding:11px var(--pad-x);
  border-top:1px solid var(--line);
  font-size:.66rem; letter-spacing:.1em;
  color:var(--ink-faint);
  min-width:0;
}
.foot__cell{ white-space:nowrap; }
/* .foot__sep removed with both separators - see index.html, THE FOOTER (bind.com port r2). */
.foot__clock{ margin-left:auto; color:var(--amber); font-variant-numeric:tabular-nums; }

/* ---------- gesture hint pill ---------- */
.ghint{
  position:fixed; z-index:70;
  left:50%; bottom:calc(var(--edge) + 6px); transform:translateX(-50%);
  padding:7px 14px;
  border:1px solid var(--line-hot); background:rgba(10,11,10,.92);
  color:var(--amber-2);
  font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  box-shadow:var(--glow);
  pointer-events:none;
  animation:ghintIn .3s ease;
}
.ghint[hidden]{ display:none; }
@keyframes ghintIn{ from{ opacity:0; transform:translate(-50%,6px) } to{ opacity:1; transform:translate(-50%,0) } }

/* ---------- states ---------- */
.scr.is-denied .frame{ animation:shake .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake{
  10%,90%{ transform:translateX(-2px) }
  20%,80%{ transform:translateX(3px) }
  30%,50%,70%{ transform:translateX(-6px) }
  40%,60%{ transform:translateX(6px) }
}

.scr.is-entering{ pointer-events:none; }
.scr.is-entering .frame{ animation:crtOff .62s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes crtOff{
  0%{ transform:scale(1); filter:brightness(1); }
  55%{ transform:scaleY(.9) scaleX(1.01); filter:brightness(1.8); }
  78%{ transform:scaleY(.006) scaleX(1.03); filter:brightness(3); }
  100%{ transform:scaleY(.0015) scaleX(.0); filter:brightness(6); opacity:.9; }
}
.scr.is-entering::after{
  content:""; position:fixed; inset:0; z-index:80;
  background:radial-gradient(closest-side, rgba(255,203,82,.9), rgba(255,176,0,0) 70%);
  opacity:0; animation:flash .62s ease-out forwards; pointer-events:none;
}
@keyframes flash{ 0%,60%{ opacity:0 } 80%{ opacity:.5 } 100%{ opacity:0 } }

/* ---------- focus visibility ---------- */
:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.prompt__in:focus-visible{ outline:0; }
.submit:focus-visible{ outline-offset:3px; }

/* ---------- responsive ---------- */
@media (max-width:560px){
  .dim{ display:none; }
  .lede{ font-size:.82rem; }
  .prompt__sigil{ display:none; }
  .head__word{ letter-spacing:-.03em; }
}
/* The 380px rule shed the footer's transport cell and the separator before it. Both are gone with
   the claim they made (see index.html, THE FOOTER, bind.com port r2), and the rule had to go with
   them: nth-child(3) is the CLOCK now, and the rule would have hidden the time at 320 and 344. */
/* laptop heights — compress vertical rhythm so the CTA never needs scroll */
@media (max-height:920px){
  .log{ min-height:3.4em; margin-bottom:12px; line-height:1.6; }
  .head{ margin-bottom:8px; }
  .head__word{ font-size:clamp(1.9rem,5vw,3.4rem); }
  .chrono{ min-height:clamp(66px,10vh,102px); margin:10px 0 12px; }
  .slab__t{ font-size:clamp(1.7rem,7.5vw,3.2rem); }
  .lede{ margin-bottom:14px; font-size:.82rem; line-height:1.55; }
  .term{ padding-top:clamp(12px,2vw,20px); padding-bottom:clamp(12px,2vw,20px); }
  .gate{ gap:11px; }
}
@media (max-height:760px){
  .log{ display:none; }
  .head__word{ font-size:clamp(1.7rem,4.4vw,2.8rem); }
}

/* short viewports (landscape phones) — trim vertical furniture */
@media (max-height:560px){
  .log{ display:none; }
  .head{ margin-bottom:8px; }
  .head__word{ font-size:clamp(1.8rem,6vw,3rem); }
  .chrono{ min-height:clamp(64px,18vh,96px); }
  .slab__t{ font-size:clamp(1.7rem,8vh,3rem); }
  .lede{ display:none; }
}
@media (max-height:420px){
  .head{ display:none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .led{ animation:none; }
  .scr.is-entering .frame{ animation:none; opacity:.15; }
}

/* 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 p1)
   ------------------------------------------------------------
   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 the measurement
   came from (bind-work/gauntlet/bind/evidence/portals-p1p2p3-r2). WHAT EACH ONE COSTS AT THE TWO
   VIEWPORTS THE ACQUIRED BAR WAS CAPTURED AT, with zero safe-area insets and no keyboard, measured
   rather than asserted: D1, D3 and D4 are inert there by construction (env() resolves to 0, the
   forced-colors query is false, and no shipped profile is narrower than 320 CSS px); D5's lane and
   pinned row are inert above 700 px of height; D2 moves six pixels on one button; D6 changes the
   colour of one text run; and D0 moves the whole frame down 8 px and makes it 16 px shorter, which
   is standards mode and nothing else. The removal of the label hint (see index.html) takes one line
   of type off the form. Numbers: RUN-AND-RECORDS.txt section 6.

   D1  SAFE AREA.  viewport-fit=cover lets the SCENE reach under the notch. It must not let the
       terminal frame do the same: at 390x844 with the notch insets pushed in, the status bar's
       first text sat at y 22 inside a 47 px top inset. The gutter is max(--edge, inset), not
       their sum, because the inset already IS the gutter on a device that has one; env()
       resolves to 0 where there is none, so this is byte-identical on every render without a
       notch. ASL section 5 assertion 6; brief item 19.
   D2  TOUCH TARGET.  #reveal measured 38x38 CSS px under pointer:coarse (matrix rows
       mobileM/light, kbd/light, folded/light). ASL Law 5 and brief item 27 are absolutes:
       44x44 under a coarse pointer, declared with min-block-size. On a fine pointer the button
       is the host's 38x38 still, because the law does not reach there.
   D3  FORCED COLOURS.  #key paints no border and no outline of its own; its boundary is
       .prompt's, and forced-colors: active flattens that to the same CanvasText every other
       edge on the page becomes (matrix row kbd/forced: "input#key no visible border/outline").
       brief item 21 names the preference queries an absolute. The field gets its own edge and
       its own focus ring in that mode, and in that mode only.
   D4  REFLOW BELOW 280 CSS px.  At the 200% zoom cross-cut the folded (344) and keyboard-open
       (390) profiles lay out at 172 and 195 CSS px, and five text boxes ran past a frame that
       clips: the chronometer digits, AUTHENTICATE, the return glyph, the label hint this round
       removed as its accessory, and the cipher cell (matrix rows folded/zoom and kbd/zoom). Clipped text is content lost, not
       content scrolled. This band relaxes the host's nowrap and display type; no shipped
       profile is narrower than 320 px, so nothing else ever enters it.
   D5  THE KEY ROW IS PINNED WHERE THE KEYBOARD IS OPEN.  ASL Law 11 asks for the focused field
       visible and the primary action reachable WITHOUT dismissing the keyboard. Measured at
       390x430 with the notch insets pushed in: .term is an internal scroll region 154 px tall,
       the gate form is 195 px, and the field carries autofocus - so the browser scrolls the
       field into view once, at load, and element.focus() afterwards is a no-op on an already
       focused element (measured: scrollTop 144 before and after the call). Any scroll position
       is therefore possible when the keyboard opens, and at scrollTop 144 the AUTHENTICATE
       button ran from y 232 to 288 in a region that ends at 254. A scroll cannot be relied on,
       so the key row stops depending on one: the gate becomes the pinned floor of the terminal
       and the scene scrolls behind it. Below 520 px of viewport the ambient footer stands down
       to make room for it - the host already sheds the boot log at 760, the lede at 560 and the
       headline at 420, and this is the next line of the same retreat.
   D7 IS ROUND 2's, AND SO IS THE ACCESSORY RULE BELOW IT.

   D6  CONTRAST INSIDE THE KEY FORM.  --ink-faint (#63655c) on the panel (--bg-2 #0d100d)
       measures 3.23:1, and one of the strings it carries is the form's own resting verdict,
       "Awaiting credential." axe-core could not judge it until D5 gave the gate a determinate
       background, and then reported colour-contrast SERIOUS on it and on the label hint this
       round removed as its accessory (matrix rows kbd/light and kbd/dark). brief
       item 27 and ASL section 5 assertion 3 are the floor. It moves to the host's OWN next
       tier up, --ink-dim (#9a9a8c), which measures 6.72:1 on the same panel - no new colour is
       introduced by this port, on this door or any other. The same 3.23:1 is still carried by
       the aria-hidden ambient boot log, the footer cells and the .dim strapline, where axe
       reports incomplete because the frame's gradient is indeterminate: measured, named in the
       round's records, and NOT changed here, because re-snapping this door's faint tier is a
       redesign of the scene and belongs in front of the critics, not inside a port.

   D7  THE HINGE IS A GUTTER, NOT A PLACE TO PUT A KEY FIELD.  At the spanned foldable profile
       (2 horizontal segments, hinge x 552-562 of 1114) this door is one centred full-viewport
       scene, so its centre IS the hinge: measured in round 1, input#key ran x 384-831 and
       button#submit x 218-896, both straight across it (matrix-p1 spanned rows, all five
       cross-cuts that carry the segments assertion). ASL section 5 names the spanned profile
       "nothing critical inside the hinge" and section 4 Law 2 allows exactly this query on a
       page shell. THE COMPOSITION DECISION, and it is a decision, not a nudge: the terminal
       takes one leaf whole rather than being cut in half by the fold - .scr, the page shell,
       becomes as wide as segment 0 and the frame centres inside it, while canvas#crt and the
       body's own field go on reaching both leaves, because the scene is what the second leaf
       is for. The first-run gesture pill is re-centred on the same leaf for the same reason
       (it was sitting on the fold). env() carries a 50% fallback, so a browser that answers
       the media feature but not the segment variables still puts the frame on one half:
       correct without the PROG feature, ASL Law 7. Nothing here is reachable at one segment,
       which is every other profile in the matrix and every desktop render.
   ============================================================ */

/* D6 */
.verdict__default{ color:var(--ink-dim); }

/* THE ACCESSORY, removed 2026-08-31 (bind.com port r2) - see index.html, THE ACCESSORY.
   .bar__meta carried the status bar's block-end alignment (margin-left:auto) as well as its own
   text, so the alignment is restated here on the cell that inherits the corner, and stood down
   again at the host's OWN 560 px breakpoint, where the host had already hidden the accessory and
   left the status chip beside the wordmark. Measured consequence at the two viewports the
   acquired bar was captured at: .bar__stat keeps its x to the pixel, and one aria-hidden text run
   is gone from 1440x900; at 390x844 nothing moves at all, because the accessory was already
   display:none there. */
.bar__stat{ margin-inline-start:auto; }
@media (max-width:560px){ .bar__stat{ margin-inline-start:0; } }

/* D1 */
.scr{
  padding-block-start:max(var(--edge), env(safe-area-inset-top, 0px));
  padding-block-end:max(var(--edge), env(safe-area-inset-bottom, 0px));
  padding-inline:max(var(--edge), env(safe-area-inset-left, 0px))
                 max(var(--edge), env(safe-area-inset-right, 0px));
}
.frame{
  max-height:calc(100dvh - max(var(--edge), env(safe-area-inset-top, 0px))
                         - max(var(--edge), env(safe-area-inset-bottom, 0px)));
}
/* D2 */
@media (pointer:coarse){
  .reveal{ min-block-size:44px; min-inline-size:44px; }
}
/* D3 */
@media (forced-colors:active){
  .prompt__in{ border:1px solid; }
  .prompt__in:focus-visible{ outline:2px solid Highlight; outline-offset:-3px; }
}
/* D7 - the page shell, and only at two segments. */
@media (horizontal-viewport-segments: 2){
  .scr{ inline-size:env(viewport-segment-right 0 0, 50%); }
  .ghint{ left:calc(env(viewport-segment-right 0 0, 50%) / 2); }
}
/* D4 */
@media (max-width:280px){
  .gate__label{ flex-wrap:wrap; }
  .foot__cell{ white-space:normal; overflow-wrap:anywhere; }
  .submit{ flex-wrap:wrap; justify-content:center; gap:4px; padding:0 10px; }
  .submit__tx{ letter-spacing:.12em; overflow-wrap:anywhere; }
  .slab__t{ font-size:clamp(1rem, 9vw, 4.4rem); }
}

/* ============================================================
   THE CHIP'S LANE  (bind.com port - wall/PORT-NOTES.txt STEP 7)
   ------------------------------------------------------------
   wall/shared/motion.css fixes the sensor chip to the block-end corner of the VIEWPORT at
   calc(14px + env(safe-area-inset-bottom)). A fixed element does not scroll, so on a short
   surface the door's own key row lands underneath it: measured on this door at 390x430 with the
   notch insets pushed in, the chip's pill was y 338-382 while the AUTHENTICATE button was
   y 329-385 and the terminal's scroll region ran to y 358. A tap at the bottom of the button
   opened the sensor prompt instead of the door.
   The lane is the chip's tallest measured box (52 px, where its armed line wraps at 320 and
   344) plus the 14 px inset it is already fixed at plus a 14 px gutter plus that inset again,
   because the chip's own position already carries it.
   IT IS A SHORT-SURFACE RULE, AND THE THRESHOLD IS MEASURED, NOT CHOSEN: this door's .frame is
   capped by the viewport (so .term scrolls) at 568 and below - 548 px tall in a 568 px viewport,
   410 in 430, 346 in 390 - and is NOT capped at 844 and above, where it stands 671 px tall in an
   844 px viewport with .term scrollable 0 and the chip 90 px clear of it. 700 px sits in the
   empty band between those two measurements, 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){
  .scr{ padding-block-end:var(--b-lane); }
  .frame{
    max-height:calc(100dvh - max(var(--edge), env(safe-area-inset-top, 0px)) - var(--b-lane));
  }
  .ghint{ bottom:calc(var(--b-lane) + 6px); }
  /* D5 - the pinned floor. Sticky, so it costs nothing when the terminal does not scroll. */
  .gate{
    position:sticky; bottom:0; z-index:2;
    background:var(--bg-2);
    padding-block:10px 0;
    box-shadow:0 -1px 0 var(--line), 0 -14px 18px -14px var(--bg-2);
  }
}
@media (max-height:520px){
  .foot{ display:none; }
}