/* ==========================================================================
   View: Acceso - the login gate and the recovery screens (SPEC 3.6, 12.1), and the staff support banner (SPEC 2.8).
   Static markup in html/80-gate.html; js/views/acceso.js (K.gate) shows it. Same tokens as the app (they replace the inline <style> string
   of the old gate). body.is-gate hides the app (it is inert as well, set by K.gate) and shows the gate. Tokens only; breakpoints 761.
   ========================================================================== */
.gate-root { min-height: 100vh; min-height: 100dvh; }
body:not(.is-gate) .gate-root { display: none; }
body.is-gate .app, body.is-gate .dialog, body.is-gate .toasts, body.is-gate .actionbar, body.is-gate .supbar, body.is-gate .skip-link { display: none; }   /* the skip link leads to <main>, which is hidden behind the gate */
.gate { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: calc(24px + var(--safe-t)) 16px calc(24px + var(--safe-b)); }
.gate__card { width: min(460px, 100%); display: grid; gap: var(--sp-5); padding: var(--sp-6) var(--sp-5); border-radius: var(--r-xl); background: linear-gradient(180deg, var(--hero-top), var(--hero-bottom)); border: 1px solid var(--line-strong); box-shadow: var(--e3); }
@media (min-width: 761px) { .gate__card { padding: var(--sp-8); } }
.gate__card > * { min-width: 0; }
.gate__brand { display: flex; justify-content: center; }
.gate__icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; margin: 0 auto; background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-line); }
.gate__icon--ok, .gate__icon--busy { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.gate__icon--danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.gate__spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--accent-line); border-top-color: var(--accent); animation: spin .9s linear infinite; }
.gate h1 { font-size: var(--fs-2xl); text-align: center; letter-spacing: -.03em; overflow-wrap: anywhere; }
.gate__lead { text-align: center; color: var(--ink-2); }
.gate__steps { display: grid; gap: 12px; }
.gate__foot { text-align: center; font-size: var(--fs-sm); color: var(--muted); }
.gate__note { margin: 0; }
.gate__help { display: grid; gap: var(--sp-2); justify-items: center; }
.gate__help > * { width: 100%; }
.gate__how { display: grid; justify-items: center; }
.gate__how[open] { justify-items: stretch; }
.gate__how > .steps-list, .gate__how > .btn { margin-top: var(--sp-3); }   /* the content of a <details> sits in one box: a grid gap would not reach it */
.gate__how > summary { cursor: pointer; list-style: none; justify-self: center; }
.gate__how > summary::-webkit-details-marker { display: none; }
.gate__how > summary::after { content: ""; width: 7px; height: 7px; margin: -3px 0 0 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--t-base) var(--ease); }
.gate__how[open] > summary::after { margin-top: 3px; transform: rotate(225deg); }
.gate__name { white-space: nowrap; }   /* the name of the bot's button stays whole: it moves to the next line instead of leaving "web»" alone */
.steps-list { display: grid; gap: var(--sp-3); counter-reset: step; }
.steps-list > li { position: relative; padding-left: 40px; min-height: 28px; counter-increment: step; }
.steps-list > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); font-weight: 750; font-size: var(--fs-sm); }
.steps-list p { color: var(--muted); font-size: var(--fs-sm); }
.pw { position: relative; }
.pw .input { padding-right: 56px; }
/* Edge/Chromium draw their own reveal and clear icons in a typed password field: ours is the only toggle, and it shows or hides BOTH fields */
.web-auth-gate input::-ms-reveal, .web-auth-gate input::-ms-clear { display: none; }
.pw__toggle { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; border: 0; background: none; color: var(--muted); border-radius: 10px; display: grid; place-items: center; }
.pw__toggle:hover { color: var(--ink); }
.pw__toggle[aria-pressed="true"] { color: var(--accent); }
.web-auth-gate .input[aria-invalid="true"] { border-color: var(--danger); }
.web-auth-gate .field__error:empty { display: none; }
.web-auth-gate .field__error { font-size: var(--fs-sm); }
.web-auth-gate .field__error .icon { margin-top: 2px; }

/* ---------- Support banner (staff session only, SPEC 2.8): the only thing allowed above the app bar. The box is shell.css's; this is its content ---------- */
.admin-support-banner [data-support-label] { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.admin-support-banner [data-support-label] .icon { color: var(--info); }
.support-banner__text { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.support-banner__text b { color: var(--ink); font-weight: 750; }
.support-banner__text .mono { color: var(--ink-2); }
.support-banner__text > span::before { content: "·"; margin-right: 8px; color: var(--muted); }
@media (max-width: 760px) { .support-banner__text > span:last-child { display: none; } }   /* the line stays short enough for the button to sit below it */