/* Шрифты лежат рядом с приложением: без сети они всё равно на месте. */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Manrope здесь вариативный: в файле есть ось wght, и диапазон у неё 200-800
   (проверено — вес 100 зажимается к 200, 900 к 800). Пять статических
   объявлений на один и тот же файл делали ту же работу в десять правил и при
   этом прятали веса 200 и 300, которых в наборе как бы не было. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/manrope-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/manrope-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
  /* Одна шкала кеглей на всё приложение. До неё в файле жили 22 размера с
     полушагами по 0.5px — различить их на экране нельзя, а спорить о том,
     12.5 здесь или 13, можно бесконечно. Семь ступеней, дальше не растём. */
  --t-hero:48px;  /* герой-число: рекорд, кольцо, таймер */
  --t-2xl:28px;   /* бренд, второе по важности число */
  --t-xl:20px;    /* заголовок секции */
  --t-md:16px;    /* основной текст, поля ввода */
  --t-sm:14px;    /* данные в таблицах, второстепенное */
  --t-xs:12px;    /* подписи и подсказки */
  --t-cap:11px;   /* лейблы капсом */

  --bg:#F3F5F7; --surface:#FFFFFF; --raised:#EAEDF1; --sunken:#E1E5EA;
  --line:#DDE2E8; --line-soft:#EAEEF2;
  --ink:#14161A; --ink-2:#3C434D; --muted:#6B7481;
  --accent:#E8452A; --accent-ink:#C23A20; --accent-soft:#FCE9E4; --accent-line:#F6C7B9;
  --on-accent:#FFFFFF;
  --good:#0E7A5C; --good-soft:#E1F2EC; --on-good:#FFFFFF;
  --bad:#C4342B;
  --glow-1:#FFD6C6; --glow-2:#D9E2EC; --glow-3:#E0DAF2; --glow-4:#CDE9E0;
  --glow-op:.5; --grain-op:.05; --grain-blend:multiply;
  --card-fill:94%;
  --shadow:0 1px 2px rgba(20,22,26,.05), 0 12px 28px -18px rgba(20,22,26,.34);
  --radius:16px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14161A; --surface:#1B1E24; --raised:#22262D; --sunken:#0F1115;
    --line:#272B32; --line-soft:#1E2229;
    --ink:#EDEFF2; --ink-2:#BEC6CF; --muted:#89929E;
    --accent:#FF7A59; --accent-ink:#FF8F72; --accent-soft:#2B1A14; --accent-line:#4B2C20;
    --on-accent:#16181C;
    --good:#4FC99E; --good-soft:#16302A; --on-good:#0E241E;
    --bad:#FF7A6B;
    --glow-1:#3A1E14; --glow-2:#15202A; --glow-3:#1C1828; --glow-4:#102420;
    --glow-op:.75; --grain-op:.07; --grain-blend:overlay;
    --card-fill:90%;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 32px -20px rgba(0,0,0,.85);
    --radius:16px;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#14161A; --surface:#1B1E24; --raised:#22262D; --sunken:#0F1115;
  --line:#272B32; --line-soft:#1E2229;
  --ink:#EDEFF2; --ink-2:#BEC6CF; --muted:#89929E;
  --accent:#FF7A59; --accent-ink:#FF8F72; --accent-soft:#2B1A14; --accent-line:#4B2C20;
  --on-accent:#16181C;
  --good:#4FC99E; --good-soft:#16302A; --on-good:#0E241E;
  --bad:#FF7A6B;
  --glow-1:#3A1E14; --glow-2:#15202A; --glow-3:#1C1828; --glow-4:#102420;
  --glow-op:.75; --grain-op:.07; --grain-blend:overlay;
  --card-fill:90%;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 32px -20px rgba(0,0,0,.85);
  --radius:16px;
  color-scheme: dark;
}

/* touch-action:manipulation гасит зум по двойному тапу: в счётчике подходов
   тапов много и они быстрые, а экран от них прыгал. Скролл не задет, заодно
   уходит 300-мс задержка клика; щипок двумя пальцами снят отдельно, в gym.js.
   Правило на `*`, потому что touch-action не наследуется; нулевая
   специфичность не мешает переопределить его точечно. */
*{box-sizing:border-box; touch-action:manipulation}
/* Правило браузера [hidden]{display:none} перебивается ЛЮБЫМ авторским
   display, поэтому .gate{display:grid} оставлял скрытую панель поверх
   приложения и она съедала все нажатия. Возвращаем поведение явно. */
[hidden]{display:none !important}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:var(--t-md); line-height:1.5;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0; font-weight:800; text-wrap:balance; letter-spacing:-.025em}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:none; padding:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:8px}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums}

/* ---------- живой фон ---------- */
.bg{
  position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:var(--glow-op);
  background:
    radial-gradient(44vmax 44vmax at 10% 4%,  var(--glow-1), transparent 60%),
    radial-gradient(38vmax 38vmax at 92% 16%, var(--glow-2), transparent 58%),
    radial-gradient(48vmax 48vmax at 82% 86%, var(--glow-3), transparent 60%),
    radial-gradient(36vmax 36vmax at 14% 78%, var(--glow-4), transparent 58%);
  animation:breathe 46s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes breathe{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.14) translate3d(-2%,-3%,0)}
}
.grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:var(--grain-op); mix-blend-mode:var(--grain-blend);
  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='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shell ---------- */
.app{max-width:640px; margin:0 auto; padding:0 14px calc(96px + env(safe-area-inset-bottom))}
/* Таймер отдыха висит поверх страницы над панелью вкладок. Без этого запаса
   он накрывает кнопку «Сохранить тренировку», и нажать её нельзя — а таймер
   как раз и запускается последней галочкой, перед сохранением. */
body.timer-on .app{padding-bottom:calc(148px + env(safe-area-inset-bottom))}
.topbar{
  position:sticky; top:0; z-index:30; margin:0 -14px 14px; padding:15px 16px 12px;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:saturate(1.5) blur(16px); -webkit-backdrop-filter:saturate(1.5) blur(16px);
  border-bottom:1px solid var(--line-soft);
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.brand{font-size:var(--t-2xl); line-height:1.05; letter-spacing:-.035em}
.brand span{
  color:var(--accent-ink);
  background:linear-gradient(100deg, var(--accent-ink), var(--accent) 55%, #F2B33D);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.topmeta{
  margin-left:auto; font-size:var(--t-xs); color:var(--muted); display:flex; align-items:center; gap:7px;
  padding:5px 10px; border-radius:999px; border:1px solid transparent;
}
.topmeta:not(:disabled){
  border-color:var(--line); background:color-mix(in srgb, var(--surface) 70%, transparent);
  color:var(--ink-2); font-weight:700;
}
.topmeta:disabled{cursor:default}
.dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none}
.dot.ok{background:var(--good)}
.dot.wait{background:var(--accent)}
.dot.off{background:var(--bad)}
.dot.local{background:var(--muted)}

/* ---------- tabs ---------- */
.nav{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; justify-content:center;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter:saturate(1.5) blur(18px); -webkit-backdrop-filter:saturate(1.5) blur(18px);
  border-top:1px solid var(--line);
}
.nav-inner{max-width:640px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;width:100%}
.nav button{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:7px 1px 5px; border-radius:12px; color:var(--muted);
  font-size:var(--t-cap); font-weight:700; letter-spacing:0;
}
.nav button svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav button[aria-current="true"]{color:var(--ink); background:var(--raised)}
.nav button[aria-current="true"] svg{stroke:var(--accent)}

.view{display:none}
.view.on{display:block}

/* ---------- карточка-герой ---------- */
.hero{
  position:relative; overflow:hidden; border-radius:20px; padding:18px 18px 16px;
  background:linear-gradient(135deg, var(--day-a), var(--day-b));
  color:#fff; margin-bottom:14px;
  box-shadow:0 20px 44px -26px var(--day-b), 0 2px 6px -2px rgba(0,0,0,.25);
}
.hero::before, .hero::after{content:""; position:absolute; border-radius:50%; pointer-events:none}
.hero::before{width:230px; height:230px; right:-72px; top:-96px; background:rgba(255,255,255,.13)}
.hero::after{width:130px; height:130px; right:22px; bottom:-74px; background:rgba(255,255,255,.09)}
.hero-top{position:relative; display:flex; align-items:flex-start; gap:14px}
.hero-title{flex:1; min-width:0}
.hero-eyebrow{
  font-size:var(--t-cap); font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:rgba(255,255,255,.78);
}
.hero-name{
  font-size:var(--t-2xl); font-weight:800; letter-spacing:-.025em; line-height:1.12; margin-top:6px;
  color:#fff; overflow-wrap:anywhere;
}
.hero-foot{
  position:relative; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:15px; padding-top:13px; border-top:1px solid rgba(255,255,255,.24);
}
/* Моноширинный нужен цифрам, а не фразе: подсказка им растягивается. */
.hero-vol{font-size:var(--t-sm); font-weight:600; color:rgba(255,255,255,.92)}
.hero-vol b{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:var(--t-md); font-weight:600}
.hero-date{
  margin-left:auto; display:flex; align-items:center; background:rgba(255,255,255,.2);
  border-radius:999px; padding:5px 12px;
}
.hero-date input{
  background:none; border:none; color:#fff; font-size:var(--t-md); font-weight:700;
  font-family:"IBM Plex Mono",monospace; color-scheme:dark; padding:0;
}
.hero-date input:focus{outline:none}

.ring{flex:none; width:76px; height:76px}
.ring-bg{fill:none; stroke:rgba(255,255,255,.26); stroke-width:6}
.ring-fg{
  fill:none; stroke:#fff; stroke-width:6; stroke-linecap:round;
  transform:rotate(-90deg); transform-origin:38px 38px; transition:stroke-dashoffset .45s ease;
}
.ring-t{fill:#fff; font-family:"IBM Plex Mono",monospace; font-size:var(--t-xl); font-weight:600; font-variant-numeric:tabular-nums}
.ring-s{fill:rgba(255,255,255,.8); font-family:"Manrope",sans-serif; font-size:var(--t-cap); font-weight:700; letter-spacing:.06em}

/* ---------- day chips ---------- */
.chips{display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; margin:0 -14px 14px; padding:2px 14px 8px}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none; display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px 9px 13px; border-radius:999px; border:1px solid var(--line);
  background:color-mix(in srgb, var(--surface) 88%, transparent); color:var(--ink-2);
  white-space:nowrap; font-size:var(--t-sm); font-weight:700; letter-spacing:-.005em;
}
.chip::before{content:""; flex:none; width:9px; height:9px; border-radius:50%; background:var(--day-a)}
.chip[aria-pressed="true"]{
  background:linear-gradient(120deg, var(--day-a), var(--day-b)); color:#fff; border-color:transparent;
  box-shadow:0 8px 18px -10px var(--day-b);
}
.chip[aria-pressed="true"]::before{background:rgba(255,255,255,.9)}

/* ---------- cards ---------- */
.card{
  background:color-mix(in srgb, var(--surface) var(--card-fill), transparent);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.stack{display:flex; flex-direction:column; gap:12px}

.ex{padding:14px 13px 11px}
.ex-head{display:flex; align-items:flex-start; gap:10px}
.ex-num{
  flex:none; width:27px; height:27px; border-radius:999px;
  background:linear-gradient(140deg, var(--day-a), var(--day-b)); color:#fff;
  display:grid; place-items:center; font-size:var(--t-xs); font-weight:800; margin-top:1px;
  box-shadow:0 6px 14px -8px var(--day-b);
}
.ex-title{flex:1; min-width:0}
.ex-name{font-size:var(--t-md); font-weight:700; line-height:1.25; letter-spacing:-.008em}
.ex-sub{margin-top:5px; font-size:var(--t-xs); color:var(--muted); display:flex; flex-wrap:wrap; gap:6px 9px; align-items:center}
.pres{
  flex:none; align-self:flex-start; padding:5px 11px; border-radius:999px;
  background:color-mix(in srgb, var(--day-a) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--day-a) 34%, transparent); color:var(--ink);
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:var(--t-xs); font-weight:600; white-space:nowrap;
}
.tag{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 7px; border-radius:999px;
  background:var(--sunken); font-size:var(--t-cap); font-weight:700; color:var(--ink-2);
}
.tag svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.8}

/* ---------- set table ---------- */
table.sets{width:100%; border-collapse:collapse; margin-top:11px}
table.sets th{
  font-size:var(--t-cap); font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:var(--muted); text-align:center; padding:0 0 6px;
}
table.sets th:first-child{width:30px}
table.sets th:last-child{width:42px}
table.sets td{padding:3px; text-align:center; border-top:1px solid var(--line-soft)}
table.sets tr:first-child td{border-top:none}
.setno{font-family:"IBM Plex Mono",monospace; font-size:var(--t-xs); color:var(--muted); font-variant-numeric:tabular-nums}
.cell{
  width:100%; min-width:0; padding:10px 4px; text-align:center;
  background:var(--raised); border:1px solid transparent; border-radius:10px;
  font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:var(--t-md); font-weight:500; -moz-appearance:textfield;
}
.cell::-webkit-outer-spin-button,.cell::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cell::placeholder{color:var(--muted); opacity:.5; font-weight:400}
.cell:focus{outline:none; border-color:var(--day-a); background:var(--surface)}
.cell.filled{background:var(--surface); border-color:var(--line)}
.tick{
  width:34px; height:34px; border-radius:10px; border:1px solid var(--line);
  background:var(--raised); display:grid; place-items:center; color:transparent;
  transition:background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}
.tick svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.tick[aria-pressed="true"]{background:var(--good); border-color:var(--good); color:var(--on-good); transform:scale(1.06)}
tr.done .cell{background:var(--good-soft)}

.ex-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px;
  margin-top:10px; padding-top:10px; border-top:1px dashed var(--line);
  font-size:var(--t-xs); color:var(--muted); min-height:17px;
}
.ex-foot b{font-family:"IBM Plex Mono",monospace; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums}
.plates{display:flex; align-items:center; gap:3px}
.plate{
  display:inline-grid; place-items:center; min-width:24px; height:18px; padding:0 4px; border-radius:4px;
  font-family:"IBM Plex Mono",monospace; font-size:var(--t-cap); font-weight:600; color:#10151a;
  border:1px solid rgba(0,0,0,.28); box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.ghost{
  padding:5px 11px; border-radius:999px; border:1px dashed color-mix(in srgb, var(--day-a) 45%, transparent);
  font-size:var(--t-xs); font-weight:700; color:var(--ink-2); background:none;
}
.ghost:hover{background:color-mix(in srgb, var(--day-a) 12%, transparent)}

/* ---------- трисет ---------- */
.group{
  border:1px solid color-mix(in srgb, var(--day-a) 34%, transparent); border-radius:22px;
  background:color-mix(in srgb, var(--day-a) 11%, transparent); padding:5px; box-shadow:var(--shadow);
}
.group-label{
  padding:8px 11px 10px; font-size:var(--t-cap); font-weight:800; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink); display:flex; align-items:center; gap:8px;
}
.group-label::before{content:""; flex:none; width:5px; height:14px; border-radius:3px; background:linear-gradient(var(--day-a), var(--day-b))}
.group .stack{gap:5px}

/* ---------- buttons ---------- */
.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:16px; border-radius:16px;
  background:linear-gradient(120deg, var(--day-a, var(--accent)), var(--day-b, var(--accent-ink)));
  color:#fff; font-size:var(--t-md); font-weight:800; letter-spacing:.01em;
  box-shadow:0 14px 30px -16px var(--day-b, var(--accent-ink));
}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.alt{background:color-mix(in srgb, var(--surface) var(--card-fill), transparent); color:var(--ink); border:1px solid var(--line); font-weight:700; box-shadow:var(--shadow)}
.btn.danger{background:none; color:var(--bad); border:1px solid var(--line); font-weight:700; padding:12px; box-shadow:none}
.row{display:flex; gap:9px}
.row .btn{font-size:var(--t-sm); padding:14px 8px}
.row>*{flex:1}

.field{display:flex; align-items:center; gap:10px; padding:11px 14px}
.field label{font-size:var(--t-cap); font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); flex:none}
.field input,.field select,.field textarea{
  flex:1; min-width:0; background:none; border:none; font-size:var(--t-md); text-align:right;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none}
.field select{text-align-last:right}

.note{
  width:100%; padding:12px 14px; background:color-mix(in srgb, var(--surface) var(--card-fill), transparent);
  border:1px solid var(--line); border-radius:var(--radius); resize:vertical; min-height:48px; font-size:var(--t-md);
}
.note:focus{outline:none; border-color:var(--accent)}

/* ---------- section headings ---------- */
.sec{display:flex; align-items:baseline; gap:10px; margin:24px 0 11px}
/* Заголовок секции намеренно ниже бренда: раньше 21 против 23 — разница в
   два пикселя, которую глаз не читает как иерархию, и «Рабочий вес» спорил за
   внимание с числом рекорда. */
.sec h2{font-size:var(--t-xl); font-weight:700; letter-spacing:-.02em}
.sec .hint{font-size:var(--t-xs); color:var(--muted); margin-left:auto}
.rule{flex:1; height:1px; background:var(--line)}

/* ---------- history ---------- */
.hist-row{display:flex; align-items:stretch}
.hist{
  position:relative; flex:1; min-width:0; text-align:left; padding:13px 12px 13px 18px;
  display:flex; align-items:center; gap:12px;
}
.hist-del{
  flex:none; width:48px; display:grid; place-items:center; color:var(--muted);
  border-left:1px solid var(--line-soft); border-radius:0 var(--radius) var(--radius) 0;
  transition:color .14s ease, background .14s ease;
}
.hist-del:hover,.hist-del:focus-visible{color:var(--bad); background:color-mix(in srgb, var(--bad) 12%, transparent)}
.hist-del svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.hist::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:5px;
  border-radius:0 4px 4px 0; background:linear-gradient(var(--day-a), var(--day-b));
}
.hist .date{flex:none; width:46px; text-align:center; line-height:1; color:var(--ink)}
.hist .date b{display:block; font-family:"IBM Plex Mono",monospace; font-size:var(--t-2xl); font-weight:600}
.hist .date i{display:block; font-style:normal; font-size:var(--t-cap); text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-top:4px; font-weight:700}
.hist .body{flex:1; min-width:0}
.hist .body strong{display:block; font-size:var(--t-sm); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hist .body span{font-size:var(--t-xs); color:var(--muted); font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
.hist .chev{flex:none; color:var(--muted); transition:transform .15s ease}
.hist .chev svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.hist[aria-expanded="true"] .chev{transform:rotate(90deg)}
.hist-detail{padding:0 14px 14px; border-top:1px solid var(--line-soft)}

.empty{padding:30px 22px 34px; text-align:center; color:var(--muted)}
.illus{width:96px; height:96px; margin:0 auto 14px; display:block}
.illus .ring-o{fill:none; stroke:color-mix(in srgb, var(--accent) 40%, transparent); stroke-width:1.5; stroke-dasharray:5 7}
.illus .blob{fill:color-mix(in srgb, var(--accent) 15%, transparent)}
.illus .art{fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.empty strong{display:block; color:var(--ink); font-size:var(--t-xl); font-weight:800; letter-spacing:-.02em; margin-bottom:7px}
.empty p{margin:0; font-size:var(--t-sm); max-width:34ch; margin-inline:auto}

/* ---------- progress ---------- */
/* Тройка в ряд не давала выделить главное число: при кегле героя 48px
   карточки разъезжаются. Первый стат (.feature) занимает всю строку, два
   оставшихся встают под ним. Разметка в gym.js не меняется — feature там
   всегда один и всегда первый. */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:9px}
.stats .stat.feature{grid-column:1 / -1}
.stat{
  padding:13px 11px; border-radius:16px; border:1px solid var(--line);
  background:color-mix(in srgb, var(--surface) var(--card-fill), transparent);
}
/* Лейблы ушли из mono в Manrope: техничность им даёт капс с трекингом, а не
   гарнитура, — зато mono освободился под числа и теперь работает как акцент. */
.stat .k{font-size:var(--t-cap); text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:700}
.stat .v{font-family:"IBM Plex Mono",monospace; font-size:var(--t-2xl); font-weight:600; font-variant-numeric:tabular-nums; line-height:1.1; margin-top:5px; letter-spacing:-.015em}
.stat.feature .v{font-size:var(--t-hero); line-height:1; margin-top:7px; letter-spacing:-.025em}
.stat .v small{font-family:"Manrope",sans-serif; font-size:var(--t-sm); color:var(--muted); font-weight:600; letter-spacing:0}
.stat.feature .v small{font-size:var(--t-md)}
.stat.feature{
  border-color:transparent; color:#fff;
  background:linear-gradient(140deg, var(--accent), var(--accent-deep, #8B2E52));
  box-shadow:0 16px 32px -20px var(--accent);
}
.stat.feature .k{color:rgba(255,255,255,.82)}
.stat.feature .v small{color:rgba(255,255,255,.75)}
.delta{font-size:var(--t-xs); font-weight:700; font-family:"IBM Plex Mono",monospace}
.delta.up{color:var(--good)} .delta.dn{color:var(--bad)} .delta.eq{color:var(--muted)}

.chartwrap{padding:14px 10px 8px}
svg.chart{display:block; width:100%; height:auto}
.chart .grid{stroke:var(--line-soft); stroke-width:1}
.chart .g0{stop-color:var(--accent); stop-opacity:.45}
.chart .g1{stop-color:var(--accent); stop-opacity:0}
.chart .line{fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.chart .pt{fill:var(--surface); stroke:var(--accent); stroke-width:1.8}
.chart .pt.last{fill:var(--accent); stroke:var(--surface); stroke-width:2.4}
.chart .lbl{fill:var(--muted); font-family:"IBM Plex Mono",monospace; font-size:var(--t-cap)}
.chart .lbl.val{fill:var(--accent-ink); font-weight:600; font-size:var(--t-xs)}

table.log{width:100%; border-collapse:collapse; font-size:var(--t-sm)}
table.log th{font-size:var(--t-cap); text-transform:uppercase; letter-spacing:.09em; color:var(--muted); text-align:right; padding:8px 10px; font-weight:700}
table.log th:first-child{text-align:left}
table.log td{padding:9px 10px; border-top:1px solid var(--line-soft); text-align:right; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums}
table.log td:first-child{text-align:left; font-family:"Manrope",sans-serif; color:var(--muted); font-size:var(--t-sm)}
table.log td.pr{color:var(--accent-ink); font-weight:700}

/* ---------- program editor ---------- */
.edit-ex{padding:11px 12px; display:flex; gap:9px; align-items:flex-start}
.edit-ex .grab{flex:none; display:flex; flex-direction:column; gap:3px; padding-top:2px}
.edit-ex .grab button{
  width:26px; height:22px; border-radius:8px; background:var(--raised); color:var(--muted);
  display:grid; place-items:center;
}
.edit-ex .grab button svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.edit-ex .grab button:disabled{opacity:.3}
.edit-ex .fields{flex:1; min-width:0; display:flex; flex-direction:column; gap:6px}
.edit-ex input,.edit-ex select{
  width:100%; padding:9px 11px; background:var(--raised); border:1px solid transparent;
  border-radius:11px; font-size:var(--t-md);
}
.edit-ex input:focus,.edit-ex select:focus{outline:none; border-color:var(--accent); background:var(--surface)}
.edit-ex .mini{display:grid; grid-template-columns:56px 1fr 1.35fr; gap:6px}
/* 16px — порог, ниже которого iOS приближает страницу на фокусе поля.
   Шрифт от этого крупнее, поэтому снаряду отдана лишняя ширина: иначе
   «тренажёр» не помещается рядом со стрелкой списка. */
/* В mini-полях числа и слова стоят рядом: подходы с повторами — числа и им
   нужен mono с табличными цифрами, а снаряд («штанга», «гантели») — слово,
   и в моноширинном оно выглядит как код. */
.edit-ex .mini input{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; font-size:var(--t-md); padding:8px}
.edit-ex .mini select{font-size:var(--t-md); font-weight:500; padding:8px}
.edit-ex .kill{flex:none; width:28px; height:28px; border-radius:999px; color:var(--muted); display:grid; place-items:center}
.edit-ex .kill:hover{background:var(--accent-soft); color:var(--bad)}
.edit-ex .kill svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}

.daybar{display:flex; align-items:center; gap:9px; padding:12px 13px; border-bottom:1px solid var(--line-soft)}
.daybar::before{content:""; flex:none; width:10px; height:10px; border-radius:50%; background:linear-gradient(var(--day-a), var(--day-b))}
.daybar input{
  flex:1; min-width:0; background:none; border:none; padding:0;
  font-size:var(--t-xl); font-weight:800; letter-spacing:-.02em;
}
.daybar input:focus{outline:none; color:var(--accent-ink)}

.toast{
  position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(8px);
  z-index:60; padding:12px 18px; border-radius:999px; background:var(--ink); color:var(--bg);
  font-size:var(--t-sm); font-weight:700; box-shadow:var(--shadow); opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; max-width:calc(100vw - 32px);
  display:flex; align-items:center; gap:16px; justify-content:center; text-align:left;
}
.toast.act{pointer-events:auto}
.toast .undo{
  flex:none; color:var(--bg); font-size:var(--t-sm); font-weight:800;
  text-decoration:underline; text-underline-offset:3px; padding:2px 0;
}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

.timer{
  position:fixed; left:50%; transform:translateX(-50%); bottom:calc(78px + env(safe-area-inset-bottom));
  z-index:45; width:min(612px, calc(100vw - 28px)); padding:10px 13px;
  background:var(--ink); color:var(--bg); border-radius:999px; box-shadow:var(--shadow);
  display:none; align-items:center; gap:11px;
}
.timer.on{display:flex}
.timer .t{font-family:"IBM Plex Mono",monospace; font-size:var(--t-xl); font-weight:600; font-variant-numeric:tabular-nums; min-width:52px}
.timer .bar{flex:1; height:5px; border-radius:3px; background:color-mix(in srgb, var(--bg) 35%, transparent); overflow:hidden}
.timer .bar i{display:block; height:100%; background:linear-gradient(90deg, var(--accent), #F2B33D); border-radius:3px; transition:width 1s linear}
.timer button{color:var(--bg); opacity:.65; font-size:var(--t-xs); font-weight:700; padding:4px 6px}
.timer button:hover{opacity:1}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important}
  .bg{animation:none}
}

/* ---------- вход ---------- */
/* Платформа вставляет свою плашку в каждую страницу. Для типа «website» её
   же правила требуют, чтобы бренд пользователя был на странице единственным. */
#hf-watermark{display:none !important}

body.gated{overflow:hidden}
.gate{
  position:fixed; inset:0; z-index:70; display:grid; place-items:center;
  padding:20px; overflow-y:auto;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.gate-card{
  width:100%; max-width:380px; padding:28px 22px 24px; border-radius:26px;
  background:color-mix(in srgb, var(--surface) var(--card-fill), transparent);
  border:1px solid var(--line); box-shadow:var(--shadow);
}
.gate-mark{
  display:block; width:46px; height:46px; margin:0 auto 14px;
  stroke:var(--accent); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.gate-card h2{font-size:var(--t-2xl); text-align:center; line-height:1.1}
.gate-lead{margin:9px 0 20px; font-size:var(--t-sm); color:var(--muted); text-align:center; text-wrap:balance}
.gate-tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px;
  background:var(--raised); border-radius:999px; margin-bottom:16px;
}
.gate-tabs button{padding:10px; border-radius:999px; font-size:var(--t-sm); font-weight:700; color:var(--muted)}
.gate-tabs button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
#gateForm{display:flex; flex-direction:column; gap:10px}
#gateForm input{
  width:100%; padding:13px 15px; font-size:var(--t-md); border-radius:13px;
  background:var(--raised); border:1px solid transparent;
}
#gateForm input:focus{outline:none; border-color:var(--accent); background:var(--surface)}
.gate-err{margin:0; min-height:18px; font-size:var(--t-xs); font-weight:700; color:var(--bad); text-align:center}
.gate-err:empty{min-height:4px}

.gate-link{
  display:block; width:100%; margin-top:14px; padding:6px;
  font-size:var(--t-xs); font-weight:700; color:var(--muted); text-align:center;
}
.gate-link:hover{color:var(--accent-ink)}
.code-box{
  margin:4px 0 12px; padding:15px 10px; border-radius:14px; text-align:center;
  background:var(--accent-soft); border:1px dashed var(--accent-line); color:var(--ink);
  font-size:var(--t-xl); font-weight:600; letter-spacing:.06em; word-break:break-all;
  user-select:all; -webkit-user-select:all;
}
.code-confirm{
  display:flex; align-items:flex-start; gap:9px; margin:0 0 14px;
  font-size:var(--t-xs); color:var(--ink-2); line-height:1.35; cursor:pointer;
}
.code-confirm input{flex:none; width:19px; height:19px; margin:0; accent-color:var(--accent)}

/* ---------- подсказанный вес ---------- */
/* Цифра из прошлой тренировки: видно сразу, но понятно, что это ещё не запись. */
.cell.sug{color:var(--muted); font-style:italic; background:transparent; border-color:var(--line-soft)}
.cell.sug:focus{color:var(--ink); font-style:normal}

/* ---------- календарь ---------- */
.cal{padding:12px 12px 10px; margin-bottom:12px}
.cal-head{display:flex; align-items:center; gap:8px; margin-bottom:10px}
.cal-head strong{
  flex:1; text-align:center; font-weight:700; font-size:var(--t-md); letter-spacing:-.01em;
}
.cal-head button{
  flex:none; width:34px; height:34px; border-radius:999px; background:var(--raised);
  color:var(--ink-2); font-size:19px; line-height:1; display:grid; place-items:center;
}
.cal-head button:hover{background:var(--sunken)}
.cal-dow{
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px;
  font-size:var(--t-cap); font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
}
.cal-dow span{text-align:center; padding-bottom:2px}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.cal-cell{
  aspect-ratio:1; display:grid; place-items:center; position:relative;
  border-radius:11px; font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums;
  font-size:var(--t-sm); color:var(--muted); background:none; border:1px solid transparent;
}
.cal-cell.day{color:var(--ink-2)}
.cal-cell.today{border-color:var(--accent-line); font-weight:600}
.cal-cell.has{
  background:linear-gradient(140deg, var(--day-a), var(--day-b)); color:#fff; font-weight:600;
  box-shadow:0 5px 12px -7px var(--day-b);
}
.cal-cell.has i{
  position:absolute; bottom:5px; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.85);
}
.cal-cell:disabled{cursor:default}
.cal-foot{
  margin-top:9px; padding-top:9px; border-top:1px dashed var(--line);
  font-size:var(--t-xs); color:var(--muted); text-align:center;
}

/* ---------- справочник и готовые программы ---------- */
.sheet{
  position:fixed; inset:0; z-index:65; overflow-y:auto; padding:0 14px 40px;
  background:color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  -webkit-overflow-scrolling:touch;
}
.sheet-card{max-width:640px; margin:0 auto; padding-top:14px}
.sheet-head{
  position:sticky; top:0; z-index:2; display:flex; align-items:flex-start; gap:12px;
  padding:8px 0 12px; margin-bottom:4px;
  background:linear-gradient(var(--bg) 72%, transparent);
}
.sheet-title{flex:1; min-width:0}
.sheet-eyebrow{font-size:var(--t-cap); font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--muted)}
.sheet-head h2{font-size:var(--t-2xl); margin-top:4px}
.sheet-x{
  flex:none; width:36px; height:36px; border-radius:999px; background:var(--raised);
  color:var(--ink-2); font-size:15px; display:grid; place-items:center;
}
.sheet-x:hover{background:var(--sunken)}
.sheet-note{margin:0 0 14px; font-size:var(--t-sm); color:var(--muted); text-wrap:balance}
.sheet-empty{padding:26px 0; text-align:center; color:var(--muted); font-size:var(--t-sm)}
.sheet-search{
  width:100%; padding:13px 15px; font-size:var(--t-md); border-radius:13px; margin-bottom:10px;
  background:var(--raised); border:1px solid transparent;
}
.sheet-search:focus{outline:none; border-color:var(--accent); background:var(--surface)}
.sheet-chips{margin:0 -14px 12px; padding:2px 14px 8px}
.chip.plain{font-size:var(--t-sm); padding:8px 13px}
.chip.plain::before{display:none}
.chip.plain[aria-pressed="true"]{background:var(--ink); color:var(--surface); border-color:var(--ink); box-shadow:none}

.lib-list{display:flex; flex-direction:column; gap:7px}
.lib-row{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:11px 13px; border-radius:15px; border:1px solid var(--line);
  background:color-mix(in srgb, var(--surface) var(--card-fill), transparent);
}
.lib-row:hover{border-color:var(--accent-line)}
.lib-main{flex:1; min-width:0}
.lib-name{display:block; font-size:var(--t-sm); font-weight:700; line-height:1.25}
.lib-meta{display:flex; flex-wrap:wrap; align-items:center; gap:5px 8px; margin-top:5px; font-size:var(--t-cap); color:var(--muted)}
.lib-plus{
  flex:none; width:30px; height:30px; border-radius:999px; display:grid; place-items:center;
  background:var(--accent); color:var(--on-accent); font-size:18px; font-weight:700; line-height:1;
}
.lib-have{flex:none; font-size:var(--t-cap); font-weight:700; color:var(--good)}

.tpl-row{
  display:block; width:100%; text-align:left; padding:14px 15px; margin-bottom:9px;
  border-radius:18px; border:1px solid var(--line); box-shadow:var(--shadow);
  background:color-mix(in srgb, var(--surface) var(--card-fill), transparent);
}
.tpl-row strong{display:block; font-size:var(--t-md); font-weight:700}
.tpl-note{display:block; margin-top:5px; font-size:var(--t-xs); color:var(--muted); line-height:1.4}
.tpl-meta{display:block; margin-top:8px; font-size:var(--t-xs); color:var(--accent-ink); font-weight:600}
.tpl-day{
  padding:12px 14px; margin-bottom:9px; border-radius:16px;
  border:1px solid color-mix(in srgb, var(--day-a) 34%, transparent);
  background:color-mix(in srgb, var(--day-a) 10%, transparent);
}
.tpl-day strong{font-size:var(--t-sm); font-weight:700}
.tpl-day ul{margin:8px 0 0; padding-left:17px; font-size:var(--t-sm); color:var(--ink-2); line-height:1.7}
.tpl-day li{padding-left:2px}
.tpl-day .mono{color:var(--muted); font-size:var(--t-xs)}

/* Метка «записано» в шапке бланка: сразу видно, что за это число
   тренировка уже сохранена и сейчас правится, а не пишется заново. */
.hero-badge{
  display:inline-block; margin-left:6px; padding:2px 8px; border-radius:999px;
  background:rgba(255,255,255,.25); color:#fff; font-size:var(--t-cap); letter-spacing:.08em;
}
.cal-cell.day:not(:disabled):hover{background:var(--raised)}
.cal-cell.has:not(:disabled):hover{filter:brightness(1.07)}

/* Ссылки на политику и условия: на входе (там даётся согласие) и в настройках. */
.gate-legal{
  margin:14px 0 0; font-size:var(--t-xs); line-height:1.5; text-align:center; color:var(--muted);
}
.gate-legal a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }
.gate-legal a:hover{ color:var(--accent-ink); }
.legal-row{
  display:flex; gap:18px; justify-content:center;
  margin:18px 0 0; font-size:var(--t-xs);
}
.legal-row a{ color:var(--muted); text-decoration:none; }
.legal-row a:hover{ color:var(--accent-ink); text-decoration:underline; }

.inline-link{
  display:inline; width:auto; padding:0; font-size:var(--t-xs); font-weight:700;
  color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;
}
/* Запуск отдыха вручную — рядом с объёмом в шапке бланка. */
.hero-rest{
  flex:none; padding:6px 13px; border-radius:999px; background:rgba(255,255,255,.2);
  color:#fff; font-size:var(--t-xs); font-weight:700; white-space:nowrap;
}
.hero-rest:hover{background:rgba(255,255,255,.32)}

.hintline{margin:14px 2px 0; font-size:var(--t-xs); line-height:1.5; color:var(--muted)}

/* Подпись под бланком вместо кнопки «сохранить»: объясняет, что запись идёт сама. */
.autohint{margin:14px 2px 10px; font-size:var(--t-xs); line-height:1.5; color:var(--muted); text-align:center}
/* ---------- пустой бланк и кнопка «+» ---------- */
/* Экран, с которого начинается приложение: бланк уже нарисован, но пуст —
   видно, куда встанут упражнения, и что для этого нажать. */
.blank{padding:16px 15px 15px}
.blank-eyebrow{
  font-size:var(--t-cap); font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);
}
.blank-name{font-size:var(--t-xl); margin-top:5px}
.blank-note{margin:7px 0 0; font-size:var(--t-sm); color:var(--muted); line-height:1.45; text-wrap:balance}
table.sets.ghosted{opacity:.55; pointer-events:none; margin-top:12px}
.ghost-cell{
  display:block; padding:9px 4px; border-radius:11px; border:1px dashed var(--line);
  color:var(--muted); font-size:var(--t-xs); text-align:center;
}
.ghost-tick{
  display:block; width:31px; height:31px; margin:0 auto;
  border-radius:11px; border:1px dashed var(--line);
}
.add-big{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left; margin-top:14px;
  padding:12px 14px; border-radius:16px;
  border:1px solid var(--accent-line); background:var(--accent-soft); color:var(--ink);
}
.add-big:hover{border-color:var(--accent)}
.add-plus{
  flex:none; width:42px; height:42px; border-radius:999px; display:grid; place-items:center;
  background:var(--accent); color:var(--on-accent); box-shadow:0 8px 18px -10px var(--accent);
}
.add-plus svg{width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round}
.add-txt{min-width:0}
.add-txt b{display:block; font-size:var(--t-md); font-weight:700}
.add-txt i{display:block; font-style:normal; margin-top:3px; font-size:var(--t-xs); color:var(--muted)}

/* ---------- выбор и сборка программы ---------- */
.pick{position:relative; padding-left:64px}
.pick-ico{
  position:absolute; left:15px; top:15px; width:36px; height:36px; border-radius:999px;
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-ink);
}
.pick-ico svg{
  width:19px; height:19px; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.bld-step{
  display:flex; align-items:center; gap:9px; margin:18px 0 9px;
  font-size:var(--t-xs); font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
}
.bld-step b{
  flex:none; width:21px; height:21px; border-radius:999px; display:grid; place-items:center;
  background:var(--ink); color:var(--surface); font-size:var(--t-cap); font-weight:800;
}
.chip-n{
  margin-left:6px; padding:1px 6px; border-radius:999px; font-size:var(--t-cap);
  background:color-mix(in srgb, var(--ink) 10%, transparent);
}
.chip[aria-pressed="true"] .chip-n{background:rgba(255,255,255,.25)}
.lib-row.on{border-color:var(--accent); background:var(--accent-soft)}
.lib-on{
  flex:none; width:30px; height:30px; border-radius:999px; display:grid; place-items:center;
  background:var(--accent); color:var(--on-accent);
}
.lib-on svg{
  width:15px; height:15px; stroke:currentColor; fill:none;
  stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round;
}
/* Кнопка «Создать» не уезжает за пределы экрана: список длинный, а решение
   принимается в любой его точке. */
.bld-foot{
  position:sticky; bottom:0; z-index:2; margin-top:14px;
  padding:14px 0 calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent, var(--bg) 48%);
}

/* ---------- вес и рост ---------- */
.bodyform{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px}
.bf{display:flex; flex-direction:column; gap:6px; min-width:0}
.bf span{
  font-size:var(--t-cap); font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
}
.bf input{
  width:100%; padding:13px 15px; font-size:var(--t-md); border-radius:13px;
  background:var(--raised); border:1px solid transparent; color:var(--ink);
}
.bf input:focus{outline:none; border-color:var(--accent); background:var(--surface)}
.body-add{padding:13px 14px 14px; margin-top:12px}
/* Поле даты рисует сам браузер, и на телефонах эта отрисовка шире и в другом
   формате, чем на десктопном Chromium (Android — «16 сент. 2026 г.» вместо
   «16.09.2026»), поэтому на узком экране «Вес» и «Дата» пополам не влезали.
   Стопка ниже 480px даёт дате целую строку про запас. Но растянутое на всю
   строку поле ради шести цифр выглядело пусто и непропорционально — второй
   правкой сняли width:100% у самой даты: коробка теперь по размеру своего
   текста, а не всей строки, как компактный «Рост» ниже. */
.ba-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:11px}
.ba-row input[type="date"]{width:auto; max-width:100%; align-self:flex-start; padding-inline:12px}
.ba-row input[type="date"]::-webkit-calendar-picker-indicator{margin-inline-start:6px}
@media (max-width:480px){
  .ba-row{grid-template-columns:1fr}
}
.ba-foot{
  margin-top:11px; padding-top:11px; border-top:1px dashed var(--line);
  display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:var(--t-xs); color:var(--muted);
}
.ba-foot input{
  width:68px; padding:6px 9px; border-radius:9px; text-align:center; font-size:var(--t-md);
  background:var(--raised); border:1px solid var(--line); color:var(--ink);
}
.ba-foot input:focus{outline:none; border-color:var(--accent); background:var(--surface)}
/* Сдвиг веса окрашен нейтрально: набрать — не хуже и не лучше, чем сбросить,
   это зависит от того, к чему человек идёт. */
.delta.flat{color:var(--ink-2)}
table.log td:last-child{width:36px; padding-left:0}
table.log .kill{
  width:26px; height:26px; border-radius:999px; color:var(--muted);
  display:grid; place-items:center; margin-left:auto;
}
table.log .kill:hover{background:var(--accent-soft); color:var(--bad)}
table.log .kill svg{
  width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round;
}