/* Theme locks -- per-theme centrepieces for the admin app lock screen
   (static/theme_locks.js). The curtain carries data-lock="dial|console|coat";
   the keypad and status bar are the Safe Dial's own,
   restyled here per lock. */
.tl-stage { display: none; position: relative; width: 100%; height: 250px; margin: 12px auto 0; place-items: center; flex: none; }
/* .sd-screen: the admin app's full-screen lock and sign-in page, themed
   top to bottom. .tl-host: a page that only wants the picture (the
   dashboard sign-in's brand panel). */
:is(.sd-screen, .tl-host)[data-lock="console"] .tl-stage, :is(.sd-screen, .tl-host)[data-lock="coat"] .tl-stage { display: grid; }
:is(.sd-screen, .tl-host)[data-lock="console"] .sd-dial-wrap, :is(.sd-screen, .tl-host)[data-lock="coat"] .sd-dial-wrap, :is(.sd-screen, .tl-host)[data-lock="none"] .sd-dial-wrap, .tl-host[data-lock="dial"] .sd-dial-wrap { display: none; }
.tl-host .sd-dial-wrap { margin-top: 0; }

.sd-screen .sd-inner { position: relative; z-index: 1; }
.sd-led.open i { background: #38bdf8; box-shadow: 0 0 10px #38bdf8; }
.tl-bad .tl-stage > *, .tl-bad .sd-dial-wrap { animation: tl-shake .5s; }
@keyframes tl-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ---------------- Launch console (Voltage) */
.sd-screen[data-lock="console"] { background: #030405; color: #d8fbff; }
.sd-screen[data-lock="console"]::after { content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55)); }
.sd-screen[data-lock="console"] .sd-title { font: 700 20px "Chakra Petch", Inter, sans-serif; letter-spacing: .22em; color: #00f0ff; text-shadow: 0 0 10px rgba(0,240,255,.7); text-transform: uppercase; }
.sd-screen[data-lock="console"] .sd-sub { color: #6f949b; font-family: "Chakra Petch", Inter, sans-serif; }
.tl-console { position: relative; width: 236px; height: 236px; display: grid; place-items: center; }
.tl-radar { position: relative; width: 196px; height: 196px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(0,240,255,.5); box-shadow: 0 0 20px rgba(0,240,255,.2);
    background: radial-gradient(circle, rgba(0,240,255,.08), transparent 70%), repeating-radial-gradient(circle, transparent 0 23px, rgba(0,240,255,.18) 23px 24px); transition: border-color .3s, box-shadow .3s; }
.tl-radar::before { content: ""; position: absolute; inset: 0; background: conic-gradient(from 0deg, rgba(0,240,255,.5), transparent 25%); animation: tl-sweep 2.6s linear infinite; }
.tl-radar::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(0,240,255,.25); }
@keyframes tl-sweep { to { transform: rotate(360deg); } }
.tl-seg { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; gap: 5px; }
.tl-seg b { width: 28px; height: 38px; border-radius: 3px; background: #06080b; border: 1px solid rgba(0,240,255,.35); display: grid; place-items: center; font: 400 26px "Share Tech Mono", ui-monospace, monospace; color: rgba(0,240,255,.2); }
.tl-seg:has(b:nth-child(7)) b { width: 22px; font-size: 21px; }
.tl-seg b.on { color: #00f0ff; text-shadow: 0 0 10px #00f0ff; }
.tl-granted { position: absolute; top: 44%; left: 50%; transform: translateX(-50%); font: 700 13px "Chakra Petch", Inter, sans-serif; letter-spacing: .24em; color: #22ff88; text-shadow: 0 0 10px #22ff88; opacity: 0; white-space: nowrap; transition: opacity .2s; }
.tl-open .tl-granted { opacity: 1; }
.tl-open .tl-radar { border-color: #22ff88; box-shadow: 0 0 28px rgba(34,255,136,.5); }
.tl-open .tl-seg b.on { color: #22ff88; text-shadow: 0 0 10px #22ff88; border-color: rgba(34,255,136,.5); }
.sd-screen[data-lock="console"] .sd-status { background: #06080b; border: 1px solid rgba(0,240,255,.25); color: #6f949b; }
.sd-screen[data-lock="console"] .sd-key { border-radius: 3px; border: 1px solid rgba(0,240,255,.35); background: linear-gradient(180deg, #0b1016, #06080b); color: #bff9ff; font: 400 26px "Share Tech Mono", ui-monospace, monospace; box-shadow: inset 0 -2px 0 rgba(0,240,255,.25); }
.sd-screen[data-lock="console"] .sd-key:active { box-shadow: inset 0 0 12px rgba(0,240,255,.5); }
.sd-screen[data-lock="console"] .sd-key.fn { background: none; border: 0; box-shadow: none; }
.sd-screen[data-lock="console"] .sd-key svg { color: #00f0ff; }

/* ---------------- Coat check (Clarity): large, high contrast, nothing moving but the tags */
.sd-screen[data-lock="coat"] .sd-title { font: 700 28px "Atkinson Hyperlegible", Inter, sans-serif; letter-spacing: 0; }
.sd-screen[data-lock="coat"] .sd-sub { font: 400 15px "Atkinson Hyperlegible", Inter, sans-serif; letter-spacing: 0; text-transform: none; color: #14213d; }
.tl-coat { width: min(100%, 300px); }
.tl-rail { height: 9px; border-radius: 5px; background: linear-gradient(180deg, #cfd6e3, #8c96a8); }
.tl-tags { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 8px; padding: 0 6px; }
.tl-tag { position: relative; justify-self: center; width: 100%; max-width: 54px; height: 96px; margin-top: 14px; border: 3px solid #14213d; border-radius: 6px 6px 12px 12px; background: #fff; display: grid; place-items: center; font: 700 30px "Atkinson Hyperlegible", Inter, sans-serif; color: #c7d2e6; transform-origin: 50% -14px; transition: background .2s, color .2s; }
.tl-tag::before { content: ""; position: absolute; top: -17px; left: 50%; width: 2px; height: 14px; background: #14213d; }
.tl-tag::after { content: ""; position: absolute; top: 7px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid #14213d; }
.tl-tags:has(.tl-tag:nth-child(6)) .tl-tag { height: 80px; font-size: 22px; }
.tl-tag.on { color: #1d4ed8; animation: tl-swing .6s ease-out; }
@keyframes tl-swing { 30% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } }
.tl-open .tl-tag { background: #0f7b4f; border-color: #0f5132; color: #fff; }
.sd-screen.tl-bad .tl-tag { border-color: #b91c1c; }
.sd-screen[data-lock="coat"] .sd-status { background: #fff; border: 2px solid #14213d; color: #14213d; font-size: 11px; box-shadow: none; }
.sd-screen[data-lock="coat"] .sd-pips i { background: #c7d2e6; }
.sd-screen[data-lock="coat"] .sd-pips i.on { background: #1d4ed8; box-shadow: none; }
.sd-screen[data-lock="coat"] .sd-key { border-radius: 12px; border: 2px solid #14213d; background: #fff; color: #14213d; font: 700 28px "Atkinson Hyperlegible", Inter, sans-serif; }
.sd-screen[data-lock="coat"] .sd-key:active { background: #dbe5ff; }
.sd-screen[data-lock="coat"] .sd-key.fn { border: 0; background: none; }
.sd-screen[data-lock="coat"] .sd-key svg { color: #14213d; width: 26px; height: 26px; }
.sd-screen[data-lock="coat"] .sd-links button { color: #14213d; font-size: 14px; font-family: "Atkinson Hyperlegible", Inter, sans-serif; }

@media (max-height: 680px) {
    .tl-stage { height: 204px; }
    .tl-console { transform: scale(.84); }
    .tl-tag { height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
    .sd-screen[data-lock]::before, .tl-radar::before, .tl-tag.on, .sd-screen.tl-bad .tl-stage > * { animation: none !important; }
}

/* ---------------- "Checking" moment on the sign-in pages (password sent to the server) */

.tl-checking .tl-granted { opacity: 1; color: #7ff7ff; text-shadow: 0 0 10px #00f0ff; }
.tl-checking .tl-tag { animation: tl-swing .6s ease-out; }

/* ---------------- Sign-in page fields and buttons, per lock (admin app sign-in) */

.sd-screen[data-lock="console"] .sd-field { background: #06080b; border-color: rgba(0,240,255,.4); border-radius: 3px; }
.sd-screen[data-lock="console"] .sd-field input { font-family: "Share Tech Mono", ui-monospace, monospace; color: #bff9ff; }
.sd-screen[data-lock="console"] .sd-label { color: #6f949b; }
.sd-screen[data-lock="console"] .sd-btn { border-radius: 3px; background: #00f0ff; color: #050507; box-shadow: 0 0 14px rgba(0,240,255,.5); font-family: "Chakra Petch", Inter, sans-serif; }
.sd-screen[data-lock="coat"] .sd-field { border: 2px solid #14213d; border-radius: 12px; background: #fff; }
.sd-screen[data-lock="coat"] .sd-field input { font: 700 17px "Atkinson Hyperlegible", Inter, sans-serif; color: #14213d; }
.sd-screen[data-lock="coat"] .sd-label { font: 700 13px "Atkinson Hyperlegible", Inter, sans-serif; letter-spacing: 0; text-transform: none; color: #14213d; }
.sd-screen[data-lock="coat"] .sd-btn { border-radius: 12px; background: #1d4ed8; color: #fff; font: 700 17px "Atkinson Hyperlegible", Inter, sans-serif; letter-spacing: 0; text-transform: none; }

/* The admin app sign-in page shows a smaller picture above the fields. */
.tl-stage.small { height: 214px; margin: 6px auto 8px; }

.tl-stage.small > * { transform: scale(.8); }
.tl-stage.small .tl-coat { transform: none; width: min(100%, 260px); }
.tl-stage.small .tl-tag { height: 76px; }