/* Hallmark · Champions Choice Performance — приложение
 * designed-as-app · theme: фирменная палитра Champions Choice (с сертификата замера)
 * перекрашено 16.08.2026: paper #0c1b33 · accent #d51e2c заливки / #f2626a текст · система в design.md
 * телефон: фото-шапка + нижние вкладки · ≥60rem: боковая рейка
 * pre-emit critique: P5 H5 E4 S5 R4 V5 · design-system: tokens.css
 */

/* ================= КАРКАС ================= */
.app{min-height:100dvh;padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}

/* Защита от выезда за экран.
   Ячейка сетки шириной minmax(0,1fr) умеет сжиматься, но текст внутри неё — нет:
   длинное русское слово («НАПАДАЮЩЕГО») не имеет точки переноса и вылезает наружу.
   Поэтому и контейнерам, и самим текстовым элементам нужно разрешить это явно. */
.daycard > *, .ex > *, .exrow__head > *, .morelink > *, .shot__in > *, .panel > *{min-width:0}
.daycard__t,.daycard__m,.ex__name,.exrow__name,.morelink b,.morelink span span,
.kicker,.proto__t,.scale__q,.test__top h3,.panel__head h2,.panel__head h3{
  overflow-wrap:anywhere;min-width:0;
}

/* Шапка агентства: тёмно-синяя полоса, слева знак, справа фирменный красный клин —
   тот же приём, что на сертификате замера. Клин рисуется, а не грузится картинкой. */
.topbar{
  position:sticky;top:0;z-index:var(--z-nav);overflow:hidden;
  display:grid;grid-template-columns:auto auto auto minmax(0,1fr);align-items:center;
  gap:var(--space-2xs) var(--space-xs);
  min-height:var(--topbar-h);padding-inline:var(--gutter);
  padding-top:env(safe-area-inset-top);
  background:var(--color-paper);
  border-bottom:var(--rule-hair) solid var(--color-rule);
}
.topbar::after{
  content:"";position:absolute;top:0;right:0;width:6rem;height:100%;
  background:var(--color-accent);clip-path:polygon(100% 0,100% 100%,0 100%);
}
.topbar > *{position:relative;z-index:1}
/* логотип целиком, вместе с лентой — не режем и не кладём на плашку */
/* Логотип цветной и без подложки. У исходного знака внутри тёмно-синяя заливка —
   на фотографии она читается как синий квадрат, поэтому берём `logo-cut.png`:
   та же картинка, но заливка вырезана в прозрачность. Красная дуга, белый бегун
   и надпись на ленте остались как есть. */
.topbar__logo{width:auto;height:3.4rem;object-fit:contain;display:block;flex:0 0 auto}
/* см. site.css: полное имя не влезает одной строкой в мобильную шапку */
.topbar__mark{
  font-family:var(--font-wordmark);font-size:var(--text-md);font-weight:400;
  letter-spacing:0.02em;text-transform:uppercase;text-decoration:none;line-height:1;
}

.topbar__title{
  justify-self:end;font-size:var(--text-3xs);font-weight:600;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--color-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* «назад» появляется только на экранах, в которые заходят изнутри */
.topbar__back{
  display:none;width:2.75rem;height:2.75rem;margin-inline-start:calc(var(--space-2xs) * -1);
  place-items:center;background:none;border:0;cursor:pointer;color:var(--color-ink);
  border-radius:var(--radius-pill);
}
.topbar__back svg{width:1.25rem;height:1.25rem;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.topbar__back:active{background:var(--color-paper-2)}
.app[data-sub="1"] .topbar__back{display:grid}

/* когда экран открывается с фото-шапкой, верхняя полоса не нужна */
.app[data-shot="1"] .topbar{display:none}

/* ---- нижние вкладки ---- */
.tabbar{
  position:fixed;inset-inline:0;bottom:0;z-index:var(--z-nav);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  background:var(--color-paper);
  border-top:var(--rule-hair) solid var(--color-rule);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar__btn{
  display:grid;justify-items:center;align-content:center;gap:0.25rem;
  min-height:var(--tabbar-h);padding:var(--space-3xs) 0.15rem;
  background:none;border:0;cursor:pointer;color:var(--color-muted);
  transition:color var(--dur-short) var(--ease-out);
}
.tabbar__btn svg{width:1.4rem;height:1.4rem;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tabbar__label{
  font-size:var(--text-3xs);font-weight:600;letter-spacing:0.02em;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.tabbar__btn[aria-selected="true"]{color:var(--color-accent-text)}
.tabbar__btn[aria-selected="true"] svg{stroke-width:2.2}
.tabbar__btn:active{background:var(--color-paper-2)}

.rail{display:none}

/* ================= ЭКРАНЫ ================= */
.screen[hidden]{display:none}
.screen__body{padding-block:var(--space-md) var(--space-2xl)}

/* ---- фото-шапка ---- */
.shot{position:relative;isolation:isolate}
/* На экранах с фото-шапкой верхняя полоса спрятана, поэтому знак агентства
   ставится поверх снимка — вместе с фирменным красным клином в углу. */
.shot__brand{
  position:absolute;top:0;inset-inline-start:0;z-index:3;
  display:flex;align-items:center;gap:0.45rem;
  padding:calc(env(safe-area-inset-top) + 0.6rem) var(--gutter) 0.6rem;
}
.shot__brand img{width:auto;height:4.5rem;object-fit:contain;display:block;
  filter:drop-shadow(0 1px 2px oklch(22.3% 0.051 259.4 / .85))
         drop-shadow(0 3px 12px oklch(22.3% 0.051 259.4 / .7))}
.shot__brand b{font-weight:400;line-height:1}
/* Красная плашка с белым текстом: поверх любой фотографии читается всегда,
   и это тот же приём, что кнопка на сертификате — фирменный красный + белый. */
.shot__brand b span, .topbar__mark span, .sitenav__mark span, .rail__mark span{
  display:inline-block;font-family:var(--font-display);font-size:var(--text-3xs);font-weight:600;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--color-accent-ink);
  background:var(--color-accent);padding:0.22rem 0.5rem 0.18rem;border-radius:var(--radius-xs);
  margin-top:0;line-height:1;
}
.shot__wedge{position:absolute;top:0;right:0;z-index:3;width:4.5rem;height:3rem;pointer-events:none;
  background:var(--color-accent);clip-path:polygon(100% 0,100% 100%,0 0)}
.shot__img{width:100%;height:13.5rem;object-fit:cover;filter:saturate(.85) contrast(1.04)}
.shot::after{content:"";position:absolute;inset:0;background:var(--scrim-strong);z-index:1}
/* Полосы-подложки над фото нет намеренно: она читалась как плашка поперёк кадра.
   Знак держится на собственной тени, поэтому она заметно плотнее обычной. */
.shot__in{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:0 var(--gutter) var(--space-sm)}
.shot__in h1{font-size:var(--text-xl)}
.shot__sub{font-size:var(--text-xs);color:var(--color-ink-2);margin-top:var(--space-3xs)}
.shot__back{
  position:absolute;top:calc(env(safe-area-inset-top) + var(--space-2xs));inset-inline-start:var(--gutter);
  z-index:3;width:2.75rem;height:2.75rem;display:grid;place-items:center;
  border-radius:var(--radius-pill);border:0;cursor:pointer;
  background:oklch(22.3% 0.051 259.4 / .6);color:var(--color-ink);backdrop-filter:blur(6px);
}
.shot__back svg{width:1.2rem;height:1.2rem;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.shot__back:active{background:var(--color-paper-3)}

/* заголовок без фото */
.screen__head{padding:var(--space-md) var(--gutter) var(--space-2xs)}
.screen__head h1{font-size:var(--text-xl)}
.screen__head p{color:var(--color-muted);margin-top:var(--space-2xs);max-width:56ch;font-size:var(--text-xs);line-height:1.65}

.sect-label{
  padding:var(--space-md) var(--gutter) var(--space-2xs);
  font-size:var(--text-3xs);font-weight:600;letter-spacing:0.17em;
  text-transform:uppercase;color:var(--color-muted);
}

/* ---- панель ---- */
.panel{
  margin:0 var(--gutter) var(--space-2xs);
  padding:var(--space-sm);
  background:var(--color-paper-2);
  border-radius:var(--radius-md);
}
.panel__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2xs) var(--space-sm);margin-bottom:var(--space-xs)}
.panel__head h2,.panel__head h3{font-size:var(--text-md)}
.panel > p + p,.panel > p + ul{margin-top:var(--space-2xs)}

.flow{padding-inline:var(--gutter)}
.flow > * + *{margin-top:var(--space-2xs)}

/* ================= НАСТРОЙКА ================= */
.setup{display:grid;gap:var(--space-sm)}
.setup__row{display:grid;gap:var(--space-sm)}

/* ================= НЕДЕЛИ ================= */
.weekbar{
  display:grid;grid-auto-flow:column;grid-auto-columns:max-content;
  gap:var(--space-2xs);
  overflow-x:auto;scroll-snap-type:x proximity;
  padding:var(--space-xs) var(--gutter);
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.weekbar::-webkit-scrollbar{display:none}
.week{scroll-snap-align:start}

/* ================= КАРТОЧКА ДНЯ ================= */
.daycard{
  display:grid;grid-template-columns:4.75rem minmax(0,1fr) auto;
  gap:var(--space-xs);align-items:center;
  width:100%;margin:0 var(--gutter) var(--space-2xs);
  width:calc(100% - var(--gutter) * 2);
  padding:var(--space-2xs);
  background:var(--color-paper-2);border:0;border-radius:var(--radius-md);
  text-align:start;cursor:pointer;
  transition:background-color var(--dur-short) var(--ease-out);
}
.daycard:hover{background:var(--color-paper-3)}
.daycard:active{background:var(--color-paper-3)}
/* следующая тренировка — красная полоса слева, как у ключевых строк сертификата */
.daycard{position:relative;overflow:hidden}
.daycard[data-next="1"]::before{
  content:"";position:absolute;inset-inline-start:0;top:0.5rem;bottom:0.5rem;
  width:var(--rule-thick);background:var(--color-accent);border-radius:0 3px 3px 0;
}
.daycard[data-next="1"]{padding-inline-start:calc(var(--space-2xs) + 0.35rem)}
.daycard__img{width:4.75rem;height:4.75rem;object-fit:cover;border-radius:var(--radius-sm)}
/* display:block обязателен — иначе название и подпись текут одной строкой
   и «9 упражнений» разрывается пополам */
.daycard__t{display:block;font-family:var(--font-display);font-size:var(--text-md);font-weight:600;
  text-transform:uppercase;line-height:1.05;margin-top:0.1rem}
.daycard__m{display:block;font-size:var(--text-2xs);color:var(--color-muted);margin-top:0.25rem}
.daycard__p{
  font-family:var(--font-display);font-size:var(--text-md);letter-spacing:0.04em;
  font-variant-numeric:tabular-nums;color:var(--color-muted);padding-inline-end:var(--space-2xs);
}
.daycard[data-complete="1"] .daycard__p{color:var(--color-accent-text)}

/* ================= ПРОГРЕСС ================= */
.progline{display:flex;justify-content:space-between;align-items:baseline;
  padding:var(--space-sm) var(--gutter) var(--space-3xs);
  font-size:var(--text-2xs);color:var(--color-muted);letter-spacing:0.05em;text-transform:uppercase}
.progline b{font-family:var(--font-display);font-size:var(--text-md);color:var(--color-ink);letter-spacing:0.05em;font-variant-numeric:tabular-nums}
.progbar{margin:0 var(--gutter) var(--space-2xs);height:3px;background:var(--color-paper-3);border-radius:2px;overflow:hidden}
.progbar i{display:block;height:100%;background:var(--color-accent);
  transition:width var(--dur-med) var(--ease-out)}

/* ================= УПРАЖНЕНИЕ ================= */
/* Телефон: галка слева на всю высоту, текст и «?» в первой строке,
   предписание уходит во вторую — иначе длинное «4×6 · RPE 7 · отдых 3 мин»
   съедает строку и название рвётся. */
.ex{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:var(--space-3xs) var(--space-xs);align-items:start;
  margin-inline:var(--gutter);padding-block:var(--space-xs);
  border-top:var(--rule-hair) solid var(--color-rule-2);
}
.ex:first-of-type{border-top:0}
.ex > span:first-of-type{grid-column:2;grid-row:1}
.ex__presc{grid-column:2;grid-row:2;justify-self:start}
.ex__how{grid-column:3;grid-row:1}
.ex__tick{
  grid-row:1/3;position:relative;
  width:1.4rem;height:1.4rem;margin-top:0.85rem;
  background:transparent;border:1.5px solid var(--color-rule);border-radius:var(--radius-xs);
  cursor:pointer;display:grid;place-items:center;
  transition:background-color var(--dur-instant) var(--ease-out),
             border-color var(--dur-instant) var(--ease-out);
}
.ex__tick::after{content:"";position:absolute;inset:-0.7rem}   /* зона нажатия 44px */
.ex__tick svg{width:0.8rem;height:0.8rem;stroke:var(--color-accent-ink);fill:none;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round;opacity:0}
.ex__tick[aria-pressed="true"]{background:var(--color-accent);border-color:var(--color-accent)}
.ex__tick[aria-pressed="true"] svg{opacity:1}
.ex__tick:active{background:var(--color-paper-3)}
.ex__tick[aria-pressed="true"]:active{background:var(--color-accent-2)}
.ex__name{display:block;font-weight:600;font-size:var(--text-sm);line-height:1.3;margin-top:0.1rem}
.ex[data-done="1"] .ex__name{color:var(--color-muted);text-decoration:line-through;text-decoration-color:var(--color-rule)}
.ex__presc{
  font-family:var(--font-display);font-size:var(--text-sm);letter-spacing:0.04em;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--color-ink);
  background:var(--color-paper-2);border-radius:var(--radius-xs);
  padding:0.28rem 0.55rem;margin-top:0.2rem;
}
.ex__how{
  position:relative;width:2rem;height:2rem;margin-top:0.35rem;
  display:grid;place-items:center;
  background:transparent;border:var(--rule-hair) solid var(--color-rule);
  border-radius:var(--radius-xs);color:var(--color-muted);cursor:pointer;
  font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;
  transition:color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out);
}
.ex__how::after{content:"";position:absolute;inset:-0.45rem}
.ex__how:hover{color:var(--color-ink);border-color:var(--color-muted)}
.ex__how:active{background:var(--color-paper-3)}
.ex__how[aria-expanded="true"]{color:var(--color-accent-text);border-color:var(--color-accent)}
.ex__note,.ex__detail{grid-column:2/-1}
.ex__note{
  margin-top:var(--space-2xs);padding:var(--space-2xs) var(--space-xs);
  background:var(--color-accent-soft);border-radius:var(--radius-xs);
  font-size:var(--text-2xs);line-height:1.55;color:var(--color-ink-2);
}
.ex__detail{
  margin-top:var(--space-2xs);padding:var(--space-xs);
  background:var(--color-paper-2);border-radius:var(--radius-sm);
  font-size:var(--text-2xs);line-height:1.65;
}
.ex__detail dt{
  font-size:var(--text-3xs);font-weight:600;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--color-muted);margin-top:var(--space-2xs);
}
.ex__detail dt:first-child{margin-top:0}
.ex__detail dd li{position:relative;padding-inline-start:0.9rem;margin-top:0.15rem}
.ex__detail dd li::before{content:"";position:absolute;inset-inline-start:0;top:0.62em;width:0.35rem;height:1px;background:var(--color-rule)}

/* нижняя закреплённая кнопка внутри экрана дня */
.dayfoot{
  position:sticky;bottom:0;z-index:var(--z-sticky);
  margin-top:var(--space-md);padding:var(--space-xs) var(--gutter);
  background:var(--color-paper);border-top:var(--rule-hair) solid var(--color-rule);
}

/* ================= ПРОТОКОЛЫ ================= */
.proto{padding:var(--space-sm) 0;border-top:var(--rule-hair) solid var(--color-rule-2)}
.proto:first-of-type{border-top:0;padding-top:0}
.proto__t{font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;
  letter-spacing:0.07em;text-transform:uppercase;color:var(--color-accent-text);margin-bottom:var(--space-2xs)}
.proto li{position:relative;padding-inline-start:1.1rem;margin-bottom:var(--space-3xs);
  font-size:var(--text-xs);line-height:1.6;color:var(--color-ink-2)}
.proto li::before{content:"";position:absolute;inset-inline-start:0;top:0.68em;width:0.45rem;height:1px;background:var(--color-muted)}

/* ================= ТЕСТЫ ================= */
.test{padding-block:var(--space-sm);border-bottom:var(--rule-hair) solid var(--color-rule-2)}
.test:last-child{border-bottom:0}
.test__top{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2xs);margin-bottom:var(--space-2xs)}
.test__top h3{font-size:var(--text-md)}
.test dt{font-size:var(--text-3xs);font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--color-muted);margin-top:var(--space-2xs)}
.test dd{font-size:var(--text-xs);line-height:1.65;color:var(--color-ink-2)}
.test__entry{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2xs);align-items:end;margin-top:var(--space-sm)}
.test__result{grid-column:1/-1;min-height:1.6rem;font-size:var(--text-xs)}

/* ================= ДНЕВНИК ================= */
.scaleset{display:grid;gap:var(--space-sm)}
.scale__q{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.35rem;font-size:var(--text-xs);margin-bottom:var(--space-3xs);color:var(--color-muted)}
.scale__q b{font-family:var(--font-display);font-weight:600;font-size:var(--text-md);
  text-transform:uppercase;letter-spacing:0.03em;color:var(--color-ink)}
.scale__opts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-3xs)}
.scale__opt{
  min-height:3rem;
  font-family:var(--font-display);font-size:var(--text-md);font-weight:500;
  background:var(--color-paper-2);color:var(--color-ink-2);
  border:var(--rule-hair) solid var(--color-rule);border-radius:var(--radius-sm);
  cursor:pointer;font-variant-numeric:tabular-nums;
  transition:background-color var(--dur-instant) var(--ease-out),
             border-color var(--dur-instant) var(--ease-out),color var(--dur-instant) var(--ease-out);
}
.scale__opt:active{background:var(--color-paper-3)}
.scale__opt[aria-pressed="true"]{background:var(--color-accent);color:var(--color-accent-ink);border-color:var(--color-accent);font-weight:600}

.readout{padding:var(--space-sm);margin-top:var(--space-sm);background:var(--color-paper-3);border-radius:var(--radius-sm)}
.readout__v{font-family:var(--font-display);font-size:var(--text-xl);font-variant-numeric:tabular-nums;line-height:1;letter-spacing:0.03em}
.readout__t{font-size:var(--text-xs);color:var(--color-ink-2);margin-top:var(--space-3xs)}
.readout--stop{background:var(--color-accent-soft)}
.readout--stop .readout__v{color:var(--color-accent-text)}

.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3xs)}
.metric{padding:var(--space-xs);background:var(--color-paper-2);border-radius:var(--radius-sm)}
.metric__v{font-family:var(--font-display);font-size:var(--text-lg);font-variant-numeric:tabular-nums;line-height:1.05;letter-spacing:0.03em}
.metric__k{font-size:var(--text-3xs);color:var(--color-muted);line-height:1.35;margin-top:var(--space-3xs)}

/* ================= БАЗА УПРАЖНЕНИЙ ================= */
.exsearch{position:sticky;top:0;z-index:var(--z-sticky);background:var(--color-paper);
  padding:var(--space-2xs) var(--gutter);border-bottom:var(--rule-hair) solid var(--color-rule)}
/* свёрнутый выбор категории: раскрытым списком чипсов он съедал половину экрана */
.catbar{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-2xs);
  width:100%;min-height:2.75rem;margin-top:var(--space-2xs);
  padding:var(--space-2xs) var(--space-xs);
  background:var(--color-paper-2);border:var(--rule-hair) solid var(--color-rule);
  border-radius:var(--radius-sm);cursor:pointer;text-align:start;color:inherit;
  transition:border-color var(--dur-short) var(--ease-out);
}
.catbar__l{font-size:var(--text-3xs);font-weight:600;letter-spacing:0.15em;text-transform:uppercase;color:var(--color-muted);white-space:nowrap}
.catbar__v{font-family:var(--font-display);font-size:var(--text-sm);font-weight:600;
  text-transform:uppercase;letter-spacing:0.04em;overflow-wrap:anywhere;min-width:0}
.catbar:hover{border-color:var(--color-muted)}
.catbar:active{background:var(--color-paper-3)}
#ex-cats{margin-top:var(--space-2xs)}
#ex-cats[hidden]{display:none}
.exlist{padding:var(--space-2xs) var(--gutter) 0;display:grid;gap:var(--space-3xs)}
.exrow{background:var(--color-paper-2);border-radius:var(--radius-sm);overflow:hidden}
.exrow__head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-xs);
  align-items:center;width:100%;
  padding:var(--space-xs) var(--space-sm);min-height:3.25rem;
  background:transparent;border:0;cursor:pointer;text-align:start;color:inherit;
  transition:background-color var(--dur-short) var(--ease-out);
}
.exrow__head:hover,.exrow__head:active{background:var(--color-paper-3)}
.exrow__name{display:block;font-weight:600;font-size:var(--text-sm);line-height:1.3}
.exrow__body{padding:0 var(--space-sm) var(--space-sm);font-size:var(--text-xs);line-height:1.65}
.exrow__body[hidden]{display:none}
.chev{width:1rem;height:1rem;stroke:var(--color-muted);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur-short) var(--ease-out)}
[aria-expanded="true"] > .chev{transform:rotate(180deg)}

/* ================= ЕЩЁ ================= */
.morelist{padding:var(--space-2xs) var(--gutter);display:grid;gap:var(--space-3xs)}
.morelink{
  display:grid;grid-template-columns:4.75rem minmax(0,1fr) auto;gap:var(--space-xs);
  align-items:center;width:100%;padding:var(--space-2xs);
  background:var(--color-paper-2);border:0;border-radius:var(--radius-md);
  cursor:pointer;text-align:start;color:inherit;text-decoration:none;
  transition:background-color var(--dur-short) var(--ease-out);
}
.morelink:hover,.morelink:active{background:var(--color-paper-3)}
.morelink img{width:4.75rem;height:4.75rem;object-fit:cover;border-radius:var(--radius-sm)}
.morelink b{display:block;font-family:var(--font-display);font-size:var(--text-md);font-weight:600;text-transform:uppercase;line-height:1.05}
.morelink span span{display:block;font-size:var(--text-2xs);color:var(--color-muted);line-height:1.4;margin-top:0.2rem}
.morelink svg{width:1.1rem;height:1.1rem;stroke:var(--color-muted);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;margin-inline-end:var(--space-2xs)}

/* ================= ПЛАНШЕТ ≥40rem ================= */
@media (min-width:40rem){
  .shot__img{height:17rem}
  .shot__in h1,.screen__head h1{font-size:var(--text-2xl)}
  .setup__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Планшет и шире: всё в одну строку — места хватает */
  .ex{grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center}
  .ex > span:first-of-type{grid-column:2;grid-row:1}
  .ex__presc{grid-column:3;grid-row:1;margin-top:0;justify-self:end}
  .ex__how{grid-column:4;grid-row:1;margin-top:0}
  .ex__tick{grid-row:1;margin-top:0}
  .ex__note,.ex__detail{grid-column:2/-1;grid-row:auto}
  .test__entry{grid-template-columns:14rem auto minmax(0,1fr)}
  .test__result{grid-column:auto;align-self:center}
  .daycard{grid-template-columns:6rem minmax(0,1fr) auto}
  .daycard__img{width:6rem;height:6rem}
}

/* ================= ДЕСКТОП ≥60rem ================= */
@media (min-width:60rem){
  /* на десктопе знак уже стоит в боковой рейке — над фото он дублируется */
  .shot__brand{display:none}

  /* Контент не растягиваем на всю ширину монитора: строка в 1300 px нечитаема,
     а карточка дня с фото 76 px в такой ширине выглядит потерянной. */
  #program-body, .screen > .screen__body, .screen > .flow, .screen > .panel{
    max-width:66rem;margin-inline:auto;width:100%;
  }
  .shot__img{height:20rem}
  .shot__in{max-width:66rem;margin-inline:auto;inset-inline:0}
  .daycard{grid-template-columns:8rem minmax(0,1fr) auto;padding:var(--space-xs)}
  .daycard__img{width:8rem;height:8rem}
  .daycard__t{font-size:var(--text-lg)}
  .daycard__p{font-size:var(--text-lg)}
  .app{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);padding-bottom:0}
  .topbar,.tabbar{display:none!important}
  .rail{
    display:block;position:sticky;top:0;z-index:var(--z-nav);align-self:start;
    height:100dvh;overflow-y:auto;padding:var(--space-md) var(--space-sm);
    border-inline-end:var(--rule-hair) solid var(--color-rule);
    background:var(--color-paper-2);
  }
  .rail__mark{
    display:block;margin-bottom:var(--space-lg);text-decoration:none;
    font-family:var(--font-display);font-size:var(--text-md);font-weight:600;
    letter-spacing:0.13em;text-transform:uppercase;
  }

  .rail__mark{font-family:var(--font-wordmark);font-weight:400;letter-spacing:0.02em;
    display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-2xs)}
  .rail__logo{width:auto;height:3rem;object-fit:contain;grid-row:span 2}
  /* плашка — ячейка сетки, без этого она растягивается на всю рейку */
  .rail__mark span{justify-self:start;width:max-content}
  .rail__nav{display:grid;gap:2px}
  .rail__btn{
    display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-2xs);
    width:100%;min-height:2.75rem;padding:var(--space-2xs) var(--space-xs);
    background:none;border:0;border-radius:var(--radius-sm);cursor:pointer;text-align:start;
    font-family:var(--font-display);font-size:var(--text-sm);font-weight:500;letter-spacing:0.05em;
    text-transform:uppercase;color:var(--color-ink-2);white-space:nowrap;
    transition:background-color var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out);
  }
  .rail__btn svg{width:1.15rem;height:1.15rem;stroke:currentColor;fill:none;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}
  .rail__btn:hover{background:var(--color-paper-3);color:var(--color-ink)}
  .rail__btn:active{background:var(--color-paper-3)}
  .rail__btn[aria-selected="true"]{background:var(--color-accent-soft);color:var(--color-accent-text)}
  .rail__foot{margin-top:var(--space-lg);font-size:var(--text-3xs);color:var(--color-muted);line-height:1.5}

  /* на десктопе рейка всегда на виду — отдельная кнопка «назад» не нужна */
  .shot__back{display:none}
  .appmain{min-width:0}
  .screen{max-width:64rem}
  .shot__img{height:20rem}
  .shot__back{top:var(--space-sm)}
  .exsearch{top:0}
  .metrics{gap:var(--space-2xs)}
}

/* ================= ПЕЧАТЬ ================= */
@media print{
  html{color-scheme:light}
  body{background:var(--print-paper);color:var(--print-ink)}
  .topbar,.tabbar,.rail,.no-print,.shot,.dayfoot,.exsearch{display:none!important}
  .app{padding:0;display:block}
  .screen[hidden]{display:none!important}
  .panel,.daycard,.exrow,.note,.metric,.readout{background:transparent;border:1px solid var(--print-rule)}
  .ex__presc,.ex__detail,.ex__note{background:transparent;border:1px solid var(--print-rule)}
  .ex,.daycard,.test{break-inside:avoid}
  .ex__tick,.ex__how{display:none}
  .ex{grid-template-columns:minmax(0,1fr) auto}
  .kicker,.muted,.metric__k,.daycard__m{color:var(--print-ink)}
  body{font-size:11pt}
}