/* Hall layer for secondary public pages (login, connector, help, badge, 404): the same dark party hall as
   the landing, with forms kept on white cards so filling them stays easy. Loads after landing.css and
   app.css. Everything is namespaced: .hall-* classes, and overrides of shared classes only under body.hall.
   /ucet/ loads this file for the dark header bar only (.hall-nav), its body stays light. */

/* ---- header bar (shared with /ucet/) ---- */
.hall-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--vk-ink); border-bottom: 1px solid var(--vk-ink-3); color: #fff; }
.hall-nav-in { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.hall-brand { flex: none; display: block; border-radius: 6px; }
.hall-brand img { height: 30px; width: auto; }
.hall-links { margin-left: auto; display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; justify-content: flex-end; }
.hall-link { color: #fff; font: 600 15px var(--vk-font-text); text-decoration: none; padding: 10px 2px; white-space: nowrap; }
.hall-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.hall-nav :focus-visible { outline: 3px solid var(--vk-los); outline-offset: 3px; }
/* /ucet/: signed-in e-mail and the logout button on the dark bar. */
.hall-nav .nav-user { color: var(--vk-muted-dark); }
.hall-nav .btn-line { color: #fff; border-color: rgba(255, 255, 255, .7); }
.hall-nav .btn-line:hover { background: #fff; color: var(--vk-ink); }
@media (max-width: 460px) {
  .hall-nav-in { gap: 12px; }
  .hall-brand img { height: 24px; }
  .hall-link { font-size: 14px; }
}

/* ---- the hall: ink ground with the projector glow top right and a warm spill bottom left ---- */
body.hall { min-height: 100vh; display: flex; flex-direction: column; color: #fff; background:
  radial-gradient(70% 520px at 82% 40px, rgba(46, 66, 112, .9), transparent 72%),
  radial-gradient(55% 420px at 0% 560px, rgba(220, 48, 52, .16), transparent 70%),
  var(--vk-ink) no-repeat; }
body.hall > main { flex: 1 0 auto; }
body.hall :focus-visible { outline-color: var(--vk-los); }
body.hall a:not(.btn) { color: #fff; }

/* String lights under the header: ambient, they breathe slowly and never flash. */
.hall-lights { position: relative; height: 44px; display: flex; justify-content: space-around; overflow: hidden; pointer-events: none; }
.hall-lights::before { content: ''; position: absolute; left: -2%; right: -2%; top: -30px; height: 58px; border-bottom: 2px solid var(--vk-ink-3); border-radius: 0 0 50% 50%; }
.hall-lights i { position: relative; top: 16px; width: 11px; height: 15px; border-radius: 50% 50% 45% 45%; background: var(--vk-los); box-shadow: 0 0 16px 4px rgba(255, 201, 64, .4); animation: hall-bulb 3.2s var(--vk-ease) infinite alternate; }
.hall-lights i:nth-child(3n) { background: var(--vk-red); box-shadow: 0 0 16px 4px rgba(220, 48, 52, .42); animation-delay: -1.1s; }
.hall-lights i:nth-child(3n+1) { background: #fff; box-shadow: 0 0 14px 3px rgba(255, 255, 255, .32); animation-delay: -2.2s; }
.hall-lights i:nth-child(even) { top: 22px; }
/* Fewer bulbs on a phone so the strip does not look like a fence. */
@media (max-width: 560px) { .hall-lights i:nth-child(n+10) { display: none; } }
@keyframes hall-bulb { from { opacity: .45; } to { opacity: 1; } }

/* ---- text in the hall ---- */
body.hall .narrow { padding-block: 12px 72px; }
.hall-kicker { font: 700 13px var(--vk-font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--vk-muted-dark); margin: 0 0 6px; }
body.hall .page-h { color: #fff; letter-spacing: -.015em; }
body.hall .page-lead, body.hall .page-foot, body.hall .loading { color: var(--vk-muted-dark); }
body.hall .page-lead b { color: #fff; }
body.hall .page-foot a { font-weight: 600; }
body.hall .notice { color: var(--vk-ink); }
body.hall .notice a { color: var(--vk-ink); }

/* ---- white cards floating in the hall: forms and reading stay on paper ---- */
.hall-card, body.hall .card-form, body.hall .acc-card { background: #fff; color: var(--vk-ink); border: 0; border-radius: 18px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 60px rgba(0, 0, 0, .45), 0 0 90px rgba(120, 150, 220, .12); }
.hall-card { padding: 22px; display: grid; gap: 12px; }
body.hall .card-form { padding: 22px; }
body.hall .hall-card :focus-visible, body.hall .card-form :focus-visible, body.hall .acc-card :focus-visible { outline-color: #2F5BD3; }
body.hall .hall-card a:not(.btn), body.hall .card-form a:not(.btn), body.hall .acc-card a:not(.btn) { color: var(--vk-ink); }
body.hall .hall-card .page-h { color: var(--vk-ink); }
body.hall .hall-card .page-lead { color: #2B3650; }
@media (max-width: 420px) { .hall-card, body.hall .card-form { padding: 18px 16px; } }

/* Outlined buttons that sit directly on the dark ground. */
.hall-ghost.btn-line { color: #fff; border-color: rgba(255, 255, 255, .75); }
.hall-ghost.btn-line:hover { background: #fff; color: var(--vk-ink); }

/* ---- footer in the dark, operator text verbatim ---- */
body.hall .foot { border-top: 1px solid var(--vk-ink-3); background: rgba(10, 19, 38, .55); }
body.hall .foot-in { color: var(--vk-muted-dark); }
body.hall .foot a { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .hall-lights i { animation: none; opacity: .9; }
}

/* ---- connector pages ---- */
body.hall .guide code { color: var(--vk-ink); }
body.hall .toc a { text-underline-offset: 3px; }
body.hall .toc li::marker { color: var(--vk-muted-dark); }
body.hall .acc-card .btn-row { margin-top: 8px; }

/* ---- 404: a face-down deck where the turned card is Černý Petr ---- */
.hall-404 { max-width: 640px; padding-block: 24px 80px; text-align: center; }
.hall-404 .page-lead { max-width: 34em; margin-inline: auto; }
.hall-deck { display: flex; justify-content: center; align-items: flex-end; gap: 0; margin: 8px 0 28px; perspective: 900px; }
.hall-cardback, .hall-petr { width: 116px; aspect-ratio: 3 / 4; border-radius: var(--vk-radius-badge); flex: none; }
.hall-cardback { background: var(--vk-ink-2) radial-gradient(circle, var(--vk-ink-3) 18%, transparent 21%) 0 0 / 12px 12px; border: 3px solid var(--vk-ink-3); margin-right: -14px; transform: rotate(-9deg) translateY(8px); }
.hall-cardback:last-child { margin: 0 0 0 -14px; transform: rotate(10deg) translateY(12px); }
.hall-petr { position: relative; z-index: 1; width: 136px; display: flex; flex-direction: column; background: #fff; color: var(--vk-ink); border: 3px solid var(--vk-ink); overflow: hidden; box-shadow: 0 22px 50px rgba(0, 0, 0, .5), 0 0 70px rgba(255, 201, 64, .18); animation: hall-turn var(--vk-dur-flip) var(--vk-ease) .35s both; }
.hall-petr::before { content: ''; position: absolute; top: 7px; left: 50%; width: 28px; height: 7px; border-radius: 7px; background: var(--vk-ink); transform: translateX(-50%); }
.hall-petr-hd { display: block; background: var(--vk-red); color: #fff; padding: 20px 6px 6px; font: 700 15px/1.1 var(--vk-font-display); }
.hall-petr-hd small { display: block; font-size: 8px; letter-spacing: .16em; margin-bottom: 2px; }
.hall-petr-n { flex: 1; display: grid; place-items: center; font: 700 38px var(--vk-font-display); font-variant-numeric: tabular-nums; }
.hall-petr-f { font: 17px/1.1 var(--vk-font-hand); padding: 0 6px 12px; }
@keyframes hall-turn { from { transform: rotateY(90deg) translateY(-8px); } to { transform: none; } }
@media (max-width: 560px) { .hall-cardback { width: 92px; } .hall-petr { width: 124px; } }
@media (prefers-reduced-motion: reduce) { .hall-petr { animation: none; } }