/* The sign-in page (login.html). The card copies the player's CC menu (style.css: .cc-menu):
   75 % black, 12 px corners, the same shadow, rows and dividers. */
:root {
  --bg: #141414; --text: #e5e5e5; --muted: #9a9a9a; --red: #e50914;
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* Dark grey like the home page, so a refresh blinks the same colour there and here. */
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); }
body { font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; overflow: hidden; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Hidden until the picture is ready (at most 1 s, login.js), so the card never shows
   over an empty background first. */
html.loading body { visibility: hidden; }

/* The blue-hour poster, and the loop over it. The poster is the loop's first frame, so
   the video takes over with no visible change. */
.backdrop { position: fixed; inset: 0; }
.backdrop img, .backdrop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Centred when it fits; zoomed in far (or a small window), the card scrolls instead of
   being cut off. */
.center { position: fixed; inset: 0; display: grid; overflow-y: auto; padding: 16px; }
.center > * { margin: auto; }

.card {
  width: min(320px, 100%); padding: 6px 0; border-radius: 12px; overflow: hidden;
  background: #141414bf; box-shadow: 0 4px 18px #0006;
}
/* The logo as the card's heading, like the CC menu's page title (.cc-back). */
.card h1 {
  margin: 0 0 4px; padding: 6px 14px 10px; border-bottom: 1px solid #ffffff26; text-align: center;
  color: var(--red); font-size: 30px; font-weight: 900; line-height: 1.3; letter-spacing: 1px;
}
.card label { display: block; padding: 6px 14px; color: var(--muted); font-size: 13px; }
.field { position: relative; display: block; margin-top: 5px; }
.card input {
  display: block; width: 100%; height: 36px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px;
  background: #ffffff1a; color: #fff; font-size: 14px; outline: none; /* a menu row's hover tint */
}
.card input:focus { border-color: #ffffff59; background: #ffffff24; }
/* A new password's outline while typing (login.js): red until it's long enough, then green. */
.card input.too-short, .card input.too-short:focus { border-color: #ff6b6b; }
.card input.long-enough, .card input.long-enough:focus { border-color: #46d369; }
.card input.wrong, .card input.wrong:focus { border-color: #ff6b6b; } /* a username that can't work */
.hint.bad { color: #ff6b6b; }
.card input[name=password] { padding-right: 44px; }
/* Show/Hide: an eye. Showing the password draws a slash across it (and cuts a gap in the
   eye under the slash, through the mask), hiding pulls the slash back. */
.reveal {
  position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 40px; height: 36px; padding: 0;
  border: 0; background: none; color: var(--muted); cursor: pointer; transition: color .15s;
}
.reveal:hover, .reveal:focus-visible { color: #fff; }
.reveal svg {
  width: 20px; height: 20px; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.reveal .slash, .reveal .gap { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .22s ease-out; }
.reveal .gap { stroke: #000; stroke-width: 4.6; } /* black in a mask: cut away */
.reveal.on .slash, .reveal.on .gap { stroke-dashoffset: 0; }
.reveal .pupil { transform-origin: 12px 12px; transition: transform .22s ease-out; }
.reveal.on .pupil { transform: scale(.75); }
.error { margin: 2px 14px 0; color: #ff6b6b; font-size: 13px; }

/* Invite and reset links (login.js): the same card, with a few more words. */
.intro { margin: 4px 14px 2px; color: #ddd; font-size: 14px; text-align: center; text-wrap: balance; } /* like the other cards' messages */
.intro small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.hint { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
.note { margin: 6px 14px 2px; padding: 8px 10px; border-radius: 8px; background: #46d3691f; color: #c4f2d0; font-size: 13px; }
.message { padding: 6px 14px 4px; text-align: center; }
.message h2 { margin: 6px 0; color: #fff; font-size: 18px; line-height: 1.3; text-wrap: balance; }
.message p { margin: 0; color: #ccc; font-size: 14px; }
.who { overflow-wrap: anywhere; }
a.go { line-height: 36px; text-align: center; text-decoration: none; }
/* A reset's name, there for password managers only: in the form, but not seen. */
.card .for-password-managers { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.go {
  display: block; width: calc(100% - 28px); height: 36px; margin: 10px 14px 8px; border: 0; border-radius: 8px;
  background: var(--red); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}
.go:hover { filter: brightness(1.12); }
.go:disabled { opacity: .6; cursor: default; filter: none; }
/* Optically centred: the closing period is width with almost no ink, so the words sat about
   1.9 px left of centre. .29em more on the left moves the line right by half the period. */
.foot {
  margin: 4px 0 0; padding: 8px 14px 4px calc(14px + .29em); border-top: 1px solid #ffffff26;
  color: var(--muted); font-size: 13px; text-align: center;
}

/* Phones: the poster only, and a "bigger screens" note in the same card. */
.phone .backdrop video { display: none; }
#phone .card { padding: 22px 18px 20px; text-align: center; }
.big-logo { color: var(--red); font-weight: 900; font-size: 34px; letter-spacing: 1px; line-height: 1.2; }
#phone h2 { margin: 14px 0 8px; color: #fff; font-size: 21px; line-height: 1.2; text-wrap: balance; }
#phone p { margin: 0; color: #ddd; font-size: 16px; }