/* Setup wizard. Uses the page's tokens (index.html :root), so it follows light and dark. */

#wiz{position:fixed;inset:0;z-index:90;background:var(--ground);color:var(--ink);
  display:flex;flex-direction:column;font-family:var(--ui);overflow:hidden}
#wiz[hidden]{display:none}

/* top: back, progress, count */
.wz-top{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:14px;
  padding:14px max(16px, calc((100vw - 640px) / 2)) 10px}
.wz-back{width:36px;height:36px;border-radius:50%;border:1px solid var(--rule);background:var(--surface);
  display:grid;place-items:center;padding:0;color:var(--ink)}
.wz-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wz-back[disabled]{visibility:hidden}
.wz-bar{height:6px;border-radius:99px;background:var(--track);overflow:hidden}
.wz-bar i{display:block;height:100%;width:var(--done,0%);background:var(--accent);border-radius:inherit;
  transition:width .35s cubic-bezier(.2,.7,.2,1)}
.wz-count{font:500 12px var(--mono);color:var(--faint);min-width:42px;text-align:right}

/* the page body scrolls; the action bar stays */
.wz-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.wz-step{max-width:560px;margin:0 auto;padding:22px 16px 40px;animation:wz-in .35s cubic-bezier(.2,.7,.2,1)}
@keyframes wz-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wz-step{animation:none}.wz-bar i,.wz-ring circle{transition:none}}
.wz-eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mkcal);margin:0 0 10px}
.wz-title{font-size:clamp(26px, 6vw, 32px);line-height:1.12;font-weight:700;letter-spacing:-.035em;margin:0 0 10px;outline:none}
.wz-sub{color:var(--muted);font-size:15px;line-height:1.55;margin:0 0 26px}
.wz-why{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--muted);
  background:var(--sunken);border-radius:var(--r-md);padding:11px 13px;margin-top:22px}
.wz-why svg{flex:0 0 auto;width:16px;height:16px;margin-top:1px;fill:none;stroke:var(--mkcal);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.wz-label{display:block;font-size:13px;font-weight:600;margin:22px 0 9px}
.wz-label:first-child{margin-top:0}

/* bottom action bar */
.wz-actions{border-top:1px solid var(--rule);background:var(--surface);
  padding:12px max(16px, calc((100vw - 560px) / 2)) calc(12px + env(safe-area-inset-bottom));
  display:flex;gap:10px;align-items:center}
.wz-actions .wz-go{flex:1;padding:14px 18px;font-size:15px;border-radius:12px}
.wz-actions .wz-skip{padding:14px 16px;font-size:14px;border-radius:12px;background:transparent;border-color:transparent;color:var(--muted)}
.wz-go[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.wz-err{color:var(--far-t);font-size:13px;margin-top:14px;min-height:1em}

/* choice cards */
.wz-cards{display:grid;gap:10px}
.wz-cards.two{grid-template-columns:1fr 1fr}
.wz-cards.three{grid-template-columns:repeat(3, 1fr)}
.wz-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:15px 16px;
  background:var(--surface);border:1.5px solid var(--rule);border-radius:var(--r-md);color:var(--ink);
  font:inherit;transition:border-color .15s, background .15s, transform .1s}
.wz-card:hover{border-color:color-mix(in srgb, var(--accent) 45%, var(--rule))}
.wz-card:active{transform:scale(.99)}
.wz-card[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 7%, var(--surface))}
.wz-card .t{font-weight:600;font-size:15px;display:block}
.wz-card .d{font-size:13px;color:var(--muted);display:block;margin-top:2px;line-height:1.4}
.wz-card .tx{flex:1;min-width:0}
.wz-card.center{flex-direction:column;justify-content:center;text-align:center;gap:6px;padding:18px 10px}
.wz-tick{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--rule);display:grid;place-items:center}
.wz-card[aria-pressed=true] .wz-tick{background:var(--accent);border-color:var(--accent)}
.wz-tick svg{width:12px;height:12px;fill:none;stroke:var(--accent-ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.wz-card[aria-pressed=true] .wz-tick svg{opacity:1}
.wz-icon{flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:var(--sunken);display:grid;place-items:center}
.wz-icon svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wz-card[aria-pressed=true] .wz-icon{background:color-mix(in srgb, var(--accent) 14%, var(--surface))}
/* activity meter: five bars, filled to the level */
.wz-meter{display:flex;gap:3px;align-items:flex-end;height:22px;flex:0 0 auto}
.wz-meter i{width:5px;border-radius:2px;background:var(--track)}
.wz-meter i:nth-child(1){height:30%}.wz-meter i:nth-child(2){height:47%}.wz-meter i:nth-child(3){height:64%}
.wz-meter i:nth-child(4){height:82%}.wz-meter i:nth-child(5){height:100%}
.wz-meter i.on{background:var(--mkcal)}

/* number fields */
.wz-row{display:flex;gap:10px}
.wz-field{flex:1;display:flex;align-items:baseline;gap:8px;background:var(--surface);border:1.5px solid var(--rule);
  border-radius:var(--r-md);padding:12px 16px;transition:border-color .15s}
.wz-field:focus-within{border-color:var(--accent)}
.wz-field input{flex:1;min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--ink);
  font:600 26px var(--mono);letter-spacing:-.02em;padding:0}
.wz-field span{font:500 14px var(--mono);color:var(--muted)}
.wz-field input::-webkit-outer-spin-button,.wz-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.wz-field input[type=number]{-moz-appearance:textfield}
.wz-seg{display:inline-flex;background:var(--sunken);border:1px solid var(--rule);border-radius:10px;padding:3px;gap:2px}
.wz-seg button{border:0;background:transparent;border-radius:7px;padding:7px 14px;font:500 13px var(--ui);color:var(--muted)}
.wz-seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);font-weight:600}
.wz-headrow{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.wz-headrow .wz-label{margin:0}
.wz-bmi{font-size:13px;color:var(--muted);margin-top:12px}

/* pace slider with the recommended zone drawn under the track */
.wz-pace{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:22px 20px;box-shadow:var(--shadow)}
.wz-pace-big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.wz-pace-big b{font:600 40px var(--mono);letter-spacing:-.04em}
.wz-pace-big span{color:var(--muted);font-size:15px}
.wz-pace-sub{color:var(--muted);font-size:14px;margin-top:4px}
.wz-range{position:relative;margin:26px 0 8px;height:28px}
.wz-range .zone{position:absolute;top:10px;height:8px;border-radius:99px;
  left:var(--lo);width:calc(var(--hi) - var(--lo));background:color-mix(in srgb, var(--mp) 60%, var(--surface))}
.wz-range input{position:absolute;inset:0;width:100%;margin:0;background:transparent;-webkit-appearance:none;appearance:none}
.wz-range input::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:transparent}
.wz-range input::-moz-range-track{height:8px;border-radius:99px;background:transparent}
.wz-range::before{content:"";position:absolute;left:0;right:0;top:10px;height:8px;border-radius:99px;background:var(--track)}
.wz-range input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;
  background:var(--surface);border:2px solid var(--accent);box-shadow:var(--shadow)}
.wz-range input::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--surface);border:2px solid var(--accent)}
.wz-range input:focus-visible::-webkit-slider-thumb{outline:3px solid color-mix(in srgb, var(--accent) 35%, transparent)}
.wz-scale{display:flex;justify-content:space-between;font:500 11px var(--mono);color:var(--faint)}
.wz-range .zone::after{content:"recommended";position:absolute;left:50%;top:-20px;transform:translateX(-50%);
  font:600 10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mp);white-space:nowrap}
.wz-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:99px;margin-top:14px}
.wz-tag.ok{background:color-mix(in srgb, var(--mp) 16%, transparent);color:var(--mp)}
.wz-tag.warn{background:var(--on-soft);color:var(--on-t)}

/* the macro page */
.wz-hero{display:flex;align-items:center;gap:26px;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow)}
.wz-ring{position:relative;width:168px;height:168px;flex:0 0 auto}
.wz-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.wz-ring circle{fill:none;stroke-width:14;transition:stroke-dasharray .4s cubic-bezier(.2,.7,.2,1), stroke-dashoffset .4s cubic-bezier(.2,.7,.2,1)}
.wz-ring .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.wz-ring .mid b{font:600 34px var(--mono);letter-spacing:-.045em;line-height:1}
.wz-ring .mid span{font-size:12px;color:var(--muted);margin-top:4px}
.wz-legend{display:grid;gap:12px;flex:1;min-width:0}
.wz-legend div{display:flex;align-items:center;gap:10px;font-size:14px}
.wz-legend i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.wz-legend b{margin-left:auto;font:600 14px var(--mono)}
.wz-legend em{font-style:normal;color:var(--muted);font:500 12px var(--mono);width:38px;text-align:right}
.wz-presets{margin:20px 0 16px;display:flex;justify-content:center}
.wz-presets .wz-seg{width:100%}
.wz-presets .wz-seg button{flex:1;padding:9px 8px}
.wz-macros{display:grid;gap:10px}
.wz-macro{display:grid;grid-template-columns:4px 1fr auto;gap:14px;align-items:center;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r-md);padding:14px 14px 14px 0;overflow:hidden}
.wz-macro .bar{align-self:stretch;margin:-14px 0;background:var(--c)}
.wz-macro .nm{font-weight:600;font-size:15px}
.wz-macro .info{font:500 12px var(--mono);color:var(--muted);margin-top:3px}
.wz-step-ctl{display:flex;align-items:center;gap:6px}
.wz-step-ctl button{width:38px;height:38px;border-radius:10px;border:1px solid var(--rule);background:var(--sunken);
  font:600 18px var(--ui);color:var(--ink);padding:0;line-height:1}
.wz-step-ctl output{min-width:64px;text-align:center;font:600 20px var(--mono);letter-spacing:-.03em}
.wz-step-ctl output small{font-size:12px;color:var(--muted);margin-left:2px}
.wz-note{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);margin-top:14px;flex-wrap:wrap}
.wz-note button{background:none;border:0;padding:0;color:var(--accent);font:600 13px var(--ui);text-decoration:underline;text-underline-offset:3px}
.wz-how{margin-top:18px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--surface)}
.wz-how summary{cursor:pointer;padding:13px 16px;font-size:14px;font-weight:600;list-style:none;display:flex;justify-content:space-between}
.wz-how summary::-webkit-details-marker{display:none}
.wz-how summary::after{content:"+";color:var(--muted);font-weight:500}
.wz-how[open] summary::after{content:"–"}
.wz-how ol{margin:0;padding:0 16px 14px 34px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.wz-how ol b{color:var(--ink);font-family:var(--mono);font-weight:600}
.wz-how p{margin:0;padding:0 16px 14px;font-size:12px;color:var(--faint)}

/* staples and daily items */
.wz-role{margin-bottom:20px}
.wz-chips{display:flex;flex-wrap:wrap;gap:8px}
.wz-chip{border:1.5px solid var(--rule);background:var(--surface);border-radius:99px;padding:9px 15px;font:500 14px var(--ui);color:var(--ink)}
.wz-chip[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 9%, var(--surface));font-weight:600}
.wz-chip .k{font:500 11.5px var(--mono);color:var(--muted);margin-left:6px}
.wz-list{display:grid;gap:8px}
.wz-list .wz-card{padding:12px 14px}
.wz-kc{font:600 13px var(--mono);color:var(--muted);white-space:nowrap}
.wz-build{margin-top:16px;border:1.5px dashed var(--rule);border-radius:var(--r-md);padding:16px;background:var(--surface)}
.wz-build[open]{border-style:solid}
.wz-build summary{cursor:pointer;font-weight:600;font-size:14.5px;color:var(--accent);list-style:none}
.wz-build summary::-webkit-details-marker{display:none}
.wz-input{width:100%;border:1.5px solid var(--rule);border-radius:10px;background:var(--ground);color:var(--ink);
  font:15px var(--ui);padding:11px 13px;outline:0}
.wz-input:focus{border-color:var(--accent)}
.wz-hits{display:grid;gap:4px;margin-top:6px;max-height:220px;overflow-y:auto}
.wz-hits button{display:flex;justify-content:space-between;gap:10px;text-align:left;border:0;background:var(--sunken);
  border-radius:8px;padding:9px 11px;font:14px var(--ui);color:var(--ink)}
.wz-hits button span:last-child{font:500 12px var(--mono);color:var(--muted);white-space:nowrap}
.wz-comps{display:grid;gap:6px;margin-top:10px}
.wz-comp{display:grid;grid-template-columns:1fr 92px 30px;gap:8px;align-items:center;font-size:14px}
.wz-comp input{width:100%;border:1px solid var(--rule);border-radius:8px;background:var(--ground);color:var(--ink);
  font:500 14px var(--mono);padding:7px 9px;text-align:right}
.wz-comp button{border:0;background:none;color:var(--muted);font-size:18px;padding:0}
.wz-build .wz-row{margin-top:12px;align-items:center}
.wz-total{font:500 13px var(--mono);color:var(--muted);flex:1}

/* days */
.wz-days{display:grid;grid-template-columns:repeat(7, 1fr);gap:6px}
.wz-day{aspect-ratio:1;min-height:44px;border-radius:12px;border:1.5px solid var(--rule);background:var(--surface);
  font:600 13px var(--ui);color:var(--ink);padding:0;display:grid;place-items:center}
.wz-day[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* review */
.wz-sum{display:grid;gap:10px}
.wz-sum section{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-md);padding:14px 16px;
  display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.wz-sum h3{margin:0 0 4px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:700}
.wz-sum p{margin:0;font-size:14.5px;line-height:1.5}
.wz-sum .mono{font-family:var(--mono);font-weight:600}
.wz-sum button{background:none;border:0;padding:2px 0;color:var(--accent);font:600 13px var(--ui);flex:0 0 auto}

/* welcome and finish */
.wz-hello{text-align:center;padding-top:6vh}
.wz-hello .wz-sub{margin-left:auto;margin-right:auto;max-width:400px}
.wz-badge{width:72px;height:72px;margin:0 auto 22px;border-radius:22px;display:grid;place-items:center;
  background:color-mix(in srgb, var(--accent) 12%, var(--surface));border:1px solid var(--rule)}
.wz-badge svg{width:36px;height:36px;fill:var(--sage);stroke:var(--accent);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.wz-plan{display:grid;gap:10px;text-align:left;max-width:380px;margin:0 auto}
.wz-plan div{display:flex;gap:12px;align-items:center;font-size:14.5px;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r-md);padding:12px 14px}
.wz-plan b{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--sunken);font:600 12px var(--mono)}
.wz-busy{display:grid;place-items:center;gap:18px;padding-top:14vh;text-align:center}
.wz-spin{width:44px;height:44px;border-radius:50%;border:3px solid var(--track);border-top-color:var(--accent);animation:wz-spin .9s linear infinite}
@keyframes wz-spin{to{transform:rotate(360deg)}}

@media (max-width:480px){
  .wz-hero{flex-direction:column;gap:18px;padding:20px 16px}
  .wz-legend{width:100%}
  .wz-cards.three{grid-template-columns:1fr}
  .wz-cards.three .wz-card.center{flex-direction:row;justify-content:flex-start;text-align:left;padding:15px 16px}
  .wz-step-ctl button{width:36px;height:36px}
  .wz-step-ctl output{min-width:56px;font-size:18px}
}

/* preview from Customize: a strip that says nothing is saved, and a way out */
.wz-preview{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:8px 16px;background:var(--on-soft);color:var(--on-t);font-size:13px;font-weight:600}
.wz-exit{border:1px solid currentColor;background:transparent;color:inherit;border-radius:99px;padding:4px 12px;font:600 12px var(--ui)}
.wz-badge svg[viewBox] path[d^="M5 12.5"]{fill:none;stroke-width:2.2}
.wz-retry{margin-left:8px;padding:5px 12px;font-size:12.5px;border-radius:99px}

/* every-day items: a card, and a "how many a day" row once chosen */
.wz-item{border-radius:var(--r-md)}
.wz-item.on{background:color-mix(in srgb, var(--accent) 7%, var(--surface));border:1.5px solid var(--accent)}
.wz-item.on .wz-card{border-color:transparent;background:transparent}
.wz-count-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px 12px;font-size:13px;color:var(--muted)}
.wz-count-row output{min-width:92px;font-size:14px}
.wz-step-ctl button[disabled]{opacity:.4}