/* The way in: /auth/* (sign in, sign up, password reset, two-factor).
 *
 * Drawn in qplan.co.uk's notice board, so the door into the app and the site
 * that sent you to it are one place (Ed, 2026-09-24). The tokens are that
 * site's (qplan-launch/src/app/globals.css): the night carries the brand
 * only; everything a reader must read sits on a paper notice in Tinos; one
 * action, in ink, underlined in the mark's cyan. Cyan is 1.74:1 on paper, so
 * it is never text there, and focus is ink on paper and cyan on the night.
 */

:root {
  --night: #0F1923;
  --night-line: #243444;
  --night-text: #EDF1F4;
  --night-text-2: #A9B6C2;
  --paper: #FBFBF7;
  --ink: #111416;
  --ink-2: #3F4549;
  --ink-3: #5A6166;
  --cyan: #22D3EE;
  --leader: 2px dotted var(--ink);
  --font-notice: "Tinos", "Times New Roman", Times, serif;
  --font-mark: "Plus Jakarta Sans", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 48px 16px;
  background: var(--night);
  color: var(--night-text);
  font-family: var(--font-notice);
  font-size: 1.125rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── The lock-up, on the night ── */
.auth-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
  color: var(--night-text);
  text-decoration: none;
}
.auth-mark__q { margin-left: -7px; }
.auth-mark__word {
  font-family: var(--font-mark);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.auth-mark .dot, .auth-mark__word .dot { color: var(--cyan); }
.auth-mark:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; }

/* ── The notice, on paper ── */
.auth-card {
  width: 100%;
  max-width: 480px;
  background: var(--paper);
  color: var(--ink);
  border: 6px solid var(--ink);
  border-radius: 0;
  padding: 32px 40px 40px;
  position: relative;
}

/* The blip (templates/auth/_blip.html): a cyan point running clockwise round
   the ink border with a trail behind it. The SVG covers the border box; a
   12px stroke centred on its edge leaves 6px, the border, visible. Every
   layer's dash ends at the same head and each is faint, so where they
   overlap, nearest the head, the trail is brightest: a smooth fade. */
.auth-blip {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  overflow: hidden;
  pointer-events: none;
}
.auth-blip__t {
  --l: 7;
  opacity: .11;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 12;
  stroke-dasharray: calc(var(--l) * 1px) calc((1000 - var(--l)) * 1px);
  animation: auth-blip 10.5s linear infinite;
}
.auth-blip__t:nth-child(1) { --l: 180; }
.auth-blip__t:nth-child(2) { --l: 140; }
.auth-blip__t:nth-child(3) { --l: 110; }
.auth-blip__t:nth-child(4) { --l: 85; }
.auth-blip__t:nth-child(5) { --l: 65; }
.auth-blip__t:nth-child(6) { --l: 48; }
.auth-blip__t:nth-child(7) { --l: 34; }
.auth-blip__t:nth-child(8) { --l: 22; }
.auth-blip__t:nth-child(9) { --l: 13; }
.auth-blip__t:nth-child(10) { --l: 7; opacity: 1; filter: drop-shadow(0 0 4px var(--cyan)); }
@keyframes auth-blip {
  from { stroke-dashoffset: calc(var(--l) * 1px); }
  to { stroke-dashoffset: calc((var(--l) - 1000) * 1px); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-blip { display: none; }
}

.auth-label {
  margin: 0 0 12px;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.auth-card h1 {
  font-family: var(--font-notice);
  font-size: 2.625rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.auth-card p.sub {
  color: var(--ink-2);
  font-size: 1.125rem;
  margin: 0 0 24px;
}
.auth-card strong { font-weight: 700; color: var(--ink); }

/* Errors are bold ink under a rule, the way the site states a refusal. */
.auth-alert {
  margin: 0 0 20px;
  padding: 10px 0 10px 14px;
  border-left: 4px solid var(--ink);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
}
.auth-alert.err { font-weight: 700; }
.auth-alert.info { font-style: italic; color: var(--ink-2); }

/* Keyed blanks: the label and the entry share one bottom edge, and the
   leader is the input's edge. */
.auth-field {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin: 0 0 12px;
}
.auth-card label {
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1.25;
  padding-bottom: 6px;
  font-size: 1.125rem;
  color: var(--ink);
}
.auth-card input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  background: transparent;
  border: 0;
  border-bottom: var(--leader);
  border-radius: 0;
  font: inherit;
  color: var(--ink);
  line-height: 1.25;
  padding: 16px 4px 6px;
}
.auth-card input:focus { outline: none; }
.auth-card input:focus-visible {
  border-bottom-style: solid;
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* The one action: ink, with the mark's cyan as its underline. */
.auth-card button.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 20px;
  padding: 12px 24px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-bottom: 4px solid var(--cyan);
  border-radius: 0;
  font-family: var(--font-notice);
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-bottom-width 120ms linear;
}
.auth-card button.primary:hover { border-bottom-width: 7px; }
.auth-card button.primary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.auth-card button.ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-bottom: 4px solid var(--cyan);
}

/* The Insert: the small print under a rule, in italic. */
.auth-switch, .auth-meta {
  border-top: 1px solid var(--ink);
  margin-top: 24px;
  padding-top: 8px;
  font-size: 1rem;
  color: var(--ink-2);
}
.auth-meta { font-size: 0.875rem; font-style: italic; color: var(--ink-3); }
.auth-meta + .auth-switch { border-top: 0; margin-top: 4px; padding-top: 0; }
.auth-card a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-card a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

::selection { background: var(--ink); color: var(--paper); }

@media (max-width: 640px) {
  body { gap: 24px; padding: 32px 16px; justify-content: flex-start; }
  .auth-card { border-width: 4px; padding: 24px 24px 32px; }
  .auth-blip { inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); }
  .auth-blip__t { stroke-width: 8; }
  .auth-card h1 { font-size: 2rem; }
  .auth-field { flex-wrap: wrap; gap: 0; }
  .auth-card input { flex-basis: 100%; padding-top: 4px; }
}