/* EHR-4153 / EHR-4230 — the signup form's own stylesheet.
 *
 * Lifted out of skraning.html when /en/signup arrived (EHR-4230): two pages
 * with the same layout and two copies of 166 lines of CSS is a drift waiting
 * to happen, and a styling fix applied to one page only is invisible until
 * somebody opens the other one.
 *
 * Served by the `~* ^/landing/[^/]+\.(js|css|pdf)$` location in
 * apps/public/deploy/nginx.conf — the one added after the landing scripts
 * 404'd with an HTML body while every page around them returned 200.
 */
.landing-root *, .landing-root *::before, .landing-root *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { margin: 0; padding: 0; }
body { background: #f6f3ed; }

.landing-root {
  --landing-bg: #f6f3ed; --landing-bg-alt: #ece6d8; --landing-surface: #fbf8f0;
  --landing-ink: #1a2230; --landing-ink-soft: #3c4658; --landing-muted: #6e7588; --landing-rule: #ddd5c2;
  --landing-accent: #1f3a5e; --landing-accent-soft: #3d5a82; --landing-accent-warm: #b85a3a;
  --landing-shadow: 0 1px 0 rgba(13, 27, 46, 0.04), 0 18px 50px -22px rgba(13, 27, 46, 0.16);
  --landing-radius-card: 18px; --landing-radius-pill: 999px;
  --landing-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --landing-body: "Geist", "Helvetica Neue", Arial, sans-serif;
  --landing-mono: "Geist Mono", ui-monospace, monospace;
  font-family: var(--landing-body); background: var(--landing-bg); color: var(--landing-ink-soft);
  line-height: 1.6; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11";
  min-height: 100vh; overflow-x: hidden;
}
.landing-root a { color: inherit; }
.landing-display { font-family: var(--landing-display); font-weight: 400; letter-spacing: -0.025em; color: var(--landing-ink); line-height: 1.08; }
.landing-display em { font-style: italic; color: var(--landing-accent-warm); font-weight: 400; }
.landing-mono { font-family: var(--landing-mono); font-feature-settings: "ss01"; }
.landing-container { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.landing-skip-link { position: absolute; left: -9999px; }
.landing-skip-link:focus { left: 16px; top: 16px; z-index: 50; background: var(--landing-ink); color: #fff; padding: 10px 16px; border-radius: 10px; }

.landing-nav { border-bottom: 1px solid var(--landing-rule); background: rgba(246,243,237,0.92); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; }
.landing-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0; }
.landing-logo img { display: block; height: 42px; width: auto; }
.landing-nav-links { display: flex; gap: 28px; font-size: 14px; color: var(--landing-ink-soft); }
.landing-nav-links a { text-decoration: none; }
.landing-nav-links a:hover { color: var(--landing-ink); }
.landing-nav-actions { display: flex; align-items: center; gap: 10px; }
/* `[hidden]` is a UA rule, so ANY author `display` beats it. .landing-btn
   below sets display:inline-flex, which left the Back and Send buttons
   visible on every step: a visitor could press "Senda skráningu" on step 1,
   and on the last step "Áfram" was there to press and did nothing, because
   show() clamps. Found by walking the page, not by any test — Playwright
   clicks a [hidden] element with a display happily. */
.landing-root [hidden] { display: none !important; }
.landing-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; cursor: pointer; border: 1px solid transparent; border-radius: var(--landing-radius-pill); transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease; }
.landing-root .landing-btn-primary { background: var(--landing-accent); color: var(--landing-surface); }
.landing-root .landing-btn-primary:hover { transform: translateY(-1px); }
.landing-root .landing-btn-ghost { background: transparent; color: var(--landing-ink); border-color: var(--landing-rule); }
.landing-root .landing-btn-ghost:hover { border-color: var(--landing-ink); }
.landing-root .landing-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
/* EHR-4230 — the language switch, same shape as the one on the landing page. */
.landing-root .landing-lang { font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--landing-ink-soft); text-decoration: none; padding: 6px 8px; border-radius: 8px; }
.landing-root .landing-lang:hover { color: var(--landing-ink); background: var(--landing-bg-alt); }

/* ── page head ─────────────────────────────────────────────────────────── */
.skraning-head { padding: 56px 0 28px; }
.skraning-head .landing-display { font-size: clamp(32px, 4vw, 50px); max-width: 18ch; }
.skraning-lead { margin-top: 16px; max-width: 58ch; font-size: 17px; color: var(--landing-ink-soft); }
/* EHR-4618 — the page's one h1, for assistive tech; the kickers show it. */
.skraning-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skraning-kicker { font-family: var(--landing-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--landing-accent-warm); margin-bottom: 14px; }

/* ── the no-client-data notice. Not a footnote: it is the one rule a
      clinic can break here without meaning to, so it sits above the form
      and is styled to be read, not skipped. ───────────────────────────── */
.skraning-notice { margin: 24px 0 0; padding: 18px 20px; background: #fdf4ec; border: 1px solid #e8c9ae; border-left: 4px solid var(--landing-accent-warm); border-radius: 12px; font-size: 15px; color: var(--landing-ink); max-width: 72ch; }
.skraning-notice strong { font-weight: 600; }

/* ── progress ──────────────────────────────────────────────────────────── */
.skraning-progress { position: sticky; top: 71px; z-index: 15; background: var(--landing-bg); border-bottom: 1px solid var(--landing-rule); padding: 14px 0 0; }
.skraning-dots { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; }
.skraning-dot { font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: var(--landing-radius-pill); border: 1px solid var(--landing-rule); background: transparent; color: var(--landing-muted); cursor: pointer; white-space: nowrap; }
.skraning-dot.is-active { background: var(--landing-ink); border-color: var(--landing-ink); color: var(--landing-surface); }
.skraning-dot.is-done { border-color: var(--landing-accent-soft); color: var(--landing-accent); }
.skraning-track { height: 3px; background: var(--landing-rule); }
.skraning-track span { display: block; height: 100%; background: var(--landing-accent-warm); width: 0; transition: width .25s ease; }

/* ── form ──────────────────────────────────────────────────────────────── */
.skraning-body { padding: 36px 0 80px; }
.skraning-step { max-width: 780px; }
.skraning-step h2 { font-family: var(--landing-display); font-size: clamp(24px, 2.6vw, 32px); color: var(--landing-ink); font-weight: 400; letter-spacing: -0.02em; outline: none; }
.skraning-step > p { margin-top: 10px; max-width: 60ch; color: var(--landing-ink-soft); }
.skraning-optional { display: inline-block; margin-left: 10px; font-family: var(--landing-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--landing-muted); border: 1px solid var(--landing-rule); border-radius: var(--landing-radius-pill); padding: 3px 9px; vertical-align: middle; }

.skraning-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.skraning-grid.is-one { grid-template-columns: 1fr; }
.skraning-field { display: flex; flex-direction: column; gap: 6px; }
.skraning-field.is-wide { grid-column: 1 / -1; }
.skraning-label { font-family: var(--landing-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--landing-muted); }
.skraning-label .req { color: var(--landing-accent-warm); }
.skraning-hint { font-size: 13px; color: var(--landing-muted); }
.skraning-field input, .skraning-field select, .skraning-field textarea {
  background: var(--landing-surface); border: 1px solid var(--landing-rule); border-radius: 12px;
  padding: 12px 14px; color: var(--landing-ink); font-family: inherit; font-size: 15px; outline: none; width: 100%;
}
.skraning-field input:focus, .skraning-field select:focus, .skraning-field textarea:focus { border-color: var(--landing-accent-soft); box-shadow: 0 0 0 3px rgba(61,90,130,0.12); }
.skraning-field input.has-error, .skraning-field select.has-error { border-color: #b3261e; }
.skraning-field textarea { resize: vertical; min-height: 92px; }
.skraning-err { font-size: 13px; color: #b3261e; min-height: 0; }

.skraning-check { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 15px; color: var(--landing-ink); padding: 10px 0; }
.skraning-check input { margin-top: 4px; accent-color: var(--landing-accent); width: 17px; height: 17px; }
.skraning-check .skraning-hint { display: block; margin-top: 2px; }
.skraning-choices { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }

/* repeatable rows */
.skraning-rows { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.skraning-row { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--landing-rule); border-radius: 14px; background: var(--landing-surface); }
.skraning-row-staff { grid-template-columns: 1.2fr 0.9fr 1.2fr 0.9fr auto; align-items: end; }
.skraning-row-type { grid-template-columns: 1.6fr 0.7fr 0.8fr auto; align-items: end; }
.skraning-row .skraning-label { font-size: 10px; }
.skraning-rm { font: inherit; font-size: 13px; background: transparent; border: 1px solid var(--landing-rule); border-radius: 10px; padding: 11px 12px; color: var(--landing-muted); cursor: pointer; }
.skraning-rm:hover { border-color: #b3261e; color: #b3261e; }
.skraning-add { margin-top: 12px; }

/* review */
.review-block { margin-top: 24px; padding: 20px 22px; border-radius: 14px; border: 1px solid var(--landing-rule); background: var(--landing-surface); }
.review-block.is-contract { border-color: var(--landing-accent-soft); background: #f2f5fa; }
.review-block h3 { font-size: 15px; color: var(--landing-ink); font-weight: 600; }
.review-block > p { font-size: 14px; color: var(--landing-ink-soft); margin-top: 6px; max-width: 62ch; }
.review-block dl { display: grid; grid-template-columns: minmax(170px, auto) 1fr; gap: 6px 18px; margin-top: 16px; font-size: 14.5px; }
.review-block dt { color: var(--landing-muted); }
.review-block dd { color: var(--landing-ink); }

.skraning-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--landing-rule); max-width: 780px; }
.skraning-actions .spacer { flex: 1; }
.skraning-draft-note { font-size: 13px; color: var(--landing-muted); }
.skraning-link { background: none; border: none; font: inherit; font-size: 13px; color: var(--landing-muted); text-decoration: underline; cursor: pointer; padding: 0; }
.skraning-link:hover { color: var(--landing-ink); }

.skraning-status { margin-top: 18px; padding: 14px 16px; border-radius: 12px; font-size: 14.5px; max-width: 780px; }
.skraning-status.is-working { background: #eef2f8; border: 1px solid #c9d6e8; color: var(--landing-accent); }
.skraning-status.is-error { background: #fdecea; border: 1px solid #f0bcb6; color: #8c1d18; }

.skraning-upload { margin-top: 10px; }
.skraning-upload-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px dashed var(--landing-rule); border-radius: var(--landing-radius-pill); font-size: 14px; color: var(--landing-ink); cursor: pointer; background: var(--landing-surface); }
.skraning-upload-btn:hover { border-color: var(--landing-accent-soft); }
.skraning-upload-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.skraning-filelist { list-style: none; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.skraning-filelist li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--landing-ink); }
.skraning-filelist .state { font-family: var(--landing-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--landing-muted); }
.skraning-filelist .state.is-done { color: var(--landing-accent); }
.skraning-filelist .state.is-bad { color: #b3261e; }

.skraning-gate { max-width: 640px; padding: 72px 0 110px; }
.skraning-gate .landing-display { font-size: clamp(32px, 4vw, 50px); }
.skraning-gate .skraning-lead { margin-top: 18px; }

.skraning-identity { margin-top: 24px; padding: 18px 20px; border-radius: 14px; background: #f2f5fa; border: 1px solid var(--landing-accent-soft); max-width: 420px; }
.skraning-identity .skraning-label { color: var(--landing-accent); }
.skraning-identity-name { margin-top: 6px; font-size: 19px; color: var(--landing-ink); }
.skraning-identity-kt { margin-top: 2px; font-size: 14px; color: var(--landing-muted); }

.skraning-done { max-width: 640px; padding: 48px 0 90px; }
.skraning-done h2 { font-family: var(--landing-display); font-size: clamp(28px, 3.2vw, 40px); color: var(--landing-ink); font-weight: 400; outline: none; }
.skraning-done p { margin-top: 14px; font-size: 16.5px; }
.skraning-done ol { margin: 20px 0 0 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; }

.landing-footer { border-top: 1px solid var(--landing-rule); padding: 44px 0 56px; background: var(--landing-bg-alt); }
.landing-foot { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.landing-foot-brand img { display: block; height: 56px; width: auto; }
.landing-foot-links { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; }
.landing-foot-links a { text-decoration: none; }
.landing-foot-links a:hover { color: var(--landing-ink); }
.landing-foot-copy { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--landing-rule); display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: var(--landing-muted); }

/* EHR-4696 — at 390/412 px the 191 px logo + the language link + "Skrá inn"
   do not fit one row. The button stays on one line (nowrap, EHR-4618) and never
   shrinks; the logo and gaps give way instead, so it cannot collapse into a
   68x69 circle. */
.landing-nav-actions { flex-shrink: 0; }
.landing-logo { min-width: 0; }
@media (max-width: 480px) {
  .landing-nav-row { gap: 10px; }
  .landing-logo img { height: 32px; max-width: 100%; }
  .landing-nav-actions { gap: 2px; }
  .landing-root .landing-lang { padding: 6px 6px; }
  .landing-nav-actions .landing-btn { padding: 9px 14px; }
}
/* 44 px tap boxes for the header controls on a touch screen. */
@media (pointer: coarse) {
  .landing-nav-actions .landing-btn, .landing-root .landing-lang { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 860px) {
  .skraning-grid { grid-template-columns: 1fr; }
  .skraning-row-staff, .skraning-row-type { grid-template-columns: 1fr; }
  .landing-nav-links { display: none; }
  .skraning-progress { top: 69px; }
  .review-block dl { grid-template-columns: 1fr; gap: 2px 0; }
  .review-block dd { margin-bottom: 10px; }
}