/* Йога-нидра 6 ноября — один экран, без прокрутки.
   Сверху марка, пунктирный бейдж и ступенчатый заголовок, ниже факты и запись.
   Фон рисует gradient.js: мягкий градиент дышит 4/6 и тянется за курсором. */

:root{
  --ground:#FFFFFF;
  --ink:#17283E;
  --mute:#3F5063;
  --line:rgba(23,40,62,.14);
  --bad:#C4452C;
  --ui:"Montserrat","Helvetica Neue",Arial,sans-serif;
}

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

html,body{height:100%}
body{
  margin:0; overflow:hidden;
  display:flex; flex-direction:column;
  background:var(--ground); color:var(--ink);
  font-family:var(--ui); font-weight:400; font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
p,h1,dl,dd,dt{margin:0}
[hidden]{display:none !important}

.sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.trap{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

.field{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}

.top{position:relative; z-index:2; display:flex; flex-direction:column; flex:0 0 auto}
.pad{
  padding-left:max(28px, env(safe-area-inset-left,0px));
  padding-right:max(28px, env(safe-area-inset-right,0px));
}

/* заголовок */
.head{padding-block:clamp(40px,9vh,96px) clamp(18px,4.6vh,54px)}
.h1{
  font-weight:700; font-size:clamp(32px,5.9vw,80px); line-height:1.03; letter-spacing:-.035em;
  text-wrap:balance;
}
.h1 span{display:block}
.h1 span + span{text-align:right}

/* строка фактов */
.strip{
  border-top:1px solid var(--line); padding-block:clamp(12px,2vh,18px);
  display:grid; grid-template-columns:repeat(3,auto) 1fr; gap:14px clamp(24px,4vw,64px); align-items:start;
}
.strip dt{font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--mute)}
.strip dd{margin-top:5px; font-size:clamp(13px,1.1vw,15px); font-weight:500}
/* обратный отсчёт — крупно, во всю ширину */
.count{width:100%; display:flex; flex-direction:column; align-items:center; gap:clamp(10px,1.8vh,20px)}
.nums{
  width:100%; display:flex; justify-content:space-between; align-items:flex-end;
  gap:8px; font-variant-numeric:tabular-nums;
}
.u{display:flex; flex-direction:column; align-items:center; gap:clamp(4px,0.9vh,10px); min-width:0}
.u b{font-size:clamp(42px,9.2vw,132px); font-weight:700; letter-spacing:-.045em; line-height:.9}
.u i{font-style:normal; font-size:clamp(8.5px,0.78vw,11px); font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--mute)}
.count-cap{font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--mute)}

/* зона записи */
.band{
  position:relative; z-index:2; flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(30px,7vh,86px);
  padding-block:clamp(22px,3.4vh,40px);
}
.band .inner{width:100%; max-width:640px}

.row{display:grid; grid-template-columns:1fr auto; gap:14px 18px; align-items:end}
.f{display:flex; flex-direction:column; gap:8px; min-width:0}
.f input{
  font:inherit; font-size:clamp(16px,1.5vw,19px); font-weight:500; color:var(--ink); width:100%;
  background:transparent; border:0; border-bottom:1px solid rgba(23,40,62,.45);
  padding:8px 2px; border-radius:0; transition:border-color .25s ease;
}
.f input::placeholder{color:rgba(23,40,62,.6); font-weight:400}
.f input:focus{outline:none; border-bottom-color:var(--ink)}
.f.is-bad input{border-bottom-color:var(--bad)}

.go{
  font:inherit; font-size:13.5px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  padding:15px 26px; border:0; border-radius:999px; cursor:pointer; background:var(--ink); color:#fff;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, opacity .3s ease;
}
.go:hover{transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(23,40,62,.65)}
.go:active{transform:translateY(0)}
.go[disabled]{opacity:.5; cursor:default; transform:none; box-shadow:none}

.meter{margin-top:clamp(18px,3vh,28px); display:flex; flex-direction:column; gap:8px}
.free{font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--mute)}
.free b{color:var(--ink)}
.mats{display:flex; gap:5px; height:5px}
.mats span{flex:1; border-radius:3px; background:var(--ink); transition:background .5s ease}
.mats span.is-taken{background:rgba(23,40,62,.26)}
.mats.is-unknown span{background:rgba(23,40,62,.5)}
.note{font-size:12px; line-height:1.45; color:var(--mute); min-height:1.45em}
.note.is-bad{color:var(--bad)}

.done{display:flex; flex-direction:column; gap:12px}
.done .done-k{font-size:clamp(26px,3.2vw,40px); font-weight:700; letter-spacing:-.03em; line-height:1.05; color:var(--ink)}
.done p{font-size:14px; color:var(--mute); max-width:44ch}
.done b{font-weight:600; color:var(--ink)}

:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:3px}

@media (max-width:900px){
  .pad{padding-left:max(18px, env(safe-area-inset-left,0px)); padding-right:max(18px, env(safe-area-inset-right,0px))}
  .head{padding-block:38px 14px}
  .h1{font-size:clamp(28px,8.6vw,44px); letter-spacing:-.03em}
  .strip{grid-template-columns:1fr 1fr; gap:12px 20px; padding-block:12px}
  .nums{gap:6px}
  .u b{font-size:clamp(34px,11vw,52px)}
  .u i{font-size:8.5px; letter-spacing:.12em}
  .count-cap{font-size:10px}
  .row{grid-template-columns:1fr; gap:14px}
  .go{width:100%; padding:14px 20px}
  .band{padding-block:22px; gap:clamp(24px,5vh,44px)}
}
@media (max-width:900px) and (max-height:730px){
  .head{padding-block:26px 10px}
  .h1{font-size:clamp(25px,7.4vw,36px)}
  .strip{padding-block:10px; gap:10px 18px}
  .meter{margin-top:14px}
  .band{padding-block:18px; gap:22px}
}
@media (prefers-reduced-motion:reduce){
  .go:hover{transform:none}
}