/* ============================================================
   REACH — каркас. Один источник ритма, дальше ничего не считаем руками.

   --gap  между блоками экрана и полями в модалке
   --in   внутри карточки, между её частями
   --pad  внутренний отступ карточки

   Правило: отступы задаёт только контейнер (`.col`, `.view`, `.card`,
   `.modal-body` — все флекс-колонки с gap). У блоков внутри margin нет,
   поэтому любой блок можно переставить и ритм не поедет.
   ============================================================ */
:root{
  --r:12px; --r-lg:16px; --r-sm:8px;
  --pad:16px; --gap:12px; --in:10px;
  --hit:38px; --tabh:64px;
  --ff:"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,monospace;
}

*{box-sizing:border-box}
*{scrollbar-width:none}
::-webkit-scrollbar{width:0;height:0;display:none}
[hidden]{display:none !important}
/* пока открыт диалог, полотно под ним не едет */
body.lock{position:fixed;left:0;right:0;width:100%;overflow:hidden}
html{scrollbar-width:none;-ms-overflow-style:none;touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--ff); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased; overscroll-behavior-y:none;
  font-variant-numeric:tabular-nums;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
button,a,label{-webkit-tap-highlight-color:transparent}
h1,h2,h3,p,pre{margin:0}
input,textarea{-webkit-appearance:none}
::selection{background:var(--accent);color:var(--accent-ink)}
.ic{width:18px;height:18px;flex:0 0 auto}

/* ---------------- каркас страницы ---------------- */
.app{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh;min-height:100dvh}
.side{
  position:sticky;top:0;height:100vh;height:100dvh;padding:20px 14px 16px;
  display:flex;flex-direction:column;gap:16px;
  background:var(--bg-2);border-right:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px}
.mark{
  width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:16px;letter-spacing:-.5px;
}
.brand-t{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.brand-t strong{font-size:14.5px;letter-spacing:.5px}
.brand-t span{font-size:11px;color:var(--muted)}

.nav{display:flex;flex-direction:column;gap:2px}
.nav-i{
  display:flex;align-items:center;gap:11px;width:100%;padding:10px 11px;border-radius:12px;
  color:var(--text-2);font-size:13.6px;font-weight:500;transition:.15s
}
.nav-i .ic{color:var(--muted);transition:.15s}
.nav-i.on{background:var(--card-3);color:var(--text)}
.nav-i.on .ic{color:var(--accent)}
.nav-i em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;color:var(--muted)}
.nav-i.on em{color:var(--accent)}
.side-goal{margin-top:auto;display:flex;flex-direction:column;gap:var(--in)}
.side-foot{display:flex;gap:14px;padding:0 6px}
.link{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-align:left}

.main{min-width:0;padding:20px 24px 44px;display:flex;flex-direction:column;gap:var(--gap)}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.top h1{font-size:26px;font-weight:800;letter-spacing:-1.1px;text-transform:uppercase}
.sub{font-size:12.8px;color:var(--muted);margin-top:2px}
.top-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.top-r .icon-b{width:40px;height:40px;border-radius:10px}

/* ---------------- кнопки ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 15px;
  border-radius:10px;font-size:12.4px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;
  background:var(--card-2);border:1px solid var(--line-2);color:var(--text);transition:.12s;white-space:nowrap
}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.btn.ghost{background:transparent}
.btn.small{height:34px;padding:0 11px;font-size:11.2px;border-radius:9px}
.btn.wide{width:100%}
.btn.danger{background:transparent;color:var(--bad);border-color:var(--line)}
.icon-b{
  width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--muted);
  background:var(--card-2);border:1px solid var(--line);transition:.15s
}
/* ряд кнопок в заголовке карточки или в модалке */
.btn-row{display:flex;align-items:center;gap:8px;flex:0 0 auto;flex-wrap:wrap}

/* ---------------- экраны и карточки ---------------- */
.views{display:flex;flex-direction:column}
.view{display:none;flex-direction:column;gap:var(--gap)}
.view.on{display:flex;animation:in .18s ease}
@keyframes in{from{opacity:0}to{opacity:1}}
.col{display:flex;flex-direction:column;gap:var(--gap);min-width:0}

.card{
  display:flex;flex-direction:column;gap:var(--in);min-width:0;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--pad);box-shadow:var(--shadow)
}
.card.edge{border-left:3px solid var(--accent)}
/* карточка-список: свои отступы задают строки, карточка только рамка */
.card.flush{padding:0;gap:0;overflow:hidden}
.card.flush > .pad{padding:var(--pad)}
.card.flush.open > .pad{padding-bottom:var(--in)}
.card.flush > .tight{padding:0 var(--pad) var(--in)}
.card.flush > .foot{padding:var(--in) var(--pad) var(--pad)}

.c-head{display:flex;align-items:center;justify-content:space-between;gap:var(--in)}
/* безымянная обёртка «заголовок + подпись» — единственная пара с тесным шагом */
.c-head > div:not([class]){display:flex;flex-direction:column;gap:3px;min-width:0}
.c-t{display:flex;align-items:center;gap:8px;font-size:12.4px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.c-t .ic{color:var(--muted)}
.c-s{font-size:12px;color:var(--muted)}
.hd{display:flex;flex-direction:column;gap:4px;min-width:0}
/* пустой контейнер не должен занимать место в колонке с gap */
.slot:empty{display:none}

.lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.big{font-size:40px;font-weight:800;letter-spacing:-2.2px;line-height:1}
.goal-need{font-size:11.6px;color:var(--muted)}
.goal-need b{color:var(--text);font-weight:650}
.bar{height:8px;border-radius:3px;background:var(--card-3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:var(--accent);transition:width .6s cubic-bezier(.4,0,.2,1)}
.bar i.ok{background:var(--ok)}
.bar i.bad{background:var(--bad)}

/* ---------------- переключатели режимов ---------------- */
.mode{display:flex;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:5px}
.mode button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:40px;border-radius:10px;
  font-size:12.4px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);transition:.12s
}
.mode button.on{background:var(--accent);color:var(--accent-ink)}
/* вложенный в карточку — без второй рамки вокруг рамки */
.card .mode{background:var(--card-2);border-color:transparent;border-radius:var(--r);padding:4px}
.card .mode button{height:36px}

/* ---------------- плашки с цифрами ---------------- */
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.stat{
  display:flex;flex-direction:column;gap:6px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--pad);box-shadow:var(--shadow)
}
.stat.accent{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.stat.accent .s-l,.stat.accent .s-f{color:color-mix(in srgb,var(--accent-ink) 72%,transparent)}
.s-l{font-size:10.5px;color:var(--muted);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.s-v{font-size:26px;font-weight:800;letter-spacing:-1.3px;line-height:1;white-space:nowrap}
.s-f{font-size:11.5px;color:var(--muted)}

/* ---------------- списки и чипсы ---------------- */
.list{display:flex;flex-direction:column;min-width:0}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  font-size:11.6px;font-weight:700;padding:6px 11px;border-radius:8px;background:var(--card-3);
  color:var(--text-2);border:1px solid transparent;transition:.12s
}
.chip.on{background:var(--accent);color:var(--accent-ink)}

/* ---------------- поля ---------------- */
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f label{font-size:11.8px;font-weight:600;color:var(--text-2);display:flex;align-items:center;gap:6px}
.f input,.f select,.f textarea{
  width:100%;height:42px;padding:0 13px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--card-2);outline:none;font-size:15px;transition:.15s;color:var(--text)
}
.f textarea{height:auto;padding:11px 13px;resize:vertical;line-height:1.5}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--accent);background:var(--card)}
.tgl{width:44px;height:26px;border-radius:20px;background:var(--card-3);position:relative;transition:.18s;flex:0 0 auto}
.tgl:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--muted);transition:.18s}
.tgl.on{background:var(--accent)}
.tgl.on:after{left:21px;background:var(--accent-ink)}

/* ---------------- модалка ---------------- */
.modal-root{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px}
.modal-bg{position:absolute;inset:0;background:#000a;backdrop-filter:blur(4px)}
.modal{
  position:relative;width:min(560px,100%);max-height:88vh;max-height:88dvh;overflow:auto;background:var(--card);
  border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:0 30px 70px -20px #000c;
  animation:pop .24s cubic-bezier(.2,.9,.3,1.15)
}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.sheet-grab{display:none;width:38px;height:4px;border-radius:3px;background:var(--line-2);margin:0 auto 4px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.modal-head h3{font-size:18px;font-weight:700;letter-spacing:-.5px}
.modal-body{display:flex;flex-direction:column;gap:var(--gap)}

/* ---------------- тост ---------------- */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--accent);color:var(--accent-ink);
  padding:11px 18px;border-radius:13px;font-size:13.2px;font-weight:650;z-index:130;
  max-width:min(440px,calc(100% - 24px));text-align:center;box-shadow:0 16px 40px -14px #000c
}
.toast.bad{background:var(--bad)}

/* ---------------- наведение мышью ----------------
   Всё наведение живёт здесь и только при настоящем курсоре: на телефоне
   :hover после тапа залипает, и строка остаётся подсвеченной «просто так». */
@media (hover:hover){
  .chip:hover{color:var(--accent);border-color:var(--accent)}
  .nav-i:hover{background:var(--card-2);color:var(--text)}
  .link:hover{color:var(--text)}
  .btn:hover{border-color:var(--line-2);background:var(--card-3)}
  .btn.primary:hover{filter:brightness(1.07)}
  .btn.ghost:hover{background:var(--card-2)}
  .icon-b:hover{color:var(--text);border-color:var(--line-2)}
  .mode button:hover{color:var(--text);background:var(--card-2)}
}
/* ---------------- отклик на нажатие ----------------
   Замена наведению для пальца: нажал — сразу видно, что попал. */
.btn:active,.icon-b:active,.mode button:active,.tab:active,.chip:active{transform:scale(.96)}
.nav-i:active,.link:active{opacity:.65}

/* ---------------- таббар (только телефон) ---------------- */
.tabs{display:none}

@media (max-width:1080px){
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ============================================================
   ТЕЛЕФОН. Слой собран по трём правилам:
   1. Большой палец достаёт всё: разделы снизу, шапка раздела липнет
      сверху, у любой цели сторона не меньше 44px.
   2. Диалог приходит снизу листом: закрывается смахиванием, а «закрыть»
      и заголовок видны при любой длине формы.
   3. Ничего не прячется под чёлку, полосу жестов и адресную строку:
      отступы считаем от env(safe-area-inset-*), высоты — в dvh.

   Второе условие — про телефон в развороте: ширина там «настольная», но
   экран низкий и палец тот же, поэтому боковое меню не нужно.
   ============================================================ */
@media (max-width:820px), (max-height:520px) and (pointer:coarse){
  :root{--pad:14px; --hit:44px}
  .app{grid-template-columns:1fr}
  .side{display:none}
  .main{
    padding:0 calc(12px + env(safe-area-inset-right))
              calc(var(--tabh) + 34px + env(safe-area-inset-bottom))
              calc(12px + env(safe-area-inset-left));
  }
  /* шапка раздела: название и его кнопки под рукой на любой прокрутке */
  .top{
    position:sticky;top:0;z-index:40;align-items:center;flex-wrap:nowrap;
    margin:0 calc(-12px - env(safe-area-inset-right)) 0 calc(-12px - env(safe-area-inset-left));
    padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) 10px
             calc(12px + env(safe-area-inset-left));
    background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(14px) saturate(140%)
  }
  .top > div:first-child{min-width:0}
  .top h1{font-size:20px;letter-spacing:-.7px}
  .sub{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top-r{flex:0 0 auto;flex-wrap:nowrap}
  .top-r .icon-b{width:var(--hit);height:var(--hit)}
  .card{border-radius:18px}
  .hide-sm{display:none}
  /* палец толще курсора: поднимаем цели до 44/40px */
  /* шапка карточки: если кнопкам и заголовку тесно в строку — заголовок берёт
     всю ширину, кнопки уезжают под него целой группой */
  .c-head{flex-wrap:wrap}
  .c-head > div:not([class]){flex:1 1 190px}
  .c-head .btn-row{flex:0 0 auto}
  .btn{height:var(--hit);padding:0 14px}
  .btn.small{height:40px;padding:0 13px;font-size:11.6px}
  .icon-b{width:40px;height:40px;border-radius:11px}
  .mode button{height:var(--hit)}
  .card .mode button{height:40px}
  .chip{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;font-size:12.4px}
  /* короткая ссылка вроде «правка» узка для пальца — расширяем зону, не сдвигая текст */
  .link{min-height:40px;display:inline-flex;align-items:center;padding:0 9px;margin:0 -9px}
  .lbl{font-size:11.5px}
  /* 16px в поле — иначе iOS зумит форму на фокусе и экран уезжает боком */
  .f input,.f select,.f textarea{font-size:16px;height:46px}
  .f textarea{height:auto}
  .f select{-webkit-appearance:none;appearance:none;padding-right:34px;
    background-image:linear-gradient(45deg,transparent 48%,var(--muted) 50%,transparent 52%),
                     linear-gradient(-45deg,transparent 48%,var(--muted) 50%,transparent 52%);
    background-size:9px 9px;background-position:right 16px top 21px,right 9px top 21px;background-repeat:no-repeat}
  .s-v{font-size:22px}
  .s-l{font-size:11px}
  /* диалог — лист снизу */
  .modal-root{padding:0;align-items:end;justify-items:stretch}
  .modal{
    width:100%;max-height:92vh;max-height:92dvh;border-radius:24px 24px 0 0;
    padding:7px 16px calc(18px + env(safe-area-inset-bottom));
    overscroll-behavior:contain;animation:sheet .26s cubic-bezier(.2,.9,.3,1.02)
  }
  .sheet-grab{display:block}
  .modal-head{position:sticky;top:0;z-index:2;background:var(--card);padding:8px 0 12px;margin:0}
  @keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
  .tabs{
    display:flex;position:fixed;left:10px;right:10px;bottom:calc(9px + env(safe-area-inset-bottom));height:var(--tabh);
    background:color-mix(in srgb,var(--card) 88%,transparent);backdrop-filter:blur(16px) saturate(150%);
    border:1px solid var(--line);border-radius:20px;z-index:60;box-shadow:0 18px 40px -18px #000b;
    padding:6px;align-items:center;justify-content:space-around
  }
  .tab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    color:var(--muted);font-size:10.5px;font-weight:600;padding:7px 2px;border-radius:14px}
  .tab .ic{width:22px;height:22px}
  .tab.on{color:var(--accent);background:var(--accent-soft)}
  /* счётчик на разделе: сколько людей ждёт и сколько турниров впереди */
  .tab em{
    position:absolute;top:3px;left:50%;margin-left:5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
    background:var(--accent);color:var(--accent-ink);font-style:normal;font-size:10.5px;font-weight:800;
    line-height:17px;text-align:center
  }
  .tab.on em{background:var(--accent)}
  .tab em:empty{display:none}
  .toast{bottom:calc(var(--tabh) + 20px + env(safe-area-inset-bottom))}
}
/* самые узкие телефоны (320px): в таблице остаётся только главное */
@media (max-width:400px){
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .stat{padding:12px}
  .s-v{font-size:20px}
  .top h1{font-size:19px}
  .hide-xs{display:none}
  .tbl td+td,.tbl th+th{padding-left:8px}
}