/* ============================================================
   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{ margin-left:auto; flex:none; color:var(--ink-faint); white-space:nowrap; }
.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{ color:var(--ink-faint); letter-spacing:.1em; text-transform:none; font-size:.72rem; }

.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{ opacity:.5; }
.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; }
  .bar__meta{ display:none; }
  .lede{ font-size:.82rem; }
  .prompt__sigil{ display:none; }
  .head__word{ letter-spacing:-.03em; }
}
@media (max-width:380px){
  .foot__cell:nth-child(3){ display:none; }   /* drop transport middle cell */
  .foot__sep:nth-of-type(2){ display:none; }
}
/* 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; } }