/* ============================================================
   תוכנית כוח למיטל — עיצוב
   Editorial print-journal aesthetic: warm paper, deep ink,
   single clay accent. Built for reading on a phone in a gym.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;500;700;900&family=Assistant:wght@300;400;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --paper:        #F5F1E8;
  --paper-raised: #FDFBF6;
  --paper-sunk:   #EDE7DA;
  --ink:          #191713;
  --ink-soft:     #5A544A;
  --ink-faint:    #948A78;
  --clay:         #B04A24;
  --clay-bright:  #D9764C;
  --clay-wash:    #F0DED4;
  --sage:         #62735A;
  --sage-wash:    #E2E6DA;
  --rule:         #DCD3C2;
  --rule-strong:  #C3B8A2;

  --display: 'Frank Ruhl Libre', 'Times New Roman', serif;
  --body:    'Assistant', 'Segoe UI', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  --maxw: 62rem;
  --gap: clamp(1rem, 3vw, 2rem);
  --radius: 3px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #15120E;
    --paper-raised: #1E1A15;
    --paper-sunk:   #100E0A;
    --ink:          #F2EDE2;
    --ink-soft:     #B6AC9B;
    --ink-faint:    #7D7364;
    --clay:         #E0794C;
    --clay-bright:  #F09468;
    --clay-wash:    #342117;
    --sage:         #9DAE93;
    --sage-wash:    #23281F;
    --rule:         #332C24;
    --rule-strong:  #4A4136;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Paper grain — subtle atmosphere, not texture-for-its-own-sake */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .38;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { body::before { opacity: .16; } }

.wrap { position: relative; z-index: 1; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gap); }

/* ---------- Typography ---------- */

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.12; margin: 0; letter-spacing: -0.01em; }

/* .num — for pure numbers / latin only. Forces LTR, so never use it on
   text containing Hebrew words (it would reorder them). */
.num {
  font-family: var(--mono);
  font-weight: 500;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* .figs — mixed Hebrew + numbers. Tabular figures, but keeps RTL order. */
.figs {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

a { color: var(--clay); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--clay-bright); }

.eyebrow {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clay);
  direction: ltr;
  unicode-bidi: isolate;
}
.eyebrow--he { direction: rtl; letter-spacing: .1em; font-family: var(--body); font-size: .8rem; }

/* ---------- Masthead ---------- */

.masthead {
  border-block-end: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1.75rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
}

/* Oversized ghost glyph bleeding off the inline-END edge, away from the
   right-aligned Hebrew text so it never competes with the headline. */
.masthead__ghost {
  position: absolute;
  inset-block-start: -.16em;
  inset-inline-end: -.05em;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(9rem, 26vw, 20rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px var(--rule-strong);
  opacity: .45;
  pointer-events: none;
  user-select: none;
}
/* On narrow screens the text fills the width — drop it to a faint watermark */
@media (max-width: 52rem) {
  .masthead__ghost { opacity: .16; font-size: clamp(8rem, 42vw, 14rem); }
}

.masthead__inner { position: relative; }

.masthead h1 {
  font-size: clamp(2.4rem, 8vw, 4.6rem);
  font-weight: 900;
  max-width: 24ch;
  margin-block: .35rem .9rem;
}
.masthead h1 em { font-style: normal; color: var(--clay); }

.masthead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.35rem;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--ink-soft);
  padding-block-start: 1rem;
  border-block-start: 2px solid var(--ink);
  max-width: 44rem;
}
.masthead__meta span { direction: rtl; }
.masthead__lede {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 42ch;
  margin: 0;
}

/* ---------- Section headers ---------- */

.sec { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.sec + .sec { border-block-start: 1px solid var(--rule); }

.sec__head { display: flex; align-items: baseline; gap: 1rem; margin-block-end: 2rem; }
.sec__head h2 { font-size: clamp(1.5rem, 4vw, 2.15rem); }
.sec__head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule-strong);
  transform: translateY(-.35em);
}

/* ---------- Day cards (index) ---------- */

.days { display: grid; gap: 1.25rem; }

.daycard {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 clamp(1rem, 3vw, 2rem);
  align-items: start;
  padding: clamp(1.35rem, 3.5vw, 2.25rem);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color .3s, transform .3s, box-shadow .3s;
  animation: rise .7s cubic-bezier(.2,.7,.3,1) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
/* Accent rule on the inline-start edge, grows on hover */
.daycard::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--clay);
  transition: width .3s cubic-bezier(.2,.7,.3,1);
}
.daycard:hover, .daycard:focus-visible {
  border-color: var(--rule-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -18px rgba(0,0,0,.35);
  outline: none;
}
.daycard:hover::before, .daycard:focus-visible::before { width: 7px; }

.daycard__letter {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3rem, 9vw, 4.75rem);
  line-height: .82;
  color: var(--clay);
  grid-row: span 2;
}
.daycard h3 { font-size: clamp(1.25rem, 3.4vw, 1.7rem); margin-block-end: .3rem; }
.daycard__sub { color: var(--ink-soft); font-size: .95rem; margin: 0 0 .85rem; }
.daycard__list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
  grid-column: 2;
}
.daycard__list li {
  font-family: var(--mono);
  font-size: .7rem;
  padding: .2rem .5rem;
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  color: var(--ink-soft);
  direction: rtl;
}

/* ---------- Generic link tiles ---------- */

.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.tile {
  display: block;
  padding: 1.5rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: background .25s, border-color .25s, transform .25s;
}
.tile:hover { background: var(--clay-wash); border-color: var(--clay); transform: translateY(-2px); }
.tile h3 { font-size: 1.2rem; margin-block-end: .35rem; }
.tile p { margin: 0; font-size: .9rem; color: var(--ink-soft); }

/* ---------- Principles ---------- */

.principles { counter-reset: p; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.principle { position: relative; padding-block-start: 1rem; border-block-start: 2px solid var(--ink); }
.principle::before {
  counter-increment: p;
  content: counter(p, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  color: var(--clay);
  display: block;
  margin-block-end: .5rem;
}
.principle h3 { font-size: 1.1rem; margin-block-end: .3rem; }
.principle p { margin: 0; font-size: .92rem; color: var(--ink-soft); }

/* ---------- Callout ---------- */

.callout {
  background: var(--sage-wash);
  border-inline-start: 4px solid var(--sage);
  border-radius: var(--radius);
  padding: clamp(1.15rem, 3vw, 1.75rem);
  margin-block: 2rem;
}
.callout--clay { background: var(--clay-wash); border-inline-start-color: var(--clay); }
.callout h3 { font-size: 1.15rem; margin-block-end: .5rem; }
.callout p { margin: 0 0 .6rem; font-size: .95rem; }
.callout p:last-child { margin-block-end: 0; }

/* ---------- Warm-up (details) ---------- */

.warmup {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  margin-block-end: 2.5rem;
  overflow: hidden;
}
.warmup > summary {
  cursor: pointer;
  padding: 1.1rem clamp(1rem, 3vw, 1.5rem);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  list-style: none;
  transition: background .2s;
}
.warmup > summary::-webkit-details-marker { display: none; }
.warmup > summary::after {
  content: '+';
  margin-inline-start: auto;
  font-family: var(--mono);
  font-size: 1.4rem;
  color: var(--clay);
  transition: transform .3s;
}
.warmup[open] > summary::after { transform: rotate(45deg); }
.warmup > summary:hover { background: var(--paper-sunk); }
.warmup__body { padding: 0 clamp(1rem, 3vw, 1.5rem) 1.5rem; border-block-start: 1px solid var(--rule); padding-block-start: 1.25rem; }
.warmup__note { font-size: .9rem; color: var(--ink-soft); margin-block: 0 1.1rem; }

.mob { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.mob li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .75rem;
  align-items: center;
  padding-block: .55rem;
  border-block-end: 1px dotted var(--rule-strong);
  font-size: .95rem;
}
.mob li:last-child { border-block-end: 0; }
.mob__reps { font-family: var(--mono); font-size: .8rem; color: var(--ink-soft); direction: ltr; unicode-bidi: isolate; }
.mob__vid {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  padding: .2rem .5rem;
  border: 1px solid var(--clay);
  border-radius: 100px;
  color: var(--clay);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.mob__vid:hover { background: var(--clay); color: var(--paper); }

/* ---------- Exercise cards ---------- */

.exlist { display: grid; gap: 1.5rem; }

.ex {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 0 clamp(1rem, 3vw, 1.75rem);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(1rem, 2.5vw, 1.35rem);
  animation: rise .7s cubic-bezier(.2,.7,.3,1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
  transition: border-color .3s;
}
.ex:hover { border-color: var(--rule-strong); }
.ex--main { border-inline-start: 4px solid var(--clay); }
.ex--prep { border-inline-start: 4px solid var(--sage); }

@media (max-width: 46rem) {
  .ex { grid-template-columns: 1fr; }
}

/* thumbnail / video link */
.ex__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 2px;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg, var(--paper-sunk) 0 8px, var(--paper) 8px 16px);
  border: 1px solid var(--rule);
  align-self: start;
}
.ex__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(.55) contrast(1.03);
  transition: filter .4s, transform .5s;
}
.ex__thumb:hover img { filter: grayscale(0); transform: scale(1.04); }

.ex__play {
  position: absolute;
  inset-block-end: .5rem;
  inset-inline-start: .5rem;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--clay);
  color: #fff;
  font-size: .8rem;
  padding-inline-start: 2px;
  box-shadow: 0 3px 10px rgba(0,0,0,.3);
  transition: transform .3s;
}
.ex__thumb:hover .ex__play { transform: scale(1.12); }

.ex__watch {
  position: absolute;
  inset-block-end: .5rem;
  inset-inline-start: 3.2rem;
  font-family: var(--mono);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .04em;
  background: rgba(0,0,0,.72);
  color: #fff;
  padding: .28rem .55rem;
  border-radius: 100px;
  direction: rtl;
}

/* body */
.ex__body { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
@media (max-width: 46rem) { .ex__body { padding-block-start: 1rem; } }

.ex__top { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.ex__idx {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  color: var(--clay);
  direction: ltr;
  unicode-bidi: isolate;
}
.ex__name { font-size: clamp(1.15rem, 3vw, 1.45rem); }

.tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.tag {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .07em;
  padding: .18rem .5rem;
  border-radius: 100px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-soft);
  direction: rtl;
  white-space: nowrap;
}
.tag--main { background: var(--clay); border-color: var(--clay); color: #fff; }
.tag--prep { background: var(--sage); border-color: var(--sage); color: #fff; }

.ex__alt { font-size: .85rem; color: var(--ink-soft); margin: 0; }

/* spec grid */
.spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
}
.spec > div { background: var(--paper); padding: .5rem .65rem; }
.spec dt {
  font-family: var(--body);
  font-size: .68rem;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: .02em;
  margin-block-end: .1rem;
}
.spec dd { margin: 0; font-family: var(--mono); font-weight: 600; font-size: 1rem; direction: ltr; unicode-bidi: isolate; }
.spec dd.he { font-family: var(--body); direction: rtl; font-size: .88rem; }

/* cues */
.cues { margin: 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.cues li {
  position: relative;
  padding-inline-start: 1.05rem;
  font-size: .92rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.cues li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .62em;
  width: .38rem;
  height: 1px;
  background: var(--clay);
}
.cues li strong { color: var(--ink); font-weight: 700; }

/* ---------- Log widget ---------- */

.log {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .9rem;
  margin-block-start: .2rem;
  padding-block-start: .75rem;
  border-block-start: 1px dashed var(--rule-strong);
}
.log__field { display: flex; align-items: center; gap: .45rem; }
.log__field label { font-size: .78rem; font-weight: 600; color: var(--ink-faint); }
.log__field input {
  width: 4.6rem;
  padding: .35rem .5rem;
  font-family: var(--mono);
  font-size: .9rem;
  font-weight: 600;
  text-align: center;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  direction: ltr;
}
.log__field input:focus { outline: 2px solid var(--clay); outline-offset: 1px; border-color: var(--clay); }

.log__sets { display: flex; align-items: center; gap: .35rem; margin-inline-start: auto; }
.log__sets > span { font-size: .78rem; font-weight: 600; color: var(--ink-faint); margin-inline-end: .15rem; }
.setbox {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, color .18s, border-color .18s, transform .12s;
}
.setbox:hover { border-color: var(--clay); }
.setbox:active { transform: scale(.92); }
.setbox[aria-pressed="true"] { background: var(--clay); border-color: var(--clay); color: #fff; }

/* ---------- Progress bar (day pages) ---------- */

.progbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 0;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--ink-soft);
}
.progbar__track { flex: 1; height: 3px; background: var(--rule); border-radius: 100px; overflow: hidden; }
.progbar__fill { height: 100%; width: 0; background: var(--clay); transition: width .4s cubic-bezier(.2,.7,.3,1); }
.progbar button {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 600;
  padding: .25rem .55rem;
  background: none;
  border: 1px solid var(--rule-strong);
  border-radius: 100px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .2s, color .2s;
  direction: rtl;
}
.progbar button:hover { border-color: var(--clay); color: var(--clay); }

/* ---------- Tables ---------- */

.tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 34rem; }
caption { text-align: start; font-size: .85rem; color: var(--ink-faint); padding: .75rem 1rem 0; }
th, td { padding: .7rem .9rem; text-align: start; border-block-end: 1px solid var(--rule); vertical-align: top; }
thead th {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ink-faint);
  border-block-end: 2px solid var(--ink);
  white-space: nowrap;
}
tbody tr:last-child td { border-block-end: 0; }
tbody tr:hover { background: var(--paper-sunk); }
td.num, th.num { font-family: var(--mono); direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
tr.is-deload td { background: var(--clay-wash); font-weight: 600; }

/* Secondary line inside a workout-sheet cell (e.g. "from week 2: barbell") */
.sub { display: block; margin-block-start: .15rem; font-size: .82rem; line-height: 1.4; color: var(--ink-faint); }
/* Marks an exercise she already knows from the machines month */
.known { color: var(--sage); font-weight: 600; font-size: .85rem; white-space: nowrap; }

/* Footnote under a table (valid replacement for a misplaced <caption>) */
.tnote {
  margin: 0;
  padding: .7rem 1rem .85rem;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--ink-faint);
  border-block-start: 1px solid var(--rule);
  background: var(--paper);
}

/* ---------- Bottom nav ---------- */

.botnav {
  position: sticky;
  inset-block-end: 0;
  z-index: 10;
  margin-block-start: 3rem;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(10px);
  border-block-start: 1px solid var(--rule-strong);
}
.botnav ul {
  display: flex;
  gap: .4rem;
  margin: 0 auto;
  padding: .6rem var(--gap);
  max-width: var(--maxw);
  list-style: none;
  overflow-x: auto;
}
.botnav a {
  display: block;
  padding: .5rem .85rem;
  font-family: var(--body);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-soft);
  border: 1px solid transparent;
  border-radius: 100px;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.botnav a:hover { color: var(--clay); border-color: var(--rule-strong); }
.botnav a[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Footer ---------- */

.foot {
  border-block-start: 1px solid var(--rule);
  padding-block: 2rem 3rem;
  font-size: .82rem;
  color: var(--ink-faint);
}
.foot p { margin: 0 0 .4rem; }

/* ---------- Utilities & motion ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.prose { max-width: 40rem; }
.prose p { margin-block: 0 1rem; }
.prose h3 { font-size: 1.2rem; margin-block: 1.75rem .5rem; }
.prose ul { padding-inline-start: 1.15rem; margin-block: 0 1rem; }
.prose li { margin-block-end: .35rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   MOBILE — מיטל תשתמש בזה מהטלפון, בחדר הכושר.
   זה לא "עוד תמיכה" — זה מסך היעד העיקרי.
   ============================================================ */

/* Guard against any accidental horizontal overflow.
   overflow-x:clip (not hidden) so position:sticky keeps working. */
body { max-width: 100%; overflow-x: clip; }
img { max-width: 100%; height: auto; }
.prose, .callout, .tnote, .cues li, td, th, .daycard__sub { overflow-wrap: break-word; }
/* Don't let the sticky progress bar cover an anchored heading */
html { scroll-padding-block-start: 3.5rem; }

@media (max-width: 46rem) {

  /* ---- Tables become stacked cards, one card per exercise ---- */
  .tablewrap {
    overflow-x: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  .tablewrap table { min-width: 0; display: block; font-size: 1rem; }

  /* header row is for screen readers only — labels move into each cell */
  .tablewrap thead {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .tablewrap tbody { display: block; }

  .tablewrap tbody tr {
    display: block;
    margin-block-end: .8rem;
    padding: .9rem 1rem 1rem;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-inline-start: 3px solid var(--rule-strong);
    border-radius: var(--radius);
  }
  .tablewrap tbody tr:hover { background: var(--paper-raised); }
  .tablewrap tbody tr.is-deload { border-inline-start-color: var(--clay); }
  .tablewrap tbody tr.is-deload td { background: transparent; }

  .tablewrap tbody td {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: .2rem .75rem;
    align-items: baseline;
    padding: .3rem 0;
    border: 0;
    background: transparent;
  }
  .tablewrap tbody td::before {
    content: attr(data-label);
    font-family: var(--body);
    font-size: .72rem;
    font-weight: 700;
    color: var(--ink-faint);
  }
  .tablewrap tbody td:not([data-label])::before { content: none; }

  /* the index column becomes a small clay marker above the title */
  .tablewrap tbody td[data-label="#"] {
    display: block;
    padding: 0;
    margin-block-end: .2rem;
    font-family: var(--mono);
    font-size: .7rem;
    font-weight: 600;
    color: var(--clay);
  }
  .tablewrap tbody td[data-label="#"]::before { content: none; }

  /* the exercise name becomes the card title */
  .tablewrap tbody td[data-label="תרגיל"] {
    display: block;
    padding: 0 0 .5rem;
    margin-block-end: .35rem;
    border-block-end: 1px dotted var(--rule-strong);
    font-family: var(--display);
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
  }
  .tablewrap tbody td[data-label="תרגיל"]::before { content: none; }

  /* long values must wrap on a phone instead of forcing overflow */
  .tablewrap tbody td.num,
  .tablewrap tbody td.figs { white-space: normal; }

  .tnote {
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper-raised);
  }

  /* ---- Warm-up list: video pill drops to its own line ---- */
  .mob li { grid-template-columns: 1fr auto; row-gap: .45rem; }
  .mob li .mob__vid { grid-column: 2; grid-row: 2; }

  /* ---- Bigger touch targets (44px guideline) ---- */
  .setbox { width: 2.6rem; height: 2.6rem; font-size: .9rem; }
  .log { gap: .8rem; }
  .log__sets { margin-inline-start: 0; width: 100%; }
  .log__field input { width: 5.5rem; padding: .55rem; font-size: 1rem; }
  .mob__vid { padding: .38rem .7rem; font-size: .72rem; }
  .botnav a { padding: .65rem .9rem; }
  .warmup > summary { padding-block: 1.15rem; }

  /* ---- Day cards stack cleanly ---- */
  .daycard { grid-template-columns: auto 1fr; gap: 0 1rem; }
  .daycard__letter { font-size: 2.75rem; grid-row: span 1; }
  .daycard__list { grid-column: 1 / -1; margin-block-start: .85rem; }

  /* ---- Spec grid: 2 columns instead of squeezing 4 ---- */
  .spec { grid-template-columns: repeat(2, 1fr); }

  /* ---- Tighter section rhythm so less scrolling ---- */
  .sec { padding-block: 2rem; }
  .sec__head { margin-block-end: 1.25rem; }
  .masthead { padding-block: 2rem 1.5rem; }
}

/* Very narrow phones (iPhone SE and similar) */
@media (max-width: 26rem) {
  .tablewrap tbody td { grid-template-columns: 5.75rem 1fr; }
  .spec { grid-template-columns: 1fr 1fr; }
  .botnav a { font-size: .8rem; padding: .6rem .75rem; }
}

/* ---------- Print ---------- */

@media print {
  :root { --paper: #fff; --paper-raised: #fff; --ink: #000; --ink-soft: #333; --rule: #bbb; }
  body::before, .botnav, .progbar, .log, .masthead__ghost { display: none !important; }
  .ex, .daycard { break-inside: avoid; border: 1px solid #999; animation: none; }
  .ex { grid-template-columns: 8rem 1fr; }
  .warmup[open] .warmup__body, .warmup .warmup__body { display: block !important; }
  a { color: #000; text-decoration: none; }
  .ex__thumb { filter: grayscale(1); }
}