/* Escape Tilt City: Training Plan (planner.js). Uses the shell's twin tokens (--accent steel, --gold, --paper, --line). */

/* ---------- the quiz: one question a screen, inside the panel ---------- */
.pl-quiz{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;overflow:auto;padding:4px 2px 2px;max-width:760px;width:100%;margin:0 auto}
.pl-quiz[hidden],.planp[hidden]{display:none!important}
.pl-qtop{display:flex;align-items:center;justify-content:space-between}
.pl-step{font:600 10.5px var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.pl-x{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--muted);font-size:14px;cursor:pointer}
.pl-prog{height:5px;border-radius:9px;background:var(--tint);overflow:hidden;flex:none}
.pl-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hi));border-radius:9px;transition:width .25s}
.pl-q{font:600 26px/1.2 var(--disp);color:var(--ink);margin-top:6px}
.pl-sub{font-size:14px;color:var(--muted);margin-top:-6px}
.pl-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;align-content:start}
.pl-opts.days{grid-template-columns:repeat(7,minmax(0,1fr))}
.pl-opt{min-height:62px;padding:10px 14px;border-radius:16px;border:1px solid var(--line);background:var(--paper);color:var(--ink);text-align:left;display:flex;flex-direction:column;justify-content:center;gap:2px;cursor:pointer;
  box-shadow:0 2px 8px rgba(var(--shade),.05);transition:border-color .15s,background .15s,transform .1s}
.pl-opt b{font:600 16.5px var(--disp)}
.pl-opt small{font-size:12.5px;color:var(--muted)}
.pl-opt:hover{border-color:var(--accent-hi)}
.pl-opt:active{transform:scale(.98)}
.pl-opt[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 6px 16px rgba(var(--glow),.22)}
.pl-opt[aria-pressed="true"] small{color:var(--on-accent);opacity:.85}
.pl-opts.days .pl-opt{align-items:center;text-align:center;padding:10px 4px}
.pl-qnav{display:flex;gap:10px;justify-content:space-between;margin-top:auto;padding-top:4px}
.pl-qnav .btn{min-width:110px;cursor:pointer}
.pl-qnav .btn[disabled]{opacity:.4;cursor:default}
.pl-build{flex:1;display:grid;place-content:center;justify-items:center;gap:6px;text-align:center}
.pl-build img{width:110px;height:110px;object-fit:cover;object-position:top;border-radius:50%;background:var(--tint);border:3px solid var(--paper);box-shadow:0 6px 18px rgba(var(--shade),.12)}
.pl-build b{font:600 20px var(--disp);margin-top:6px}.pl-build small{color:var(--muted);font-size:14px}
.pl-spin{width:26px;height:26px;border-radius:50%;border:3px solid var(--tint);border-top-color:var(--accent);margin-top:6px;animation:plspin .8s linear infinite}
@keyframes plspin{to{transform:rotate(360deg)}}

/* ---------- the plan: today's card (in the hero slot) ---------- */
.planp .hero[data-pl]{display:flex;flex-direction:column;align-content:stretch;padding:16px 18px;width:360px;min-width:0;overflow:auto;scrollbar-width:thin;justify-items:stretch}
.pl-card{display:flex;flex-direction:column;gap:10px;min-height:0}
.pl-th{display:flex;align-items:center;gap:12px}
.pl-th>div{display:flex;flex-direction:column;min-width:0}
.pl-th small{font:600 10.5px var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.pl-th b{font:600 21px/1.15 var(--disp);color:var(--ink)}
.pl-th span{font-size:13px;color:var(--muted)}
.pl-ring{--p:0;flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--tint) 0)}
.pl-ring b{width:46px;height:46px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font:700 14px var(--disp)!important;color:var(--accent-ink)!important}
.pl-ring.rest{background:var(--gold-tint)}.pl-ring.rest b{font-size:11.5px!important;color:var(--gold)!important}
.pl-ss{list-style:none;display:grid;gap:7px;margin:0;padding:0}
.pl-s{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:0 2px 8px rgba(var(--shade),.05)}
.pl-st{display:flex;flex-direction:column;min-width:0}
.pl-st small{font:600 10px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.pl-st b{font:600 15px/1.2 var(--disp);color:var(--ink)}
.pl-st span{font-size:12.5px;line-height:1.3;color:var(--muted)}
.pl-ck{width:30px;height:30px;border-radius:50%;border:2px solid var(--dash);background:var(--paper);display:grid;place-items:center;cursor:pointer;padding:0}
.pl-ck svg{width:16px;height:16px;fill:none;stroke:transparent;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pl-ck[aria-pressed="true"]{background:var(--good);border-color:var(--good)}
.pl-ck[aria-pressed="true"] svg{stroke:#fff}
.pl-s.done{background:var(--bg)}
.pl-s.done .pl-st b{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--soft)}
.pl-go{min-height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--accent);background:transparent;color:var(--accent-ink);font:600 13px var(--disp);cursor:pointer}
.pl-go:hover{background:var(--accent);color:var(--on-accent)}
.pl-restp{font-size:14px;color:var(--muted);padding:6px 2px}
.pl-rule{font-size:12.5px;color:var(--ink);background:var(--gold-tint);border-radius:12px;padding:7px 10px;line-height:1.35}
.pl-rule b{font:600 10px var(--disp);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-right:4px}
.pl-note{font-size:13px;color:var(--muted);line-height:1.4;border-left:3px solid var(--brandgold,var(--gold));padding-left:9px}
.pl-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.pl-act .btn{min-height:38px;font-size:13.5px;padding:0 14px;flex:1;cursor:pointer;white-space:nowrap}
.pl-act .btn.ghost{background:transparent;color:var(--muted)}
.pl-ai{font:600 10px var(--disp);letter-spacing:.12em;color:var(--soft)}
.pl-ai::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--soft);margin:0 4px 1px 0;vertical-align:middle}
.pl-ai.on{color:var(--good)}.pl-ai.on::before{background:var(--good)}

/* ---------- the week list (the shell's .week, made tappable) ---------- */
.week li.pl-day{cursor:pointer}
.week li.pl-day.sel:not(.now){border-color:var(--accent-hi);box-shadow:0 0 0 1px var(--accent-hi) inset}
.week li.pl-day .dc i.ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 40%,var(--line))}
.week li.pl-day.all .dd::after{content:" ✓";color:var(--good)}

@media (min-width:900px), (orientation:landscape) and (max-height:500px){.pl-quiz{justify-content:center;padding-bottom:40px}.pl-qnav{margin-top:14px}}
@media (max-width:899px) and (min-height:501px){
  .pl-q{font-size:21px}
  .pl-opts{grid-template-columns:1fr 1fr;gap:8px}
  .pl-opts.days{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pl-opt{min-height:54px;padding:8px 12px}
  .pl-opt b{font-size:15px}
  .planp .hero[data-pl]{width:auto;padding:12px;overflow:visible}
  .pl-th b{font-size:18px}
  .pl-ring{width:50px;height:50px}.pl-ring b{width:40px;height:40px}
}

/* v22.5.2: the quiz floats as a modal over the whole site (planner.js puts it on <body>); a dimmed, blurred backdrop closes it */
.pl-qbd{position:fixed;inset:0;z-index:58;background:rgba(6,10,16,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pl-qbd[hidden]{display:none}
body>.pl-quiz{position:fixed;z-index:59;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,calc(100vw - 48px));max-height:calc(100dvh - 96px);flex:none;margin:0;
  padding:18px 20px 20px;border-radius:22px;overflow:auto;overscroll-behavior:contain;background:rgba(250,252,254,.94);border:1px solid rgba(255,255,255,.7);box-shadow:0 24px 70px rgba(0,0,0,.4)}
:root[data-mode="dark"] body>.pl-quiz{background:rgba(18,25,33,.92);border-color:rgba(255,255,255,.12)}
body>.pl-quiz .pl-qnav{margin-top:14px}
body>.pl-quiz .pl-build{min-height:260px}
body>.pl-quiz .pl-x{flex:none;display:grid;place-items:center;width:40px;height:40px;touch-action:manipulation}
body.pl-qon{overflow:hidden}
@media (max-width:899px) and (min-height:501px){
  body>.pl-quiz{left:12px;right:12px;top:max(12px,env(safe-area-inset-top));bottom:auto;transform:none;width:auto;max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:14px 14px 16px;border-radius:20px}
}
@media (orientation:landscape) and (max-height:500px){body>.pl-quiz{max-height:calc(100dvh - 24px);padding:12px 16px 14px}}