/* ===================================================================
   Study plan block + wizard (js/plan-ui.js). Colours come from the
   site's tokens (css/styles.css), so dark mode follows on its own.
=================================================================== */

/* plan mode: the two old top cards step aside, the plan takes the row */
.dash-grid.plan-mode{ grid-template-columns:1fr; }
.dash-grid.plan-mode > .card:not(.plan-block){ display:none !important; }
/* the journal now lives inside the plan, so its header button goes */
body.plan-on #journalOpenBtn{ display:none !important; }

.plan-block{ padding:24px 26px; }
.pb-link{ background:none; border:none; padding:0; font:inherit; font-weight:800; color:var(--coral-deep); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.pb-admin{ margin:18px 0 0; font-size:.78rem; color:var(--muted); text-align:right; }
.pb-admin .pb-link{ font-size:.78rem; }

/* ---- empty state ---- */
.pb-empty{ max-width:640px; }
.pb-empty h2{ font-family:'Baloo 2',ui-rounded,system-ui,sans-serif; font-size:1.5rem; margin:16px 0 6px; }
.pb-empty p{ color:var(--muted); margin:0 0 14px; }
.pb-empty-list{ list-style:none; padding:0; margin:0 0 22px; display:grid; gap:10px; }
.pb-empty-list li{ padding:12px 14px; border-radius:var(--radius-sm); background:var(--cream); border:1px solid var(--line); }

/* ---- head ---- */
.pb-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.pb-goal{ font-family:'Baloo 2',ui-rounded,system-ui,sans-serif; font-size:1.35rem; line-height:1.2; margin:12px 0 8px; }
.pb-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.pb-chip{ font-size:.8rem; font-weight:700; padding:5px 11px; border-radius:999px; background:var(--cream-2); color:var(--ink); }
.pb-chip-goal{ background:var(--coral); color:#fff; }
.pb-edit{ white-space:nowrap; margin-top:6px; }
.pb-head-btns{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.pb-reset{ white-space:nowrap; font-weight:700; color:var(--muted); }
.pb-reset-box{ margin:-6px 0 18px; padding:14px 16px; border-radius:var(--radius-sm); background:var(--cream); border:1.5px solid var(--coral); }
.pb-reset-box p{ margin:0 0 12px; }
.pb-reset-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.pb-reset-actions .pb-link{ font-size:.85rem; color:var(--muted); }

/* ---- two columns: journal | plan ---- */
.pb-grid{ display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:22px; align-items:start; }
.pb-cal{ position:sticky; top:84px; }
.pb-journal{ display:block; width:100%; height:760px; border:0; border-radius:var(--radius-sm); background:var(--cream); }
.pb-main{ display:grid; gap:16px; min-width:0; }

.pb-sec{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px; background:var(--surface); }
.pb-sec h3{ font-family:'Baloo 2',ui-rounded,system-ui,sans-serif; font-size:1.05rem; margin:0; }
.pb-sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pb-sub{ font-weight:600; color:var(--muted); font-size:.92rem; }
.pb-min-total{ font-weight:800; font-size:.85rem; color:var(--muted); }
.pb-weekline{ margin:4px 0 12px; font-size:.86rem; color:var(--muted); }
.pb-tag{ display:inline-block; font-size:.7rem; font-weight:800; padding:2px 8px; border-radius:999px; background:var(--cream-2); color:var(--ink); }
.pb-tag-up{ background:var(--sun); color:var(--ink-solid); }
.pb-note{ margin:10px 0 0; font-size:.84rem; padding:10px 12px; border-radius:10px; background:var(--cream); border-left:4px solid var(--sun-deep); }

/* today's steps */
.pb-steps{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pb-step{ display:grid; grid-template-columns:34px 1fr auto auto; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; border:1.5px solid var(--line); background:var(--paper); }
.pb-step.open{ border-color:var(--coral); border-bottom-left-radius:0; border-bottom-right-radius:0; }
.pb-step.done{ opacity:.62; }
.pb-step.done .pb-step-text b{ text-decoration:line-through; text-decoration-thickness:2px; }
.pb-tick{ width:34px; height:34px; border-radius:50%; border:2px solid var(--ink); background:transparent; color:var(--ink); font-weight:800; cursor:pointer; font-family:inherit; }
.pb-step.done .pb-tick{ background:var(--sun); border-color:var(--sun); color:var(--ink-solid); }
.pb-step-text{ min-width:0; }
.pb-step-text b{ display:block; font-size:.95rem; }
.pb-step-text span{ display:block; font-size:.8rem; color:var(--muted); line-height:1.35; margin-top:2px; }
.pb-step-min{ font-size:.75rem; font-weight:800; color:var(--muted); white-space:nowrap; }
.pb-open{ padding:7px 14px !important; font-size:.8rem !important; white-space:nowrap; }
.pb-open-none{ width:1px; }
.pb-done-msg{ margin:12px 0 0; font-weight:800; }

/* an app opened under its step */
.pb-app{ list-style:none; margin-top:-8px; border:1.5px solid var(--coral); border-top:none; border-radius:0 0 12px 12px; overflow:hidden; background:var(--surface); }
.pb-app-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; background:var(--cream); font-size:.82rem; font-weight:800; flex-wrap:wrap; }
.pb-app-bar small{ font-weight:600; color:var(--muted); }
.pb-app-actions{ display:flex; align-items:center; gap:14px; }
.pb-app-actions .pb-link{ font-size:.8rem; }
.pb-x{ border:none; background:var(--ink-solid); color:#fff; width:28px; height:28px; border-radius:50%; cursor:pointer; font-weight:800; }
.pb-app iframe{ display:block; width:100%; border:0; }
/* the step's timer: a ring that fills as the minutes pass */
.pb-timer{ display:inline-flex; align-items:center; gap:8px; margin-left:auto; padding:4px 12px 4px 4px; border-radius:999px; background:var(--surface); border:1.5px solid var(--line);
  --pb-t:0; background-image:linear-gradient(90deg, rgba(255,194,75,.35) calc(var(--pb-t) * 100%), transparent 0); }
.pb-tbtn{ width:28px; height:28px; border-radius:50%; border:none; background:var(--ink-solid); color:#fff; font-size:.72rem; font-weight:800; cursor:pointer; line-height:1; }
.pb-tval{ font-family:'Baloo 2',ui-rounded,system-ui,sans-serif; font-size:1.05rem; min-width:3.2em; font-variant-numeric:tabular-nums; }
.pb-timer small{ color:var(--muted); font-weight:700; }
.pb-timer.up{ border-color:var(--coral); background:var(--coral); color:#fff; }
.pb-timer.up small{ color:#fff; }
.pb-timer.up .pb-tbtn{ background:#fff; color:var(--coral-deep); }
.pb-link.pb-ready{ background:var(--sun); color:var(--ink-solid); text-decoration:none; padding:4px 10px; border-radius:999px; animation:pbPulse 1.2s ease-in-out 3; }
@keyframes pbPulse{ 50%{ transform:scale(1.08); } }
.pb-app--full{ position:fixed; inset:0; z-index:1200; margin:0; border:none; border-radius:0; display:flex; flex-direction:column; }
.pb-app--full iframe{ flex:1; height:auto !important; }
body.pb-full-on{ overflow:hidden; }

/* check-in */
.pb-checkin{ border:2px solid var(--sun-deep); background:var(--cream); }
.pb-checkin p{ margin:4px 0 10px; font-size:.86rem; color:var(--muted); }
.pb-ci-days{ display:block; font-weight:700; font-size:.9rem; margin-bottom:10px; }
.pb-ci-days select{ font:inherit; padding:4px 8px; border-radius:8px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); }
.pb-ci-days small{ color:var(--muted); font-weight:600; }
.pb-ci-feel{ display:flex; flex-wrap:wrap; gap:8px; }
.pb-feel{ flex:1 1 120px; padding:10px 12px; border-radius:12px; border:1.5px solid var(--ink); background:var(--surface); color:var(--ink); font:inherit; font-weight:800; cursor:pointer; }
.pb-feel:hover{ background:var(--ink-solid); color:#fff; }

/* progress, from the plan */
.pb-progress h3{ margin-bottom:10px; }
.pb-prog-row{ display:flex; align-items:center; gap:10px; font-size:.86rem; font-weight:700; margin-bottom:8px; }
.pb-prog-row b{ margin-left:auto; }
.pb-dots{ display:flex; gap:6px; }
.pb-dot{ width:14px; height:14px; border-radius:50%; border:2px solid var(--line); }
.pb-dot.on{ background:var(--coral); border-color:var(--coral); }
.pb-bar-row{ margin-top:8px; }
.pb-bar-label{ display:flex; justify-content:space-between; gap:10px; font-size:.84rem; font-weight:800; }
.pb-bar-label small{ font-weight:600; color:var(--muted); }
.pb-bar-row .progress-bar{ margin:6px 0 0; height:12px; }
.pb-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:14px; }
.pb-stat{ text-align:center; padding:10px 6px; border-radius:12px; background:var(--cream); }
.pb-stat b{ display:block; font-family:'Baloo 2',ui-rounded,system-ui,sans-serif; font-size:1.4rem; line-height:1.1; }
.pb-stat span{ font-size:.72rem; font-weight:700; color:var(--muted); }

/* the road to the goal */
.pb-road summary{ cursor:pointer; list-style:none; }
.pb-road summary::-webkit-details-marker{ display:none; }
.pb-road summary h3::after{ content:" ▾"; color:var(--muted); font-size:.8rem; }
.pb-road:not([open]) summary h3::after{ content:" ▸"; }
.pb-weeks{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
.pb-week{ display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:10px; padding:7px 10px; border-radius:10px; }
.pb-week.now{ background:var(--cream-2); }
.pb-week.past{ opacity:.6; }
.pb-week.goal .pb-wn{ background:var(--coral); color:#fff; border-color:var(--coral); }
.pb-wn{ display:inline-flex; align-items:center; justify-content:center; height:28px; border-radius:999px; border:1.5px solid var(--line); font-size:.74rem; font-weight:800; }
.pb-wtext b{ display:block; font-size:.86rem; }
.pb-wtext small{ color:var(--muted); font-size:.74rem; }
.pb-wstate{ font-weight:800; }
.pb-now{ font-size:.7rem; padding:2px 8px; border-radius:999px; background:var(--coral); color:#fff; }

@media (max-width:900px){
  .pb-grid{ grid-template-columns:1fr; }
  .pb-cal{ position:static; order:2; }
}
@media (max-width:560px){
  .plan-block{ padding:18px 14px; }
  .pb-head{ flex-direction:column; gap:6px; }
  .pb-head-btns{ flex-direction:row; flex-wrap:wrap; gap:6px 18px; }
  .pb-step{ grid-template-columns:30px 1fr; row-gap:8px; }
  .pb-step-min{ display:none; }
  .pb-open{ grid-column:2; justify-self:start; }
  .pb-open-none{ display:none; }
  .pb-stats{ gap:6px; }
  .pb-tick{ width:30px; height:30px; }
}

/* =================== the wizard =================== */
body.pw-open{ overflow:hidden; }
.pw-overlay{ position:fixed; inset:0; z-index:1300; background:rgba(26,19,34,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.pw-box{ position:relative; width:100%; max-width:560px; max-height:calc(100dvh - 32px); overflow:auto; background:var(--surface); color:var(--ink); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 26px 20px; }
.pw-x{ position:absolute; top:14px; right:14px; border:none; background:transparent; color:var(--muted); font-size:1.1rem; cursor:pointer; }
.pw-progress{ height:6px; border-radius:999px; background:var(--cream-2); overflow:hidden; margin:4px 32px 18px 0; }
.pw-progress-fill{ height:100%; background:linear-gradient(90deg,var(--sun),var(--coral)); transition:width .25s; }
.pw-body h2{ font-family:'Baloo 2',ui-rounded,system-ui,sans-serif; font-size:1.35rem; margin:0 0 6px; }
.pw-help{ color:var(--muted); margin:0 0 14px; font-size:.92rem; }
.pw-small{ font-size:.8rem; margin-top:6px; }
.pw-label{ font-weight:800; margin:14px 0 8px; font-size:.9rem; }
.pw-opts{ display:grid; gap:8px; }
.pw-row{ grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); }
.pw-opt{ text-align:left; padding:13px 16px; border-radius:14px; border:1.5px solid var(--line); background:var(--paper); color:var(--ink); font:inherit; font-weight:700; cursor:pointer; }
.pw-opt.pw-sm{ text-align:center; padding:11px 8px; }
.pw-opt:hover{ border-color:var(--ink); }
.pw-opt.on{ border-color:var(--coral); background:var(--coral); color:#fff; }
.pw-check.on::before{ content:"✓ "; }
.pw-input{ width:100%; box-sizing:border-box; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--paper); color:var(--ink); font:inherit; margin-top:10px; }
.pw-date{ margin-top:0; }
.pw-ownbox{ margin-top:6px; }
.pw-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:22px; }
.pw-count{ font-size:.8rem; color:var(--muted); font-weight:700; }
.pw-next[disabled]{ opacity:.4; cursor:not-allowed; }
.pw-sum{ padding-left:18px; display:grid; gap:8px; margin:12px 0 0; }

/* theory wizard: areas and topics with a line underneath (2026-10-19) */
.pw-opt .pw-sub{ display:block; font-weight:500; font-size:.86em; opacity:.75; margin-top:3px; }
.pw-opt.on .pw-sub{ opacity:.9; }
.pw-body .pw-label + .pw-opts{ margin-bottom:6px; }
.pw-model{ margin-top:12px; }
.pw-model .pw-opt{ text-align:center; font-weight:600; border-style:dashed; }

/* ---- the diagnostic ---- */
.pw-diag-n{ margin:0 0 6px; color:var(--muted); font-size:.8rem; }
.pw-rate{ display:grid; gap:10px; }
.pw-rate-row{ display:grid; gap:8px; padding:10px 12px; border-radius:14px; border:1.5px solid var(--line); background:var(--paper); }
.pw-rate-row > b{ font-size:.9rem; }
.pw-rate-btns{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.pw-rate-btns .pw-opt{ padding:8px 4px; font-size:.78rem; line-height:1.2; }
.pw-res{ list-style:none; margin:0 0 6px; padding:0; display:grid; gap:4px; font-size:.92rem; }
.pw-body .btn.pw-rate-go{ margin-top:6px; }