/* ==========================================================================
   Risk reporting check (risk-check.html) · October 2026
   Uses the tokens in site.css. No new colours: status is shown by word and
   shape, never by colour alone. Red is not used (nothing here is a failure).
   ========================================================================== */

.ck-hero { gap: 18px; }
.ck-private { display: flex; align-items: center; gap: 8px; }
.ck-private svg { width: 18px; height: 18px; flex: none; color: var(--ink); }
.ck-noscript { margin-top: 20px; }

.ck-section { display: flex; flex-direction: column; gap: 28px; }

/* ---------------------------------------------------------------- form */
.ck-form { display: flex; flex-direction: column; gap: 20px; }
.ck-progress, .ck-step, .ck-back, .ck-next { display: none; }
.ck-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ck-q { margin: 0; padding: 20px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ck-q:focus { outline: none; }
.ck-q:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.ck-q.is-missing { border-color: var(--ink); border-width: 2px; padding: 19px; }
.ck-q legend { padding: 0; display: flex; flex-direction: column; gap: 8px; float: left; width: 100%; }
.ck-q legend + * { clear: both; }
.ck-qt { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); text-wrap: balance; }

.ck-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ck-opt { position: relative; display: flex; align-items: flex-start; gap: 10px; min-height: var(--tap); padding: 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-tile); background: var(--ground); cursor: pointer; }
.ck-opt:hover { border-color: var(--ink); }
.ck-opt input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface); display: grid; place-content: center; cursor: pointer; }
.ck-opt input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); transform: scale(0); }
.ck-opt input:checked { border-color: var(--ink); }
.ck-opt input:checked::before { transform: scale(1); }
.ck-opt input:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.ck-opt span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ck-opt b { font-size: 16px; font-weight: 700; }
.ck-opt small { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.ck-opt:has(input:checked) { border: 2px solid var(--ink); padding: 11px; background: var(--surface); }

.ck-error { font-size: 15px; font-weight: 600; color: var(--ink); min-height: 0; }
.ck-error:empty { display: none; }
.ck-error::before { content: "! "; font-weight: 800; }

.ck-nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Phones: one question per screen (check.js adds .is-steps) */
.ck-form.is-steps .ck-grid { grid-template-columns: minmax(0, 1fr); }
.ck-form.is-steps .ck-q:not(.is-current) { display: none; }
.ck-form.is-steps .ck-progress { display: block; height: 4px; border-radius: 99px; background: var(--border); overflow: hidden; }
.ck-form.is-steps .ck-progress-fill { display: block; height: 100%; width: 0; background: var(--ink); }
.ck-form.is-steps .ck-step { display: block; }
.ck-form.is-steps .ck-q legend .label { display: none; }
.ck-form.is-steps .ck-opts { grid-template-columns: minmax(0, 1fr); }
.ck-form.is-steps .ck-opt { padding: 14px; min-height: 56px; }
.ck-form.is-steps .ck-opt:has(input:checked) { padding: 13px; }
.ck-form.is-steps .ck-back, .ck-form.is-steps .ck-next { display: inline-flex; }
.ck-form.is-steps .ck-submit { display: none; }
.ck-form.is-steps.is-last .ck-next { display: none; }
.ck-form.is-steps.is-last .ck-submit { display: inline-flex; }
.ck-form.is-steps.is-first .ck-back { visibility: hidden; }
.ck-form.is-steps .ck-nav { justify-content: space-between; }
.ck-form.is-steps .ck-nav .btn { flex: 1 1 0; padding: 0 16px; }

/* ---------------------------------------------------------------- result */
.ck-result { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 16px; }
.ck-result h2:focus { outline: none; }
.ck-result h2:focus-visible { outline: none; } /* programmatic focus target only, not interactive */
.ck-count { font-variant-numeric: var(--tabular); }

/* Strip: one tile per team. The word and the mark carry the status, not colour */
.ck-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.ck-strip li { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-tile); background: var(--surface); min-width: 0; }
.ck-strip b { font-size: 14px; font-weight: 700; line-height: 1.3; }
.ck-ans { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.ck-ans::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); flex: none; box-sizing: border-box; }
.ck-strip li[data-a="yes"] .ck-ans::before { background: var(--ink); }
.ck-strip li[data-a="partly"] .ck-ans::before { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
.ck-strip li[data-a="no"] .ck-ans::before { background: transparent; }
.ck-strip li[data-a="no"], .ck-strip li[data-a="partly"] { border-color: var(--ink-3); }
.ck-strip li[data-a="no"] { background: var(--ground); border-style: dashed; }

.ck-fict { max-width: 52em; }

.ck-gaps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ck-gap { padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ck-gap-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ck-pill[data-a="no"] { border: 1.5px solid var(--ink); color: var(--ink); }
.ck-pill[data-a="partly"] { border: 1px solid var(--ink-3); color: var(--ink); background: var(--surface-2); }
.ck-miss { display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.ck-good { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 44px 14px 14px; min-height: var(--tap); border-radius: var(--radius-tile); background: var(--ink); color: var(--surface); text-decoration: none; }
.ck-good:hover { color: var(--surface); background: var(--ink-2); }
.ck-good:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.ck-good .label { color: var(--on-ink-2); }
.ck-good b { font-size: 17px; font-weight: 700; line-height: 1.3; }
.ck-good .m { font-size: 14px; color: var(--on-ink-body); }
.ck-go { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--lemon); }
.ck-team { display: inline-flex; align-items: center; min-height: var(--tap); align-self: flex-start; }
.ck-team::after { content: " →"; white-space: pre; }

.ck-none { padding: 20px; display: flex; flex-direction: column; gap: 10px; }

.ck-result-cta { padding: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.ck-result-cta .text { display: flex; flex-direction: column; gap: 6px; max-width: 36em; }
.ck-restart { flex-basis: 100%; background: none; border: 0; padding: 0; min-height: var(--tap); text-align: left; cursor: pointer; font-size: 15px; justify-self: start; width: max-content; max-width: 100%; }

/* ---------------------------------------------------------------- what we think */
.ck-think { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ck-think li { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--ground); }
.ck-think .num { font-size: calc(22px * var(--num-scale)); color: var(--ink-2); }
.ck-think p { font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference) {
  html:has(.ck-form) { scroll-behavior: smooth; }
  .ck-progress-fill { transition: width .25s ease; }
  .ck-opt input::before { transition: transform .12s ease; }
  .ck-result.is-in { animation: ck-in .3s ease both; }
  @keyframes ck-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ---------------------------------------------------------------- breakpoints */
@media (max-width: 1100px) {
  .ck-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
  .ck-grid, .ck-gaps { grid-template-columns: minmax(0, 1fr); }
  .ck-think { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .ck-hero { padding-top: 24px; padding-bottom: 40px; }
  .ck-opts { grid-template-columns: minmax(0, 1fr); }
  .ck-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-q, .ck-gap, .ck-result-cta, .ck-none { padding: 16px; }
  .ck-q.is-missing { padding: 15px; }
  .ck-qt { font-size: 20px; }
  .ck-think li { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 12px; padding: 16px; }
  .ck-think .h3 { flex: 1 1 0; min-width: 0; }
  .ck-result-cta .btns .btn { flex: 1 1 100%; }
}