/* Callaboo sign-in and setup pages (index, codes, proof, consent, guide), in the friend's design like the overview:
   warm off-white page, deep navy text and buttons, light cards with soft borders, Inter, the ghost logo and the gate
   illustration. Accents only as the design has them: the yellow underline on text links and on the current stop,
   small green check marks and the soft red pill colours. The tokens are the overview's (overview.css). The font is
   served from this origin so the page policy stays default-src 'self'. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/inter.woff2") format("woff2"); }

:root {
  --page: #f6f4ee;
  --card: #ffffff;
  --navy: #1b1f3b;
  --navy-2: #2b3157;
  --muted: #5d6175;
  --soft: #666a7b;   /* 4.9:1 on the page, 5.4:1 on white, 4.6:1 on the tile */
  --border: #e7e3d8;
  --tile: #f1eee6;
  --line-yellow: #f2cf3d;
  --check: #3d8b55;
  --red-bg: #fde7e4;
  --red-ink: #a8291c;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--navy); font-family: var(--font); font-size: 1.0625rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
p + p { margin-top: .75rem; }
button, input, select, textarea { font: inherit; color: inherit; }
button, summary, select { cursor: pointer; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 6px; }
a { color: var(--navy); text-decoration-color: var(--line-yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* One column, the width of a phone, the same on a wide screen */
.shell { max-width: 30rem; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-wrap: anywhere; }

/* Header: the ghost and the word mark, then the address with a padlock */
.head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.125rem .375rem; }
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.375rem; letter-spacing: -.035em; }
.logo { width: 1.5rem; height: auto; flex: none; }
.logout { min-height: 3rem; padding: 0 .25rem; border: 0; background: none; color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-yellow); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.where { display: flex; align-items: center; gap: .3rem; padding: 0 1.125rem .25rem; font-size: .9375rem; color: var(--muted); font-weight: 500; }
.lock { width: 1rem; height: 1rem; flex: none; }
.context { padding: 0 1.125rem; font-size: .9375rem; color: var(--muted); }

/* The four stops. The page sets step-N on the list: done stops are navy with a check, the current one has the yellow line. */
.path { list-style: none; margin: .75rem 1.125rem 0; padding: 0; display: flex; gap: .375rem; }
.path li { flex: 1; font-size: .875rem; font-weight: 700; line-height: 1.25; color: var(--soft); }
.path li::before { content: ""; display: block; height: 4px; border-radius: 4px; background: var(--border); margin-bottom: .4rem; }
.path a { color: inherit; text-decoration: none; }
.path a[href] { display: block; min-height: 3rem; text-decoration: underline; text-decoration-color: var(--line-yellow); }
.step-1 li:nth-child(-n+1), .step-2 li:nth-child(-n+2), .step-3 li:nth-child(-n+3), .step-4 li { color: var(--navy); }
.step-1 li:nth-child(-n+1)::before, .step-2 li:nth-child(-n+2)::before, .step-3 li:nth-child(-n+3)::before, .step-4 li::before { background: var(--navy); }
.step-1 li:nth-child(-n+1) span::before, .step-2 li:nth-child(-n+2) span::before, .step-3 li:nth-child(-n+3) span::before, .step-4 li span::before { content: "\2713  "; content: "\2713  " / ""; color: var(--check); }
.step-0 li:nth-child(1), .step-1 li:nth-child(2), .step-2 li:nth-child(3), .step-3 li:nth-child(4) { color: var(--navy); }
.step-0 li:nth-child(1)::before, .step-1 li:nth-child(2)::before, .step-2 li:nth-child(3)::before, .step-3 li:nth-child(4)::before { background: var(--line-yellow); }

main { flex: 1; padding: 1.25rem 1.125rem 1.5rem; }
main:focus { outline: none; }

/* Type: Inter, heavy and tight for headings */
h1 { font-weight: 800; font-size: 1.75rem; line-height: 1.15; letter-spacing: -.035em; margin: .25rem 0 .875rem; overflow-wrap: break-word; hyphens: auto; }
h2 { font-weight: 800; font-size: 1.25rem; line-height: 1.3; letter-spacing: -.02em; margin: 1.75rem 0 .625rem; }
h3 { font-size: 1.125rem; }
.eyebrow { font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .25rem; }
.hint { color: var(--muted); margin-top: .5rem; font-size: 1rem; }
.status { color: var(--navy); font-size: 1rem; font-weight: 600; min-height: 1.5rem; margin-top: .75rem; }

/* The gate illustration and Boo beside an instruction */
.art { margin: 0 0 1.25rem; background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.art img { display: block; width: 100%; height: auto; }
.boo-line { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.125rem; padding: .625rem .875rem; background: var(--card); border: 1px solid var(--border); border-radius: 18px; }
.boo { width: 2.25rem; height: auto; flex: none; }
.boo-line p { font-size: 1rem; line-height: 1.4; color: var(--muted); margin: 0; }

/* Forms */
label { display: block; font-weight: 700; margin: 1rem 0 .375rem; }
input, select, textarea { width: 100%; min-height: 3.25rem; border: 1.5px solid #cfcabd; border-radius: 12px; background: #fff; color: var(--navy); padding: .7rem .8rem; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--navy); outline-offset: 1px; }
input[inputmode="numeric"] { font-size: 1.75rem; letter-spacing: .4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
textarea { resize: vertical; min-height: 7rem; line-height: 1.4; }
input::placeholder { color: #767a8a; }
label.check { display: flex; align-items: center; gap: .75rem; min-height: 3rem; font-weight: 500; margin: 1rem 0 .25rem; }
label.check input { width: 1.5rem; min-height: 1.5rem; height: 1.5rem; accent-color: var(--navy); }
.error { color: var(--red-ink); background: var(--red-bg); border-radius: 10px; font-weight: 600; font-size: 1rem; padding: .625rem .75rem; margin-top: .75rem; }
.error:empty { padding: 0; margin: 0; min-height: 0; }

/* Buttons: dark navy primary, light secondary, every target at least 48 px */
button, a.button { min-height: 3.25rem; border: 1.5px solid var(--border); border-radius: 12px; padding: .75rem 1rem; font-weight: 700; line-height: 1.3; background: var(--card); color: var(--navy); }
button:hover, a.button:hover { background: #faf8f3; }
button:active, a.button:active { transform: translateY(1px); }
button:disabled, button.locked, button[aria-disabled="true"] { opacity: .5; cursor: default; }
a.button { display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; margin-top: .75rem; }
button.primary, a.button.primary { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3.5rem; margin-top: 1.25rem; background: var(--navy); border-color: var(--navy); color: #fff; }
button.primary:hover, a.button.primary:hover { background: var(--navy-2); }
button.secondary, a.button.secondary { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: .75rem; background: var(--tile); border-color: var(--tile); color: var(--navy); }
button.secondary:hover, a.button.secondary:hover { background: #e9e5db; }
button.link { display: block; width: 100%; min-height: 3rem; margin-top: .5rem; border: 0; background: transparent; color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-yellow); text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (prefers-reduced-motion: no-preference) { main { animation: arrive .16s ease-out; } @keyframes arrive { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: none; } } }

/* Choices: operators and the Ja and Nej pair */
#operator-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; margin-top: 1rem; }
button.choice { font-size: 1.0625rem; min-height: 3.5rem; }
.yesno { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.5rem; }
.yesno button { min-height: 4rem; font-size: 1.25rem; }
.yesno .yes { background: var(--navy); border-color: var(--navy); color: #fff; }
.question { font-size: 1.25rem; line-height: 1.45; }

/* Notes, notices, results */
.note { background: var(--tile); border-radius: 12px; padding: .75rem 1rem; margin: 1.25rem 0; }
.notice { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: .875rem 1rem; margin: .5rem 1.125rem 0; }
main .notice { margin: 0 0 1rem; }
.success { display: flex; align-items: center; gap: .75rem; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 1rem 1.125rem; margin: 0 0 1.25rem; }
.success .tick { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%; background: var(--tile); color: var(--check); font-weight: 800; font-size: 1.25rem; }
.success strong { font-size: 1.125rem; }

/* The test instruction, the countdown, the code */
.test-action { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 1.125rem; margin: 1rem 0; }
.test-action.decline::before { content: "\2312"; content: "\2312" / ""; display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .75rem; border-radius: 50%; background: var(--red-bg); color: var(--red-ink); font-size: 1.5rem; font-weight: 700; }
.test-action.noanswer::before { content: "\261D"; content: "\261D" / ""; display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .75rem; border-radius: 50%; background: var(--tile); font-size: 1.5rem; }
.big { font-weight: 700; font-size: 1.375rem; line-height: 1.3; letter-spacing: -.015em; margin: 0; }
.test-action h1 { margin: 0; font-size: 1.375rem; }
.countdown { font-weight: 800; font-size: 2.75rem; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--navy); margin: 1rem 0 0; }
.countdown:empty { margin: 0; }
.countdown:not(:empty)::after { content: " sekunder tills vi ringer"; /* inside an aria-hidden element, announced by the status line */ font-weight: 600; font-size: 1rem; letter-spacing: 0; color: var(--muted); }
.codecard { background: var(--card); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; margin: 1.25rem 0 0; }
.codecard > p:first-child { background: var(--tile); padding: .625rem 1rem; font-weight: 600; font-size: 1rem; margin: 0; }
.codebox { font-weight: 700; font-size: 1.5rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; text-align: center; padding: 1.125rem .75rem; margin: 0; overflow-wrap: anywhere; user-select: all; }
.codecard button, .codecard a.button { display: flex; align-items: center; justify-content: center; width: 100%; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: var(--card); color: var(--navy); margin: 0; text-decoration: underline; text-decoration-color: var(--line-yellow); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.codecard .hint { padding: 0 1rem .8rem; margin: 0; }
.codecard .hint:empty { display: none; }
.offcode { margin: 1rem 0; }
#guide-off { margin-top: .75rem; }
.stepcircles { display: flex; gap: .5rem; margin: .75rem 0 1rem; padding: 0; list-style: none; }
.stepcircles li { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 1.5px solid var(--border); border-radius: 50%; background: var(--card); font-size: 1rem; font-weight: 700; color: var(--soft); }
.stepcircles .current { background: var(--navy); border-color: var(--navy); color: #fff; }
.stepcircles .complete { background: var(--tile); border-color: var(--tile); color: var(--navy); }
.instructions { padding-left: 1.5rem; margin: 1.25rem 0 0; }
.instructions li { padding-left: .25rem; margin: .625rem 0; }
.instructions li::marker { font-weight: 800; }

/* Footer: who we are and what we never ask for, quiet but always there */
.foot { padding: 1.25rem 1.125rem 2rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .9375rem; line-height: 1.45; }
.foot p + p { margin-top: .5rem; }
.foot .never { display: flex; align-items: center; gap: .4rem; color: var(--navy); font-weight: 700; }
.foot .never::before { content: "\2713"; content: "\2713" / ""; color: var(--check); font-weight: 700; }

@media (max-width: 22rem) {
  #operator-buttons { grid-template-columns: 1fr; }
}

.boo-contact { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 1rem 1.125rem; margin: 1.25rem 0 0; }
.boo-contact h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .5rem; }
.boo-number { font-weight: 700; font-size: 1.375rem; font-variant-numeric: tabular-nums; margin-top: .75rem; user-select: all; }
.multiline { white-space: pre-line; }
#number-status:empty { display: none; }

a.link { display: block; width: 100%; min-height: 3rem; margin-top: .5rem; padding-top: .8rem; box-sizing: border-box; text-align: center; color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-yellow); text-decoration-thickness: 2px; text-underline-offset: 5px; }