/* Dean Ahlgren · check.css · styles for "Take the 30-second check" (check.html only)
   Built 2026-09-24 on the site tokens in test.css. Every state has a text label, not color alone. */

.ck-meta { margin-top:18px; font-size:14px; color:var(--muted); letter-spacing:.02em; }

.ck-app { --ck-card:#FFFFFF; --ck-line:rgba(13,26,42,.14); --ck-coral:#C9472A; --ck-coral-bg:rgba(240,122,90,.16); --ck-green:#1C6E45; --ck-green-bg:rgba(28,110,69,.12); --ck-grey:#5B7089; --ck-grey-bg:rgba(91,112,137,.12); }
.ck-screen { display:flex; flex-direction:column; gap:22px; }
.ck-h { font-size:clamp(28px,3vw,38px); }
.ck-sub { font-size:17px; max-width:60ch; }
.ck-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* screen 1 */
.ck-types { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.ck-type { display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; padding:22px 24px; border:1px solid var(--ck-line); border-radius:12px; background:var(--ck-card); color:var(--ink); font:inherit; cursor:pointer; box-shadow:0 10px 30px -20px rgba(13,26,42,.35); transition:border-color .18s ease, transform .18s ease; }
.ck-type:hover { border-color:var(--coral); transform:translateY(-2px); }
.ck-type-name { font-family:var(--font-display); font-size:24px; line-height:1.2; }
.ck-type-hint { font-size:14.5px; color:var(--muted); }
.ck-toggle { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; font-size:15.5px; color:var(--ink); cursor:pointer; }
.ck-toggle input { width:18px; height:18px; accent-color:#C9472A; }
.ck-toggle span { font-size:14px; color:var(--muted); }

/* screen 2 */
.ck-roundbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 20px; }
.ck-step { font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--kicker); }
.ck-timer { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--body); }
.ck-timer-track { position:relative; display:block; width:120px; height:6px; border-radius:3px; background:var(--ck-grey-bg); overflow:hidden; }
.ck-timer-track i { position:absolute; left:0; top:0; bottom:0; width:100%; background:#2E5A86; border-radius:3px; transition:width 1s linear; }
.ck-timer.is-low .ck-timer-track i { background:var(--coral); }
.ck-timer-num { font-weight:700; font-variant-numeric:tabular-nums; min-width:2ch; text-align:right; color:var(--ink); }
.ck-timer-unit { color:var(--muted); }
.ck-link { background:none; border:0; padding:0; font:inherit; font-size:14px; color:#1E3F63; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.ck-link:hover { color:var(--ink); }

.ck-cols { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:18px; align-items:start; }
.ck-facts, .ck-draft { border:1px solid var(--ck-line); border-radius:12px; background:var(--ck-card); padding:22px 24px; box-shadow:0 10px 30px -20px rgba(13,26,42,.3); }
.ck-facts h3, .ck-draft h3 { font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--kicker); margin-bottom:12px; }
.ck-facts ul { margin:0; padding-left:18px; display:grid; gap:8px; font-size:15.5px; color:var(--body); }
.ck-instr { font-size:14.5px; color:var(--muted); margin:-4px 0 12px; }
.ck-text { font-size:18.5px; line-height:2.05; color:var(--ink); }
.ck-part { display:inline; background:transparent; border-bottom:2px dotted rgba(13,26,42,.28); border-radius:4px; padding:3px 2px; cursor:pointer; -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background-color .15s ease, border-color .15s ease; }
.ck-part:hover { background:rgba(13,26,42,.06); }
.ck-part:focus-visible { outline:2px solid var(--coral); outline-offset:2px; }
.ck-part[aria-pressed="true"] { background:var(--ck-coral-bg); border-bottom-color:var(--coral); }
.ck-part[aria-disabled="true"] { cursor:default; }
.ck-part.is-caught { background:var(--ck-green-bg); border-bottom:2px solid var(--ck-green); }
.ck-part.is-missed { background:var(--ck-coral-bg); border-bottom:2px solid var(--ck-coral); }
.ck-part.is-fine { background:var(--ck-grey-bg); border-bottom:2px solid var(--ck-grey); }
.ck-part:not(.is-caught):not(.is-missed):not(.is-fine)[aria-disabled="true"] { border-bottom-color:transparent; }
.ck-part[aria-disabled="true"]:hover { background:inherit; }
.ck-tag { display:inline-block; margin-left:4px; padding:0 7px; border-radius:999px; font-size:12px; font-weight:600; line-height:1.7; vertical-align:2px; letter-spacing:.01em; }
.is-caught .ck-tag { background:var(--ck-green); color:#fff; }
.is-missed .ck-tag { background:var(--ck-coral); color:#fff; }
.is-fine .ck-tag { background:var(--ck-grey); color:#fff; }

.ck-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.ck-reveal { border-top:1px solid var(--ck-line); padding-top:22px; display:flex; flex-direction:column; gap:16px; }
.ck-reveal h3 { font-family:var(--font-display); font-weight:400; font-size:28px; color:var(--ink); }
.ck-notes { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.ck-notes li { display:grid; grid-template-columns:28px minmax(0,1fr); gap:10px; align-items:start; padding:14px 16px; border-radius:10px; background:var(--ck-card); border:1px solid var(--ck-line); }
.ck-mark { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; font-weight:700; color:#fff; }
.ck-notes li.ok .ck-mark { background:var(--ck-green); }
.ck-notes li.no .ck-mark { background:var(--ck-coral); }
.ck-note-h { font-weight:600; color:var(--ink); }
.ck-notes p { font-size:15.5px; }
.ck-fine { font-size:15px; color:var(--muted); }

/* screen 3 */
.ck-qs { display:flex; flex-direction:column; gap:22px; }
.ck-qs fieldset { border:0; margin:0; padding:0; }
.ck-qs legend { font-weight:600; font-size:17px; color:var(--ink); margin-bottom:10px; }
.ck-qs legend span { font-weight:400; font-size:14px; color:var(--muted); }
.ck-pills { display:flex; flex-wrap:wrap; gap:10px; }
.ck-pill { position:relative; cursor:pointer; }
.ck-pill input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.ck-pill span { display:inline-block; padding:9px 16px; border:1px solid var(--ck-line); border-radius:999px; background:var(--ck-card); font-size:15px; color:var(--ink); transition:border-color .15s ease, background-color .15s ease; }
.ck-pill:hover span { border-color:rgba(13,26,42,.4); }
.ck-pill input:checked + span { background:#152740; border-color:#152740; color:#fff; }
.ck-pill input:focus-visible + span { outline:2px solid var(--coral); outline-offset:3px; }

/* screen 4 */
.ck-score { font-size:19px; color:var(--ink); }
.ck-missed h3, .ck-plan span { font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--kicker); }
.ck-missed h3 { margin-bottom:8px; }
.ck-missed ul { margin:0; padding-left:18px; display:grid; gap:4px; }
.ck-plan { display:grid; gap:14px; padding:22px 24px; border-radius:12px; background:#152740; color:#fff; }
.ck-plan p { font-family:var(--font-display); font-size:24px; line-height:1.25; color:#fff; }
.ck-plan span { display:block; font-family:var(--font-body); color:#FFD0BD; margin-bottom:4px; }
.ck-more { font-size:14px; color:var(--muted); }
.ck-privacy { font-size:14px; color:var(--muted); }

/* the printable checklist */
.ck-checklist { max-width:760px; margin-top:40px; padding:32px 34px; border:1px solid rgba(13,26,42,.14); border-radius:12px; background:#fff; box-shadow:0 10px 30px -20px rgba(13,26,42,.3); }
.ck-checklist h2 { font-size:clamp(28px,3vw,36px); margin-bottom:6px; }
.ck-checklist ol { margin:18px 0; padding-left:22px; display:grid; gap:10px; font-size:17px; }
.ck-checklist strong { color:var(--ink); }
.ck-checklist .ck-foot { margin-top:18px; font-size:13.5px; color:var(--muted); }

@media (max-width:760px) {
  .ck-types { grid-template-columns:1fr; }
  .ck-cols { grid-template-columns:1fr; }
  .ck-text { font-size:17.5px; line-height:2; }
}
@media (prefers-reduced-motion:reduce) {
  .ck-type, .ck-part, .ck-timer-track i, .ck-pill span { transition:none; }
  .ck-type:hover { transform:none; }
}
@media print {
  body * { visibility:hidden; }
  .ck-checklist, .ck-checklist * { visibility:visible; }
  .ck-checklist { position:absolute; left:0; top:0; width:100%; margin:0; border:0; box-shadow:none; }
  .ck-checklist .no-print { display:none; }
}
.ck-app [data-focus]:focus, .ck-checklist h2:focus { outline:none; } /* focus is moved to headings for screen readers only */