/* Приложение Callen: оболочка, навигация и общие части экранов.
   Значения — только из tokens.css. Экраны звонка, карточек, разбора и домашки
   лежат в screens.css. */

/* --- основа --------------------------------------------------------------- */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--font-text);
     font-size:var(--fs-base);line-height:1.5;-webkit-font-smoothing:antialiased;
     overflow-x:hidden}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.15;letter-spacing:-.03em}
h1{font-size:var(--fs-2xl)}
h2{font-size:var(--fs-xl)}
h3{font-size:var(--fs-lg)}
button,input,textarea{font:inherit;color:inherit}
a{color:var(--accent-text);text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

.muted{color:var(--muted)}
.dim{color:var(--dim);font-size:var(--fs-sm)}
.center{text-align:center}
.grow{flex:1}
.stack{display:flex;flex-direction:column;gap:var(--sp-3)}
.loading{margin:auto;color:var(--dim);font-size:var(--fs-md);padding:var(--sp-8) 0}
.sect-title{font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;
            color:var(--dim);font-weight:600;margin-bottom:var(--sp-3)}

/* --- оболочка ------------------------------------------------------------- */

.shell{display:flex;min-height:100%}
.view{flex:1;min-width:0;display:flex;flex-direction:column;
      padding:max(var(--sp-5),env(safe-area-inset-top)) var(--sp-5)
              calc(var(--tabs) + var(--sp-5) + env(safe-area-inset-bottom))}
.shell[data-nav="off"] .view{padding-bottom:calc(var(--sp-5) + env(safe-area-inset-bottom))}
#app{flex:1;display:flex;flex-direction:column;width:100%;max-width:var(--content);margin:0 auto}

/* Переход между экранами: 200–250 мс, снизу вверх. Ставится классом, а не на
   сам #app, — перерисовка внутри экрана (опрос разбора, шаги домашки) не должна
   проигрывать анимацию заново. */
#app.enter{animation:screen-in var(--dur-slow) var(--ease-out)}
@keyframes screen-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.stagger > *{animation:rise var(--dur-slow) var(--ease-out) backwards;
             animation-delay:calc(var(--i,0) * var(--stagger))}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* --- навигация ------------------------------------------------------------ */

.rail{display:none}
/* Нижняя навигация непрозрачная. Стекло здесь было бы красиво ровно до
   первого длинного экрана: сквозь него читается уезжающий текст, и полоса
   разделов превращается в кашу. */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;
      background:var(--surface);border-top:1px solid var(--line);
      padding-bottom:env(safe-area-inset-bottom)}
.shell[data-nav="off"] .tabs,
.shell[data-nav="off"] .rail{display:none}

.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;
          gap:4px;background:none;border:none;cursor:pointer;color:var(--dim);
          font-size:11px;font-weight:500;letter-spacing:.01em;
          transition:color var(--dur) var(--ease), background var(--dur) var(--ease)}
.nav-item svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
              stroke-linecap:round;stroke-linejoin:round}
.nav-item.on{color:var(--accent-text)}
.nav-item:hover{color:var(--ink)}
.nav-item.on:hover{color:var(--accent-text)}
.tabs .nav-item{flex:1 1 0;min-width:0;height:var(--tabs)}
.tabs .nav-item.on{background:var(--accent-soft)}

@media(min-width:900px){
  .rail{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);
        width:var(--rail);flex:none;position:sticky;top:0;align-self:flex-start;
        height:100vh;height:100dvh;padding:var(--sp-5) var(--sp-2);
        background:var(--surface);border-right:1px solid var(--line-soft)}
  .rail .brand{margin-bottom:var(--sp-5);display:flex;align-items:center;justify-content:center}
  .rail .brand svg{width:28px;height:28px}
  .rail .nav-item{width:100%;padding:var(--sp-3) 2px;border-radius:var(--rad-md)}
  .rail .nav-item.on{background:var(--accent-soft)}
  .rail .nav-item:hover{background:var(--surface-2)}
  .rail .nav-item.on:hover{background:var(--accent-soft)}
  .tabs{display:none}
  .view{padding:var(--sp-7) var(--sp-6) var(--sp-8)}
  .shell[data-nav="off"] .view{padding-bottom:var(--sp-8)}
}

/* --- кнопки и поля -------------------------------------------------------- */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
     min-height:var(--tap);padding:0 24px;border-radius:var(--rad-pill);border:none;
     background:var(--grad-accent);color:var(--on-accent);cursor:pointer;font-weight:600;
     box-shadow:var(--sh-glow);
     transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                filter var(--dur) var(--ease), opacity var(--dur)}
.btn:hover{transform:translateY(-2px);filter:saturate(1.06);
           box-shadow:0 16px 32px -14px rgba(242,153,74,.8)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none;filter:none}
.btn.block{width:100%}
.btn.big{min-height:60px;font-size:var(--fs-lg);padding:0 30px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--accent-line);box-shadow:var(--sh-card)}
.btn.quiet{background:transparent;color:var(--muted);border:none;box-shadow:none;
           font-weight:500;font-size:var(--fs-md);min-height:40px;padding:0 12px}
.btn.quiet:hover{color:var(--ink);transform:none;box-shadow:none}

.icon-btn{width:40px;height:40px;flex:none;border-radius:50%;background:transparent;
          border:1px solid var(--line);color:var(--muted);cursor:pointer;
          display:flex;align-items:center;justify-content:center;
          transition:color var(--dur), border-color var(--dur), transform var(--dur)}
.icon-btn:hover{color:var(--accent-text);border-color:var(--accent-line);transform:translateY(-1px)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
              stroke-linecap:round;stroke-linejoin:round}
.icon-btn:disabled{opacity:.45;cursor:default}

.field{width:100%;min-height:var(--tap);padding:0 18px;border-radius:var(--rad-md);
       border:1px solid var(--line);background:var(--surface);color:var(--ink);
       transition:border-color var(--dur)}
.field:focus{border-color:var(--accent-line)}
.field::placeholder{color:var(--dim)}
.field:disabled{opacity:.6}

.err{background:var(--danger-soft);border:1px solid var(--danger-line);color:var(--danger-text);
     border-radius:var(--rad-md);padding:13px 16px;font-size:var(--fs-md);margin-bottom:var(--sp-4)}

/* --- карточки и плашки ---------------------------------------------------- */

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-lg);
      padding:var(--sp-5);box-shadow:var(--sh-card)}

.tile{display:flex;align-items:center;gap:var(--sp-4);width:100%;text-align:left;
      background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-lg);
      padding:var(--sp-4) var(--sp-5);box-shadow:var(--sh-card);cursor:pointer;
      transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                 border-color var(--dur) var(--ease)}
.tile + .tile{margin-top:var(--sp-3)}
.tile:hover{transform:translateY(-2px);box-shadow:var(--sh-lift)}
.tile:active{transform:translateY(0)}
.tile b{display:block;font-weight:600;font-size:var(--fs-base)}
.tile span{display:block;color:var(--muted);font-size:var(--fs-sm);margin-top:2px}
.tile .chev{margin-left:auto;flex:none;color:var(--dim);font-size:22px;line-height:1}
.tile:disabled{opacity:.6;cursor:default;box-shadow:none;transform:none}
.tile:disabled .chev{display:none}
.tile.flat{cursor:default}
.tile.flat:hover{transform:none;box-shadow:var(--sh-card)}

/* Кружок со значком слева в плашке: не украшение, а способ отличить домашку
   от слов боковым зрением. */
.tile .mark{flex:none;width:42px;height:42px;border-radius:50%;display:flex;
            align-items:center;justify-content:center;background:var(--accent-soft);
            color:var(--accent-text)}
.tile .mark svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
                stroke-linecap:round;stroke-linejoin:round}
.tile .mark.ok{background:var(--ok-soft);color:var(--ok-text)}

/* --- портреты ------------------------------------------------------------- */

.portrait{position:relative;overflow:hidden;flex:none;
          background:linear-gradient(150deg,var(--a),var(--b));
          display:flex;align-items:center;justify-content:center}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
              object-position:center top}
.portrait .initial{font-family:var(--font-display);font-weight:700;
                   color:rgba(245,240,232,.24);font-size:2em}

/* --- вход и онбординг ----------------------------------------------------- */

.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);
       font-weight:700;font-size:var(--fs-lg);letter-spacing:-.02em;flex:none}
.brand svg{width:26px;height:26px;flex:none}

.pane{flex:1;display:flex;flex-direction:column;justify-content:center;
      max-width:440px;width:100%;margin:0 auto;padding:var(--sp-6) 0}
.pane h1{font-size:var(--fs-3xl);margin-bottom:var(--sp-3)}
.pane h1 em{font-style:normal;background:var(--grad-accent);
            -webkit-background-clip:text;background-clip:text;color:transparent}
.pane p.lead{color:var(--muted);font-size:var(--fs-lg);margin-bottom:var(--sp-6)}

.steps{display:flex;gap:6px;margin-bottom:var(--sp-6);flex:none}
.steps i{flex:1;height:3px;border-radius:2px;background:var(--line);
         transition:background var(--dur-slow) var(--ease)}
.steps i.on{background:var(--accent)}

.choice{display:block;width:100%;text-align:left;background:var(--surface);
        border:1px solid var(--line);border-radius:var(--rad-md);padding:16px 18px;
        cursor:pointer;box-shadow:var(--sh-card);
        transition:border-color var(--dur), box-shadow var(--dur), transform var(--dur)}
.choice:hover{transform:translateY(-2px);box-shadow:var(--sh-lift)}
.choice.on{border-color:var(--accent-line);box-shadow:var(--sh-lift)}
.choice b{display:block;font-weight:600}
.choice span{display:block;color:var(--muted);font-size:var(--fs-sm);margin-top:3px}

/* --- выбор собеседника ---------------------------------------------------- */

.people{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3)}
@media(min-width:700px){.people{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}}
.person{position:relative;border:1px solid var(--line);border-radius:var(--rad-lg);
        overflow:hidden;background:var(--surface);cursor:pointer;text-align:left;
        box-shadow:var(--sh-card);padding:0;color:var(--ink);
        transition:border-color var(--dur), box-shadow var(--dur), transform var(--dur)}
.person:hover{transform:translateY(-3px);box-shadow:var(--sh-lift)}
.person.on{border-color:var(--accent-line);box-shadow:var(--sh-lift)}
.person .portrait{width:100%;aspect-ratio:3/4;font-size:44px}
.person .portrait:after{content:"";position:absolute;left:0;right:0;bottom:0;height:44%;
  background:linear-gradient(180deg,transparent,var(--surface) 94%)}
.person .body{padding:10px 14px 14px}
.person .body h3{font-size:var(--fs-base)}
.person .city{font-size:var(--fs-xs);color:var(--dim);margin-top:2px}
.person .tick{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;
  background:var(--grad-accent);display:none;align-items:center;justify-content:center;
  color:var(--on-accent);font-size:14px;z-index:1}
.person.on .tick{display:flex}

.sticky-foot{position:sticky;bottom:0;padding:var(--sp-4) 0 0;
  background:linear-gradient(180deg,transparent,var(--bg) 34%)}

/* --- главный экран -------------------------------------------------------- */

.home{display:flex;flex-direction:column;gap:var(--sp-6)}
@media(min-width:900px){
  .home{display:grid;grid-template-columns:minmax(280px,.85fr) 1fr;
        gap:var(--sp-8);align-items:start}
}

.hero-person{text-align:center}
.hero-portrait{width:min(230px,58vw);aspect-ratio:3/4;margin:0 auto var(--sp-4);
               border-radius:var(--rad-xl);box-shadow:var(--sh-up);font-size:64px}
/* Аватар едва заметно дышит: экран без движения выглядит выключенным, а
   заметное движение на главном раздражает через день. */
.breathe{animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.hero-person h1{font-size:var(--fs-2xl)}
.hero-person .city{color:var(--dim);font-size:var(--fs-sm);margin-top:3px}
.hero-person .btn{margin-top:var(--sp-5)}
@media(min-width:900px){
  .hero-person{text-align:left;position:sticky;top:var(--sp-7)}
  .hero-portrait{width:100%;max-width:300px;margin-left:0;margin-right:0}
}

.mins{margin-top:var(--sp-4);text-align:center}
.mins b{font-family:var(--font-display);font-size:var(--fs-xl);font-weight:700;
        letter-spacing:-.02em}
.mins span{display:block;color:var(--muted);font-size:var(--fs-sm);margin-top:2px}
.mins .bonus{color:var(--accent-text);font-size:var(--fs-sm);margin-top:4px}
.mins.stop b{font-size:var(--fs-base);font-family:var(--font-text);font-weight:600;
             color:var(--muted)}
@media(min-width:900px){.mins{text-align:left}}

/* --- сцены ---------------------------------------------------------------- */

.scenes{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
@media(min-width:640px){.scenes{grid-template-columns:repeat(2,1fr)}}
.scene{display:flex;flex-direction:column;gap:var(--sp-2);background:var(--surface);
       border:1px solid var(--line);border-radius:var(--rad-lg);padding:var(--sp-5);
       box-shadow:var(--sh-card);text-align:left;cursor:pointer;color:var(--ink);
       transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                  border-color var(--dur) var(--ease)}
.scene:hover{transform:translateY(-3px);box-shadow:var(--sh-lift)}
.scene .n{font-size:var(--fs-xs);letter-spacing:.12em;color:var(--accent-text);font-weight:600}
.scene h3{font-size:var(--fs-lg)}
.scene p{color:var(--muted);font-size:var(--fs-sm)}
.scene-go{margin-top:var(--sp-2);color:var(--accent-text);font-size:var(--fs-sm);font-weight:600}
.scene:disabled{opacity:.55;cursor:default;transform:none;box-shadow:var(--sh-card)}
.scene:disabled .scene-go{color:var(--dim)}

/* --- профиль -------------------------------------------------------------- */

.head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-6);flex:none}
.head h1{flex:1;min-width:0}

.pf-block{margin-bottom:var(--sp-6)}
.pf-id{color:var(--dim);font-size:var(--fs-sm);margin-bottom:var(--sp-6)}
.pf-id b{display:block;color:var(--ink);font-weight:600;font-size:var(--fs-lg);
         font-family:var(--font-display);letter-spacing:-.02em;margin-bottom:2px}

.pf-person{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);
           background:var(--surface);border:1px solid var(--line);
           border-radius:var(--rad-lg);box-shadow:var(--sh-card)}
.pf-person .portrait{width:52px;height:68px;border-radius:var(--rad-sm);font-size:22px}
.pf-who{flex:1;min-width:0}
.pf-who b{display:block;font-weight:600}
.pf-who span{display:block;color:var(--dim);font-size:var(--fs-sm);margin-top:2px;
             overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Ряд кнопок одного выбора: помощь по-русски, тема, ступени уровня. Один вид на
   все три — человек не должен гадать, чем этот ряд отличается от соседнего. */
.seg{display:flex;gap:var(--sp-2);align-items:stretch}
.seg button{flex:1 1 0;min-width:0;min-height:44px;padding:10px 4px;
            border-radius:var(--rad-md);background:transparent;border:1px solid var(--line);
            color:var(--ink);cursor:pointer;text-align:center;
            transition:border-color var(--dur), color var(--dur), background var(--dur)}
.seg button:hover{border-color:var(--accent-line)}
.seg button.on{border-color:var(--accent-line);color:var(--accent-text);background:var(--accent-soft)}
.seg button:disabled{opacity:.5;cursor:default}
.seg.levels button b{display:block;font-family:var(--font-display);font-weight:700;
                     font-size:var(--fs-sm);letter-spacing:-.02em}
.seg.levels button span{display:block;color:var(--dim);font-size:10px;line-height:1.25;
                        margin-top:3px;overflow-wrap:break-word}
.seg.levels button.on span{color:var(--accent-text)}

.hint{color:var(--dim);font-size:var(--fs-sm);line-height:1.45;margin-top:var(--sp-3)}
.saved{color:var(--ok-text);font-size:var(--fs-sm);margin-top:var(--sp-2)}
.saved.wait{color:var(--dim)}
.failed{color:var(--danger-text);font-size:var(--fs-sm);margin-top:var(--sp-2)}

.toggle-row{display:flex;align-items:center;gap:var(--sp-4)}
.toggle-row .t{flex:1;min-width:0}
.toggle-row .t b{display:block;font-weight:600}
.toggle-row .t span{display:block;color:var(--muted);font-size:var(--fs-sm);margin-top:3px}
.switch{flex:none;position:relative;width:50px;height:30px;padding:0;border-radius:var(--rad-pill);
        background:var(--surface-2);border:1px solid var(--line);cursor:pointer;
        transition:background var(--dur), border-color var(--dur)}
.switch i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
          background:var(--muted);transition:transform var(--dur) var(--ease), background var(--dur)}
.switch[aria-checked="true"]{background:var(--accent-soft);border-color:var(--accent-line)}
.switch[aria-checked="true"] i{transform:translateX(20px);background:var(--accent)}
.switch:disabled{opacity:.5;cursor:default}

.danger-box{margin-top:var(--sp-3);padding:var(--sp-4);border-radius:var(--rad-md);
            background:var(--danger-soft);border:1px solid var(--danger-line)}
.danger-box p{font-size:var(--fs-sm);line-height:1.45}
.danger-box .row{display:flex;gap:var(--sp-2);margin-top:var(--sp-3)}
.danger-box button{flex:1 1 0;min-width:0;min-height:42px;padding:0 8px;
                   border-radius:var(--rad-pill);background:transparent;
                   border:1px solid var(--line);color:var(--ink);cursor:pointer;
                   font-size:var(--fs-sm);transition:border-color var(--dur), color var(--dur)}
.danger-box .go{border-color:var(--danger-line);color:var(--danger-text)}

/* --- пусто ---------------------------------------------------------------- */

.empty{margin:auto 0;text-align:center;padding:var(--sp-8) 0}
.empty b{display:block;font-family:var(--font-display);font-weight:700;
         font-size:var(--fs-xl);letter-spacing:-.03em}
.empty span{display:block;color:var(--muted);font-size:var(--fs-md);margin-top:var(--sp-3);
            max-width:44ch;margin-left:auto;margin-right:auto}

/* --- ожидание ------------------------------------------------------------- */

.wait{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:var(--fs-sm)}
.wait i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);
        border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- кнопка озвучки ------------------------------------------------------- */

.snd{flex:none;width:38px;height:38px;border-radius:50%;background:transparent;
     border:1px solid var(--line);color:var(--muted);display:inline-flex;
     align-items:center;justify-content:center;cursor:pointer;
     transition:color var(--dur), border-color var(--dur), opacity var(--dur)}
.snd svg{width:16px;height:16px;fill:currentColor}
.snd:hover{color:var(--accent-text);border-color:var(--accent-line)}
.snd:disabled{cursor:default}
.snd.busy{opacity:.45;animation:sndwait 1.1s ease-in-out infinite}
.snd.playing{color:var(--accent-text);border-color:var(--accent-line)}
@keyframes sndwait{50%{opacity:1}}

/* --- микрофон ------------------------------------------------------------- */

.mic{display:inline-flex;align-items:center;justify-content:center;gap:9px;
     min-height:var(--tap);padding:0 20px;border-radius:var(--rad-pill);
     background:transparent;border:1px dashed var(--line);color:var(--muted);
     cursor:pointer;transition:color var(--dur), border-color var(--dur), opacity var(--dur)}
.mic svg{width:16px;height:16px;fill:currentColor}
.mic:hover{color:var(--accent-text);border-color:var(--accent-line)}
.mic:disabled{cursor:default;opacity:.6}
.mic.rec{border-style:solid;border-color:var(--danger-line);color:var(--danger-text);
         animation:recpulse 1.1s ease-in-out infinite}
@keyframes recpulse{50%{opacity:.55}}

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