/* Readiness check (/check/): page-local styles. Tokens and shared components come from
   theme.css and the look files; nothing here hard-codes a colour, font or radius.
   Phone first: base = 375 px, then 768 and 1100. */

.check [hidden] { display: none !important; } /* .card, .row and the buttons set display; hidden must win */

/* ---------- layout ---------- */
.check { padding-top: var(--space-4); }
.check__grid { display: flex; flex-direction: column; gap: var(--space-4); }
.check__intro { display: flex; flex-direction: column; gap: var(--space-2); }
.check__panel { min-width: 0; }
.check__gets { margin: var(--space-1) 0 0; padding: 0; list-style: none; display: none; }
.check__gets li { padding-block: 12px; border-top: var(--rule-w) solid var(--rule-soft); color: var(--ink-2); font-size: 15px; line-height: 1.5; }
@media (min-width: 768px) {
  .check__gets { display: block; }
}
@media (min-width: 1100px) {
  .check { padding-top: var(--space-5); }
  .check__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-5); align-items: start; }
  .check__intro { position: sticky; top: 96px; }
}
html[data-look="editorial"] .check__intro { border-top: var(--rule-w) solid var(--rule); padding-top: var(--space-2); }

/* ---------- question ---------- */
.q { display: flex; flex-direction: column; gap: var(--space-3); scroll-margin-top: 80px; }
.q__progress { display: flex; align-items: center; gap: var(--space-2); }
.q__progress .caption { flex: none; min-width: 4.5em; }
/* progress bar: ink on a soft rule; square in Editorial, rounded in Apple via --radius-btn. candidate for theme.css */
.q__bar { flex: 1; height: 4px; background: var(--rule-soft); border-radius: var(--radius-btn); overflow: hidden; }
.q__bar span { display: block; height: 100%; width: 0; background: var(--ink); border-radius: inherit; transition: width .25s; }
.q__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.q__set legend { padding: 0; margin-bottom: var(--space-3); }
.q__text:focus { outline: none; }
.q__text:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.q__opts { display: flex; flex-direction: column; gap: 10px; }

/* answer option: a full-width tap target with a round marker in both looks (single choice). candidate for theme.css */
.opt {
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 12px 16px;
  background: var(--surface); color: var(--ink);
  border: var(--rule-w) solid var(--rule-soft); border-radius: var(--radius);
  cursor: pointer; line-height: 1.35;
  transition: border-color .15s, box-shadow .15s;
}
.opt:hover { border-color: var(--ink); }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.opt__mark {
  flex: none; position: relative; width: 20px; height: 20px;
  border: 1.5px solid var(--ink); border-radius: 50%; background: var(--surface); /* round: a square reads as a checkbox */
}
.opt__mark::after { content: ''; position: absolute; inset: 4px; border-radius: inherit; background: var(--ink); transform: scale(0); transition: transform .12s; }
/* forced colours (Windows High Contrast): backgrounds and shadows are dropped, so draw the choice with system colours */
@media (forced-colors: active) {
  .opt__mark::after { background: CanvasText; forced-color-adjust: none; }
  .opt:has(input:checked) { outline: 3px solid Highlight; outline-offset: -3px; }
  .q__bar span { background: Highlight; forced-color-adjust: none; }
}
.opt__text { font-size: 17px; }
.opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.opt input:checked + .opt__mark::after { transform: scale(1); }
.opt:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
html[data-look="apple"] .opt { box-shadow: var(--shadow-card); border-color: transparent; }
html[data-look="apple"] .opt:hover { border-color: var(--rule); }
html[data-look="apple"] .opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), var(--shadow-card); }

.q__err { margin: 0; color: var(--ink); font-weight: 600; font-size: 15px; padding-left: 12px; border-left: 3px solid var(--ink); }

/* Back + Next on one row at every width; Next takes the room. */
.q__nav { display: flex; gap: 12px; }
.q__nav .btn { flex: 1 1 auto; min-width: 0; }
.q__nav .btn--back { flex: 0 0 auto; }
@media (min-width: 768px) { .q__nav .btn { flex: 0 0 auto; min-width: 12rem; } .q__nav .btn--back { min-width: 0; } }
/* Editorial slab: the Back button points left. candidate for theme.css (.btn--back) */
html[data-look="editorial"] .btn--back { flex-direction: row-reverse; justify-content: flex-end; }
html[data-look="editorial"] .btn--back::after { content: '\2190' / ''; }
html[data-look="editorial"] .btn--back:hover::after { transform: translateX(-4px); }

/* ---------- result ---------- */
.result { display: flex; flex-direction: column; gap: var(--space-3); scroll-margin-top: 80px; }
.result > * { margin: 0; }
.result__band:focus { outline: none; }
.result__band:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
/* The score is computed, not measured: ink type, no yellow mark (spec §2: yellow only on measured values in the measure row). */
.result__score { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--space-2); }
.result__score b {
  font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--fs-display);
  line-height: 1; letter-spacing: var(--track-display); color: var(--ink);
}
.result__offers { display: flex; flex-direction: column; gap: var(--space-1); }
.result__offers .row:not([hidden]) { border-top-color: var(--rule); }
/* the price column sizes to its content so "from €6,000" never overflows (theme .row uses 4fr 6fr 2fr) */
@media (min-width: 768px) { .result__offers .row { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; } }
.result__cta { margin-top: var(--space-1); }

.result__answers ol { margin: 0 0 var(--space-3); padding-left: 1.4em; display: flex; flex-direction: column; gap: 10px; }
.result__answers li { color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.result__answers li b { display: block; color: var(--ink); font-weight: 600; }

/* ---------- send ---------- */
.send { display: flex; flex-direction: column; gap: 12px; padding-top: var(--space-3); border-top: var(--rule-w) solid var(--rule); }
.send__label { display: block; }
.send__label .dim { font-weight: 400; }
.send__note { font-size: 15px; }
.send__row { display: flex; flex-direction: column; gap: 12px; }
.send__input {
  width: 100%; min-height: var(--btn-h); padding: 0 16px;
  font: inherit; font-size: 17px; color: var(--ink); background: var(--surface);
  border: var(--rule-w) solid var(--ink); border-radius: var(--radius-btn);
}
.send__input::placeholder { color: var(--ink-3); opacity: 1; }
.send__input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.send__row .btn:disabled, .send__row .btn[aria-disabled="true"] { opacity: .55; cursor: default; }
@media (min-width: 560px) {
  .send__row { flex-direction: row; }
  .send__input { flex: 1 1 auto; min-width: 0; }
  .send__row .btn { flex: none; }
}
/* honeypot: off-screen for people, present for bots */
.send__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.send__status { margin: 0; min-height: 1.5em; font-size: 15px; color: var(--ink-2); }
.send__status[data-kind="ok"], .send__status[data-kind="error"] { color: var(--ink); font-weight: 600; padding-left: 12px; border-left: 3px solid var(--ink); }
/* Apple: a soft rounded note instead of the Editorial left bar */
html[data-look="apple"] .send__status[data-kind="ok"], html[data-look="apple"] .send__status[data-kind="error"],
html[data-look="apple"] .q__err { border-left: 0; padding: 12px 16px; background: var(--paper-2); border-radius: var(--radius); }
.send__input[aria-invalid="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.send__status:empty { display: none; }

/* a quiet text button. candidate for theme.css */
.linkish {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--ink); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px;
}
.linkish:hover { text-decoration-thickness: 2px; }