/* ==========================================================================
אריאל בנימין — מערכת התרגילים
קובץ סטייל יחיד. RTL. שטוח. כתום אחד בכל מסך.
========================================================================== */
/* הפונט Rubik נטען דרך ב- (לא חוסם רינדור).
אין @import כאן: @import חוסם את הצגת הדף עד שגוגל עונה,
ובמובייל/רשת איטית זה גרם למסך לבן. */
:root{
/* צבעים */
--blue-deep:#042C53;
--blue-mid:#185FA5;
--blue-soft:#B5D4F4;
--blue-light:#E6F1FB;
--orange:#D85A30;
--orange-press:#C24E27;
--orange-soft:#FAECE7;
--orange-dark:#712B13;
--gold-soft:#FAEEDA;
--gold-dark:#633806;
--gold-mid:#8C6534;
--line:#D3D1C7;
--text:#2C2C2A;
--text-mid:#5A5954;
--text-muted:#888780;
--text-faint:#A9A8A2;
--bg:#F6F5F1;
--surface:#FFFFFF;
/* טיפוגרפיה */
--font:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;
--fs-screen:20px; /* כותרת מסך */
--fs-title:17px; /* כותרת משנית */
--fs-btn:15px;
--fs-body:13px;
--fs-meta:11px;
--fs-num-ring:25px;
--fs-num-counter:38px;
/* מרווחים */
--gap-xs:6px;
--gap-s:10px;
--gap-m:14px;
--gap-l:18px;
--gap-xl:26px;
--shadow:0 1px 3px rgba(0,0,0,.05);
--radius:0px; /* שטוח. פינות מעוגלות רק בבר ובנקודות שלבים */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--bg);color:var(--text);
font-family:var(--font);font-size:var(--fs-body);line-height:1.6;
direction:rtl;-webkit-font-smoothing:antialiased;
}
a{color:var(--blue-mid);text-decoration:none}
a:hover{color:var(--blue-deep)}
:focus-visible{outline:2px solid var(--blue-mid);outline-offset:2px}
/* ---------- פריסה ---------- */
.wrap{max-width:430px;margin:0 auto;padding-bottom:28px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 18px}
.topbar .who{font-size:12px;color:var(--blue-deep);font-weight:500}
.topbar .out{font-size:12px;color:var(--text-muted)}
.card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);margin:0 18px;padding:var(--gap-xl) 20px}
.card--flush{margin:0;padding:0}
.center{text-align:center}
.stack{display:flex;flex-direction:column;gap:var(--gap-m)}
.foot-note{padding:18px 18px 0;text-align:center;font-size:var(--fs-meta);color:var(--text-muted)}
.brand{font-size:12px;letter-spacing:.06em;color:var(--text-muted)}
.h1{font-size:var(--fs-screen);font-weight:600;color:var(--blue-deep);line-height:1.35}
.h2{font-size:var(--fs-title);font-weight:600;color:var(--blue-deep);line-height:1.35}
.sub{font-size:var(--fs-body);color:var(--text-muted)}
.instructions{font-size:12px;line-height:1.6;color:var(--text-mid);text-wrap:pretty}
/* ---------- כפתורים ---------- */
.btn{
display:block;width:100%;border:none;border-radius:var(--radius);
padding:16px;font-family:var(--font);font-size:var(--fs-btn);font-weight:500;
text-align:center;cursor:pointer;transition:background .15s ease,transform .12s ease;
}
.btn--primary{background:var(--orange);color:#fff}
.btn--primary:hover{background:var(--orange-press)}
.btn--primary:active{transform:scale(.99)}
.btn--saving{background:var(--line);color:#6B6A65;pointer-events:none}
.btn--choice{background:var(--surface);border:1px solid var(--line);color:var(--text);padding:15px;transition:background .15s ease,border-color .15s ease}
.btn--choice:hover{background:var(--blue-light);border-color:var(--blue-mid)}
.btn--choice.is-selected{background:var(--blue-light);border-color:var(--blue-mid);color:var(--blue-deep);font-weight:500}
.link-quiet{display:block;text-align:center;font-size:var(--fs-body);color:var(--text-muted)}
/* ---------- שדות ---------- */
.input{
width:100%;padding:15px 14px;font-family:var(--font);font-size:16px;
border:1px solid var(--line);border-radius:var(--radius);
background:var(--surface);color:var(--text);outline:none;
direction:ltr;text-align:left;transition:border-color .15s ease;
}
.input:focus{border-color:var(--blue-mid)}
/* ---------- הודעות ---------- */
.notice{padding:12px 14px;font-size:var(--fs-body);line-height:1.6}
.notice--warn{background:var(--orange-soft);color:var(--orange-dark)}
.notice--warn.center{text-align:center}
.notice--info{background:var(--blue-light);color:var(--blue-deep)}
/* ---------- באנר תוכנית ---------- */
.plan-banner{margin:0 18px 14px;padding:12px 16px;background:var(--blue-light);border:1px solid var(--blue-soft)}
.plan-banner__main{font-size:13px;font-weight:500;color:var(--blue-deep);line-height:1.5}
.plan-banner__sub{font-size:11px;color:var(--text-muted);margin-top:3px}
.plan-banner__remind{margin-top:8px;padding:8px 10px;background:var(--orange-soft);color:var(--orange-dark);font-size:12px;font-weight:500;text-align:center}
/* ---------- טבעת התקדמות ---------- */
.ring{position:relative;width:150px;height:150px;margin:0 auto}
.ring svg{display:block;transform:rotate(-90deg)}
.ring__track{fill:none;stroke:var(--blue-light);stroke-width:11}
.ring__fill{fill:none;stroke:var(--orange);stroke-width:11;stroke-linecap:round;
stroke-dasharray:402.1;transition:stroke-dashoffset .8s cubic-bezier(.25,.1,.25,1)}
.ring__label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ring__pct{font-size:var(--fs-num-ring);font-weight:600;color:var(--blue-deep);line-height:1}
.ring__stage{font-size:var(--fs-meta);color:var(--text-muted)}
/* ---------- נקודות שלבים ---------- */
.dots{display:flex;justify-content:center;gap:8px}
.dot{width:26px;height:5px;border-radius:3px;background:var(--line)}
.dot.is-done{background:var(--orange)}
/* ---------- סטטיסטיקות ---------- */
.stats{display:flex;justify-content:center;gap:44px}
.stat{display:flex;flex-direction:column;align-items:center;gap:3px}
.stat__num{font-size:22px;font-weight:600;color:var(--blue-deep);line-height:1;font-variant-numeric:tabular-nums}
.stat__label{font-size:var(--fs-meta);color:var(--text-muted)}
/* ---------- בר מנוחה ---------- */
.rest{margin-bottom:18px}
.rest__track{height:12px;width:100%;background:var(--blue-light);border-radius:6px;overflow:hidden}
.rest__fill{height:100%;background:var(--blue-mid);border-radius:6px;width:100%}
.rest__fill.is-running{width:0;transition:width 30s linear}
.rest__label{font-size:var(--fs-body);font-weight:600;color:var(--blue-deep);margin-top:8px;text-align:center}
/* ---------- ריבועי סבב ---------- */
.set{padding:14px 16px;background:var(--surface);border:1px solid var(--line);
transition:background .3s ease,border-color .3s ease,color .3s ease}
.set__head{display:flex;justify-content:space-between;align-items:center}
.set__name{font-size:12px;color:var(--text-muted)}
.set__right{font-size:12px;color:var(--text-muted)}
.set--done{background:var(--blue-deep);border-color:var(--blue-deep)}
.set--done .set__name{color:var(--blue-soft)}
.set--done .set__right{font-size:22px;font-weight:600;color:#fff;line-height:1}
.set--active{border:2px solid var(--orange)}
.set--pending .set__name,.set--pending .set__right{color:var(--text-faint)}
.counter{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-m);margin-top:12px}
.counter__btn{
width:52px;height:52px;background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius);color:var(--text);font-size:24px;line-height:1;cursor:pointer;
transition:transform .12s ease,background .15s ease;
}
.counter__btn:hover{background:#F6F5F1}
.counter__btn:active{transform:scale(.95)}
.counter__num{font-size:var(--fs-num-counter);font-weight:600;color:var(--blue-deep);line-height:1;font-variant-numeric:tabular-nums}
/* ---------- מסך סיום ---------- */
.celebrate{font-size:24px;font-weight:600;color:var(--blue-deep);line-height:1.3}
.badge-points{background:var(--gold-soft);padding:16px;display:flex;flex-direction:column;align-items:center;gap:4px}
.badge-points__num{font-size:26px;font-weight:600;color:var(--gold-dark);line-height:1;white-space:nowrap}
/* מספר עם סימן +/- בתוך טקסט עברי: לעטוף ב-+10 */
.num-ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.badge-points__total{font-size:12px;color:var(--gold-mid)}
/* ---------- כרטיס תרגיל: מעבר בין תרגילים ---------- */
.exercise{transition:opacity .25s ease}
.exercise.is-leaving{opacity:0}
/* ---------- אדמין ---------- */
.admin-head{padding:20px;border-bottom:2px solid var(--line)}
.admin-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:12.5px;white-space:nowrap}
.table th{text-align:right;padding:10px 12px;font-weight:500;color:#42413D;background:var(--bg);border-bottom:2px solid var(--line)}
.table td{padding:11px 12px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.table tbody tr{background:var(--surface)}
.table tbody tr.is-late{background:var(--orange-soft)}
.table tbody tr.is-late td{color:var(--orange-dark)}
.table th:first-child,.table td:first-child{position:sticky;right:0;background:var(--surface);font-weight:500;color:var(--blue-deep)}
.table th:first-child{background:var(--bg)}
.table tbody tr.is-late td:first-child{background:var(--orange-soft);color:var(--orange-dark)}
@media (prefers-reduced-motion:reduce){
*{transition-duration:.01ms !important;animation-duration:.01ms !important}
}