/* the shared story terminal  - presentation for the markup terminal.js
   injects. Loaded by both the landing page and the keyed portfolio.
   Palette + font custom properties come from each page's :root (both pages
   define identical --term-* / --ui / --body / ink tokens); layout tokens
   that only the landing defines get fallbacks here. */

.stage-term{ background:var(--term-bg); border-block:2px solid var(--ink); }
.term-in-wrap{ display:grid; grid-template-columns:minmax(1.25ch,1fr) minmax(0,var(--col,74ch)) minmax(1.25ch,1fr); padding-block:calc(var(--lh,1.5rem)*1.5); }
.term-in-wrap > div{ grid-column:2; }
.term{ color:var(--term-fg); font-family:var(--ui); font-size:14px; line-height:1.45; }
.term pre{ margin:0; font:inherit; white-space:pre; }
.term-log{ overflow:auto; height:4.35em; }
.log-line{ display:block; }
.term-log .log-line{ white-space:pre-wrap; }
.term-stage{ overflow:hidden; }
.term .hi{ color:var(--term-hi); }
.term-prog{ color:var(--term-dim); font-size:12px; margin-top:0.5rem; font-family:var(--ui); opacity:0.9; }
.term-chapcap{ color:var(--term-dim); font-size:13px; margin-top:0.2rem; font-family:var(--body); font-style:italic; min-height:1.4em; }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.trow{ display:flex; gap:1ch; margin-top:0.9rem; }
.trow .ps1{ color:var(--term-hi); }
.trow input{ flex:1; background:transparent; border:none; color:var(--term-fg); font:inherit; caret-color:var(--term-hi); padding:0; min-width:0; }
.trow input:focus-visible{ outline:2px solid var(--term-hi); outline-offset:2px; }
.term-cap{ color:var(--term-dim); font-size:13px; margin-top:0.75rem; font-family:var(--ui); }

/* ---------- staggered line reveal: panel rows, ls rows, log lines ---------- */
@media (prefers-reduced-motion:no-preference){
  .log-line, .ls-rows .ls-item{
    opacity:0; transform:translateY(4px);
    animation:line-in .18s ease-out forwards;
    animation-delay:calc(var(--i,0) * 120ms);
  }
  @keyframes line-in{ to{ opacity:1; transform:none; } }
}

/* ---------- scramble-decode chars (panel header + chapter titles) ---------- */
.scr-ch{ white-space:pre; transition:color .25s var(--ease,cubic-bezier(.4,0,.2,1)); }
.scr-ch.set{ color:var(--term-hi); }

/* ---------- running-state beat: between a command and its scene ---------- */
.run-label{ display:inline-block; }
[data-state="running"] .run-label{
  background:linear-gradient(90deg, var(--term-fg) 40%, var(--term-hi) 50%, var(--term-fg) 60%);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sweep 1.4s linear infinite;
}
.run-label .dots span{ animation:rundot 1s ease-in-out infinite; opacity:0.3; }
.run-label .dots span:nth-child(2){ animation-delay:.15s; }
.run-label .dots span:nth-child(3){ animation-delay:.3s; }
@keyframes sweep{ to{ background-position:-200% 0; } }
@keyframes rundot{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

/* ---------- FACE 1: instrument panel (status) ---------- */
.tpanel{ font-family:var(--ui); font-size:13px; line-height:1.7; }
.panel-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:0.3rem 1.5ch; }
.panel-title{ color:var(--term-hi); font-weight:500; }
.panel-title .scr-ch{ display:inline-block; }
.panel-deploy{ color:var(--term-dim); font-size:12px; }
.panel-rule{ color:var(--term-dim); white-space:nowrap; overflow:hidden; user-select:none; opacity:0.6; margin-block:0.35rem; }
.panel-rows{ display:flex; flex-direction:column; gap:0.15rem; }
.panel-row{ display:flex; gap:1.5ch; flex-wrap:wrap; }
.panel-row .prl{ color:var(--term-dim); min-width:13ch; }
.panel-row .prv{ color:var(--term-fg); }
.prv-done{ color:var(--term-hi); }
.panel-hint{ color:var(--term-dim); margin-top:0.35rem; }
.panel-hint b{ color:var(--term-hi); font-weight:500; }

/* ---------- FACE 3: ls workshop, disclosure rows + :has() focus-dim ---------- */
.ls-face{ font-family:var(--ui); font-size:13px; line-height:1.6; }
.ls-head{ color:var(--term-dim); margin-bottom:0.4rem; }
.ls-head .hi{ color:var(--term-hi); }
.ls-rows{ display:flex; flex-direction:column; }
.ls-rows:has(.row:hover) .row:not(:hover){ color:var(--term-dim); }
.ls-item[data-open] > .row{ background:rgba(140,199,161,0.08); }
.ls-rows .row{
  all:unset; box-sizing:border-box; cursor:pointer; display:flex; gap:1.5ch; width:100%;
  align-items:baseline; flex-wrap:wrap; font-family:var(--ui); font-size:13px;
  color:var(--term-fg); padding:0.32rem 0.25rem;
}
.ls-rows .row:hover{ color:var(--term-hi); }
.ls-rows .row:focus-visible{ outline:2px solid var(--term-hi); outline-offset:-1px; color:var(--term-hi); }
.ls-n{ color:var(--term-dim); width:3ch; }
.ls-y{ color:var(--term-dim); width:4ch; }
.ls-name{ color:var(--term-hi); min-width:14ch; }
.ls-status{ color:inherit; }
/* grid-rows 0fr->1fr is the textbook disclosure trick, but under an auto-height
   ancestor chain (flex column of unconstrained rows) Chrome sizes the 0fr track
   to the item's content-min instead of true zero, verified in headless testing.
   max-height reliably collapses to zero here while keeping the same ease-out
   reveal-in-place feel with no overshoot. */
.ls-face .children{ max-height:0; overflow:hidden; transition:max-height .2s ease-out; }
.ls-item[data-open] .children{ max-height:320px; }
.ls-card{ padding:0.15rem 0.2rem 0.85rem 4.75ch; font-family:var(--body); font-size:13px; color:var(--term-fg); }
.ls-card p{ margin:0 0 0.4rem; max-width:56ch; }
.ls-receipt{ color:var(--term-dim); }
.ls-receipt a{ color:var(--term-hi); text-decoration:underline; }
.ls-receipt a:hover, .ls-receipt a:focus-visible{ color:var(--term-fg); }

/* ---------- FACE 4: hi dispatch card ---------- */
.hi-face{ font-family:var(--ui); font-size:13px; line-height:1.6; }
.hi-rule{ color:var(--term-dim); white-space:nowrap; overflow:hidden; user-select:none; opacity:0.7; }
.hi-line{ color:var(--term-fg); margin:0.6rem 0 0.9rem; font-size:14px; }
.hi-form{ margin-bottom:0.75rem; }
.hi-fallback{ color:var(--term-dim); font-size:12.5px; margin:0 0 0.6rem; }
.hi-fallback a{ color:var(--term-hi); }
.hi-fallback a:hover, .hi-fallback a:focus-visible{ color:var(--term-fg); }

/* ---------- note form (refero login/comments pattern): bordered, square,
   inline status. Shared by the terminal's hi card and the landing's
   page-bottom "the line" section. ---------- */
.gb-form{ display:grid; gap:0.9rem; max-width:46ch; margin-top:0.5rem; }
.gb-label{ font-family:var(--ui); font-size:12px; font-weight:500; color:var(--mut); text-transform:lowercase; letter-spacing:0.02em; }
.gb-optional{ text-transform:none; letter-spacing:0; }
.gb-form input, .gb-form textarea{
  font-family:var(--body); font-size:15px; color:var(--ink); background:var(--base);
  border:1px solid var(--rule); border-radius:0; padding:0.6rem; width:100%; resize:vertical;
}
.gb-form input:focus-visible, .gb-form textarea:focus-visible{ border-color:var(--green); outline:1px solid var(--green); outline-offset:0; }
.gb-submit{
  font-family:var(--ui); font-size:14px; color:var(--ink); background:transparent;
  border:1px solid var(--ink); border-radius:0; padding:0.6rem 1.4rem; cursor:pointer; justify-self:start;
}
.gb-submit:hover, .gb-submit:focus-visible{ background:var(--green); border-color:var(--green); color:var(--base); }
.gb-status{ font-family:var(--ui); font-size:12.5px; color:var(--green); margin:0.5rem 0 0; min-height:1.2em; }

/* dark-terminal context: same form, re-skinned to the stage palette */
.hi-face .gb-label{ color:var(--term-dim); }
.hi-face .gb-form input, .hi-face .gb-form textarea{
  background:var(--term-bg); color:var(--term-fg); border-color:var(--term-dim); font-family:var(--body);
}
.hi-face .gb-form input:focus-visible, .hi-face .gb-form textarea:focus-visible{ border-color:var(--term-hi); outline-color:var(--term-hi); }
.hi-face .gb-submit{ color:var(--term-fg); border-color:var(--term-fg); }
.hi-face .gb-submit:hover, .hi-face .gb-submit:focus-visible{ background:var(--term-hi); border-color:var(--term-hi); color:var(--term-bg); }
.hi-face .gb-status{ color:var(--term-hi); }