/* Designed for a phone first. This guide is read on the employee's OLD phone,
   standing next to someone from IT, while they set up a new one — a desktop is
   the exception, not the target. So: fluid widths, tap targets no smaller than
   44px, inputs at 16px or larger so iOS does not zoom the page when one is
   focused, dvh rather than vh so browser chrome does not cut the footer off, and
   safe-area insets so the home indicator does not sit on top of a button.

   (The builder is desktop-only and styled separately in admin.css.)

   One palette, deliberately — no prefers-color-scheme switch.
   This page is shown to a new starter on their old phone with someone from IT
   beside them, and demonstrated to customers on whatever laptop is to hand. A
   design that changed with the viewer's OS setting meant nobody could say what
   it looked like without asking whose screen it was on.

   BRAND_COLOR sets the page; the card sits on black so it reads as a thing to
   fill in rather than part of the background. */
:root {
  --bg: #105840;
  --card: #121417;
  --raised: #171a1f;
  --ink: #eceef2;
  --muted: #9aa2ae;
  --line: #2c313a;
  --accent: #5abf95;
  --error: #f1948d;
  --ok: #6ec89a;
  --radius: 14px;
}

* { box-sizing: border-box; }

/* The hidden attribute is implemented by the UA stylesheet as display: none, so
   ANY author rule that sets display beats it. Several elements here are both
   toggled with .hidden and given display: flex, which silently made them
   permanently visible. This is the standard baseline for that trap. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 28px 16px calc(40px + env(safe-area-inset-bottom));
}

/* ── Masthead ─────────────────────────────────────────────────────────────── */

.masthead { margin-bottom: 26px; }
.brand { font-size: 20px; font-weight: 700; letter-spacing: 0.01em; color: #fff; }
.tagline { margin: 6px 0 0; color: rgba(255, 255, 255, 0.72); font-size: 14.5px; }

/* ── Home view ────────────────────────────────────────────────────────────── */
/* Ordered for a phone: what to do next, then where you are, then reference. The
   work email has to be here — a new starter does not know it — but it is not the
   task, so it does not get the top of the screen. */

.loading { color: rgba(255, 255, 255, 0.75); text-align: center; padding: 32px 0; }

/* ── Identity card ── */

.identity {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 11px;
  padding: 12px 14px 13px;
  margin-bottom: 12px;
}

.identity-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
}
.identity-label {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}
.identity .ghost {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 11px;
  font-size: 13px;
}

/* The whole address, wrapping if it must. Truncating the one string somebody
   came here to read — and will be typing into other screens — makes showing it
   pointless, and these addresses are long: 37 characters is ordinary. */
.identity-email {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  line-height: 1.35;
  color: #fff;
  /* One tap selects the lot, which on a phone is the difference between typing
     it correctly and not. */
  user-select: all;
  /* break-word rather than anywhere, so the <wbr> hints the script inserts at
     the @ and the dots are preferred over breaking mid-word. anywhere would
     ignore them and split wherever the line happened to run out. */
  overflow-wrap: break-word;
  word-break: normal;
}

.identity-who {
  margin: 7px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* ── Resume card ── */

.resume {
  background: var(--card);
  border: 1px solid #2c6b52;
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.resume-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.resume-title { font-size: 19px; margin: 6px 0 2px; letter-spacing: -0.2px; }
.resume-where { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); }
.resume-count { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }
.resume button { margin-top: 16px; }
.resume.is-complete { border-color: var(--line); }
.resume.is-complete .resume-label { color: var(--ok); }

.bar { height: 5px; border-radius: 3px; background: var(--raised); overflow: hidden; }
.bar-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--accent);
  transition: width 0.3s ease;
}

/* ── Chapters, collapsed ── */

.chapters { display: grid; gap: 8px; }

.chapter {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
}

.chapter-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 12px 14px;
  text-align: left;
  font: inherit;
  background: transparent;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
.chapter-head:hover { background: var(--raised); filter: none; }
.chapter-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.chapter-mark {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--raised);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.chapter.is-done .chapter-mark {
  background: #14503b;
  border-color: transparent;
  color: var(--ok);
}

.chapter-label { flex: 1; min-width: 0; }
.chapter-title {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.1px;
}
.chapter-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* Two lines, then ellipsis — rather than one line cut mid-word, which is what
     a phone did to every summary and reads as a rendering fault. Still bounded,
     so three chapters cannot push the list off the screen. */
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--muted);
}
.chapter.is-done .chapter-title { color: var(--muted); }

.chapter-count {
  flex: none;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.chevron {
  flex: none;
  color: #4d5661;
  font-size: 17px;
  transition: transform 0.2s ease;
}
.chapter.is-open .chevron { transform: rotate(90deg); }

.chapter-body { padding: 0 14px 14px; }
.chapter-body .chapter-start { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .chevron, .bar-fill { transition: none; }
}

.steplist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.steplink {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  /* 44px minimum. At 10px padding these were 40px tall and genuinely fiddly to
     hit on a phone, which matters because this list is how somebody returns to a
     step they got wrong. */
  min-height: 44px;
  padding: 11px 12px;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}
.steplink::before {
  content: "○";
  color: var(--muted);
  font-size: 13px;
}
.steplink.is-done::before { content: "✓"; color: var(--ok); }
.steplink.is-done { color: var(--muted); }
.steplink:hover { background: var(--raised); }
.steplink:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.badge {
  margin-left: auto;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 999px;
  background: #14503b;
  color: var(--ok);
}

/* ── Buttons and inputs ───────────────────────────────────────────────────── */

button {
  font: inherit;
  font-weight: 600;
  padding: 13px 16px;
  min-height: 48px;
  width: 100%;
  /* Stops the grey flash on tap, which reads as a mis-tap on iOS. */
  -webkit-tap-highlight-color: transparent;
  border: 1px solid var(--accent);
  border-radius: 9px;
  background: var(--accent);
  color: #08211a;
  cursor: pointer;
}
/* A button ending a form needs air above it; a second button below the first
   needs less than the form needs from its last field. Without these, the input,
   "Log ind" and "Start forfra" stack edge to edge and read as one control. */
form > button,
.tap-stage > button:not(.ghost) {
  margin-top: 20px;
}
form > button + button,
.tap-stage > button + button {
  margin-top: 10px;
}

button:hover:not(:disabled) { filter: brightness(1.06); }
button:focus-visible { outline: 3px solid rgba(90, 191, 149, 0.5); outline-offset: 2px; }
button:disabled { opacity: 0.6; cursor: progress; }

button.secondary {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
  font-weight: 500;
}
button.secondary:hover:not(:disabled) { color: var(--ink); filter: none; }

button.ghost {
  width: auto;
  padding: 7px 13px;
  font-size: 14px;
  background: transparent;
  border-color: var(--line);
  color: var(--accent);
}

button.icon {
  /* The close button. 34px was a desktop-mouse size. */
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 8px;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  font-size: 15px;
}
button.icon:hover { background: var(--raised); color: var(--ink); filter: none; }

label { display: block; font-size: 14px; font-weight: 550; margin: 16px 0 6px; }

input {
  width: 100%;
  padding: 13px 13px;
  min-height: 48px;
  /* Must not go below 16px: iOS Safari zooms the whole page when a smaller input
     is focused, and the page never zooms back out on its own. */
  font: inherit;
  font-size: 16px;
  border: 1px solid #3a404b;
  border-radius: 9px;
  background: var(--raised);
  color: var(--ink);
}
input:focus-visible {
  outline: 3px solid rgba(90, 191, 149, 0.35);
  outline-offset: 1px;
  border-color: var(--accent);
}
#tap-code, #tap-last4 { letter-spacing: 0.4em; font-variant-numeric: tabular-nums; }

/* ── The guide dialog ─────────────────────────────────────────────────────── */

.guide {
  width: min(560px, calc(100vw - 24px));
  max-height: min(88dvh, 780px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* A dialog centred in a small screen wastes the screen and puts the footer
   buttons somewhere the thumb has to reach for. On a phone it becomes the page:
   pinned to the bottom, full width, rounded only at the top. */
@media (max-width: 560px) {
  .guide {
    width: 100vw;
    max-width: 100vw;
    max-height: 92dvh;
    margin: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
  }
}
.guide::backdrop { background: rgba(4, 20, 14, 0.72); backdrop-filter: blur(3px); }
.guide:not([open]) { display: none; }

.guide-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 12px 20px;
  border-bottom: 1px solid var(--line);
}
.guide-where { flex: 1; min-width: 0; }
.guide-where span { display: block; }
.guide-where #chapter-name {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.guide-count { font-size: 13px; color: var(--muted); }

.progress { height: 3px; background: var(--line); }
.progress-bar { height: 100%; width: 0; background: var(--accent); transition: width 0.25s ease; }

.guide-body { padding: 22px 20px 24px; overflow-y: auto; flex: 1; }
.guide-body:focus-visible { outline: none; }
.guide-body h1 { font-size: 21px; margin: 0 0 14px; letter-spacing: -0.3px; }

.prose p { margin: 0 0 12px; color: #c9d0d9; font-size: 15.5px; }
.prose p:last-child { margin-bottom: 0; }

.step-image,
.step-video {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--line);
  margin: 0 0 18px;
  display: block;
  background: var(--raised);
}
.step-video { aspect-ratio: 16 / 9; height: auto; }

.guide-foot {
  display: flex;
  gap: 10px;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  /* The buttons stay put while the body scrolls: on a long step the thumb should
     not have to scroll to the end to find "Næste". */
  flex: none;
  background: var(--card);
}
.guide-foot button { width: auto; flex: 1; }
.guide-foot .secondary { flex: 0 0 auto; min-width: 108px; }

/* ── The credential step ──────────────────────────────────────────────────── */

.tap { margin-top: 4px; }
.tap .lede { margin: 0 0 4px; color: #c9d0d9; font-size: 15.5px; }
.hint { font-size: 13.5px; color: var(--muted); margin: 14px 0 0; }

.warn {
  font-size: 13.5px;
  margin: 12px 0 0;
  padding: 11px 13px;
  border-radius: 9px;
  background: #2b2418;
  border: 1px solid #4a3c22;
  color: #e8c98a;
}

.error {
  margin: 14px 0 0;
  padding: 11px 13px;
  border-radius: 9px;
  background: #2a1a19;
  border: 1px solid #4d2b28;
  color: var(--error);
  font-size: 14.5px;
}

.passbox {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Wraps rather than squeezing: an eight-digit pass at 25px plus a button does
     not fit across a 390px screen, and a squeezed passcode is one that gets
     mistyped. */
  flex-wrap: wrap;
  padding: 16px;
  border-radius: 10px;
  background: var(--raised);
  border: 1px solid var(--line);
}
.pass {
  flex: 1 1 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(22px, 7vw, 27px);
  letter-spacing: 0.14em;
  color: #fff;
  /* The one string on this page worth being able to select cleanly — and on a
     phone, tapping once to select all of it is the difference between typing it
     correctly and not. Entra generates a mixed-case alphanumeric passcode with
     symbols (verified against a real tenant, e.g. "kP7mQ2x#"), so retyping it by
     hand on a phone keyboard is genuinely error-prone. */
  user-select: all;
  overflow-wrap: anywhere;
}
.passbox .ghost { flex: 0 0 auto; min-height: 44px; }
.pass.masked { color: var(--muted); letter-spacing: 0.22em; user-select: none; }

.check {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #14503b;
  color: var(--ok);
  font-size: 23px;
  margin-bottom: 14px;
}

.watching {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
.spinner {
  flex: none;
  width: 13px;
  height: 13px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Someone waiting on a credential should not be handed a strobing element. */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 3s; }
  .progress-bar { transition: none; }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.support {
  margin: 30px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
}
.support a { color: #fff; }

@media (max-width: 480px) {
  .page { padding: 20px 12px calc(32px + env(safe-area-inset-bottom)); }
  .masthead { margin-bottom: 18px; }
  .chapter-head { padding: 11px 12px; gap: 10px; }
  .chapter-title { font-size: 15px; }
  .chapter-body { padding: 0 12px 12px; }
  .resume { padding: 16px; }
  .resume-title { font-size: 17.5px; }
  .guide-body { padding: 18px 16px 22px; }
  .guide-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
  .guide-body h1 { font-size: 19.5px; }
  .identity { padding: 11px 12px 12px; }
  .identity-email { font-size: 14px; }

  /* Tilbage/Næste side by side get cramped; Næste is the common action, so it
     keeps the width and Tilbage shrinks to what it needs. */
  .guide-foot .secondary { min-width: 92px; }
}

/* ── Sign-in gate ─────────────────────────────────────────────────────────── */

.gate-title { font-size: 18px; margin: 0 0 18px; }
#gate .chapter { padding: 22px 20px 24px; border-radius: var(--radius); }
#gate label:first-of-type { margin-top: 0; }
#signin-last4, #signin-otp { letter-spacing: 0.4em; font-variant-numeric: tabular-nums; }

button.linkish {
  flex: 0 0 auto;
  width: auto;
  padding: 4px 2px;
  min-height: 36px;
  background: none;
  border: 0;
  color: var(--accent);
  font-weight: 500;
  font-size: 13px;
  text-decoration: underline;
}
button.linkish:hover { filter: none; color: #fff; }

/* Values that came from the reader's own account, marked so it is obvious which
   words are theirs and which are the guide's. It matters most on the email
   address: that is the string they will be typing into other screens, and it
   should be findable at a glance rather than read out of a sentence. */
.var {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 1px;
  border-radius: 5px;
  background: #16362b;
  border: 1px solid #2c6b52;
  color: #cbead9;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.94em;
  /* Long addresses must be selectable in one go, and must not push the dialog
     sideways on a narrow phone. */
  user-select: all;
  overflow-wrap: anywhere;
}

/* In a heading it is a name, not a value to copy — same family, less box. */
h1 .var {
  background: transparent;
  border-color: transparent;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--accent);
}

/* Shown only when SMS_PROVIDER is one that sends nothing — see the comment on
   /api/dev/last-code. Styled to look like scaffolding rather than part of the
   product, so nobody mistakes it for a feature or misses that it is on. */
.devbox {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 9px;
  background: #2b2418;
  border: 1px dashed #6b5527;
  color: #e8c98a;
  font-size: 13.5px;
}
.devbox strong {
  display: block;
  margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 26px;
  letter-spacing: 0.22em;
  color: #ffd98a;
  user-select: all;
}
.devbox .devbox-note { display: block; margin-top: 6px; opacity: 0.8; font-size: 12.5px; }

/* ── Practical information ────────────────────────────────────────────────── */
/* Not a step and not styled like one: no number, no progress, nothing to tick
   off. Amber rather than green so it reads as "note this" rather than "do this",
   and above the guide because it is the part that is true only today. */

.notices { display: grid; gap: 10px; margin-bottom: 12px; }

.notice {
  background: #221d14;
  border: 1px solid #4a3c22;
  border-left: 3px solid #c99a3e;
  border-radius: 11px;
  padding: 14px 16px;
}
.notice h2 {
  margin: 0 0 6px;
  font-size: 15.5px;
  letter-spacing: -0.1px;
  color: #f0dcae;
}
.notice .prose p {
  margin: 0 0 8px;
  font-size: 14.5px;
  color: #ddd0b4;
}
.notice .prose p:last-child { margin-bottom: 0; }

/* A variable inside a notice keeps the marking, but tinted to its surroundings
   rather than carrying the guide's green into an amber card. */
.notice .var {
  background: #33291a;
  border-color: #6b5527;
  color: #f2dfb4;
}

.notice-image {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #4a3c22;
  margin: 4px 0 10px;
  display: block;
}

/* ── Notice colours ──────────────────────────────────────────────────────── */
/* Roles, not decoration. Amber for everything trains people to ignore the
   colour, which is the one job a colour has. */

.notice-amber { background: #221d14; border-color: #4a3c22; border-left-color: #c99a3e; }
.notice-amber h2 { color: #f0dcae; }
.notice-amber .prose p { color: #ddd0b4; }
.notice-amber .var { background: #33291a; border-color: #6b5527; color: #f2dfb4; }

.notice-green { background: #12251c; border-color: #235c46; border-left-color: #5abf95; }
.notice-green h2 { color: #bfe8d4; }
.notice-green .prose p { color: #c3ded0; }
.notice-green .var { background: #16362b; border-color: #2c6b52; color: #cbead9; }

.notice-blue { background: #141d28; border-color: #27455f; border-left-color: #5a9fd4; }
.notice-blue h2 { color: #bcd9ef; }
.notice-blue .prose p { color: #c0d2e2; }
.notice-blue .var { background: #1a2937; border-color: #33556f; color: #cfe3f2; }

.notice-red { background: #241614; border-color: #5c2f2a; border-left-color: #e8756c; }
.notice-red h2 { color: #f3c8c3; }
.notice-red .prose p { color: #e3c4c0; }
.notice-red .var { background: #33201d; border-color: #6b3a34; color: #f5d5d0; }

.notice-grey { background: #191c21; border-color: #2f353d; border-left-color: #7d8592; }
.notice-grey h2 { color: #d5dae1; }
.notice-grey .prose p { color: #b9c0c9; }
.notice-grey .var { background: #232830; border-color: #3d444e; color: #dde2e8; }

/* ── Reference chapters ──────────────────────────────────────────────────── */
/* Browsable, not completable: no number, no progress, no ticks. Otherwise "how
   the alarm works" becomes an unfinished task, and the guide never ends. */

.chapter.is-reference .chapter-mark {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
  font-style: italic;
  font-family: Georgia, serif;
}
.chapter.is-reference .chapter-count { font-variant-numeric: normal; }

/* No circle-or-tick bullet: there is nothing to complete. */
.steplink.is-plain::before { content: "–"; color: var(--muted); }
.steplink.is-plain { color: var(--ink); }

/* Media order inside a step is set per step, so the body has to be a flex column
   for `order` to mean anything. */
.guide-body { display: flex; flex-direction: column; }
.guide-body h1 { order: -1; }

/* The tenant's own logo, when it has one. Bounded in both directions: these are
   uploaded for a Microsoft sign-in page and arrive at whatever size somebody
   happened to export. */
.brand-logo {
  display: block;
  max-width: min(220px, 60vw);
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

/* Country code as an affix, not as text in the value. Inside the input it got
   re-parsed on every keystroke; see applyPhoneHint in guide.js. */
.tel-field {
  display: flex;
  align-items: stretch;
  gap: 0;
}
.tel-prefix {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 12px;
  min-height: 48px;
  border: 1px solid #3a404b;
  border-right: 0;
  border-radius: 9px 0 0 9px;
  background: #14171c;
  color: var(--muted);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.tel-field input {
  flex: 1;
  min-width: 0;
  border-radius: 0 9px 9px 0;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
}
.tel-prefix[hidden] + input { border-radius: 9px; }

/* The running version. Small, always present — "did my change deploy" should be
   answerable by looking at the page, not by comparing file sizes. */
.version {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* ── Background image ─────────────────────────────────────────────────────── */
/* Set from settings. The colour stays underneath: it is what shows while the
   image loads, and on a connection where it never arrives — which on mobile data
   is an outcome, not a hypothetical.

   Which image is used is a media query rather than a measurement in JavaScript,
   so rotating a phone picks the right one with nothing running again. */

:root {
  --bg-image-mobile: none;
  --bg-image-desktop: none;
  --bg-overlay: 0;
}

body {
  background-image: var(--bg-image-mobile);
  background-size: cover;
  background-position: center center;
  /* Fixed so the image does not crawl as the page scrolls. Deliberately not on
     iOS, where fixed attachment is unreliable and produces visible jumping. */
  background-attachment: scroll;
  background-repeat: no-repeat;
}

@media (min-width: 700px) {
  body {
    background-image: var(--bg-image-desktop);
    background-attachment: fixed;
  }
}

/* The scrim. Every text colour here was chosen against a dark background, so a
   bright photograph without this makes the masthead unreadable. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, var(--bg-overlay));
  pointer-events: none;
  z-index: 0;
}

/* Content above the scrim. */
.page { position: relative; z-index: 1; }
.guide { z-index: 2; }