/* =========================================================================
 * styles.css  —  تنسيقات نادي التدريب المنزلي
 * ========================================================================= */

:root {
  --bg:        #0f1420;
  --bg-2:      #161d2e;
  --card:      #1c2538;
  --card-2:    #232e45;
  --line:      #2c3650;
  --text:      #eef2fb;
  --muted:     #9aa6c2;
  --brand:     #ff6b35;
  --brand-2:   #ff8b5e;
  --accent:    #2dd4bf;
  --accent-2:  #38e0cb;
  --good:      #34d399;
  --danger:    #f05a6e;
  --radius:    16px;
  --shadow:    0 10px 30px rgba(0,0,0,.35);
  --font:      "Segoe UI", "Tahoma", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font);
  background: radial-gradient(1200px 600px at 80% -10%, #1d2740 0%, var(--bg) 55%);
  color: var(--text);
  line-height: 1.6;
  min-height: 100%;
}

[dir="rtl"] body { letter-spacing: 0; }

button { font-family: inherit; cursor: pointer; border: none; }
input, select { font-family: inherit; }
a { color: inherit; }

.hidden { display: none !important; }

/* ---------- أزرار ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 12px; font-weight: 700; font-size: 15px;
  background: var(--card-2); color: var(--text); transition: .15s transform, .15s filter;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }
.btn-accent  { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #06231f; }
.btn-ghost   { background: transparent; border: 1px solid var(--line); }
.btn-danger  { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.btn-block   { width: 100%; }
.btn-sm      { padding: 8px 14px; font-size: 13px; border-radius: 10px; }

/* =========================================================================
 *  شاشة الدخول / التسجيل
 * ========================================================================= */
#auth-screen {
  min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr;
}
.auth-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1a2238, #0d1322);
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px; gap: 18px;
}
.auth-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(420px 420px at 20% 90%, rgba(255,107,53,.18), transparent 60%),
    radial-gradient(380px 380px at 90% 10%, rgba(45,212,191,.16), transparent 60%);
}
.auth-hero > * { position: relative; z-index: 1; }
.hero-badge {
  align-self: flex-start; background: rgba(255,255,255,.06); border: 1px solid var(--line);
  padding: 6px 14px; border-radius: 999px; font-size: 13px; color: var(--accent-2); font-weight: 700;
}
.auth-hero h1 { font-size: 40px; line-height: 1.25; }
.auth-hero p  { color: var(--muted); font-size: 17px; max-width: 460px; }
.hero-emoji { font-size: 64px; }

.auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h2 { font-size: 24px; margin-bottom: 6px; }
.auth-card .sub { color: var(--muted); margin-bottom: 22px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; font-weight: 600; }
.field input, .field select {
  width: 100%; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; color: var(--text); font-size: 15px; transition: .15s border-color;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--brand); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.auth-error {
  background: rgba(240,90,110,.12); border: 1px solid rgba(240,90,110,.4);
  color: #ffb3bf; padding: 10px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 14px;
}
.auth-switch { text-align: center; margin-top: 16px; }
.auth-switch button { background: none; color: var(--accent-2); font-weight: 700; font-size: 14px; }

/* =========================================================================
 *  هيكل التطبيق بعد الدخول
 * ========================================================================= */
#app-screen { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 22px; background: rgba(15,20,32,.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.brand .logo {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); font-size: 20px;
}
.brand .bt { line-height: 1.1; }
.brand .bt small { display: block; color: var(--muted); font-weight: 600; font-size: 11px; }

.nav { display: flex; gap: 6px; margin-inline-start: auto; flex-wrap: wrap; }
.nav button {
  background: transparent; color: var(--muted); padding: 9px 14px; border-radius: 10px;
  font-weight: 700; font-size: 14px; transition: .15s;
}
.nav button:hover { color: var(--text); background: var(--card); }
.nav button.active { color: #fff; background: var(--card-2); }

.lang-toggle {
  background: var(--card); border: 1px solid var(--line); color: var(--text);
  padding: 8px 12px; border-radius: 10px; font-weight: 800; font-size: 13px;
}

.content { flex: 1; padding: 26px 22px 60px; max-width: 1080px; width: 100%; margin: 0 auto; }

.page-title { font-size: 26px; margin-bottom: 4px; }
.page-sub { color: var(--muted); margin-bottom: 22px; }

/* ---------- بطاقات عامة ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
}
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* ---------- لوحة التحكم ---------- */
.hero-card {
  background: linear-gradient(135deg, #1f2a44, #182137);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px;
  display: flex; align-items: center; gap: 22px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.hero-card::after {
  content:""; position:absolute; inset:0;
  background: radial-gradient(300px 200px at 90% 10%, rgba(255,107,53,.18), transparent 60%);
}
.hero-card > * { position: relative; z-index: 1; }
.hero-card .big { font-size: 30px; font-weight: 800; }
.hero-card .muted { color: var(--muted); }
.hero-card .spacer { margin-inline-start: auto; }

.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; display: flex; align-items: center; gap: 14px;
}
.stat .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--card-2); }
.stat .n { font-size: 24px; font-weight: 800; line-height: 1; }
.stat .l { color: var(--muted); font-size: 13px; }

.quote { color: var(--muted); font-style: italic; text-align: center; padding: 8px; }

/* ---------- مخطط الأسبوع ---------- */
.weekbars { display: flex; align-items: flex-end; gap: 10px; height: 130px; padding-top: 10px; }
.weekbars .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.weekbars .bar {
  width: 70%; border-radius: 8px 8px 4px 4px; min-height: 6px;
  background: linear-gradient(180deg, var(--accent), #1f9c8e); transition: height .4s;
}
.weekbars .bar.empty { background: var(--card-2); }
.weekbars .bar.today { background: linear-gradient(180deg, var(--brand-2), var(--brand)); }
.weekbars .lbl { color: var(--muted); font-size: 12px; }

/* ---------- خطة اليوم ---------- */
.plan-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.chip { background: var(--card-2); border: 1px solid var(--line); padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; }
.chip.brand { background: rgba(255,107,53,.15); border-color: rgba(255,107,53,.4); color: var(--brand-2); }
.progress-wrap { margin-inline-start: auto; min-width: 200px; }
.progress-bar { height: 12px; background: var(--bg-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.progress-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--good)); transition: width .4s; }
.progress-text { font-size: 13px; color: var(--muted); margin-top: 6px; text-align: center; }

.exercise-card {
  display: flex; gap: 16px; align-items: center; cursor: pointer; transition: .15s;
}
.exercise-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.exercise-card.done { opacity: .65; }
.ex-thumb {
  width: 92px; height: 92px; flex: 0 0 92px; border-radius: 12px; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line); display: grid; place-items: center;
}
.ex-thumb svg { width: 100%; height: 100%; }
.ex-info { flex: 1; min-width: 0; }
.ex-info h3 { font-size: 17px; margin-bottom: 4px; }
.ex-info .meta { color: var(--muted); font-size: 13px; }
.ex-info .tags { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.tag { background: var(--card-2); border: 1px solid var(--line); padding: 3px 10px; border-radius: 999px; font-size: 12px; color: var(--muted); }
.ex-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.done-flag { color: var(--good); font-weight: 800; }

.rest-card { text-align: center; padding: 40px; }
.rest-card .e { font-size: 64px; }

.celebrate {
  text-align: center; padding: 22px; border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(52,211,153,.15), rgba(45,212,191,.1));
  border: 1px solid rgba(52,211,153,.4); color: var(--good); font-weight: 800; font-size: 18px; margin-bottom: 18px;
}

/* ---------- المكتبة ---------- */
.lib-controls { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; }
.lib-search { flex: 1; min-width: 220px; padding: 12px 16px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; color: var(--text); font-size: 15px; }
.lib-search:focus { outline: none; border-color: var(--brand); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters button { background: var(--card); border: 1px solid var(--line); color: var(--muted); padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.filters button.active { background: var(--card-2); color: #fff; border-color: var(--brand); }

/* ---------- التقدّم ---------- */
.heatmap { display: grid; grid-template-columns: repeat(15, 1fr); gap: 6px; }
.heatmap .cell { aspect-ratio: 1; border-radius: 6px; background: var(--card-2); border: 1px solid var(--line); }
.heatmap .cell.l1 { background: rgba(45,212,191,.35); }
.heatmap .cell.l2 { background: rgba(45,212,191,.6); }
.heatmap .cell.l3 { background: var(--accent); }
.heatmap .cell.today { outline: 2px solid var(--brand); }

/* =========================================================================
 *  النافذة المنبثقة (تفاصيل التمرين)
 * ========================================================================= */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(6,9,16,.72);
  display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px);
}
.modal {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px;
  width: 100%; max-width: 760px; max-height: 92vh; overflow-y: auto; box-shadow: var(--shadow);
}
.modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg-2); z-index: 2; }
.modal-head h2 { font-size: 21px; flex: 1; }
.modal-close { background: var(--card-2); border: 1px solid var(--line); color: var(--text); width: 36px; height: 36px; border-radius: 10px; font-size: 18px; }
.modal-body { padding: 22px; }

.media-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.media-tabs button { flex: 1; background: var(--card); border: 1px solid var(--line); color: var(--muted); padding: 10px; border-radius: 10px; font-weight: 700; }
.media-tabs button.active { background: var(--card-2); color: #fff; border-color: var(--brand); }

.media-stage { background: #0a0e18; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; aspect-ratio: 16/9; display: grid; place-items: center; }
.media-stage iframe { width: 100%; height: 100%; border: 0; }
.media-stage .anim-host { width: 100%; height: 100%; display: grid; place-items: center; }
.media-stage .no-video { color: var(--muted); text-align: center; padding: 20px; }

.detail-block { margin-top: 20px; }
.detail-block h4 { font-size: 15px; color: var(--brand-2); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.detail-block ol { padding-inline-start: 20px; display: grid; gap: 6px; }
.detail-block .pill-row { display: flex; gap: 18px; flex-wrap: wrap; }
.detail-block .pill { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; text-align: center; }
.detail-block .pill .n { font-size: 22px; font-weight: 800; }
.detail-block .pill .l { color: var(--muted); font-size: 12px; }
.tip-box { background: rgba(45,212,191,.1); border: 1px solid rgba(45,212,191,.35); border-radius: 12px; padding: 12px 16px; color: var(--accent-2); }

.modal-foot { padding: 16px 22px; border-top: 1px solid var(--line); display: flex; gap: 10px; position: sticky; bottom: 0; background: var(--bg-2); }

/* =========================================================================
 *  خريطة العضلات (Body Map)
 * ========================================================================= */
.bodymap { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.bodymap svg { height: 100%; width: auto; max-width: 100%; display: block; overflow: visible; }

/* العضلات تَرِث لون الـ fill من المجموعة (fill خاصية موروثة في SVG) */
.bodymap .muscle      { fill: #4a5680; transition: fill .2s ease, filter .2s ease; }
.bodymap .muscle-line { fill: none; stroke: rgba(8,12,22,.35); stroke-width: 1.1; }
.bodymap.interactive .muscle { cursor: pointer; }
.bodymap.interactive .muscle:hover { fill: var(--brand-2); }
.bodymap .muscle.hl   { fill: var(--brand); }
.bodymap .muscle.sel  { fill: var(--accent); filter: drop-shadow(0 0 5px rgba(45,212,191,.65)); }

/* تخطيط صفحة الجسم */
.body-layout { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 16px; align-items: start; }
.body-figs { display: contents; }
.body-figure {
  background: linear-gradient(180deg, var(--card), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 10px;
  text-align: center; box-shadow: var(--shadow);
}
.body-figure h4 { color: var(--muted); font-size: 14px; margin-bottom: 8px; font-weight: 700; }
.body-figure .bodymap { height: 56vh; min-height: 360px; max-height: 480px; }

.body-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow); position: sticky; top: 84px; min-height: 360px;
}
.body-panel .ph { color: var(--muted); text-align: center; padding: 40px 10px; }
.body-panel .sel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.body-panel .sel-head .dot { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: rgba(255,107,53,.18); }
.body-panel .sel-head .nm { font-size: 18px; font-weight: 800; }
.body-panel .sel-head .ct { color: var(--muted); font-size: 13px; }
.body-panel .ex-list { display: grid; gap: 10px; }
.body-ex {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; transition: .15s;
}
.body-ex:hover { border-color: var(--brand); transform: translateX(-3px); }
[dir="ltr"] .body-ex:hover { transform: translateX(3px); }
.body-ex .mini { width: 40px; height: 48px; flex: 0 0 40px; }
.body-ex .t { flex: 1; }
.body-ex .t b { display: block; font-size: 15px; }
.body-ex .t span { color: var(--muted); font-size: 12px; }
.body-ex .go { color: var(--brand-2); font-weight: 800; }

/* تلميح اسم العضلة */
.body-tip {
  position: fixed; z-index: 60; pointer-events: none; background: #06121f;
  border: 1px solid var(--accent); color: var(--accent-2); padding: 5px 11px;
  border-radius: 8px; font-size: 13px; font-weight: 700; transform: translate(-50%, -130%);
  white-space: nowrap; box-shadow: var(--shadow); opacity: 0; transition: opacity .1s;
}
.body-tip.show { opacity: 1; }

/* الجسم داخل نافذة التمرين */
.media-stage .body-stage { background: radial-gradient(380px 240px at 50% 30%, #16203a, #0a0e18); }
.body-stage .bodymap { padding: 8px; }

/* الجسم المصغّر داخل بطاقة التمرين */
.ex-thumb .bodymap { padding: 4px; }

/* =========================================================================
 *  استجابة للجوال
 * ========================================================================= */
@media (max-width: 880px) {
  #auth-screen { grid-template-columns: 1fr; }
  .auth-hero { padding: 40px 28px; }
  .auth-hero h1 { font-size: 30px; }
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .hero-card { flex-direction: column; text-align: center; }
  .hero-card .spacer { margin: 0; }
  .heatmap { grid-template-columns: repeat(10, 1fr); }
}
/* (تم نقل تنسيقات الهاتف إلى كتلة 620px المُلحقة في الأسفل) */


/* ===================== REST TIMER (مؤقّت الراحة) ===================== */
/* =========================================================================
 * REST TIMER  —  styles (namespaced .rest-timer*)
 * Uses existing :root tokens (--card --card-2 --line --text --muted
 * --brand --good --radius --shadow --font --safe-b). All self-contained;
 * no dependency on .sheet / .modal styles.
 * ========================================================================= */

.rest-timer-root { /* detached mount; no box of its own */ }

.rest-timer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(6, 9, 16, .55);
  opacity: 0;
  transition: opacity .22s ease;
  -webkit-tap-highlight-color: transparent;
}
.rest-timer-backdrop.show { opacity: 1; }

.rest-timer-card {
  width: 100%;
  max-width: 460px;
  max-height: 86vh;
  box-sizing: border-box;
  background: var(--card, #161b29);
  color: var(--text, #e8edf6);
  border-radius: 22px 22px 0 0;
  box-shadow: var(--shadow, 0 -10px 40px rgba(0, 0, 0, .45));
  padding: 8px 18px calc(env(safe-area-inset-bottom, 0px) + 18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.32, .72, 0, 1);
  font-family: var(--font, system-ui, sans-serif);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.rest-timer-backdrop.show .rest-timer-card { transform: translateY(0); }

/* while finger is dragging the sheet, kill the transition so it tracks 1:1 */
.rest-timer-card.dragging { transition: none; }

/* desktop: center the card instead of bottom-sheet */
@media (min-width: 621px) {
  .rest-timer-backdrop { align-items: center; }
  .rest-timer-card { border-radius: 22px; max-height: 92vh; }
}

.rest-timer-grab {
  width: 40px;
  height: 5px;
  border-radius: 3px;
  background: var(--line, #2a3142);
  margin: 2px auto 2px;
  flex: none;
}

.rest-timer-h {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted, #9aa6bd);
  text-align: center;
}
.rest-timer-sub {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #e8edf6);
  text-align: center;
  margin-top: -8px;
}

.rest-timer-ring-host {
  position: relative;
  width: min(64vw, 230px);
  aspect-ratio: 1 / 1;
}
.rest-timer-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);          /* start fill at 12 o'clock */
  display: block;
}
.rest-timer-ring-bg {
  fill: none;
  stroke: var(--line, #2a3142);
  stroke-width: 10;
}
.rest-timer-ring-fg {
  fill: none;
  stroke: var(--brand, #ff6b35);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear, stroke .25s ease;
}
.rest-timer-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(34px, 12vw, 46px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
  color: var(--text, #e8edf6);
  text-align: center;
  padding: 0 6px;
  line-height: 1.05;
}

/* paused: dim the ring slightly */
.rest-timer-card.paused .rest-timer-ring-fg { stroke: var(--muted, #9aa6bd); }
.rest-timer-card.paused .rest-timer-num { opacity: .7; }

/* done: green ring + accent number */
.rest-timer-card.done .rest-timer-ring-fg { stroke: var(--good, #34d399); }
.rest-timer-card.done .rest-timer-num { color: var(--good, #34d399); font-size: clamp(18px, 6vw, 24px); }

.rest-timer-btns {
  display: flex;
  gap: 10px;
  width: 100%;
}
.rest-timer-btn {
  flex: 1;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid var(--line, #2a3142);
  background: var(--card-2, #1d2433);
  color: var(--text, #e8edf6);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background .15s ease, filter .15s ease;
}
.rest-timer-btn:active { transform: scale(.97); }
.rest-timer-ghost { background: transparent; color: var(--muted, #9aa6bd); }
.rest-timer-ghost:active { background: rgba(255, 255, 255, .05); }
.rest-timer-primary {
  background: var(--brand, #ff6b35);
  border-color: transparent;
  color: #fff;
}
.rest-timer-primary:active { filter: brightness(1.08); }

@media (prefers-reduced-motion: reduce) {
  .rest-timer-backdrop,
  .rest-timer-card { transition: none; }
  .rest-timer-ring-fg { transition: stroke-dashoffset .2s linear; }
}


/* ===================== MOBILE / PWA (تجاوب الجوال) ===================== */
/* =========================================================================
 *  PHONE-FIRST MOBILIZATION  —  appended additions / overrides only
 *  (نادي التدريب المنزلي · Sky Land GM-8149)
 *  Paste at END of styles.css. Also change line-355 `560px` -> `620px`.
 * ========================================================================= */

/* ---------- 1.2  NEW design tokens (only --warn is a new color) ---------- */
:root {
  --warn:      #f59e0b;                       /* amber — "recovering" */
  --tabbar-h:  64px;
  --safe-t:    env(safe-area-inset-top, 0px);
  --safe-b:    env(safe-area-inset-bottom, 0px);
  --sheet-max: 72vh;
}

/* ---------- 44px+ tap targets (touch-only, no hover dependence) ---------- */
.btn { min-height: 44px; -webkit-tap-highlight-color: transparent; }
.btn-sm { min-height: 40px; }
.nav button { min-height: 44px; }
.lang-toggle { min-height: 44px; -webkit-tap-highlight-color: transparent; }
.filters button,
.media-tabs button,
.modal-close { min-height: 44px; }
.body-ex { min-height: 56px; -webkit-tap-highlight-color: transparent; }

/* =========================================================================
 *  2)  BOTTOM TAB BAR  (#tab-nav .tab) — hidden on desktop by default
 * ========================================================================= */
.tabbar { display: none; }
.tab {
  background: transparent; border: 0; color: var(--muted);
  -webkit-tap-highlight-color: transparent;
}

/* =========================================================================
 *  3)  SEGMENTED FRONT/BACK TOGGLE  (.seg / .seg-btn ; alias .body-toggle)
 * ========================================================================= */
.body-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.seg, .body-toggle {
  display: inline-flex; background: var(--card-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px;
}
.seg-btn, .body-toggle > button {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
  background: none; color: var(--muted); font-weight: 700; font-size: 14px;
  -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s;
}
.seg-btn.on,
.body-toggle > button.on,
.body-toggle > button.active {
  background: var(--brand); color: #fff;
}
@media (min-width: 621px) { #body-seg, .body-toggle { display: none; } }

/* =========================================================================
 *  4)  RECOVERY-HEAT  (fills active only under .body-layout.heat-on)
 *      class names: .heat-worked / .heat-recovering / .heat-needs
 *      aliases honored: .heat-recover / .heat-need
 * ========================================================================= */
.body-layout.heat-on .muscle { transition: fill .2s ease; }
.body-layout.heat-on .muscle.heat-worked     { fill: var(--good); }
.body-layout.heat-on .muscle.heat-recovering,
.body-layout.heat-on .muscle.heat-recover    { fill: var(--warn); }
.body-layout.heat-on .muscle.heat-needs,
.body-layout.heat-on .muscle.heat-need       { fill: var(--danger); }

/* selection outline must win on top of any heat fill */
.body-layout.heat-on .muscle.sel {
  fill: var(--accent) !important; stroke: var(--text); stroke-width: 1.5;
  filter: drop-shadow(0 0 5px rgba(45,212,191,.65));
}

/* heat toggle button + legend */
.heat-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  color: var(--muted); font-weight: 700; font-size: 13px;
  -webkit-tap-highlight-color: transparent; transition: background .15s, border-color .15s, color .15s;
}
.heat-toggle.on {
  background: rgba(255,107,53,.15); border-color: rgba(255,107,53,.4); color: var(--brand-2);
}
.heat-legend {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  margin: 8px 0 14px; font-size: 12px; color: var(--muted);
}
.heat-legend .hl-cap { width: 100%; }
.heat-legend .sw {
  width: 12px; height: 12px; border-radius: 3px; display: inline-block;
  margin-inline-end: 6px; vertical-align: -1px;
}

/* =========================================================================
 *  3.4 / 3.7  BOTTOM SHEET  (.sheet-backdrop > .sheet ; state = .show)
 *      grab handle: .sheet-grab (alias .sheet-handle)
 * ========================================================================= */
#sheet-root:empty { display: none; }
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 60; background: rgba(6,9,16,.55);
  display: flex; align-items: flex-end; opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.sheet-backdrop.show { opacity: 1; pointer-events: auto; }
.sheet {
  width: 100%; max-height: var(--sheet-max); background: var(--card); color: var(--text);
  border-radius: 20px 20px 0 0; box-shadow: var(--shadow);
  transform: translateY(100%); transition: transform .26s cubic-bezier(.32,.72,0,1);
  padding-bottom: var(--safe-b); display: flex; flex-direction: column;
}
.sheet-backdrop.show .sheet { transform: translateY(0); }
.sheet-grab, .sheet-handle {
  width: 40px; height: 5px; border-radius: 3px; background: var(--line);
  margin: 10px auto 6px; flex: none;
}
.sheet-body {
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px 18px;
}
.sheet .sel-head { position: relative; }
.sheet-x {
  margin-inline-start: auto; width: 40px; height: 40px; border: 0; border-radius: 12px;
  background: var(--card-2); color: var(--text); font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

/* alias path: a body-panel pressed into service as a bottom sheet */
.body-panel.sheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60; top: auto;
  border-radius: 20px 20px 0 0; max-height: var(--sheet-max); overflow-y: auto;
  padding-bottom: calc(18px + var(--safe-b));
  transform: translateY(100%); transition: transform .26s cubic-bezier(.32,.72,0,1);
}
.body-panel.sheet.open { transform: translateY(0); }

/* =========================================================================
 *  6.2  REST TIMER RING
 * ========================================================================= */
.rest-sheet .rest-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 6px 4px 10px;
}
.rest-h { color: var(--muted); font-weight: 700; }
.ring-host { position: relative; width: min(64vw, 220px); aspect-ratio: 1; }
.ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--line); stroke-width: 10; }
.ring-fg { fill: none; stroke: var(--brand); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.ring-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 42px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rest-btns { display: flex; gap: 10px; width: 100%; }
.rest-btns .btn { flex: 1; min-height: 48px; }

/* =========================================================================
 *  TABLET (<=880px) tweaks — keep existing block, add body-layout reflow
 * ========================================================================= */
@media (max-width: 880px) {
  .body-layout { grid-template-columns: 1fr 1fr; }
  .body-layout .body-panel { grid-column: 1 / -1; position: static; }
}

/* =========================================================================
 *  PHONE  (<=620px)  — replaces the old 560px block (C-3)
 * ========================================================================= */
@media (max-width: 620px) {

  /* ---- slim, sticky, safe-area-aware topbar ---- */
  .topbar {
    position: sticky; top: 0; z-index: 40;
    padding-top: calc(12px + var(--safe-t)); min-height: 52px;
    gap: 8px; flex-wrap: nowrap;
  }
  .brand .bt small { display: none; }          /* slim brand (C-4) */

  /* ---- hide the long top nav; the tab bar takes over ---- */
  .nav { display: none; }

  /* ---- content never sits under the fixed tab bar ---- */
  .content {
    padding: 22px 16px;
    padding-bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
  }

  /* ---- BOTTOM TAB BAR ---- */
  .tabbar {
    display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
    height: calc(var(--tabbar-h) + var(--safe-b));
    padding-bottom: var(--safe-b);
    justify-content: space-around; align-items: stretch;
    background: var(--bg-2);
    background: color-mix(in srgb, var(--bg-2) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(0,0,0,.35);
  }
  .tab {
    flex: 1; min-height: 44px; padding: 6px 2px 4px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: transparent; border: 0; color: var(--muted);
    font: 700 11px/1 var(--font);
  }
  .tab .ti { font-size: 20px; line-height: 1; }
  .tab .tl { font-size: 10.5px; font-weight: 700; }
  .tab.active { color: var(--brand); }
  .tab.active .ti { transform: translateY(-1px) scale(1.06); transition: transform .18s ease; }
  .tab:active { background: rgba(255,107,53,.08); }   /* touch feedback, NOT hover */

  /* ---- full-screen modal on phones ---- */
  .modal-overlay {
    padding: 0; align-items: stretch;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .modal {
    max-width: none; width: 100%; max-height: none; height: 100%;
    border-radius: 0; border: 0;
  }
  .modal-head { padding-top: calc(18px + var(--safe-t)); }
  .modal-foot {
    padding-bottom: calc(16px + var(--safe-b)); flex-wrap: wrap;
  }
  .modal-foot .btn { flex: 1; }

  /* ---- single-figure body map; CSS swaps via [data-active-view] ---- */
  .body-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
  .body-layout { display: block; }
  /* the side panel becomes a bottom sheet on phones (toggled by .open in JS) */
  .body-layout .body-panel {
    display: block; position: fixed; inset-inline: 0; bottom: 0; top: auto; z-index: 70;
    margin: 0; border-radius: 20px 20px 0 0; max-height: var(--sheet-max); overflow-y: auto;
    padding-bottom: calc(18px + var(--safe-b)); box-shadow: 0 -10px 40px rgba(0,0,0,.45);
    transform: translateY(110%); transition: transform .26s cubic-bezier(.32,.72,0,1);
  }
  .body-layout .body-panel.open { transform: translateY(0); }
  .body-layout .body-figure { display: none; }
  .body-layout[data-active-view="front"] .body-figure[data-view="front"] { display: block; }
  .body-layout[data-active-view="back"]  .body-figure[data-view="back"]  { display: block; }
  .body-figure .bodymap { height: min(58vh, 460px); min-height: 0; max-height: 62vh; }

  /* alias path: .is-active marks the visible figure */
  .body-layout .body-figure.is-active { display: block; }

  /* ---- general phone reflow (carried over from old 560px block) ---- */
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .exercise-card { flex-wrap: wrap; }
  .ex-actions { flex-direction: row; width: 100%; }
  .ex-actions .btn { flex: 1; }
  .auth-hero h1 { font-size: 26px; }

  /* lib search/filters wrap cleanly */
  .lib-controls { gap: 10px; }
  .filters { width: 100%; }

  /* progress heatmap tighter on phone */
  .heatmap { grid-template-columns: repeat(10, 1fr); }
}

/* =========================================================================
 *  RTL / LTR niceties for the new mobile chrome
 * ========================================================================= */
/* .sheet-x already uses margin-inline-start:auto (direction-aware) — no
   dir-specific override needed; the old dir rules were no-ops. */
[dir="rtl"] .body-ex .go { transform: scaleX(-1); }   /* flip directional arrow in RTL */
[dir="ltr"] .body-ex .go { transform: scaleX(1); }
[dir="ltr"] .body-ex:active { transform: translateX(2px); }
[dir="rtl"] .body-ex:active { transform: translateX(-2px); }

/* =========================================================================
 *  Reduced-motion: kill non-essential transitions/animations
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet-backdrop,
  .body-panel.sheet,
  .tab.active .ti,
  .ring-fg,
  .seg-btn, .body-toggle > button,
  .heat-toggle,
  .body-layout.heat-on .muscle { transition: none; }
}


/* =========================================================================
 *  تكميلي: رأس صفحة الجسم + مبدّل الوضع + ألوان مفتاح التعافي + مقبض اللوحة
 * ========================================================================= */
.body-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.mode-toggle { display:inline-flex; background:var(--card-2); border:1px solid var(--line); border-radius:999px; padding:3px; }
.mode-toggle button { min-height:40px; padding:0 16px; border:0; border-radius:999px; background:none; color:var(--muted); font-weight:700; font-size:14px; -webkit-tap-highlight-color:transparent; transition:background .15s,color .15s; }
.mode-toggle button.active { background:var(--brand); color:#fff; }
.heat-legend .hl-item { display:inline-flex; align-items:center; }
.heat-legend .sw.heat-worked { background: var(--good); }
.heat-legend .sw.heat-recover, .heat-legend .sw.heat-recovering { background: var(--warn); }
.heat-legend .sw.heat-need, .heat-legend .sw.heat-needs { background: var(--danger); }
.body-panel .sheet-handle { display:none; }
@media (max-width:620px){
  .body-panel .sheet-handle { display:block; }
  .body-head { flex-direction:column; }
  .mode-toggle { width:100%; }
  .mode-toggle button { flex:1; }
}


/* ===================== WEIGHT LOGGING (تتبّع الأوزان) ===================== */
/* ============================================================
   WEIGHT / REPS LOGGING  — appended additions (logging.js UI)
   Uses existing CSS vars; phone-first; taps >=44px; RTL/LTR safe.
   ============================================================ */

/* ---- modal log block ---- */
.log-block .log-stats{ margin-bottom: 12px; }
.log-block .log-stats .pill.pr .n{ color: var(--accent); }

.log-chart{ width: 100%; margin: 4px 0 14px; }
.log-chart svg{ width: 100%; height: auto; display: block; }

.log-form{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }

/* weight stepper: [ - ] [ value kg ] [ + ] */
.log-stepper{ display: flex; align-items: stretch; gap: 8px; flex: 1 1 220px; }
.step-btn{
  min-width: 48px; min-height: 48px;
  border: 1px solid var(--line); background: var(--card-2);
  color: var(--muted); border-radius: 12px;
  font-size: 22px; font-weight: 800; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  -webkit-tap-highlight-color: transparent; user-select: none;
  transition: background .12s, color .12s;
}
.step-btn:active{ background: var(--brand); color: #fff; border-color: var(--brand); }

.log-weight-field{ position: relative; flex: 1; margin: 0; }
.log-weight-field input,
.log-reps-field input{
  min-height: 48px; text-align: center;
  font-size: 20px; font-weight: 800;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; color: var(--text); width: 100%;
}
/* leave room for the absolutely-positioned unit label so the
   centered value never renders underneath "kg" (both LTR + RTL) */
.log-weight-field input{ padding-inline-end: 34px; }
.log-weight-field input:focus,
.log-reps-field input:focus{ outline: none; border-color: var(--brand); }

/* unit label hugs the trailing edge in both LTR and RTL */
.log-unit{
  position: absolute; inset-inline-end: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted); font-size: 13px; pointer-events: none;
}

.log-reps-field{ flex: 0 0 90px; margin: 0; }

.log-save{ min-height: 48px; flex: 0 0 auto; min-width: 96px; }
.log-save.saved{ background: var(--good); border-color: var(--good); color: #062; }

/* ---- inline SVG chart (modal + sparkline) ---- */
.wchart{ width: 100%; height: auto; display: block; }
.wc-line{
  fill: none; stroke: var(--brand); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round;
}
.wc-dot{ fill: var(--brand); }
.wc-dot.pr{ fill: var(--accent); stroke: var(--bg-2); stroke-width: 1.5; }
.wc-lbl{ fill: var(--muted); font-size: 11px; font-weight: 700; }
.wc-empty{ fill: var(--muted); font-size: 12px; text-anchor: middle; }

/* ---- Progress page: Personal Records section ---- */
.pr-list{ display: flex; flex-direction: column; gap: 10px; }
.pr-row{
  display: flex; align-items: center; gap: 12px;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 14px;
}
.pr-name{
  font-weight: 700; flex: 1; min-width: 0; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pr-spark{ flex: 0 0 120px; width: 120px; }
.pr-spark svg{ width: 120px; height: 40px; display: block; }
.pr-vals{
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; flex: 0 0 auto;
}
.pr-best{ color: var(--accent); font-weight: 800; }
.pr-last{ font-size: 12px; }

/* ---- phone reflow (<=620px) ---- */
@media (max-width: 620px){
  .log-form{ gap: 10px; }
  .log-reps-field{ flex: 1 1 100%; }
  .log-save{ flex: 1 1 100%; }
  .pr-spark{ flex: 0 0 90px; width: 90px; }
  .pr-spark svg{ width: 90px; }
}