/* ===========================================================================
   404motivation — the 30-day challenge.

   Loaded after spark.css and depth.css, and only on challenge.html. It adds
   the pieces that page has and the others do not — the ring, the day grid,
   the task panel, the plans — and leaves every inherited surface alone: the
   panels, cards, buttons, pills and poster stage are the world's own, so the
   page reads as another room of the same building rather than a new one.

   Floors:
     · no JavaScript — the tracker and the poster are not drawn at all (they
       cannot work), and the page is the hero, the eight challenges, every
       task in full and the questions. Nothing on it is broken or empty.
     · reduced motion — the ring fills without sweeping, nothing pulses or
       orbits, and no sparks fly. Same page, held still.
   ======================================================================== */

/* The tracker and the poster exist only when the script can run them. The
   class is set in the head, before first paint, so neither appears late. */
html:not(.c-js) .tracker,
html:not(.c-js) .c-press{display:none}

/* --------------------------------------------------------------- hero ---- */
.c-crumb{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray);margin:0 0 1.3rem;
}
.c-crumb a{color:var(--gray);text-decoration:none}
.c-crumb a:hover,.c-crumb a:focus-visible{color:var(--white)}

/* ------------------------------------------------------------ tracker ---- */
.tracker{
  --h:186;--tint:hsl(var(--h) 100% 62%);
  display:grid;gap:clamp(1.2rem,2.6vw,2rem) clamp(1.4rem,4vw,3.2rem);
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"ring" "panel" "meta" "days";
  padding:clamp(1.2rem,3.4vw,2.4rem);
  border-radius:16px;
}
@media (min-width:900px){
  .tracker{
    grid-template-columns:minmax(300px,380px) minmax(0,1fr);
    grid-template-areas:"ring panel" "ring meta" "days days";
    align-items:start;
  }
}
.tracker[data-hue="100"]{--h:100;--tint:hsl(100 100% 55%)}
.tracker[data-hue="26"]{--h:26;--tint:hsl(26 100% 58%)}
.tracker[data-hue="330"]{--h:330;--tint:hsl(330 100% 62%)}

/* the ring */
.ring-box{grid-area:ring;display:flex;justify-content:center}
.ring{position:relative;width:min(100%,380px);aspect-ratio:1/1}
@media (max-width:899px){ .ring{width:min(76vw,320px)} }
.ring-svg{display:block;width:100%;height:100%;overflow:visible}

.ring .orbit{
  fill:none;stroke:rgba(255,255,255,.12);stroke-width:1;stroke-dasharray:2 9;
  transform-box:view-box;transform-origin:200px 200px;
  animation:c-spin 90s linear infinite;
}
.ring .inner{fill:none;stroke:rgba(255,255,255,.06);stroke-width:1}
.ring .seg-track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:24}
.ring .seg{
  fill:none;stroke:url(#c-grad);stroke-width:24;
  stroke-dasharray:1 1;stroke-dashoffset:1;
  filter:url(#c-glow);
  transition:stroke-dashoffset .95s var(--e-out);
}
.ring .seg.on{stroke-dashoffset:0}
.ring .seg-track.next{
  stroke:hsl(var(--h) 100% 62% / .5);
  animation:c-pulse 2.6s ease-in-out infinite;
}
.ring .tick{fill:rgba(255,255,255,.16);transition:fill .5s}
.ring .tick.on{fill:rgba(255,255,255,.85)}
.ring .sel{
  fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;opacity:0;
  transition:opacity .3s;
}
.ring .sel.show{opacity:.9}
.ring .spark{fill:#fff;animation:c-spark .9s var(--e-out) forwards}

.ring-core{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;pointer-events:none;
}
.ring-n{
  display:block;font-family:var(--disp);font-weight:700;
  font-size:clamp(3.6rem,11vw,6.4rem);line-height:.86;letter-spacing:-.05em;
  color:#fff;text-shadow:0 0 34px rgba(255,255,255,.26);
  font-variant-numeric:tabular-nums;
}
.ring-of{
  display:block;margin-top:.8rem;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gray);
}
.tracker.is-done .ring-n{
  background:linear-gradient(96deg,var(--cyan) 6%,#9fe8c9 38%,var(--ember-soft) 72%,var(--ember) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 0 22px rgba(0,240,255,.3));
}
.ring-n.bump{animation:c-bump .6s var(--e-out)}

/* the task panel */
.t-panel{grid-area:panel;min-height:15.5rem;align-self:center}
@media (min-width:900px){ .t-panel{padding-top:.6rem} }
h2.t-kick{
  display:flex;align-items:flex-start;gap:.6rem;
  margin:0 0 1.1rem;font-family:var(--mono);font-weight:400;font-size:.72rem;
  line-height:1.4;letter-spacing:.18em;text-transform:uppercase;color:#a6a6b4;
}
.t-dot{
  width:7px;height:7px;border-radius:50%;flex:none;margin-top:.36em;
  background:var(--tint);box-shadow:0 0 10px var(--tint);
}
.t-task{
  margin:0 0 .9rem;font-family:var(--disp);font-weight:500;
  font-size:clamp(1.35rem,2.7vw,1.95rem);line-height:1.24;letter-spacing:-.012em;
  color:#fff;max-width:30ch;text-wrap:balance;
}
.t-task:focus{outline:none}
.t-task:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
.tracker.is-today .t-task,.tracker.is-done .t-task{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:-.02em;
}
.t-sub{margin:0 0 1.4rem;color:#b6b6c4;max-width:52ch;font-size:1rem}
.t-sub b{color:#fff;font-weight:500}
.t-acts{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.t-acts .btn{min-height:44px;cursor:pointer}

.t-note{
  margin:1.3rem 0 0;padding:.85rem 1.1rem;max-width:52ch;
  border-left:2px solid var(--tint);border-radius:0 10px 10px 0;
  background:linear-gradient(90deg,hsl(var(--h) 100% 60% / .07),transparent);
  color:#d6d6e0;font-size:.95rem;
}
.t-note p{margin:0}
.t-note p + p{margin-top:.7rem}
.t-note .t-acts{margin-top:.8rem}

/* the eight starting points, inside the panel before anything is chosen */
.t-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;width:100%;max-width:560px}
.t-chip{
  --h:186;
  display:flex;align-items:center;gap:.6rem;min-height:46px;padding:.6em .9em;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  text-align:left;color:#d6d6e0;cursor:pointer;border-radius:4px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  box-shadow:var(--edge-lit),0 1px 2px rgba(0,0,0,.35);
  transition:transform .22s var(--e-out),border-color .3s,color .3s,box-shadow .3s;
}
.t-chip::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:hsl(var(--h) 100% 62%);box-shadow:0 0 8px hsl(var(--h) 100% 62% / .8);
}
.t-chip:hover,.t-chip:focus-visible{
  color:#fff;border-color:hsl(var(--h) 100% 70% / .45);transform:translateY(-2px);
  box-shadow:var(--edge-lit),0 8px 18px -10px hsl(var(--h) 100% 55% / .7);
}
@media (max-width:420px){ .t-chips{grid-template-columns:minmax(0,1fr)} }

/* readouts + housekeeping */
.t-meta{grid-area:meta}
.t-read{display:flex;flex-wrap:wrap;gap:1.2rem 2.2rem;margin:0}
.t-read > div{position:relative;padding-top:.8rem;min-width:4.5rem}
.t-read > div::before{content:"";position:absolute;left:0;top:0;width:22px;height:2px;border-radius:2px}
.t-read > div:nth-child(1)::before{background:var(--cyan)}
.t-read > div:nth-child(2)::before{background:var(--green)}
.t-read > div:nth-child(3)::before{background:var(--ember)}
.t-read dt{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray);
}
.t-read dd{
  margin:.35rem 0 0;font-family:var(--disp);font-weight:700;font-size:1.65rem;line-height:1;
  letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums;
}
.t-read dd small{font-family:var(--mono);font-weight:400;font-size:.66rem;letter-spacing:.1em;color:var(--gray);margin-left:.35rem;text-transform:uppercase}

.t-foot{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;margin-top:1rem;align-items:center}
.lnk{
  min-height:44px;padding:0 .1rem;cursor:pointer;background:none;border:0;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:#a6a6b4;text-decoration:underline;text-decoration-color:rgba(255,255,255,.22);
  text-underline-offset:5px;transition:color .2s,text-decoration-color .2s;
}
.lnk:hover,.lnk:focus-visible{color:#fff;text-decoration-color:currentColor}
.t-confirm{
  width:100%;margin:.4rem 0 0;padding:.9rem 1rem;border-radius:10px;
  border:1px solid rgba(255,122,24,.35);background:rgba(255,122,24,.06);
}
.t-confirm p{margin:0 0 .7rem;color:#e6e6ee;font-size:.95rem}
.t-confirm .t-acts .btn{font-size:.7rem}

/* the day grid */
.days-wrap{grid-area:days;padding-top:clamp(.4rem,1.6vw,1rem);border-top:1px solid rgba(255,255,255,.06)}
.days-h{
  margin:0 0 .8rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gray);
}
.days{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
@media (max-width:640px){ .days{grid-template-columns:repeat(6,minmax(0,1fr))} }
.day{
  position:relative;min-height:44px;padding:0;cursor:pointer;border-radius:6px;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--gray);
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.08);
  transition:background .4s,border-color .4s,color .3s,box-shadow .3s,transform .2s var(--e-out);
  font-variant-numeric:tabular-nums;
}
.day:hover{color:#fff;border-color:rgba(255,255,255,.22);transform:translateY(-1px)}
.day.on{
  color:#fff;border-color:rgba(0,240,255,.32);
  background:linear-gradient(135deg,rgba(0,240,255,.20),rgba(159,232,201,.10) 45%,rgba(255,122,24,.16));
}
.day.next{color:#fff;border-color:var(--tint);box-shadow:0 0 0 1px var(--tint) inset,0 0 18px -8px var(--tint)}
.day[aria-pressed="true"]{box-shadow:0 0 0 2px #fff;color:#fff}
.day.next[aria-pressed="true"]{box-shadow:0 0 0 1px var(--tint) inset,0 0 0 2px #fff}
.day:disabled{cursor:default}
.peek{margin:1rem 0 0;color:#c3c3cf;font-size:.98rem;line-height:1.5;min-height:3em;max-width:70ch}
.peek b{
  display:inline-block;margin-right:.6rem;font-family:var(--mono);font-weight:400;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tint);
}

.t-store{
  margin:.8rem 0 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  color:var(--ember-soft);
}

/* --------------------------------------------------------- the choice ---- */
.c-cards{grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}
.c-cards .card > a{cursor:pointer}
.c-st{display:none}
html.c-js .c-st{
  display:block;min-height:1.3em;margin-top:auto;padding-top:1rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray);transform:translateZ(18px);
}
.c-cards .card.is-active{
  border-color:hsl(var(--h) 100% 70% / .4);
  box-shadow:var(--sh-rest),0 0 40px -16px hsl(var(--h) 100% 55% / .55);
}
.c-cards .card.is-active .c-st{color:var(--tint)}
.c-cards .card p{margin-bottom:.2rem}

/* --------------------------------------------------------- the poster ---- */
.c-press .stage > h3,.c-ctl > h3{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gray);margin:0 0 1rem;font-weight:400;
}
.c-press .stage > h3 em{font-style:normal;color:var(--gray);opacity:.8}
.c-ctl .hint{color:var(--gray)}
.c-lab{
  margin:1.2rem 0 .5rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gray);
}
.c-mode{margin:0 0 .7rem}
.c-mode[hidden]{display:none}
.c-mode button{min-height:44px;padding:.4em 1em}
.c-mode button[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.c-ctl .pal button{min-height:44px}
.c-name{margin-top:1.2rem}
.c-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.1rem}
.c-row .btn{flex:1 1 auto;text-align:center;min-height:44px;cursor:pointer}

/* ---------------------------------------------------------- the plans ---- */
.plans{display:grid;gap:.75rem}
.plan{
  --h:186;--tint:hsl(var(--h) 100% 62%);
  border-radius:12px;border:1px solid rgba(255,255,255,.085);
  background:
    linear-gradient(157deg,rgba(255,255,255,.045),rgba(255,255,255,.01) 40%,transparent 64%),
    linear-gradient(157deg,rgba(26,26,36,.78),rgba(11,11,17,.64));
  box-shadow:var(--sh-rest);
  transition:border-color .3s;
}
.plan:nth-child(4n+2){--h:100;--tint:hsl(100 100% 55%)}
.plan:nth-child(4n+3){--h:26;--tint:hsl(26 100% 58%)}
.plan:nth-child(4n+4){--h:330;--tint:hsl(330 100% 62%)}
.plan[open]{border-color:hsl(var(--h) 100% 70% / .28)}
.plan summary{
  list-style:none;cursor:pointer;position:relative;
  display:flex;flex-direction:column;gap:.3rem;
  min-height:44px;padding:1.05rem 3.4rem 1.05rem 1.3rem;border-radius:12px;
}
.plan summary::-webkit-details-marker{display:none}
.plan summary::after{
  content:"+";position:absolute;right:1.3rem;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:1.2rem;line-height:1;color:var(--tint);
  transition:transform .3s var(--e-out);
}
.plan[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.plan .pk{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tint);
}
.plan .pn{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:1.12rem;
  letter-spacing:-.01em;color:#fff;
}
.plan-note{
  margin:0 1.3rem 1rem;padding:.75rem 1rem;max-width:70ch;font-size:.92rem;color:#c3c3cf;
  border-left:2px solid var(--ember);border-radius:0 8px 8px 0;background:rgba(255,122,24,.05);
}
.plan-days{
  margin:0;padding:.2rem 1.3rem 1.4rem 3.1rem;
  columns:2 320px;column-gap:2.6rem;color:#c3c3cf;font-size:.95rem;line-height:1.5;
}
.plan-days li{break-inside:avoid;margin:0 0 .55rem;padding-left:.2rem}
.plan-days li::marker{font-family:var(--mono);font-size:.78rem;color:var(--gray)}
.plan-days li.is-done{color:#8f8f9e}
.plan-days li.is-done::marker{color:var(--tint)}
.plan-days li.is-today{color:#fff}
.plan-days li.is-today::marker{color:var(--tint)}
@media (max-width:520px){ .plan-days{padding-left:2.6rem;padding-right:1rem} }

/* --------------------------------------------------------- questions ----- */
.faq{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.qa{
  padding:1.3rem 1.4rem;border-radius:12px;border:1px solid rgba(255,255,255,.085);
  background:linear-gradient(157deg,rgba(26,26,36,.72),rgba(11,11,17,.6));
  box-shadow:var(--sh-rest);
}
.qa h3{
  margin:0 0 .6rem;font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:1rem;letter-spacing:-.005em;line-height:1.25;color:#fff;
}
.qa p{margin:0;color:#b6b6c4;font-size:.95rem}

/* ------------------------------------------------------------ motion ----- */
@keyframes c-spin{to{transform:rotate(360deg)}}
@keyframes c-pulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes c-spark{
  from{transform:translate(0,0) scale(1);opacity:1}
  to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}
}
@keyframes c-bump{
  0%{transform:translateY(0);opacity:1}
  35%{transform:translateY(-10px);opacity:.4}
  100%{transform:translateY(0);opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .ring .orbit,.ring .seg-track.next,.ring-n.bump{animation:none}
  .ring .seg{transition:none}
  .ring .spark{display:none}
  .day,.t-chip,.plan summary::after{transition:none}
  .day:hover,.t-chip:hover,.t-chip:focus-visible{transform:none}
}