/* The check-up page. Colours, type and components come from brand.css (built from the design system);
   this file only lays the screens out. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--mist); color: var(--ink-900); font-family: var(--font-text); font-size: 17px; line-height: 1.5;
  font-feature-settings: "locl"; -webkit-font-smoothing: antialiased; }
a { color: var(--ink-900); text-underline-offset: 2px; }

.shell { max-width: 480px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; background: var(--white); }
@media (min-width: 560px) { .shell { min-height: 0; margin: 40px auto; border: 1px solid var(--ink-200); border-radius: 28px; } }
.app { min-height: inherit; display: flex; flex-direction: column; padding: 22px max(24px, env(safe-area-inset-right)) 32px max(24px, env(safe-area-inset-left)); }
@media (min-width: 560px) { .app { min-height: 760px; padding: 26px 32px 32px; } }
.grow { flex: 1; min-height: 24px; }

.tb { display: flex; justify-content: space-between; align-items: center; }
.tb .wm { font-size: 20px; }
.st { font-size: clamp(44px, 14.5vw, 60px); line-height: .95; margin-top: 56px; }
.q { font-size: clamp(32px, 10.4vw, 40px); line-height: 1.02; margin-top: 20px; }
.res { font-size: clamp(38px, 12.4vw, 48px); line-height: .98; margin-top: 8px; }
.gap-top { margin-top: 56px; }
.sub { font-size: 18px; line-height: 1.5; color: var(--ink-600); margin-top: 18px; }
.sub + .sub { margin-top: 12px; }
.micro { font-size: 13.5px; line-height: 1.45; color: var(--ink-600); margin-top: 14px; }
.cnt { font-size: 14px; font-weight: 500; color: var(--ink-600); margin-top: 18px; }
.hint { font-size: 16px; color: var(--ink-600); margin-top: 10px; }
.opts { display: grid; gap: 10px; margin-top: 20px; }
button.opt { width: 100%; height: auto; min-height: 60px; padding-top: 12px; padding-bottom: 12px; text-align: left; line-height: 1.25; cursor: pointer; font-family: inherit; gap: 12px; }
button.opt:hover:not(.on) { border-color: var(--ink-900); }
.back { border: 0; background: transparent; color: var(--ink-900); width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; margin-left: -6px; flex: none; }
.back svg { width: 24px; height: 24px; }
button.btn { width: 100%; border: 0; cursor: pointer; margin-top: 26px; font-family: var(--font-text); }
button.btn--line { border: 1.5px solid var(--ink-900); background: transparent; }
button.btn[disabled] { opacity: .65; cursor: progress; }
.lab { font-size: 15px; font-weight: 600; color: var(--ink-600); margin-top: 34px; }
.strong { font-size: 16px; color: var(--ink-600); margin-top: 14px; }
.card { margin-top: 22px; }
.card > .rr:first-child { margin-top: 0; }
.trk.na { background: transparent; border: 1.5px dashed var(--ink-200); height: 10px; }
.meaning { font-size: 17px; line-height: 1.55; margin-top: 24px; }
h3.hl { font-size: 30px; margin-top: 30px; }
ol.steps { list-style: none; counter-reset: s; display: grid; gap: 14px; margin-top: 14px; }
ol.steps li { counter-increment: s; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; font-size: 16.5px; line-height: 1.5; }
ol.steps li::before { content: counter(s); font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.1; color: var(--ink-600); }
.disc { margin-top: 26px; }
.foot { margin-top: 26px; }

.fields { display: grid; gap: 14px; margin-top: 22px; }
.fld .ip input, .fld .ip select { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; }
.fld .ip:focus-within { border-color: var(--ink-900); outline: 3px solid var(--signal-600); outline-offset: 2px; }
.fld.bad .ip { border-color: var(--signal-600); }
.fld .help { font-size: 13.5px; color: var(--ink-600); margin-top: 6px; }
.consents { display: grid; gap: 12px; margin-top: 8px; }
label.chk { cursor: pointer; position: relative; }
.chk input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.chk i { position: relative; }
.chk input:checked + i { background: var(--ink-900); }
.chk input:checked + i::after { content: ""; position: absolute; left: 7px; top: 2px; width: 6px; height: 12px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.chk input:focus-visible + i { outline: 3px solid var(--signal-600); outline-offset: 2px; }
.chk.bad i { border-color: var(--signal-600); }
.chk .msg { display: block; color: var(--signal-600); font-weight: 500; margin-top: 4px; font-size: 13.5px; }
.chk a { color: var(--ink-900); }
.neterr { color: var(--signal-600); font-weight: 500; font-size: 14.5px; margin-top: 12px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
button:focus-visible { outline: 3px solid var(--signal-600); outline-offset: 2px; }
.nojs { padding: 24px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* the privacy page */
.doc { padding-bottom: 40px; }
.doc h1 { font-size: clamp(34px, 10vw, 44px); line-height: 1; margin-top: 40px; }
.doc h2 { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -.01em; margin-top: 30px; }
.doc p, .doc li { font-size: 16px; line-height: 1.6; margin-top: 10px; }
.doc ul { padding-left: 20px; }
.doc .meta { color: var(--ink-600); font-size: 14px; margin-top: 12px; }
.doc .todo { background: var(--signal-100); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; margin-top: 18px; }
.doc mark { background: var(--signal-100); color: var(--ink-900); padding: 0 3px; border-radius: 4px; }