/* Mizan Exercise Engine — styles. Classic + Mizan 2.0 (Liquid Glass). Logical properties only (Arabic RTL).
   Numbers and inputs sit on near-opaque layers for legibility; glass is used for controls and navigation. */

/* ---------- ExerciseVideoPlayer ---------- */
.mzp{position:relative;width:100%;border-radius:22px;overflow:hidden;background:var(--soft);isolation:isolate}
.mzp-stage{position:relative;width:100%;aspect-ratio:3/2;cursor:pointer;background:#fff}
.mzp-frames,.mzp-video{position:absolute;inset:0;width:100%;height:100%}
.mzp-video{object-fit:cover;background:#000}
.mzp-frames img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.mzp-frames .f1{opacity:0}
.mzp-frames.is-playing .f1{animation:mzp-swap 2.4s ease-in-out infinite}
@keyframes mzp-swap{0%,38%{opacity:0}50%,88%{opacity:1}100%{opacity:0}}
.mzp[data-state="loading"] .mzp-stage::after{content:"";position:absolute;inset:50% auto auto 50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;
  border:3px solid color-mix(in srgb,var(--accent) 25%,transparent);border-top-color:var(--accent);animation:mzp-spin .8s linear infinite}
@keyframes mzp-spin{to{transform:rotate(360deg)}}
.mzp-none{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:.9rem;text-align:center;padding:16px;background:var(--soft)}
.mzp-none svg{width:34px;height:34px}
.mzp-status{position:absolute;inset-block-start:10px;inset-inline-start:12px;font-size:.78rem;color:var(--muted);pointer-events:none}
.mzp-status:empty{display:none}
.mzp-bar{position:absolute;inset-block-end:10px;inset-inline:10px;display:flex;gap:8px;justify-content:flex-end;pointer-events:none}
.mzp-btn{pointer-events:auto;min-width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.6);display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:0 12px;background:rgba(18,32,26,.55);color:#fff;font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.mzp-btn svg{width:20px;height:20px;flex:none}
.mzp-pp{margin-inline-end:auto}
.mzp-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.mzp:fullscreen,.mzp:-webkit-full-screen{border-radius:0;background:#000;display:flex;align-items:center}
.mzp:fullscreen .mzp-stage{aspect-ratio:auto;height:100%}
.mzp:fullscreen .mzp-frames img{object-fit:contain}
@media (prefers-reduced-motion:reduce){.mzp[data-state="loading"] .mzp-stage::after{animation-duration:2.4s}}
@media (forced-colors:active){.mzp-btn{border:1px solid ButtonText;background:ButtonFace;color:ButtonText;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* ---------- workout player screen ---------- */
.mzw-top{display:flex;flex-direction:row;align-items:center;gap:10px}
.mzw-top-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.mzw-top-t b{font-family:var(--f-display);font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mzw-icon{flex:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.mzw-icon svg{width:20px;height:20px}
[dir="rtl"] .mzw-icon svg,[dir="rtl"] .mzb-go svg,[dir="rtl"] .mzw-sx-h svg{transform:scaleX(-1)}
.mzw-ex h2{margin:2px 0 10px}
.mzw-player{margin-bottom:10px}
.mzw-slots{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mzw-slots::-webkit-scrollbar{display:none}
.mzw-slot{flex:none;display:inline-flex;align-items:center;gap:6px;max-width:170px;min-height:40px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:.82rem;cursor:pointer}
.mzw-slot .num{font-weight:700;color:var(--muted)}
.mzw-slot-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mzw-slot svg{width:16px;height:16px;color:var(--good);flex:none}
.mzw-slot[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.mzw-slot[aria-selected="true"] .num,.mzw-slot[aria-selected="true"] svg{color:inherit}
.mzw-info{display:flex;flex-direction:column;gap:8px}
.mzw-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mzw-prev,.mzw-rec{margin:0}
.mzw-rec{display:flex;gap:6px;align-items:center}
.mzw-ic{width:18px;height:18px;flex:none;color:var(--carb);vertical-align:-3px}
.mzw-how summary{cursor:pointer;font-weight:600;min-height:36px;display:flex;align-items:center}
.mzw-how ol{margin:4px 0 0;padding-inline-start:20px}
.mzw-info>.btn{align-self:flex-start}

/* sets */
.mzw-sets{display:flex;flex-direction:column;gap:10px}
.mzw-prefs .seg button{min-width:40px;min-height:34px}
.mzw-head,.mzw-set{display:grid;align-items:center;gap:6px}
.mzw-head.cols-2,.mzw-set.cols-2{grid-template-columns:40px minmax(52px,1fr) minmax(64px,1.1fr) minmax(56px,1fr) 48px}
.mzw-head.cols-1,.mzw-set.cols-1{grid-template-columns:40px minmax(52px,1fr) minmax(80px,1.6fr) 48px}
.mzw-head{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding-inline:6px}
.mzw-head svg{width:16px;height:16px}
.mzw-head span:last-child{text-align:center}
.mzw-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mzw-set{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:6px}
.mzw-set.done{background:color-mix(in srgb,var(--good) 12%,var(--surface));border-color:color-mix(in srgb,var(--good) 40%,var(--line))}
.mzw-n{width:40px;height:40px;border-radius:12px;border:0;background:var(--soft);color:var(--ink);font:inherit;font-weight:700;cursor:pointer}
.mzw-n.typed{background:color-mix(in srgb,var(--carb) 22%,var(--soft))}
.mzw-pv{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mzw-in{width:100%;min-width:0;min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font:inherit;font-size:16px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums;padding:6px 4px}
.mzw-in.opt::placeholder{color:var(--muted)}
.mzw-in[aria-invalid="true"]{border-color:var(--prot);box-shadow:0 0 0 2px color-mix(in srgb,var(--prot) 30%,transparent)}
.mzw-in:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mzw-ok{width:48px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--soft);color:var(--muted);display:grid;place-items:center;cursor:pointer}
.mzw-ok svg{width:22px;height:22px}
.mzw-ok[aria-pressed="true"]{background:var(--good);border-color:var(--good);color:#fff}
.mzw-pr{position:absolute;inset-block-start:-7px;inset-inline-end:10px;font-size:.66rem;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--carb);color:#1d1400}
.mzw-sx .mzw-pr,.mzw-prs .mzw-pr{position:static}
.mzw-add{min-height:44px}
.mzw-switch{display:flex;align-items:center;gap:8px;min-height:36px;cursor:pointer}
.mzw-switch input{width:20px;height:20px;accent-color:var(--accent)}
.mzw-next{min-height:48px;width:100%}
.mzw-last{margin:0;text-align:center}

/* rest timer: floats above the tab bar */
.mzw-rest{position:fixed;z-index:19;inset-inline:max(12px,env(safe-area-inset-left,0px));bottom:calc(92px + env(safe-area-inset-bottom,0px));max-width:536px;margin-inline:auto;
  border-radius:24px;padding:12px 14px;background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,.16);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4)}
.mzw-rest.done{border-color:var(--good)}
.mzw-rest-top{display:flex;align-items:baseline;justify-content:space-between}
.mzw-rest-top b{font-family:var(--f-display);font-size:1.9rem;line-height:1.1}
.mzw-rest-bar{height:6px;border-radius:999px;background:var(--soft);overflow:hidden;margin:6px 0 10px}
.mzw-rest-bar i{display:block;height:100%;background:var(--accent);transition:width .45s linear}
.mzw-rest-ctl{display:flex;gap:6px}
.mzw-rest-ctl button{flex:1;min-height:44px;border-radius:14px;border:1px solid var(--line);background:var(--soft);color:var(--ink);font:inherit;font-weight:600;cursor:pointer;display:grid;place-items:center}
.mzw-rest-ctl button svg{width:20px;height:20px}
.mzw-rest-ctl .skip{flex:1.4;background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
body:has(.mzw-rest:not([hidden])) #main{padding-bottom:150px}
.mzw-snack{position:fixed;z-index:19;inset-inline:16px;bottom:calc(100px + env(safe-area-inset-bottom,0px));max-width:520px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 8px 8px 16px;padding-inline:16px 8px;border-radius:16px;background:var(--ink);color:var(--bg)}

/* sheets and history */
.mzw-types{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.mzw-types .chip{min-height:40px}
.mzw-del{color:var(--prot)}
.mzw-alts{display:flex;flex-direction:column;gap:6px}
.mzw-alt{display:flex;align-items:center;gap:10px;text-align:start;width:100%;font:inherit;color:inherit;background:var(--soft);border:1px solid transparent;border-radius:14px;padding:8px;min-height:56px;cursor:pointer}
.mzw-alt.on{border-color:var(--accent)}
.mzw-alt img,.mzw-noimg{width:64px;height:43px;border-radius:10px;object-fit:cover;flex:none;background:var(--line)}
.mzw-alt span{display:flex;flex-direction:column;min-width:0}
.mzw-tiles{margin:8px 0}
.mzw-tiles .v{font-size:1.05rem}
.mzw-prs{margin:0 0 12px;padding-inline-start:18px}
.mzw-hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mzw-hrow{width:100%;display:grid;grid-template-columns:1fr auto;grid-template-areas:"d go" "m go";gap:2px 8px;text-align:start;font:inherit;color:inherit;cursor:pointer;padding:12px 14px}
.mzw-hd{grid-area:d;display:flex;flex-direction:column}
.mzw-hm{grid-area:m}
.mzw-hrow .mzb-go{grid-area:go;color:var(--muted)}
.mzw-hrow .mzb-go svg{width:20px;height:20px}
.mzw-sx{border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.mzw-sx-h{display:flex;justify-content:space-between;align-items:center;width:100%;font:inherit;color:inherit;background:none;border:0;padding:4px 0;min-height:40px;cursor:pointer;text-align:start}
.mzw-sx-h span{display:inline-flex;align-items:center;gap:2px;color:var(--accent)}
.mzw-sx-h svg{width:16px;height:16px}
.mzw-sx ol{margin:2px 0 0;padding-inline-start:20px}
.mzw-spark{width:100%;height:auto;margin:6px 0 4px;background:var(--soft);border-radius:14px}
.mzw-recs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0}
.mzw-recs div{background:var(--soft);border-radius:12px;padding:8px 10px}
.mzw-recs dt{font-size:.78rem;color:var(--muted)}
.mzw-recs dd{margin:0;font-weight:600}
.mzw-ok:focus-visible,.mzw-n:focus-visible,.mzw-slot:focus-visible,.mzw-icon:focus-visible,.mzw-alt:focus-visible,.mzw-rest-ctl button:focus-visible,.mzw-hrow:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Mizan 2.0 glass */
[data-mizan-design="v2"] .mzw-icon,[data-mizan-design="v2"] .mzw-slot:not([aria-selected="true"]){background:var(--v2-glass-hi);border-color:var(--v2-edge);box-shadow:var(--v2-inner);-webkit-backdrop-filter:var(--v2-blur);backdrop-filter:var(--v2-blur)}
[data-mizan-design="v2"] .mzw-set{background:color-mix(in srgb,var(--v2-bg-color) 84%,transparent);border-color:var(--v2-edge);box-shadow:var(--v2-inner)}
[data-mizan-design="v2"] .mzw-set.done{background:color-mix(in srgb,var(--v2-mint-soft) 70%,var(--v2-bg-color))}
[data-mizan-design="v2"] .mzw-in{background:var(--v2-glass-hi);border-color:var(--v2-edge)}
[data-mizan-design="v2"] .mzw-ok[aria-pressed="true"]{background:linear-gradient(180deg,#1E8A60,var(--v2-forest-2));border-color:transparent}
[data-mizan-design="v2"] .mzw-rest{background:color-mix(in srgb,var(--v2-bg-color) 88%,transparent);border-color:var(--v2-edge);box-shadow:var(--v2-inner),var(--v2-shadow)}
[data-mizan-design="v2"] .mzw-rest-ctl button{background:var(--v2-glass-hi);border-color:var(--v2-edge)}
[data-mizan-design="v2"] .mzw-rest-ctl .skip{background:linear-gradient(180deg,#1E8A60,var(--v2-forest-2));color:#fff}
[data-mizan-design="v2"] .mzw-rest-bar i{background:linear-gradient(90deg,var(--v2-arc-a),var(--v2-arc-b))}
[data-mizan-design="v2"] .mzw-alt,[data-mizan-design="v2"] .mzw-recs div{background:var(--v2-glass-hi);border-color:var(--v2-edge)}
[data-mizan-design="v2"][data-tab="workout"],[data-mizan-design="v2"][data-tab="whistory"]{--mzw-muted:#475C4F}
[data-mizan-design="v2"][data-tab="workout"] #main .muted,[data-mizan-design="v2"][data-tab="whistory"] #main .muted,[data-mizan-design="v2"][data-tab="workout"] .mzw-head{color:var(--mzw-muted)}
@media (prefers-color-scheme:dark){[data-mizan-design="v2"]:not([data-theme="light"]):is([data-tab="workout"],[data-tab="whistory"]){--mzw-muted:var(--v2-muted)}}
[data-mizan-design="v2"][data-theme="dark"]:is([data-tab="workout"],[data-tab="whistory"]){--mzw-muted:var(--v2-muted)}
@media (prefers-reduced-motion:reduce){.mzw-rest-bar i{transition:none}}
@media (forced-colors:active){.mzw-set,.mzw-in,.mzw-ok,.mzw-rest,.mzw-slot{border:1px solid CanvasText!important;background:Canvas!important;backdrop-filter:none!important}.mzw-ok[aria-pressed="true"]{background:Highlight!important;color:HighlightText!important}}
@media (max-width:360px){.mzw-head.cols-2,.mzw-set.cols-2{grid-template-columns:36px minmax(40px,.8fr) minmax(56px,1fr) minmax(48px,1fr) 44px}.mzw-ok{width:44px}}
[data-mizan-design="v2"]:is([data-tab="workout"],[data-tab="whistory"]) #main .seg button:not([aria-pressed="true"]){color:var(--mzw-muted)}

/* P0 recovery and history editing; existing glass surfaces/tokens are retained. */
.mzw-recovery{overflow-wrap:anywhere;margin-block:12px;padding:12px}.mzw-recovery .btn{margin-block:4px;min-height:44px;white-space:normal}.mzw-edit-field{display:grid;gap:8px;margin-block:12px}.mzw-edit-field .mzw-in{width:100%;min-height:44px}.mzw-sx li .btn{min-height:44px;margin-inline:8px}
.mzw-draft-unit{min-width:0;text-align:center}.mzw-draft-unit .mzw-in{width:100%}.mzw-draft-unit small{display:block}