/* Clarity Kit — the shared building blocks for Clarity Guide steps (2026-10-06).

   Hunter, 2026-10-06: "these guides are meant to be simple and easy on the eye but also informative ... use the new
   blue we selected that brighter version, and bright green boxes, purple, use icons more, space data blocks out ...
   each data point is either spaced out [or] has the colored text box ... make sure Headers, sub headers, and text body
   are distinguishable ... I dont want them to look bland like every other course."

   Rules (the written version is InsuranceONE/Plans and Specs/CLARITY-GUIDE-STYLE-RULES.md):
   - Colour has a meaning and keeps it: BLUE = information, GREEN = something to do / a good outcome, PURPLE = a choice
     you make, AMBER = watch out, RED = a cost. Never decorative.
   - Four type levels that cannot be confused: H1 serif 44 · H2 serif 30 with a number badge · H3 sans 800 19 · body sans
     17/1.7. Labels are 11.5 uppercase with tracking. Big numbers are sans 800 in the meaning colour.
   - One idea per block. A number never sits inside a sentence when it can sit in a tile.
   Everything is prefixed ck- so it cannot collide with the guide chrome. Built on the Medicare guide's tokens. */

:root{
  --ck-page:#E1EAF4; --ck-card:#FFFFFF; --ck-line:#E3E8F0;
  --ck-navy:#011D46; --ck-ink:#1A2440; --ck-body:#333E58; --ck-muted:#5B6472;
  --ck-blue:#1E4FD8; --ck-blue-ink:#193CB8; --ck-blue-head:#1C398E; --ck-blue-bar:#50A2FF; --ck-blue-tint:#EFF6FF;
  --ck-green:#0FB37A; --ck-green-ink:#0A7A54; --ck-green-tint:#E8F8F1;
  --ck-purple:#4F46E5; --ck-purple-ink:#272083; --ck-purple-bar:#8B85EE; --ck-purple-tint:#EEEDFD;
  --ck-amber-ink:#8A6215; --ck-amber-bar:#E2A93B; --ck-amber-tint:#FBF3DE;
  --ck-red:#C8102E; --ck-red-ink:#B00110; --ck-red-tint:#FDECED;
  --ck-serif:Lora,Georgia,serif; --ck-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ck-hand:Caveat,"Comic Sans MS",cursive;
}

/* ---- type ladder (inside the guide's main column) ---- */
main.wrap.ck h1{font-family:var(--ck-serif);font-weight:600;color:var(--ck-navy);font-size:clamp(32px,5.4vw,44px);line-height:1.12;margin:0 0 16px;text-wrap:balance}
main.wrap.ck .lede{font-family:var(--ck-sans);font-size:19px;line-height:1.6;color:var(--ck-ink);max-width:60ch;margin:0 0 12px}
main.wrap.ck .kicker{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ck-blue-ink)}
main.wrap.ck section.step{margin-top:60px}
main.wrap.ck section.step > p,main.wrap.ck .ck-card p{font-size:17px;line-height:1.7;color:var(--ck-body);max-width:62ch}

/* ---- the short answer: the answer before the detail ---- */
.ck-answer{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;background:var(--ck-blue-tint);border:1px solid #CFE0FB;border-radius:18px;padding:20px 22px;margin:22px 0 6px}
.ck-answer .ck-k{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ck-blue-ink);margin-bottom:4px}
.ck-answer p{margin:0;font-size:17.5px;line-height:1.6;color:var(--ck-blue-head);font-weight:600;max-width:58ch}

/* ---- icon tiles ---- */
.ck-ic{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center}
.ck-ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ck-ic.blue{background:#DCE8FD;color:var(--ck-blue)}
.ck-ic.green{background:#D3F3E5;color:var(--ck-green-ink)}
.ck-ic.purple{background:#E2E0FB;color:var(--ck-purple)}
.ck-ic.amber{background:#F8E7BF;color:var(--ck-amber-ink)}
.ck-ic.red{background:#FBD9DD;color:var(--ck-red-ink)}
.ck-ic.solid{background:var(--ck-blue);color:#fff}

/* ---- section header: number badge, serif H2, sub line ---- */
.ck-head{display:flex;gap:16px;align-items:center;margin-bottom:20px}
.ck-num{flex:none;width:42px;height:42px;border-radius:13px;background:var(--ck-blue);color:#fff;font:800 18px var(--ck-sans);display:grid;place-items:center;box-shadow:0 6px 16px -8px rgba(30,79,216,.8)}
.ck-head h2{font-family:var(--ck-serif);font-weight:600;font-size:clamp(25px,3.6vw,30px);line-height:1.2;color:var(--ck-navy);margin:0;text-wrap:balance}
.ck-head .ck-sub{margin:4px 0 0;font-size:15px;color:var(--ck-muted);font-weight:500}

/* ---- cards: one idea each ---- */
/* minmax(0,1fr): a wide diagram (its own side-scroll box) must not widen the column, or the whole page scrolls
   sideways on a phone (Life guide, 2026-10-06: 682px on a 375px screen) */
.ck-stack{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.ck-card{background:var(--ck-card);border:1px solid var(--ck-line);border-radius:18px;padding:24px 26px;min-width:0}
.ck-card > :last-child{margin-bottom:0}
.ck-card h3{font-family:var(--ck-sans);font-weight:800;font-size:19px;line-height:1.35;color:var(--ck-navy);margin:0 0 8px;letter-spacing:-.005em}
.ck-card p{margin:0 0 12px}
.ck-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:8px;margin-bottom:12px}
.ck-tag svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ck-tag.blue{background:var(--ck-blue-tint);color:var(--ck-blue-ink)}
.ck-tag.green{background:var(--ck-green-tint);color:var(--ck-green-ink)}
.ck-tag.purple{background:var(--ck-purple-tint);color:var(--ck-purple)}
.ck-tag.amber{background:var(--ck-amber-tint);color:var(--ck-amber-ink)}
.ck-tag.red{background:var(--ck-red-tint);color:var(--ck-red-ink)}
.ck-card.watch{background:var(--ck-amber-tint);border-color:#F1DDA6;border-left:5px solid var(--ck-amber-bar)}
.ck-card.watch h3,.ck-card.watch p{color:#5C4310}

/* ---- fact tiles: every number gets its own space ---- */
.ck-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:4px 0 0}
/* rows the items fill: 2 = 2, 3 = 3, 4 = 2 x 2 (never a lone tile on a row) */
.ck-facts:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.ck-facts:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:640px){.ck-facts:has(> :nth-child(3):last-child){grid-template-columns:1fr}}
.ck-fact{border-radius:18px;padding:20px 20px 18px;min-width:0;display:flex;flex-direction:column;gap:8px}
.ck-fact .ck-n{font:800 clamp(30px,4vw,38px)/1.05 var(--ck-sans);letter-spacing:-.02em;overflow-wrap:anywhere}
.ck-fact .ck-l{font-size:15px;line-height:1.45;color:var(--ck-body);font-weight:600}
.ck-fact .ck-s{font-size:12.5px;line-height:1.4;color:var(--ck-muted);margin-top:auto}
.ck-fact.blue{background:var(--ck-blue-tint)}.ck-fact.blue .ck-n{color:var(--ck-blue)}
.ck-fact.green{background:var(--ck-green-tint)}.ck-fact.green .ck-n{color:var(--ck-green-ink)}
.ck-fact.purple{background:var(--ck-purple-tint)}.ck-fact.purple .ck-n{color:var(--ck-purple)}
.ck-fact.amber{background:var(--ck-amber-tint)}.ck-fact.amber .ck-n{color:var(--ck-amber-ink)}
.ck-fact.red{background:var(--ck-red-tint)}.ck-fact.red .ck-n{color:var(--ck-red-ink)}

/* ---- points: a list where each point stands on its own ---- */
.ck-points{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ck-points li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:16px 0;border-top:1px solid var(--ck-line)}
.ck-points li:first-child{border-top:0;padding-top:4px}
.ck-points li:last-child{padding-bottom:0}
.ck-points b{display:block;font-size:17px;font-weight:800;color:var(--ck-navy);margin-bottom:2px}
.ck-points span{display:block;font-size:16px;line-height:1.65;color:var(--ck-body)}
.ck-points .ck-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px}
.ck-points .ck-ic svg{width:21px;height:21px}

/* ---- callouts: coloured boxes with an icon ---- */
.ck-call{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;border-radius:18px;padding:20px 22px;min-width:0}
.ck-call b{display:block;font-size:17px;font-weight:800;margin-bottom:4px}
.ck-call p{margin:0;font-size:16px;line-height:1.65}
.ck-call.green{background:var(--ck-green-tint);border:1px solid #BFE9D6}.ck-call.green b{color:var(--ck-green-ink)}.ck-call.green p{color:#1F4D3B}
.ck-call.purple{background:var(--ck-purple-tint);border:1px solid #D6D3FA}.ck-call.purple b{color:var(--ck-purple-ink)}.ck-call.purple p{color:#33307A}
.ck-call.amber{background:var(--ck-amber-tint);border:1px solid #F1DDA6}.ck-call.amber b{color:var(--ck-amber-ink)}.ck-call.amber p{color:#5C4310}
.ck-call.blue{background:var(--ck-blue-tint);border:1px solid #CFE0FB}.ck-call.blue b{color:var(--ck-blue-head)}.ck-call.blue p{color:var(--ck-blue-head)}

/* ---- compare pair ---- */
.ck-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ck-pair > div{border-radius:14px;padding:16px 18px;min-width:0}
.ck-pair b{display:block;font-size:16px;font-weight:800;margin-bottom:4px}
.ck-pair span{display:block;font-size:15px;line-height:1.6;color:var(--ck-body)}
.ck-pair .green{background:var(--ck-green-tint)}.ck-pair .green b{color:var(--ck-green-ink)}
.ck-pair .red{background:var(--ck-red-tint)}.ck-pair .red b{color:var(--ck-red-ink)}
.ck-pair .blue{background:var(--ck-blue-tint)}.ck-pair .blue b{color:var(--ck-blue-ink)}
.ck-pair .purple{background:var(--ck-purple-tint)}.ck-pair .purple b{color:var(--ck-purple)}

/* ---- a regulator in their own words ---- */
.ck-quote{border-left:5px solid var(--ck-blue-bar);background:#fff;border-radius:0 18px 18px 0;padding:20px 24px;border-top:1px solid var(--ck-line);border-right:1px solid var(--ck-line);border-bottom:1px solid var(--ck-line)}
.ck-quote q{display:block;font-family:var(--ck-serif);font-style:italic;font-size:21px;line-height:1.45;color:var(--ck-navy);quotes:"\201C" "\201D"}
.ck-quote cite{display:block;margin-top:10px;font-style:normal;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ck-muted)}

/* ---- bars inside a card ---- */
.ck-bars{display:grid;gap:12px;margin-top:6px}
.ck-row{display:grid;grid-template-columns:minmax(0,11.5em) 1fr;gap:14px;align-items:center;font-size:14.5px;color:var(--ck-body)}
.ck-row b{font-weight:700;color:var(--ck-navy)}
.ck-track{position:relative;height:28px;background:#F1F4F8;border-radius:8px;overflow:hidden}
.ck-fill{position:absolute;left:0;top:0;bottom:0;border-radius:8px;display:flex;align-items:center;justify-content:flex-end;padding-right:10px;color:#fff;font-size:13px;font-weight:800;white-space:nowrap;min-width:3.6em}
.ck-fill.blue{background:var(--ck-blue)}.ck-fill.red{background:var(--ck-red)}.ck-fill.green{background:var(--ck-green-ink)}.ck-fill.grey{background:#8A97AB}.ck-fill.purple{background:var(--ck-purple)}
.ck-src{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--ck-muted)}

/* ---- going deeper (blue, as on the Medicare guide) ---- */
.ck-deeper{margin-top:14px;border-left:4px solid var(--ck-blue-bar);background:var(--ck-blue-tint);border-radius:0 12px 12px 0}
.ck-deeper summary{cursor:pointer;padding:12px 16px;font-size:15px;font-weight:700;color:var(--ck-blue-ink);list-style:none}
.ck-deeper summary::-webkit-details-marker{display:none}
.ck-deeper summary::after{content:" +";}
.ck-deeper[open] summary::after{content:" \2212"}
.ck-deeper > div{padding:0 16px 14px;font-size:15.5px;line-height:1.65;color:var(--ck-body)}
.ck-deeper > div p{margin:0 0 8px}

/* ---- a hand-written note, used once a step at most ---- */
.ck-hand{display:inline-block;font-family:var(--ck-hand);font-size:24px;line-height:1.2;color:#E9785D;transform:rotate(-2deg);margin-top:10px}

/* ---- remember this: the one line to keep ---- */
/* Hunter, note #108 (2026-10-06): "change this green bar here to a lighter green". Light mint with dark green
   words rather than a brighter solid: white text on bright green is too faint to read. */
.ck-remember{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;background:#DDF7EA;border:1px solid #B4EBD1;color:#064E36;border-radius:20px;padding:22px 24px;margin-top:56px}
.ck-remember .ck-ic{background:var(--ck-green);color:#fff}
.ck-remember .ck-k{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ck-green-ink);margin-bottom:4px}
.ck-remember p{margin:0;font-size:18px;line-height:1.55;font-weight:600;color:#064E36;max-width:60ch}

/* ---- tools: the life-guide sliders, restyled to sit in the kit ---- */
main.wrap.ck .lg-tool{background:#fff;border:1px solid var(--ck-line);border-radius:18px;padding:24px 26px;box-shadow:none}
main.wrap.ck .lg-tool .lg-eyebrow{color:var(--ck-purple)}
main.wrap.ck .lg-tool h5{font-family:var(--ck-sans);font-weight:800;font-size:19px;color:var(--ck-navy)}
main.wrap.ck .lg-out{border-radius:14px;background:var(--ck-blue-tint);border:1px solid #CFE0FB;box-shadow:none}
main.wrap.ck .lg-out.lg-warn{background:var(--ck-amber-tint);border-color:#F1DDA6}
main.wrap.ck .lg-out.lg-ok{background:var(--ck-green-tint);border-color:#BFE9D6}
main.wrap.ck .lg-big{color:var(--ck-navy)}

@media (max-width:640px){
  .ck-pair{grid-template-columns:1fr}
  .ck-row{grid-template-columns:1fr;gap:4px}
  .ck-card{padding:20px}
  .ck-head{align-items:flex-start}
  .ck-answer,.ck-call,.ck-remember{grid-template-columns:1fr;gap:10px}
}

/* fixes after the first render (2026-10-06): sources stay small print inside cards; quotes span the column;
   a list of points always sits on its own white card so its icon tiles keep their contrast */
main.wrap.ck .ck-src,main.wrap.ck .ck-card p.ck-src{font-size:13px;line-height:1.55;color:var(--ck-muted);margin:14px 0 0;max-width:none}
.ck-quote{margin:0}
.ck-stack > .ck-points{background:var(--ck-card);border:1px solid var(--ck-line);border-radius:18px;padding:14px 26px 20px}
.ck-stack > .ck-points li:first-child{padding-top:6px}
.ck-pair .amber{background:var(--ck-amber-tint)}.ck-pair .amber b{color:var(--ck-amber-ink)}

.ck-src + p{margin-top:12px}
/* phones: every tile row stacks to one column, whatever the count */
@media (max-width:520px){
  .ck-facts,.ck-facts:has(> :nth-child(4):last-child),.ck-facts:has(> :nth-child(3):last-child){grid-template-columns:1fr}
  .ck-card{padding:18px}
  .ck-stack > .ck-points{padding:10px 18px 16px}
  .ck-head h2{font-size:24px}
}