/* Face Terminal — only what the face check adds to Screen Terminal's page system (static/screen/st.css).
   ALIGNMENT RULE (Faisal, 2026-10-11): the two zones always line up row by row, even at the cost of extra space.
   Both zones are 5-row subgrids of one parent grid (label · text · frame · button · note), so a row is as tall as
   its tallest cell on EITHER side and no content change can push one side out of line. Without subgrid support
   the fallback keeps fixed heights (text min 2 lines, 4:3 frame, 44 px button, one-line note). */
.fzones{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);column-gap:14px;align-items:stretch}
.fzone{display:flex;flex-direction:column;border:1px solid var(--line2);background:rgba(0,0,0,.18);padding:16px}
@supports (grid-template-rows:subgrid){
  .fzone{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
  .fzone > *{min-width:0}
}
.fdesc{color:var(--mut);font-size:12px;line-height:1.6;margin:6px 0 12px;min-height:3.2em}

/* the frame: same size on both sides, whatever is in it */
.fmedia{position:relative;aspect-ratio:4/3;border:1px solid var(--line);background:rgba(0,0,0,.22);overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.fph{width:56px;height:42px;fill:none;stroke:var(--dim);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.fphtext{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.fprev,.fmedia video{position:absolute;inset:0;width:100%;height:100%;display:none;background:var(--panel2)}
.fprev{object-fit:contain}
.fmedia video{object-fit:cover;transform:scaleX(-1)}
.fprev.on,.fmedia video.on{display:block}
.fmedia.has .fph,.fmedia.has .fphtext{display:none}

/* status on the frame (live capture prompts, "done"), never pushing the frame down */
.fprompt{position:absolute;left:10px;right:10px;bottom:10px;font-size:12.5px;line-height:1.45;padding:8px 10px;
  background:rgba(10,10,13,.78);color:#e9e7e2;border-left:3px solid var(--line2);backdrop-filter:blur(6px)}
.fprompt.act{border-left-color:var(--none);font-weight:600;font-size:14px}
.fprompt.ok{border-left-color:var(--none)}
.fprompt.warn{border-left-color:var(--possible)}

/* the button row and the note under it line up across the two zones */
.fbtn,.term .fbtn{margin-top:14px;height:44px;padding:0 18px;display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:1;cursor:pointer;box-sizing:border-box}
.fsub{font-size:11.5px;color:var(--dim);text-align:center;margin:8px 0 0;min-height:1.6em}
.fupl{cursor:pointer}
.ulink{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.ulink:hover{text-decoration-color:var(--none);color:var(--ink)}

.fconsent{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--mut);margin:16px 0 14px;line-height:1.55;cursor:pointer}
.fconsent input,.term .fconsent input{width:16px;height:16px;flex:none;padding:0;margin:2px 0 0;border:0;accent-color:var(--none)}
.fconsent span{flex:1}
#f-go:disabled,#f-live:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
#f-go.busy:disabled{opacity:1;background:var(--ink)}
.tcheck{margin:0 0 12px;text-align:center}

/* while a check runs: a thin moving bar, the current step in words, and a light scan over both frames */
.fprog{margin-top:10px}
.fbar{position:relative;height:2px;background:var(--line);overflow:hidden}
.fbar span{position:absolute;top:0;bottom:0;left:0;width:0;background:var(--none);transition:width .25s ease}
.fbar.ind span{width:28%;animation:fslide 1.25s ease-in-out infinite}
@keyframes fslide{0%{left:-28%}100%{left:100%}}
.fstep{font-size:12px;color:var(--mut);margin:8px 0 0;min-height:1.6em}
.fstep b{color:var(--ink);font-weight:500}
.fstep .t{color:var(--dim);font-variant-numeric:tabular-nums;margin-left:6px}
.fmedia.scan::after{content:"";position:absolute;left:0;right:0;height:38%;top:-38%;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(120,100,230,.16) 85%,rgba(140,120,255,.55) 100%);
  animation:fscan 1.9s ease-in-out infinite}
@keyframes fscan{0%{top:-38%}100%{top:100%}}

.bchip.f-ok{color:var(--none);border-color:currentColor}
.bchip.f-mid{color:var(--possible);border-color:currentColor}
.bchip.f-bad{color:var(--sanction);border-color:currentColor}
.card.res.k-debar{border-left-color:var(--possible)}
div.hrow{cursor:default}
:root[data-skin="metal"] .fzone{background:#fbfaf7}
:root[data-skin="metal"] .fmedia{background:#f1f0eb}
@media (max-width:620px){
  .fzones{grid-template-columns:1fr;grid-template-rows:none;row-gap:14px}
  .fzone{display:flex;grid-row:auto}
  .fdesc{min-height:0}
}

/* invite codes */
.fcode .sso-btn{margin-top:4px}
.fcodebox{margin-top:12px;font-size:12px;color:var(--dim)}
.fcodebox summary{cursor:pointer;list-style:none;text-align:center}
.fcodebox summary::-webkit-details-marker{display:none}
.fcodebox summary:hover{color:var(--ink)}
.fcodeform{display:flex;gap:10px;margin-top:10px}
.fcodeform input{flex:1;text-transform:uppercase;letter-spacing:.08em}
.term .fcodeform button{margin-top:0;padding:0 18px;height:44px}
.term .fcodeform input{height:44px}

/* footer credit */
.madeby{text-align:center;font-size:11px;letter-spacing:.04em;color:var(--dim);margin:4px 0 8px}
.madeby a{color:var(--mut);text-decoration:none;border-bottom:1px solid var(--line2)}
.madeby a:hover{color:var(--ink);border-bottom-color:var(--none)}