/* The public control room's sign-in (server.py --identity password).

   THE LOOK IS THE BEYER PLATFORM'S SIGN-IN SCREEN, rebuilt in plain CSS for this plain page: the venue photograph Beyer
   chose (beyer-venue.jpg, 1604 by 980, copied from the platform), with this card laid exactly over the glass card drawn
   into it. The numbers are the platform's own measurements of that drawing:
     the photograph            1604 x 980
     the card drawn into it    left 529, top 171, right 1076, bottom 904
     where the real card goes  one pixel wider on every side: left 528, top 170, right 1077, bottom 905
     the height kept on screen 90 per cent (the drawn wordmark at the top to the foot of the card)
   The card's place is set in percentages of the photograph, and every size inside the card in --u, one pixel of the
   photograph at the scale it is drawn, so the card IS the drawn card at any laptop size.

   TWO LAYOUTS, by the shape of the screen:
     locked   a landscape screen at least 1000 by 620: the photograph covers the screen and the card sits on the drawing.
     free     a phone, a portrait tablet or a short window: the photograph stays behind, blurred and dimmed so the drawn
              card does not read, and the card is centred at its own size with a 16 pixel gutter.

   ITS OWN DARK PALETTE in both themes, as on the platform: the photograph is dark whatever a person chose, so the card is
   dark glass either way. Nothing loads from outside: the face, the photograph and the script are all beside this file. */

/* Montserrat, the platform's face for this screen, served from beside this file (the Latin set, every weight in one
   variable file; SIL Open Font License, montserrat-OFL.txt), so nothing loads from outside. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/auth/montserrat.woff2") format("woff2");
}

:root { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #06070b; }
h1, p, ul { margin: 0; }
button, input { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.stage {
  /* the ground, the glass and its rim */
  --ground: #06070b;
  --glass-top: rgba(13, 15, 24, 0.97);
  --glass-bottom: rgba(11, 12, 20, 0.97);
  --rim: rgba(190, 200, 232, 0.36);
  /* words, brightest to quietest */
  --text: #f6f6f8;
  --soft: #e4e5ea;
  --muted: #a9acb6;
  /* fields */
  --field: #0e0f17;
  --field-line: #747887;
  --placeholder: #9ea2ae;
  /* the gold: the button, a rule that is met, the focus ring */
  --gold: #f6c08b;
  --gold-light: #ebbd8f;
  --gold-mid: #dcaa7a;
  --gold-deep: #bd8553;
  --on-gold: #1c140b;
  --alert: #f4aaa2;
  /* the photograph's measurements (see the head of this file) */
  --photo-w: 1604;
  --photo-aspect: 1.636735;
  --keep-height: 0.9;
  --card-x: 32.9177%;
  --card-y: 17.3469%;
  --card-w: 34.2269%;
  --card-h: 75%;
  /* one pixel of the photograph: 1px in the free layout, scaled in the locked one */
  --u: 1px;

  position: fixed;
  inset: 0;
  overflow: hidden;
  container-name: stage;
  container-type: size;
  background: var(--ground);
  color: var(--text);
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  animation: stage-in 700ms ease-out both;
}
@keyframes stage-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .stage { animation: none; }
  .go, .go svg { transition: none; }
}

/* ---- the photograph ---- */
/* Behind everything, blurred and dimmed: the background itself in the free layout (blurred enough that the drawn card
   cannot be read beside the real one), and only the ends of a very wide screen in the locked one. */
.stage-blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 92% 50%;          /* the stage lights and the neon, not the drawn card */
  filter: blur(14px) brightness(0.45) saturate(1.1);
  transform: scale(1.08);
  pointer-events: none;
  user-select: none;
}
.stage-photo { display: none; pointer-events: none; user-select: none; }   /* sharp: the locked layout only */
.stage-box {                         /* the free layout: the page the card scrolls in */
  position: absolute;
  inset: 0;
  overflow-y: auto;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

/* ---- the card ---- */
.card {
  position: relative;
  width: 100%;
  max-width: 549px;
  display: flex;
  flex-direction: column;
  padding: 40px 24px 24px;
  border: 1px solid var(--rim);
  border-top-color: rgba(190, 200, 232, 0.24);     /* the drawing's top edge catches less light than its sides */
  border-radius: calc(14 * var(--u));
  background:
    radial-gradient(120% 55% at 100% 100%, rgba(78, 68, 92, 0.34), transparent 70%),
    radial-gradient(100% 45% at 0% 100%, rgba(70, 52, 58, 0.3), transparent 70%),
    linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  box-shadow:
    inset 0 0 0 1px rgba(205, 214, 242, 0.14),
    inset 0 0 calc(16 * var(--u)) rgba(170, 182, 226, 0.2),
    inset calc(-22 * var(--u)) 0 calc(30 * var(--u)) calc(-12 * var(--u)) rgba(132, 150, 222, 0.42),
    inset 0 calc(-20 * var(--u)) calc(30 * var(--u)) calc(-12 * var(--u)) rgba(206, 172, 182, 0.24),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 calc(30 * var(--u)) calc(80 * var(--u)) rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.card-main { display: flex; flex-direction: column; }
.eyebrow {
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text);
}
.heading {
  margin-top: calc(14 * var(--u));
  font-size: calc(40 * var(--u));
  line-height: calc(48 * var(--u));
  font-weight: 600;
  letter-spacing: -0.045em;
  text-align: center;
  color: var(--text);
  text-wrap: balance;
}
.sub {
  margin-top: calc(9 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: calc(23 * var(--u));
  font-weight: 400;
  text-align: center;
  color: var(--soft);
}

/* ---- the fields ---- */
.form { display: flex; flex-direction: column; }
.form-signin { margin-top: calc(14 * var(--u)); }
.label {
  display: block;
  margin-top: calc(20 * var(--u));
  font-size: calc(10 * var(--u));
  line-height: calc(12 * var(--u));
  font-weight: 600;
  letter-spacing: 0.185em;
  text-transform: uppercase;
  color: #eaebee;
}
.label.after-rules { margin-top: calc(25 * var(--u)); }
.field { position: relative; margin-top: calc(9 * var(--u)); height: calc(45 * var(--u)); }
.input {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 calc(17 * var(--u));
  font-size: calc(15 * var(--u));
  color: var(--text);
  caret-color: var(--gold);
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: calc(7 * var(--u));
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.input.with-eye { padding-right: calc(54 * var(--u)); }
/* a typed password in the system face, whose dots read at a better size; the placeholder keeps the house face */
.input[type="password"]:not(:placeholder-shown) {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.08em;
}
.input::placeholder { color: var(--placeholder); opacity: 1; }
.input:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 calc(3 * var(--u)) rgba(246, 192, 139, 0.22); }
.input:-webkit-autofill, .input:-webkit-autofill:hover, .input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--field) inset;
  caret-color: var(--gold);
}
.eye {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(53 * var(--u));
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0;
  color: #cfd1da;
  background: transparent;
  border: 0;
  border-radius: 0 calc(7 * var(--u)) calc(7 * var(--u)) 0;
  cursor: pointer;
}
.eye:hover { color: var(--text); }
.eye:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.eye svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }

/* ---- the rules under a new password ---- */
.rules { margin-top: calc(6 * var(--u)); padding: 0; list-style: none; }
.rule {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  min-height: calc(20.4 * var(--u));
  padding-left: calc(4 * var(--u));
  font-size: calc(13 * var(--u));
  line-height: calc(17 * var(--u));
  color: #b7b9c2;
  transition: color 200ms ease;
}
.mark {
  flex: none;
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  display: grid;
  place-items: center;
  border: calc(1.3 * var(--u)) solid #7c7f8b;
  border-radius: 50%;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.mark svg { width: calc(10 * var(--u)); height: calc(10 * var(--u)); opacity: 0; transform: scale(0.6);
  transition: opacity 200ms ease, transform 200ms ease; }
.rule[data-met="true"] { color: var(--soft); }
.rule[data-met="true"] .mark { border-color: transparent; background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
  color: var(--on-gold); }
.rule[data-met="true"] .mark svg { opacity: 1; transform: none; }

/* ---- refusals ---- */
.alert { margin-top: calc(8 * var(--u)); font-size: calc(12.5 * var(--u)); line-height: calc(17 * var(--u)); color: var(--alert); }
.alert.center { text-align: center; }

/* ---- the gold button with its arrow ---- */
.go {
  position: relative;
  width: 100%;
  height: calc(53 * var(--u));
  margin-top: calc(19 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(11 * var(--u));
  padding: 0 calc(16 * var(--u));
  font-size: calc(17.5 * var(--u));
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--on-gold);
  background: linear-gradient(100deg, var(--gold-light) 0%, var(--gold-mid) 45%, var(--gold-deep) 100%);
  border: 0;
  border-radius: calc(8 * var(--u));
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 200, 0.55),
    inset 0 -1px 0 rgba(255, 220, 172, 0.7),
    0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: filter 200ms ease, transform 200ms ease, opacity 200ms ease;
}
.go svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); transition: transform 200ms ease; }
.go:hover:not(:disabled) { filter: brightness(1.06) saturate(1.05); }
.go:hover:not(:disabled) svg { transform: translateX(calc(3 * var(--u))); }
.go:active:not(:disabled) { transform: translateY(1px); }
.go:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.go:disabled { cursor: not-allowed; opacity: 0.8; }

/* ---- the foot of the card ---- */
.foot { padding-top: calc(32 * var(--u)); text-align: center; }
.foot-name {
  font-size: calc(10 * var(--u));
  line-height: calc(12 * var(--u));
  font-weight: 500;
  letter-spacing: 0.27em;
  text-indent: 0.27em;
  text-transform: uppercase;
  color: #a7a5aa;
}
.foot-line {
  margin-top: calc(8.5 * var(--u));
  font-size: calc(8.5 * var(--u));
  line-height: calc(10 * var(--u));
  font-weight: 600;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: #989aa1;
}
.foot-dot { margin: 0 0.42em; }       /* more room round the dots than a letter gap */
.foot-rule { width: calc(33 * var(--u)); height: calc(1.5 * var(--u)); margin: calc(17 * var(--u)) auto 0;
  background: #b9b8be; opacity: 0.85; }

/* ---- phones ---- */
@container stage (max-width: 600px) {
  .stage-blur { filter: blur(3px) brightness(0.55) saturate(1.1); transform: scale(1.04); }
}
@container stage (max-width: 420px) {
  .card { padding: 32px 20px 22px; }
  .heading { font-size: 32px; line-height: 40px; }
  .input { font-size: 16px; }        /* 16 pixels or more: a phone does not zoom when a field is tapped */
}

/* ---- the locked layout: a landscape screen big enough to read the drawing at its own scale ---- */
@container stage (min-width: 1000px) and (min-height: 620px) and (min-aspect-ratio: 5 / 4) {
  /* The box the photograph fills: wide enough to cover the screen, never so wide that less than --keep-height of its
     height shows; what does not fit is cut three parts from the top to seven from the bottom (the drawing has about
     three times more floor under the card than sky over the wordmark). */
  .stage-box {
    --w: min(max(100cqw, calc(100cqh * var(--photo-aspect))), calc(100cqh * var(--photo-aspect) / var(--keep-height)));
    --u: calc(var(--w) / var(--photo-w));
    display: block;
    inset: auto;
    overflow: visible;
    padding: 0;
    width: var(--w);
    height: calc(var(--w) / var(--photo-aspect));
    left: calc((100cqw - var(--w)) / 2);
    top: calc((100cqh - var(--w) / var(--photo-aspect)) * 0.3);
  }
  .stage-photo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
  .stage-blur { object-position: 50% 50%; filter: blur(28px) brightness(0.5); transform: scale(1.12); }
  /* exactly over the drawn card */
  .card {
    position: absolute;
    left: var(--card-x);
    top: var(--card-y);
    width: var(--card-w);
    height: var(--card-h);
    max-width: none;
    padding: calc(51 * var(--u)) calc(54 * var(--u)) calc(27 * var(--u));
  }
  /* the form takes the room above the foot and sits in its middle; "safe" keeps the top reachable if it ever grows */
  .card-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    justify-content: safe center;
    scrollbar-width: none;
    margin: 0 calc(-8 * var(--u));
    padding: 0 calc(8 * var(--u));     /* room for a focus ring the scrolling box would clip */
  }
}
/* a very wide screen: the photograph stops growing and its two ends fade into the blurred one behind */
@container stage (min-width: 1000px) and (min-height: 620px) and (min-aspect-ratio: 1819 / 1000) {
  .stage-photo {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
}

/* ---- the "Lights on" intro (signin.js, makeIntro; John 2026-11-01: "LOVE IT", Take B) ----
   After a sign-in the room marks for it, the film plays over this page, then the room opens. It is 16:10: it covers a
   landscape window (at 1440x900 it is the window exactly, so its last frame, the office panel, lands where the room
   draws it), and a portrait window shows it whole on the room's own background, so its title is never cut off. Nothing
   above this section changes: the overlay sits outside the stage and appears only after a sign-in. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  background: #0d0f12;                 /* the room's page, which the film's last frame is drawn on */
  color: #f6f6f8;
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  opacity: 0;
  transition: opacity 320ms ease-out;  /* the sign-in dims away, then the lights come on */
}
.intro.is-on { opacity: 1; }
.intro-film, .intro-end {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
}
/* the still waits under the film, unseen (it is the end frame, so it must not show through before the first frame) */
.intro-end { visibility: hidden; }
.intro.is-still .intro-end, .intro.is-skipping .intro-end { visibility: visible; }
.intro.is-still .intro-film { visibility: hidden; }          /* the end: the same picture, held while the room opens */
.intro-film { transition: opacity 300ms ease-out; }
.intro.is-skipping .intro-film { opacity: 0; }               /* a skip: the film dissolves into the still */
@media (max-aspect-ratio: 1 / 1) {
  .intro-film, .intro-end { object-fit: contain; }
}

/* Skip: small, in the corner, the card's glass and rim, the gold focus ring of the sign-in. It is focused when the film
   starts, so Enter or Space presses it (as does any other key), and it fades out for the last second so the handover
   frame is the film's own. */
.intro-skip {
  position: absolute;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  margin: 0;
  padding: 0 13px 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #f6f6f8;
  background: rgba(10, 11, 18, 0.52);
  border: 1px solid rgba(190, 200, 232, 0.36);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(205, 214, 242, 0.08), 0 8px 24px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0.88;
  transition: opacity 200ms ease, background-color 200ms ease, border-color 200ms ease;
}
.intro-skip svg { width: 14px; height: 14px; }
.intro-skip:hover { opacity: 1; background: rgba(18, 20, 31, 0.74); border-color: rgba(220, 226, 246, 0.62); }
.intro-skip:focus-visible { opacity: 1; outline: 2px solid #f6c08b; outline-offset: 3px; }
.intro.is-closing .intro-skip { opacity: 0; pointer-events: none; transition-duration: 400ms; }
@media (max-width: 420px) { .intro-skip { height: 40px; } }      /* a bigger target for a thumb */