/* ============================================================================
   Atlas Challenges — Daily 3 (AC-2)

   Loaded by challenge.html only. The palette is NOT redefined here: the page
   wears `body.home-dark`, which rebinds the shared tokens (canvas, surface,
   ink, body, muted, hairline) exactly as on the homepage. This file adds the
   components the game has and a few accents drawn from the existing Atlas
   world palette:

     Level 1  mint     (--world-mint)
     Level 2  blue     (the homepage's link blue)
     Level 3  purple   (--world-purple)
     Daily Clear       amber (--world-yellow)

   Every state carries text and a glyph as well as a colour. Motion is only
   added inside `prefers-reduced-motion: no-preference`.
   ========================================================================== */

.challenge-page{
  --ch-l1:#77C9A4;
  --ch-l2:#5B93FF;
  --ch-l3:#B79BEA;
  --ch-amber:#F3CA58;
  --ch-card:#172038;
  --ch-card-2:#1B2540;
  --ch-line:rgba(255,255,255,0.14);
  --ch-line-strong:rgba(255,255,255,0.32);
  --ch-correct:#7FD3A8;
  --ch-miss:#F1A05C;
  position:relative;
}

/* Skip link: the first focusable element, visible when focused. */
.ch-skip{
  position:absolute; left:16px; top:-64px; z-index:100;
  padding:12px 16px; border-radius:12px; background:#fff; color:#0B1220;
  font-weight:500;
}
.challenge-page .ch-skip{color:#0B1220}
.ch-skip:focus,.ch-skip:focus-visible{top:12px; outline:2px solid var(--ch-l2); outline-offset:2px}

.ch-glow{
  position:absolute; inset:0 0 auto 0; height:640px; z-index:0; pointer-events:none;
  background:
    radial-gradient(42% 60% at 78% 8%, rgba(14,92,255,0.22), rgba(14,92,255,0) 70%),
    radial-gradient(34% 44% at 12% 22%, rgba(119,201,164,0.08), rgba(119,201,164,0) 72%);
}
.challenge-page .site-header,.challenge-page .ch-main{position:relative; z-index:1}
.ch-main{padding-block:16px 96px; outline:none}
.ch-container{max-width:1200px}

/* --------------------------------- States --------------------------------- */
.ch-state{padding-block:64px; text-align:center}
.ch-state--card{
  max-width:560px; margin:48px auto 0; padding:48px 24px; border-radius:24px;
  background:var(--ch-card); box-shadow:inset 0 0 0 1px var(--hairline);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.ch-state__title{font-weight:400; font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem); line-height:1.2; letter-spacing:-0.02em; color:var(--ink); outline:none}
.ch-state__text{color:var(--body); max-width:46ch; font-size:1rem; line-height:1.5}
.ch-state__actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:12px}

/* ---------------------------------- Hero ---------------------------------- */
.ch-hero{
  display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:end;
  padding-block:24px 32px;
}
.ch-hero__copy{display:flex; flex-direction:column; gap:8px}
.ch-hero__eyebrow{color:var(--ch-l2)}
.challenge-page .ch-hero__eyebrow{color:var(--ch-l2)}
.ch-hero__title{
  font-weight:500; color:var(--ink); outline:none;
  font-size:clamp(2.25rem,1.6rem + 3vw,3.75rem); line-height:1.04; letter-spacing:-0.035em;
}
.ch-hero__date{font-family:var(--font-mono); font-size:0.875rem; line-height:1.5; color:var(--body)}
.ch-hero__lede{font-size:1.125rem; line-height:1.5; color:var(--body); max-width:40ch}

.ch-progress{
  padding:20px 24px; border-radius:20px;
  background:linear-gradient(160deg, var(--ch-card-2), var(--ch-card));
  box-shadow:inset 0 0 0 1px var(--hairline), 0 18px 50px rgba(0,0,0,0.3);
  display:grid; grid-template-columns:auto 1fr; column-gap:16px; row-gap:6px; align-items:center;
}
.ch-progress__label{grid-column:1 / -1; font-size:0.875rem; color:var(--muted)}
.ch-progress__value{font-size:2.5rem; line-height:1; font-weight:500; color:var(--ink); letter-spacing:-0.03em; font-variant-numeric:tabular-nums}
.ch-progress__of{font-size:1.25rem; color:var(--muted); font-weight:400}
.ch-pips{display:flex; gap:6px; list-style:none; margin:0; padding:0; justify-self:end}
.ch-pips li{width:28px; height:8px; border-radius:99px; background:rgba(255,255,255,0.12)}
.ch-pips li.is-filled{background:var(--ch-l2); box-shadow:0 0 12px rgba(91,147,255,0.5)}
.ch-progress__note{grid-column:1 / -1; font-size:0.875rem; line-height:1.45; color:var(--body)}
.ch-clear{
  grid-column:1 / -1; justify-self:start; display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:99px; font-weight:500; font-size:0.875rem;
  color:#1A1405; background:var(--ch-amber); box-shadow:0 0 24px rgba(243,202,88,0.35);
}
.ch-clear__mark{font-size:1rem; line-height:1}

.ch-signed-out{
  margin:0 0 24px; padding:14px 16px; border-radius:14px; font-size:0.9375rem; line-height:1.5;
  color:var(--body); background:rgba(255,255,255,0.04); box-shadow:inset 0 0 0 1px var(--hairline);
}
.ch-signed-out a{text-decoration:underline; text-underline-offset:3px}

/* ---------------------------------- Cards --------------------------------- */
.ch-cards{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:minmax(0,1fr); gap:16px;
}
.ch-card{
  --ch-accent:var(--ch-l2);
  position:relative; overflow:hidden; border-radius:22px; padding:24px;
  display:flex; flex-direction:column; gap:10px; min-height:100%;
  background:linear-gradient(170deg, var(--ch-card-2) 0%, var(--ch-card) 70%);
  box-shadow:inset 0 0 0 1px var(--hairline), 0 18px 50px rgba(0,0,0,0.28);
}
.ch-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--ch-accent), transparent 85%);
}
.ch-card::after{
  content:""; position:absolute; right:-60px; top:-60px; width:180px; height:180px; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--ch-accent) 22%, transparent), transparent 70%);
}
.ch-card--l1{--ch-accent:var(--ch-l1)}
.ch-card--l2{--ch-accent:var(--ch-l2)}
.ch-card--l3{--ch-accent:var(--ch-l3)}
.ch-card > *{position:relative; z-index:1}
.ch-card__top{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; font-size:0.8125rem; color:var(--muted)}
.ch-card__difficulty{color:var(--ink); font-weight:500}
.ch-card__time{font-family:var(--font-mono); font-size:0.75rem}
.ch-card__title{font-size:1.25rem; line-height:1.3; font-weight:500; letter-spacing:-0.01em; color:var(--ink); margin:4px 0 0}
.ch-card__category{font-size:0.8125rem; color:var(--muted)}
.ch-card__teaser{font-size:0.9375rem; line-height:1.5; color:var(--body)}
.ch-card__foot{margin-top:auto; padding-top:12px; display:flex; flex-direction:column; align-items:stretch; gap:12px}
.ch-card__action{width:100%; min-height:44px}

.ch-level{
  display:inline-flex; align-items:center; padding:4px 10px; border-radius:99px;
  font-family:var(--font-mono); font-size:0.75rem; line-height:1.4; font-weight:500;
  color:var(--ch-accent, var(--ch-l2));
  background:color-mix(in srgb, var(--ch-accent, var(--ch-l2)) 14%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ch-accent, var(--ch-l2)) 45%, transparent);
}
.ch-level--l1{--ch-accent:var(--ch-l1)}
.ch-level--l2{--ch-accent:var(--ch-l2)}
.ch-level--l3{--ch-accent:var(--ch-l3)}

.ch-status{display:flex; align-items:center; gap:8px; font-size:0.875rem; font-weight:500; color:var(--body)}
.ch-status__icon{
  display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  font-size:0.75rem; line-height:1; box-shadow:inset 0 0 0 1.5px currentColor;
}
.ch-status--completed_correct{color:var(--ch-correct)}
.ch-status--completed_incorrect{color:var(--ch-miss)}
.ch-status--not_started{color:var(--muted)}

.ch-footnote{margin-top:24px; font-size:0.875rem; line-height:1.5; color:var(--muted); max-width:70ch}

/* --------------------------------- Puzzle --------------------------------- */
.ch-back{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 0;
  font-size:0.9375rem; font-weight:500;
}
.ch-puzzle__head{padding-block:8px 24px; display:flex; flex-direction:column; gap:12px; max-width:760px}
.ch-puzzle__meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-size:0.875rem; color:var(--muted)}
.ch-puzzle__time{font-family:var(--font-mono); font-size:0.75rem}
.ch-puzzle__title{
  font-weight:500; color:var(--ink); outline:none;
  font-size:clamp(1.75rem,1.35rem + 1.8vw,2.625rem); line-height:1.12; letter-spacing:-0.025em;
}
.ch-puzzle__prompt{font-size:1.0625rem; line-height:1.6; color:var(--body); max-width:65ch}

.ch-puzzle__body{display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start}
.ch-data{display:flex; flex-direction:column; gap:16px; min-width:0}

/* Table: a readable card, not a spreadsheet. */
.ch-table-wrap{
  border-radius:18px; background:var(--ch-card); box-shadow:inset 0 0 0 1px var(--hairline);
  overflow-x:auto; max-width:100%;
}
.ch-table-wrap:focus-visible{outline:2px solid var(--ch-l2); outline-offset:2px}
.ch-table{width:100%; border-collapse:collapse; font-size:0.9375rem; line-height:1.4; font-variant-numeric:tabular-nums}
.ch-table__caption{
  caption-side:top; text-align:left; padding:14px 16px 6px; font-family:var(--font-mono);
  font-size:0.75rem; color:var(--muted);
}
.ch-table th,.ch-table td{padding:12px 16px; text-align:left; white-space:nowrap}
.ch-table thead th{font-weight:500; font-size:0.8125rem; color:var(--muted); border-bottom:1px solid var(--ch-line)}
.ch-table tbody th{font-weight:500; color:var(--ink)}
.ch-table tbody td{color:var(--ink)}
.ch-table tbody tr + tr > *{border-top:1px solid var(--hairline)}
.ch-table .is-num{text-align:right}

/* Dataset tools (AC-4.5): analysis utilities beside the table, not calls to
   action — secondary buttons under a muted label, wrapping on a phone. */
.ch-data-tools{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px}
.ch-data-tools__label{
  margin:0; font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.04em;
  text-transform:uppercase; color:var(--muted);
}
.ch-data-tools__actions{display:flex; flex-wrap:wrap; gap:8px}
.ch-data-tools__btn{min-height:44px}
.ch-data-tools__btn:focus-visible{outline:2px solid #8AB2FF; outline-offset:2px}
.ch-data-tools__status{flex-basis:100%; margin:0; font-size:0.8125rem; line-height:1.45; color:var(--body)}
.ch-data-tools__status:empty{display:none}
.ch-data-tools__status[data-state="error"]{color:var(--ch-miss)}

/* Chart */
.ch-chart{
  margin:0; padding:20px 20px 16px; border-radius:18px; background:var(--ch-card);
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.ch-chart__summary{margin-top:12px; font-size:0.8125rem; line-height:1.45; color:var(--muted)}
/* One grid for every row, so all tracks share one start and one length. */
.ch-bars{display:grid; grid-template-columns:minmax(48px,max-content) minmax(0,1fr) max-content; align-items:center; gap:10px 12px; font-size:0.875rem}
.ch-bars__row{display:contents}
.ch-bars__label{color:var(--body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:14ch}
.ch-bars__track{height:22px; border-radius:6px; background:rgba(255,255,255,0.05); overflow:hidden}
.ch-bars__fill{display:block; height:100%; border-radius:6px; background:linear-gradient(90deg, #2F6BFF, var(--ch-l2))}
.ch-bars__fill.is-negative{background:repeating-linear-gradient(135deg, #7E8BA3 0 6px, #5E6A80 6px 12px)}
.ch-bars__value{font-family:var(--font-mono); font-size:0.8125rem; color:var(--ink); font-variant-numeric:tabular-nums}
.ch-line{display:block; max-width:100%; height:auto; overflow:visible}
.ch-line__base{stroke:rgba(255,255,255,0.18); stroke-width:1}
.ch-line__path{fill:none; stroke:var(--ch-l2); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round}
.ch-line__dot{fill:#12161D; stroke:var(--ch-l2); stroke-width:2}
.ch-line__value{fill:var(--ink); font-family:var(--font-mono); font-size:12px}
.ch-line__label{fill:var(--muted); font-size:12px}

/* Answer column */
.ch-answer{display:flex; flex-direction:column; gap:16px; min-width:0}
.ch-form{
  padding:20px; border-radius:20px; background:linear-gradient(170deg, var(--ch-card-2), var(--ch-card));
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.ch-options{border:0; margin:0; padding:0; min-width:0}
.ch-options__legend{padding:0; margin-bottom:12px; font-size:1rem; font-weight:500; color:var(--ink)}
.ch-options__list{display:flex; flex-direction:column; gap:10px}

.ch-option{
  position:relative; display:grid; grid-template-columns:22px minmax(0,1fr); align-items:center; gap:12px;
  min-height:52px; padding:12px 16px; border-radius:14px; cursor:pointer;
  background:rgba(255,255,255,0.03); box-shadow:inset 0 0 0 1px var(--ch-line);
  color:var(--ink); font-size:1rem; line-height:1.4;
}
.ch-option:hover{box-shadow:inset 0 0 0 1px var(--ch-line-strong); background:rgba(255,255,255,0.05)}
/* The native radio stays the focusable, announced control; it is only
   visually replaced by the ring beside it. */
.ch-option__input{
  position:absolute; left:16px; top:50%; width:22px; height:22px; margin:-11px 0 0; opacity:0; cursor:pointer;
}
.ch-option__mark{
  width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 2px #8D98AB;
  display:grid; place-items:center;
}
.ch-option__mark::after{content:""; width:10px; height:10px; border-radius:50%; background:transparent}
.ch-option__input:checked + .ch-option__mark{box-shadow:inset 0 0 0 2px var(--ch-l2)}
.ch-option__input:checked + .ch-option__mark::after{background:var(--ch-l2)}
.ch-option:has(.ch-option__input:checked){
  background:rgba(91,147,255,0.12); box-shadow:inset 0 0 0 2px var(--ch-l2);
}
.ch-option:has(.ch-option__input:focus-visible){outline:2px solid #8AB2FF; outline-offset:2px}
.ch-option__input:focus-visible + .ch-option__mark{outline:2px solid #8AB2FF; outline-offset:3px}
.ch-option:has(.ch-option__input:disabled){cursor:default}
.ch-option:has(.ch-option__input:disabled):hover{background:rgba(255,255,255,0.03); box-shadow:inset 0 0 0 1px var(--ch-line)}
.ch-option__tags{grid-column:2; display:flex; flex-wrap:wrap; gap:6px}
.ch-tag{
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:99px;
  font-size:0.75rem; line-height:1.5; font-weight:500;
}
.ch-tag--yours{color:var(--ink); box-shadow:inset 0 0 0 1px var(--ch-line-strong)}
.ch-tag--correct{color:#0D2A1D; background:var(--ch-correct)}
/* Review marks outrank the selection ring (hence the list prefix). */
.ch-options__list .ch-option.is-correct,.ch-options__list .ch-option.is-correct:hover{box-shadow:inset 0 0 0 2px var(--ch-correct); background:rgba(127,211,168,0.08)}
.ch-options__list .ch-option.is-yours:not(.is-correct),.ch-options__list .ch-option.is-yours:not(.is-correct):hover{box-shadow:inset 0 0 0 2px var(--ch-miss); background:rgba(241,160,92,0.07)}
.ch-options__list .ch-option.is-correct .ch-option__input:checked + .ch-option__mark{box-shadow:inset 0 0 0 2px var(--ch-correct)}
.ch-options__list .ch-option.is-correct .ch-option__input:checked + .ch-option__mark::after{background:var(--ch-correct)}
.ch-options__list .ch-option.is-yours:not(.is-correct) .ch-option__input:checked + .ch-option__mark{box-shadow:inset 0 0 0 2px var(--ch-miss)}
.ch-options__list .ch-option.is-yours:not(.is-correct) .ch-option__input:checked + .ch-option__mark::after{background:var(--ch-miss)}

.ch-submit{margin-top:16px; display:flex; flex-direction:column; gap:8px}
.ch-submit__btn{width:100%; height:48px; font-size:1rem}
.challenge-page .ch-submit__btn:disabled{opacity:1; background:#2A3345; color:#A7B1C2; cursor:not-allowed}
.ch-submit__hint{font-size:0.8125rem; line-height:1.45; color:var(--muted); text-align:center}

.ch-signin,.ch-error{
  padding:16px 18px; border-radius:16px; display:flex; flex-direction:column; gap:10px;
  font-size:0.9375rem; line-height:1.5;
}
.ch-signin{background:rgba(91,147,255,0.10); box-shadow:inset 0 0 0 1px rgba(91,147,255,0.45)}
.ch-signin__title{font-weight:500; color:var(--ink)}
.ch-signin__text{color:var(--body)}
.ch-signin__actions,.ch-error__actions{display:flex; flex-wrap:wrap; gap:10px}
.ch-error{background:rgba(241,160,92,0.10); box-shadow:inset 0 0 0 1px rgba(241,160,92,0.5); color:var(--ink)}
.ch-error__actions:empty{display:none}

/* Result */
.ch-result{
  --ch-verdict:var(--ch-correct);
  padding:24px 20px; border-radius:20px; display:flex; flex-direction:column; gap:16px;
  background:linear-gradient(170deg, var(--ch-card-2), var(--ch-card));
  box-shadow:inset 0 0 0 1px var(--hairline), inset 0 3px 0 0 var(--ch-verdict);
}
.ch-result[data-correct="false"]{--ch-verdict:var(--ch-miss)}
.ch-result__verdict{display:flex; align-items:center; gap:12px}
.ch-result__icon{
  display:inline-grid; place-items:center; width:40px; height:40px; border-radius:50%; flex:none;
  font-size:1.25rem; color:var(--ch-verdict); box-shadow:inset 0 0 0 2px var(--ch-verdict);
  background:color-mix(in srgb, var(--ch-verdict) 12%, transparent);
}
.ch-result__title{font-size:1.75rem; line-height:1.1; font-weight:500; letter-spacing:-0.02em; color:var(--ink); outline:none}
.ch-result__dup{font-size:0.875rem; color:var(--body)}
.ch-result__facts{margin:0; display:grid; grid-template-columns:minmax(0,1fr); gap:10px}
.ch-result__fact{padding:12px 14px; border-radius:12px; background:rgba(255,255,255,0.04); box-shadow:inset 0 0 0 1px var(--hairline)}
.ch-result__fact dt{font-size:0.75rem; color:var(--muted); margin-bottom:2px}
.ch-result__fact dd{margin:0; font-size:1rem; font-weight:500; color:var(--ink)}
.ch-result__explain-title{font-size:0.875rem; font-weight:500; color:var(--muted); margin:0 0 6px}
.ch-result__explain p{font-size:1rem; line-height:1.6; color:var(--ink); max-width:65ch}
.ch-result__progress{font-size:0.9375rem; color:var(--body)}
.ch-clear--result{align-self:stretch; border-radius:14px; padding:10px 14px; line-height:1.4}
.ch-result__actions{display:flex; flex-direction:column; gap:10px}
.ch-result__actions .btn{width:100%}

/* ------------------------------- Breakpoints ------------------------------ */
@media (min-width:600px){
  .ch-result__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch-result__actions{flex-direction:row; flex-wrap:wrap}
  .ch-result__actions .btn{width:auto}
}
@media (min-width:760px){
  .ch-hero{grid-template-columns:minmax(0,1fr) minmax(260px,340px); padding-block:40px 40px}
  .ch-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ch-card{padding:22px}
}
@media (min-width:1024px){
  .ch-puzzle__body{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:32px}
  .ch-answer{position:sticky; top:24px}
  .ch-card{padding:28px}
}
@media (max-width:599px){
  .ch-main{padding-bottom:64px}
  .ch-table th,.ch-table td{padding:10px 12px}
  .ch-form{padding:16px}
  .ch-state__actions{flex-direction:column; width:100%}
  .ch-nav-back{display:none}
}

/* ---------------------------------- Motion -------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .ch-card{transition:transform var(--duration-card) var(--ease-standard), box-shadow var(--duration-card) var(--ease-standard)}
  .ch-card:hover{transform:translateY(-2px)}
  .ch-option{transition:background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard)}
  .ch-result:not([hidden]){animation:ch-rise 320ms var(--ease-standard) both}
  .ch-bars__fill{animation:ch-grow 520ms var(--ease-standard) both; transform-origin:left center}
}
@keyframes ch-rise{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
@keyframes ch-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ============================================================================
   AC-3 — engagement layer: streak, Daily Clear, share, archive

   Electric blue carries the streak and progress; amber is spent on Daily
   Clear and nothing else. Every state here is text first — the dot, star and
   pips are aria-hidden decoration beside words that say the same thing.
   ========================================================================== */

/* Streak — compact, one line of fact and one line of help. */
.ch-streak{
  margin-top:8px; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:10px; row-gap:2px;
  align-items:center; justify-self:start; max-width:100%;
}
.ch-streak__mark{
  width:12px; height:12px; border-radius:50%;
  background:var(--ch-l2); box-shadow:0 0 0 4px rgba(91,147,255,0.18), 0 0 14px rgba(91,147,255,0.55);
}
.ch-streak__text{font-size:1rem; line-height:1.4; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums}
.ch-streak__hint{grid-column:2; font-size:0.8125rem; line-height:1.45; color:var(--muted)}
.ch-streak[data-state="none"] .ch-streak__mark{background:transparent; box-shadow:inset 0 0 0 2px var(--ch-l2)}
.ch-streak[data-state="unavailable"] .ch-streak__mark{background:transparent; box-shadow:inset 0 0 0 2px #8D98AB}
.ch-streak[data-state="unavailable"] .ch-streak__text{color:var(--body); font-weight:400}

/* Daily Clear — the one gold moment. Replaces AC-2's pill. */
.ch-progress.is-clear{
  box-shadow:inset 0 0 0 1px rgba(243,202,88,0.55), 0 18px 50px rgba(0,0,0,0.3), 0 0 40px rgba(243,202,88,0.10);
}
.ch-clear{
  grid-column:1 / -1; justify-self:stretch; display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:14px; font-weight:400; font-size:0.875rem;
  color:var(--ink); background:linear-gradient(120deg, rgba(243,202,88,0.16), rgba(243,202,88,0.05));
  box-shadow:inset 0 0 0 1px rgba(243,202,88,0.6);
}
.ch-clear[hidden]{display:none}
.ch-clear__mark{
  flex:none; display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%;
  font-size:1rem; line-height:1; color:#1A1405; background:var(--ch-amber);
  box-shadow:0 0 18px rgba(243,202,88,0.45);
}
.ch-clear__body{display:flex; flex-direction:column; gap:2px; min-width:0}
.ch-clear__title{font-size:1rem; line-height:1.3; font-weight:500; color:var(--ch-amber); letter-spacing:-0.005em}
.ch-clear__text{font-size:0.8125rem; line-height:1.45; color:var(--body)}
.ch-clear--result{align-self:stretch; padding:12px 14px}

/* Share */
.ch-share{grid-column:1 / -1; display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:4px}
.ch-share[hidden]{display:none}
.ch-share__btn{min-height:44px}
.ch-share__btn:focus-visible{outline:2px solid #8AB2FF; outline-offset:2px}
.ch-share__status{font-size:0.8125rem; line-height:1.45; color:var(--body)}
.ch-share__status:empty{display:none}
.ch-share__status[data-state="error"]{color:var(--ch-miss)}
.ch-share__fallback{display:flex; flex-direction:column; gap:6px; width:100%}
.ch-share__fallback[hidden]{display:none}
.ch-share__label{font-size:0.8125rem; color:var(--muted)}
.ch-share__text{
  width:100%; resize:vertical; padding:10px 12px; border-radius:10px; border:0;
  font-family:var(--font-mono); font-size:0.875rem; line-height:1.5; color:var(--ink);
  background:rgba(0,0,0,0.25); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.42);
}
.ch-share__text:focus-visible{outline:2px solid #8AB2FF; outline-offset:2px}

/* Archive-set landing */
#chLanding > .ch-back{margin-top:8px}
#chLanding > .ch-back[hidden]{display:none}
#chLanding[data-mode="archive"] .ch-hero__eyebrow{color:var(--muted)}

/* Archive list */
.ch-archive{margin-top:64px; display:flex; flex-direction:column; gap:16px}
.ch-archive[hidden]{display:none}
.ch-archive__head{display:flex; flex-direction:column; gap:6px}
.ch-archive__title{font-size:clamp(1.375rem,1.2rem + 0.8vw,1.75rem); line-height:1.2; font-weight:500; letter-spacing:-0.02em; color:var(--ink)}
.ch-archive__lede{font-size:0.9375rem; line-height:1.5; color:var(--body); max-width:65ch}
.ch-archive__status{font-size:0.9375rem; line-height:1.5; color:var(--body)}
.ch-archive__status[hidden]{display:none}
.ch-archive__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
.ch-day__link{
  display:flex; flex-direction:column; gap:10px; height:100%; min-height:44px; padding:14px 16px;
  border-radius:16px; color:var(--ink); text-decoration:none;
  background:linear-gradient(170deg, var(--ch-card-2), var(--ch-card));
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.ch-day__link:hover{box-shadow:inset 0 0 0 1px var(--ch-line-strong)}
.ch-day__link:focus-visible{outline:2px solid #8AB2FF; outline-offset:2px}
.ch-day.is-clear .ch-day__link{box-shadow:inset 0 0 0 1px rgba(243,202,88,0.55)}
.ch-day__when{display:flex; flex-direction:column; gap:2px}
.ch-day__date{font-size:1.125rem; line-height:1.2; font-weight:500; letter-spacing:-0.01em; color:var(--ink)}
.ch-day__weekday{font-size:0.8125rem; line-height:1.4; color:var(--muted)}
.ch-day__pips{display:flex; gap:4px}
.ch-day__pips span{flex:1 1 0; max-width:28px; height:6px; border-radius:99px; background:rgba(255,255,255,0.12)}
.ch-day__pips span.is-filled{background:var(--ch-l2)}
.ch-day.is-clear .ch-day__pips span.is-filled{background:var(--ch-amber)}
.ch-day__state{font-size:0.8125rem; line-height:1.4; color:var(--body)}
.ch-day[data-state="unavailable"] .ch-day__state,.ch-day[data-state="loading"] .ch-day__state{color:var(--muted)}
.ch-day__clear{font-size:0.8125rem; line-height:1.4; font-weight:500; color:var(--ch-amber)}

@media (min-width:600px){
  .ch-archive__list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:900px){
  .ch-archive__list{grid-template-columns:repeat(5,minmax(0,1fr))}
}

@media (prefers-reduced-motion:no-preference){
  .ch-day__link{transition:box-shadow var(--duration-fast) var(--ease-standard)}
  .ch-clear:not([hidden]) .ch-clear__mark{animation:ch-clear-in 480ms var(--ease-standard) both}
}
@keyframes ch-clear-in{from{transform:scale(0.6); opacity:0}to{transform:none; opacity:1}}