/* PR/РЫВ 2.1 — кинетический редакционный интерфейс.
   Движение показывает смену состояния и направление действия, а не украшает. */

:root{
  --night:#081419;
  --ground:#10242a;
  --ground-2:#183139;
  --line:#2b4951;
  --line-soft:rgba(145,164,167,.18);
  --ivory:#f3eddf;
  --paper:#ece4d5;
  --dim:#8fa3a6;
  --jade:#8bd1ae;
  --jade-deep:#193c33;
  --ember:#df8b68;
  --page-x:clamp(22px,6.4vw,38px);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-snap:cubic-bezier(.2,.85,.2,1.15);
}

html{background:var(--night)}
body{
  min-width:280px;
  background:var(--night);
  letter-spacing:.005em;
  transition:background-color .6s var(--ease-out),color .45s ease;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 78% 4%,rgba(139,209,174,.08),transparent 34%),
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(139,209,174,.07) 50%,transparent calc(50% + .5px));
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.018;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

#app{
  position:relative;z-index:1;max-width:600px;
  padding:env(safe-area-inset-top) var(--page-x) calc(env(safe-area-inset-bottom) + 94px);
}

/* Шапка — координаты прибора, не отдельная панель. */
.top{
  height:72px;padding:22px 0 0;align-items:flex-start;
  font-size:9px;letter-spacing:.14em;
}
.brand{
  position:relative;color:var(--ivory);font-family:var(--disp);font-size:12px;
  font-weight:420;letter-spacing:.11em;line-height:1;
}
.brand::after{
  content:"";position:absolute;right:-11px;top:-3px;width:4px;height:4px;
  border-radius:50%;background:var(--ember);box-shadow:0 0 0 4px rgba(223,139,104,.09);
  animation:status-breathe 3.6s ease-in-out infinite;
}
#clock{margin-left:auto;color:var(--dim);font-variant-numeric:tabular-nums}

/* Нижняя навигация — спокойный пульт с ясной активной точкой. */
.top > span:last-child{
  position:fixed;z-index:20;left:50%;bottom:0;transform:translateX(-50%);
  width:min(600px,100%);height:calc(72px + env(safe-area-inset-bottom));
  padding:8px max(12px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-left));
  display:grid;grid-template-columns:1.2fr 1fr 1fr .58fr;align-items:stretch;
  background:rgba(8,20,25,.96);border-top:1px solid rgba(143,163,166,.22);
  box-shadow:0 -14px 36px rgba(0,0,0,.18);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.top button{
  position:relative;height:56px;padding:0;color:var(--dim);font-size:9px;
  letter-spacing:.13em;text-align:center;border-radius:8px;
  transition:color .28s ease,background .28s ease,transform .18s ease;
}
.top button::before{
  content:"";position:absolute;left:50%;top:7px;width:4px;height:4px;
  border-radius:50%;background:var(--jade);opacity:0;transform:translate(-50%,-5px) scale(.3);
  transition:opacity .3s ease,transform .4s var(--ease-snap);
}
.top button.on{color:var(--ivory);background:rgba(255,255,255,.025)}
.top button.on::before{opacity:1;transform:translate(-50%,0) scale(1)}
.top button:active{transform:scale(.96)}

/* Живая линия: сначала рисуется, затем очень медленно пропускает импульс. */
.sig{
  position:absolute;top:58px;left:var(--page-x);width:calc(100% - var(--page-x) * 2);
  height:22px;margin:0;overflow:visible;
}
.sig path{
  stroke:var(--line);stroke-width:1;stroke-dasharray:8 5;vector-effect:non-scaling-stroke;
  animation:signal-enter 1.25s var(--ease-out) both,signal-drift 18s linear 1.25s infinite;
}

.screen{
  position:relative;padding-top:62px;padding-bottom:18px;scrollbar-width:none;
  animation:screen-arrive .58s var(--ease-out) both;
  transform-origin:50% 20%;
}
.screen::-webkit-scrollbar{display:none}
.screen::before{
  display:block;flex:none;margin-bottom:28px;color:var(--dim);font-family:var(--mono);
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  animation:label-arrive .7s .06s var(--ease-out) both;
}
.screen::after{
  content:"";position:absolute;left:-12px;top:63px;width:1px;height:34px;background:var(--line);
  transform-origin:top;animation:rule-grow .7s .08s var(--ease-out) both;
}
#s-now::before{content:"01  /  контакт"}
#s-plan::before{content:"02  /  датчик"}
#s-me::before{content:"03  /  факты"}
#s-set::before{content:"система  /  параметры"}

/* СЕЙЧАС: один вопрос занимает воздух, ответы работают как физические клавиши. */
#s-now{overflow-y:auto;overflow-x:hidden}
#s-now .q{
  position:relative;margin:auto 0 0;max-width:500px;
  font-size:clamp(33px,9.1vw,48px);line-height:1.08;letter-spacing:-.035em;
  font-weight:240;text-wrap:balance;
  animation:question-arrive .72s .08s var(--ease-out) both;
}
#s-now .q::after{
  content:"";display:block;width:52px;height:2px;background:var(--ember);margin-top:28px;
  transform-origin:left;animation:accent-grow .65s .35s var(--ease-out) both;
}
.swipe-row{
  gap:0;margin-top:26px;border:1px solid var(--line);border-left:0;border-right:0;
  animation:choices-arrive .62s .28s var(--ease-out) both;
}
.sw{
  position:relative;min-height:58px;border:0;border-right:1px solid var(--line);border-radius:0;
  padding:14px 5px;font-size:9px;letter-spacing:.14em;overflow:hidden;
  transition:background .25s ease,color .25s ease,transform .18s ease;
}
.sw:last-child{border-right:0}
.sw:nth-child(2){color:var(--ivory);background:rgba(139,209,174,.055)}
.sw::after{
  content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--jade);
  transform:scaleX(0);transition:transform .35s var(--ease-out);
}
.sw:hover::after,.sw:focus-visible::after{transform:scaleX(1)}
.sw:active{background:var(--ground-2);color:var(--ivory);transform:translateY(1px)}

.helpbtn{
  position:relative;min-height:68px;margin-top:20px;border:0;border-radius:0;
  background:var(--jade);color:var(--night);font-size:11px;font-weight:700;
  letter-spacing:.28em;text-align:left;padding:0 25px;overflow:hidden;
  box-shadow:0 12px 34px rgba(0,0,0,.18);
  transition:background .25s ease,transform .2s ease,box-shadow .3s ease;
  animation:action-arrive .65s .42s var(--ease-out) both;
}
.helpbtn::before{
  content:"";position:absolute;inset:0;background:var(--ivory);
  transform:translateX(-102%);transition:transform .55s var(--ease-out);
}
.helpbtn::after{
  content:"→";position:absolute;right:24px;top:50%;transform:translateY(-54%);
  font-family:var(--body);font-size:25px;font-weight:400;letter-spacing:0;
  transition:transform .4s var(--ease-out);
}
.helpbtn:hover::before,.helpbtn:focus-visible::before{transform:translateX(0)}
.helpbtn:hover::after,.helpbtn:focus-visible::after{transform:translate(5px,-54%)}
.helpbtn:active{transform:scale(.985);box-shadow:0 5px 15px rgba(0,0,0,.16)}
.helpbtn > *{position:relative}
.said{
  margin-top:20px;padding:16px 0 16px 19px;border-left:2px solid var(--jade);
  font-size:14px;line-height:1.58;animation:answer-arrive .5s var(--ease-out) both;
}
.linkbtn{min-height:44px;margin-top:8px;font-size:9px;text-underline-offset:4px;transition:color .2s ease,transform .2s ease}
.linkbtn:active{transform:translateY(1px)}

/* Ввод появляется как продолжение вопроса, не как отдельная форма. */
#nowanswer textarea,#nowanswer .commit,#nowanswer .linkbtn{
  animation:field-arrive .5s var(--ease-out) both;
}
#nowanswer .commit{animation-delay:.06s}
#nowanswer .linkbtn{animation-delay:.1s}
textarea,input{
  border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;
  padding:14px 0;color:var(--ivory);transition:border-color .25s ease,background .25s ease;
}
textarea{min-height:130px;font-size:17px;line-height:1.55}
textarea:focus,input:focus{border-color:var(--jade);outline:none}
.commit,.save{
  min-height:56px;border:1px solid var(--ivory);border-radius:0;background:transparent;
  font-size:10px;transition:background .25s ease,color .25s ease,transform .18s ease;
}
.commit:hover,.save:hover{background:var(--ivory);color:var(--night)}
.commit:active,.save:active{transform:scale(.985)}

/* ПЛАН: последовательность с визуальным ходом сверху вниз. */
h2.sec{
  margin:0 0 24px;font-size:clamp(29px,7.5vw,39px);line-height:1.12;
  letter-spacing:-.03em;font-weight:240;
}
.task{
  position:relative;padding:19px 0 19px 32px;border-bottom:1px solid var(--line);
  counter-increment:task;animation:list-row-arrive .48s var(--ease-out) both;
}
.task:nth-child(2){animation-delay:.045s}.task:nth-child(3){animation-delay:.09s}
.task:nth-child(4){animation-delay:.135s}.task:nth-child(5){animation-delay:.18s}
#tasks,#review{counter-reset:task}
.task::before{
  content:counter(task,decimal-leading-zero);position:absolute;left:0;top:23px;
  color:var(--ember);font-family:var(--mono);font-size:8px;letter-spacing:.08em;
}
.task::after{
  content:"";position:absolute;left:7px;top:38px;bottom:-1px;width:1px;background:var(--line-soft);
}
.task:last-child::after{display:none}
.task .tx{font-size:17px;line-height:1.42}
.task .acts{gap:12px;margin-top:9px;flex-wrap:wrap}
.task .acts .linkbtn{min-height:34px;color:var(--dim)}
#addbox{margin-top:25px;border-bottom:1px solid var(--line);gap:14px}
#addbox input{border:0;padding-left:0;font-size:16px}
.empty{max-width:390px;margin-top:0;font-size:15px;line-height:1.65;color:var(--dim)}
.hint{font-size:13px;line-height:1.52}

/* Я: журнал — даты образуют отдельную колонку, факты входят с ритмом. */
.entry{
  position:relative;padding:20px 0 22px 27%;border-bottom:1px solid var(--line);
  animation:list-row-arrive .5s var(--ease-out) both;
}
.entry .when{position:absolute;left:0;top:23px;width:23%;font-size:8px;line-height:1.5}
.entry .what{margin-top:0;font-size:17px;line-height:1.48}
.entry.unseen{padding-left:27%}
.entry.unseen::before{left:calc(27% - 15px);top:29px;width:5px;height:5px;box-shadow:0 0 0 5px rgba(139,209,174,.08)}

/* УСКОРЕНИЕ: переход в свет — главный драматургический жест продукта. */
.light{background:var(--paper);color:var(--night)}
.light::before{opacity:0}
.light::after{opacity:.012}
.light .brand{color:var(--night)}
.light .brand::after{background:var(--ember)}
.light #app{padding-bottom:calc(env(safe-area-inset-bottom) + 20px)}
.light .top > span:last-child{display:none}
.light .screen{padding-top:72px}
.light #s-help::before{content:"свет включён  /  выбрать предмет";display:block;color:#70685c;margin-bottom:32px}
.light #s-help.has-card::before{content:"свет включён  /  коррекция и действие"}
.light .sig path{stroke:#bfb5a5}
.light .screen::after{background:#bfb5a5}
.hq{
  max-width:500px;margin-top:0;font-size:clamp(31px,8.2vw,43px);font-weight:240;
  line-height:1.13;letter-spacing:-.035em;text-wrap:balance;
  animation:question-arrive .7s .08s var(--ease-out) both;
}
.states{gap:0;margin-top:36px;border-top:1px solid #c9bfaf}
.st{
  --i:0;position:relative;min-height:64px;border:0;border-bottom:1px solid #c9bfaf;
  border-radius:0;padding:17px 44px 17px 0;background:transparent;font-size:16px;line-height:1.4;
  opacity:0;animation:state-row-arrive .55s calc(.12s + var(--i) * .055s) var(--ease-out) forwards;
  transition:padding-left .28s var(--ease-out),background .25s ease;
}
.st::after{content:"↗";position:absolute;right:4px;top:19px;color:#756b5e;font-size:18px;transition:transform .3s var(--ease-out)}
.st:hover,.st:focus-visible{padding-left:12px;background:rgba(8,20,25,.035)}
.st:hover::after,.st:focus-visible::after{transform:translate(3px,-3px)}
.st:active{background:#ded5c6}
.loading{margin-top:10vh;color:#70685c;animation:loading-pulse 1.2s ease-in-out infinite}
.card{position:relative;margin-top:0;padding:0;border:0;border-radius:0;background:transparent;animation:card-arrive .72s var(--ease-out) both}
.card::before{content:"";display:block;width:54px;height:2px;background:var(--ember);margin-bottom:34px;animation:accent-grow .55s .15s var(--ease-out) both}
.card .corr{max-width:510px;font-family:var(--disp);font-size:clamp(27px,7vw,38px);font-weight:240;line-height:1.22;letter-spacing:-.025em}
.card .act{position:relative;margin-top:38px;padding:22px 0 0 26px;border-top:1px solid #c9bfaf;font-size:18px;line-height:1.48;font-weight:650}
.card .act::before{content:"→";position:absolute;left:0;top:21px;color:var(--ember);font-weight:400}
.opts{gap:0;padding-top:32px;margin-top:auto;border-top:1px solid #c9bfaf;animation:options-arrive .55s .2s var(--ease-out) both}
.opt{
  position:relative;min-height:58px;border:0;border-bottom:1px solid #c9bfaf;border-radius:0;
  background:transparent;padding:15px 2px;text-align:left;font-size:16px;overflow:hidden;
  transition:padding-left .25s var(--ease-out),background .25s ease;
}
.opt::after{content:"→";float:right;font-size:21px;font-weight:400;transition:transform .3s var(--ease-out)}
.opt:hover::after,.opt:focus-visible::after{transform:translateX(5px)}
.opt.primary{background:var(--night);color:var(--ivory);border:0;padding-left:20px;padding-right:20px}
.opt:not(.primary):hover{padding-left:10px;background:rgba(8,20,25,.035)}
.opt:active{background:#d9cfbf}.opt.primary:active{background:#203238}
.light textarea{color:var(--night);border-color:#b9ae9d}
.light textarea:focus{border-color:#72685c}

/* Настройки остаются техническими, но собранными. */
label{margin-top:28px;font-size:9px}
.diag{border-radius:0;background:var(--ground);line-height:1.58;box-shadow:0 12px 30px rgba(0,0,0,.12)}
.ver{padding:8px 0 20px}

button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--jade);outline-offset:4px}
.light button:focus-visible,.light input:focus-visible,.light textarea:focus-visible{outline-color:var(--night)}

/* View Transitions даёт цельный переход «тьма → свет», но не блокирует старые браузеры. */
::view-transition-old(root){animation:veil-out .34s ease both}
::view-transition-new(root){animation:veil-in .58s var(--ease-out) both}

@keyframes status-breathe{0%,100%{opacity:.55;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@keyframes signal-enter{from{stroke-dasharray:0 1000;opacity:0}to{stroke-dasharray:8 5;opacity:1}}
@keyframes signal-drift{to{stroke-dashoffset:-130}}
@keyframes screen-arrive{from{opacity:0;transform:translateY(18px) scale(.992);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes label-arrive{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes rule-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes question-arrive{from{opacity:0;transform:translateY(24px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes accent-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes choices-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes action-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes answer-arrive{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes field-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes list-row-arrive{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes state-row-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes card-arrive{from{opacity:0;transform:translateY(20px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes options-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes loading-pulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes veil-out{to{opacity:0;transform:scale(.995);filter:blur(2px)}}
@keyframes veil-in{from{opacity:0;clip-path:circle(0 at 50% 62%)}to{opacity:1;clip-path:circle(120% at 50% 62%)}}

@media (min-width:700px){
  #app{border-left:1px solid rgba(143,163,166,.12);border-right:1px solid rgba(143,163,166,.12)}
}
@media (max-height:700px){
  .screen{padding-top:40px}.screen::before{margin-bottom:18px}.screen::after{top:41px}
  #s-now .q{font-size:29px}.helpbtn{min-height:56px}.sw{min-height:50px}
  .light .screen{padding-top:40px}.states{margin-top:24px}.st{min-height:52px;padding-top:13px;padding-bottom:13px}
  .st::after{top:14px}.top{height:62px}.sig{top:51px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}