/* Login page of dev.dahlen.fr. Served by dahlen-admin, outside the site build: the values below
   mirror site/src/styles/tokens.css (red, ink, fonts), kept to the few this page needs. */
:root {
  --red: #ed1f24;
  --red-strong: #c8161b;
  --ink: #231f20;
  --muted: #5b626b;
  --line: #d5d9de;
  --bg: #f4f5f7;
  --card: #fff;
  --radius: 6px;
  --gap: 1rem;
  --font: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-title: 'Roboto Condensed', Roboto, system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg); color: var(--ink);
  font: 1rem/1.5 var(--font); padding: var(--gap); }
.login { width: 100%; max-width: 24rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: calc(var(--gap) * 2); }
.login__mark { margin: 0 0 var(--gap); font: 700 1.25rem/1 var(--font-title); letter-spacing: .08em; }
.login__tag { margin-left: .5rem; padding: .15rem .45rem; border-radius: var(--radius); background: var(--red); color: #fff;
  font-size: .75rem; vertical-align: middle; }
.login__form { display: grid; gap: .5rem; }
.login__form[hidden] { display: none; }
h1 { margin: 0; font: 700 1.5rem/1.2 var(--font-title); }
.muted { margin: 0 0 .5rem; color: var(--muted); font-size: .9rem; }
label { font-weight: 500; font-size: .9rem; }
input { width: 100%; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; }
#login-code { font-size: 1.4rem; letter-spacing: .3em; text-align: center; }
input:focus-visible, button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
button { margin-top: .5rem; padding: .7rem 1rem; border: 0; border-radius: var(--radius); background: var(--ink); color: #fff;
  font: 500 1rem var(--font); cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
button.quiet { margin-top: 0; background: transparent; color: var(--ink); text-decoration: underline; }
.error { margin: var(--gap) 0 0; padding: .6rem .75rem; border-left: 3px solid var(--red); background: #fdecec; color: var(--red-strong); }
.error[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }