/* Экраны Callen: звонок, карточки, разбор, домашка.
   Значения — только из tokens.css. */

/* =========================================================================
   Звонок
   ========================================================================= */

/* Всегда тёмный: класс .theme-dark возвращает тёмную палитру внутри светлой
   темы, поэтому здесь нет ни одного своего цвета. Экран поверх всего и во весь
   экран — на звонке приложения не существует, есть только собеседник. */
.callscreen{position:fixed;inset:0;z-index:40;background:var(--bg);color:var(--ink);
            display:flex;flex-direction:column;overflow:hidden;
            animation:callin var(--dur-slow) var(--ease-out)}
@keyframes callin{from{opacity:0;transform:scale(1.02)}to{opacity:1;transform:none}}

.call-art{position:absolute;inset:0}
.call-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
              object-position:50% 12%}
.call-art .initial{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--font-display);font-size:120px;
  color:rgba(245,240,232,.18)}
.call-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,
  color-mix(in srgb, var(--bg) 62%, transparent) 0%,
  color-mix(in srgb, var(--bg) 12%, transparent) 22%,
  color-mix(in srgb, var(--bg) 80%, transparent) 56%, var(--bg) 90%)}

.call-body{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;
           width:100%;max-width:520px;margin:0 auto;text-align:center;
           padding:max(var(--sp-6),env(safe-area-inset-top)) var(--sp-5)
                   calc(var(--sp-6) + env(safe-area-inset-bottom))}
.call-who{font-family:var(--font-display);font-weight:700;font-size:var(--fs-2xl);
          letter-spacing:-.03em}
.call-city{color:var(--muted);font-size:var(--fs-sm);margin-top:3px}
.call-scene{display:inline-block;margin-top:var(--sp-3);padding:5px 14px;
            border-radius:var(--rad-pill);background:var(--accent-soft);
            color:var(--accent-text);font-size:var(--fs-xs);font-weight:600;
            letter-spacing:.04em}
.call-timer{margin-top:var(--sp-3);color:var(--accent-text);font-size:var(--fs-md);
            font-variant-numeric:tabular-nums;letter-spacing:.06em}
.call-timer.ending{color:var(--danger-text)}
.call-rec{display:flex;align-items:center;justify-content:center;gap:7px;
          margin-top:var(--sp-2);color:var(--dim);font-size:var(--fs-xs)}
.call-rec i{width:6px;height:6px;border-radius:50%;background:var(--danger);
            animation:recdot 1.6s ease-in-out infinite}
@keyframes recdot{50%{opacity:.25}}

/* Транскрипт живёт субтитрами внизу, а не перепиской: на звонке человек
   смотрит на собеседника, а в текст только заглядывает. */
.call-caption{margin-bottom:var(--sp-4);min-height:96px;max-height:34vh;
              overflow-y:auto;display:flex;flex-direction:column;justify-content:flex-end;
              gap:6px;font-size:var(--fs-md);text-align:left}
.call-caption p{color:var(--muted);opacity:.55}
.call-caption p:last-child{color:var(--ink);opacity:1}
.call-caption b{color:var(--accent-text);font-weight:600}

.hintbox{flex:none;background:var(--accent-soft);border:1px solid var(--accent-line);
         border-radius:var(--rad-md);padding:14px 16px;margin-bottom:var(--sp-4);text-align:left}
.hintbox b{display:block;font-size:var(--fs-lg);font-weight:600}
.hintbox span{display:block;color:var(--muted);font-size:var(--fs-sm);margin-top:3px}

/* Три кнопки звонка. Крупные и внизу — на звонке человек держит телефон одной
   рукой, и попасть должен большой палец, а не курсор. */
.call-pills{display:flex;gap:var(--sp-3);flex:none;margin-bottom:var(--sp-5)}
.pill{flex:1 1 0;min-width:0;min-height:56px;padding:0 12px;border-radius:var(--rad-pill);
      background:var(--surface-2);border:1px solid var(--line);color:var(--ink);
      cursor:pointer;font-weight:600;font-size:var(--fs-md);
      transition:border-color var(--dur), color var(--dur), transform var(--dur),
                 background var(--dur)}
.pill:hover{border-color:var(--accent-line);color:var(--accent-text);transform:translateY(-2px)}
.pill:active{transform:translateY(0)}
.pill:disabled{opacity:.45;cursor:not-allowed;transform:none}
.pill.done{border-color:var(--ok-line);color:var(--ok-text)}

.call-acts{display:flex;justify-content:center;gap:var(--sp-8);align-items:flex-start;flex:none}
.act{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}
.round{position:relative;width:76px;height:76px;border-radius:50%;border:none;cursor:pointer;
       color:#fff;display:flex;align-items:center;justify-content:center;
       transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease)}
.round svg{width:30px;height:30px;fill:currentColor}
.round:hover{transform:translateY(-2px)}
.round.end,.round.no{background:var(--danger);box-shadow:0 14px 30px -14px rgba(217,72,59,.95)}
.round.yes{background:var(--ok);box-shadow:0 14px 30px -14px rgba(76,195,138,.95)}
.round-label{font-size:var(--fs-sm);color:var(--muted)}

/* Входящий: кольца расходятся от кнопки ответа, как у телефона. */
.round.yes:before,.round.yes:after{content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--ok);opacity:0;animation:ring 2.4s infinite}
.round.yes:after{animation-delay:1.2s}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.7);opacity:0}}

.call-status{color:var(--muted);font-size:var(--fs-md);margin-top:var(--sp-4)}

/* --- звуковая волна ------------------------------------------------------- */

.wave{display:flex;align-items:center;justify-content:center;gap:5px;height:52px;
      margin-bottom:var(--sp-4);flex:none}
.wave i{display:block;width:4px;height:8px;border-radius:2px;background:var(--accent);
        opacity:.6;transition:height 90ms linear, opacity 90ms linear}
.wave.them i{background:var(--ok)}
.wave.idle i{animation:breathebar 2.6s ease-in-out infinite;
             animation-delay:calc(var(--i) * 110ms)}
@keyframes breathebar{0%,100%{height:8px;opacity:.35}50%{height:18px;opacity:.7}}

/* =========================================================================
   Карточки
   ========================================================================= */

.cards{flex:1;display:flex;flex-direction:column;min-height:0}
.cards-top{display:flex;align-items:center;gap:var(--sp-4);flex:none}
.count{flex:none;color:var(--dim);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.progress{flex:1;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.progress i{display:block;height:100%;background:var(--grad-accent);
            transition:width var(--dur-slow) var(--ease)}

.deck{flex:1;display:flex;align-items:center;justify-content:center;position:relative;
      padding:var(--sp-5) 0;touch-action:pan-y}
.deck-arrow{position:absolute;top:50%;transform:translateY(-50%);display:none;z-index:2}
.deck-arrow.left{left:calc(-1 * var(--sp-7))}
.deck-arrow.right{right:calc(-1 * var(--sp-7))}
@media(min-width:900px){.deck-arrow{display:flex}}

/* Одна карточка на экран и крупно: в этом весь смысл экрана. Список карточек
   человек читает глазами, одну — вспоминает. */
.cardface{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--line);
          border-radius:var(--rad-xl);box-shadow:var(--sh-up);
          padding:var(--sp-7) var(--sp-5);text-align:center;
          animation:cardin var(--dur-slow) var(--ease-out);
          will-change:transform}
@keyframes cardin{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.cardface.dragging{transition:none;animation:none}
.cardface.snapback{transition:transform var(--dur) var(--ease)}

.card-tag{color:var(--dim);font-size:var(--fs-xs);letter-spacing:.12em;
          text-transform:uppercase;margin-bottom:var(--sp-5)}
.card-ru{font-family:var(--font-display);font-weight:600;font-size:var(--fs-2xl);
         letter-spacing:-.02em;line-height:1.25;word-break:break-word}
.card-en{font-family:var(--font-display);font-weight:700;font-size:32px;
         letter-spacing:-.03em;line-height:1.2;word-break:break-word}
.card-sub{color:var(--muted);font-size:var(--fs-lg);margin-top:var(--sp-3)}
.card-ctx{color:var(--dim);font-size:var(--fs-sm);line-height:1.45;margin-top:var(--sp-5);
          padding-top:var(--sp-4);border-top:1px solid var(--line-soft)}
.card-sound{display:flex;justify-content:center;margin-top:var(--sp-4)}

/* Микрофон в центре карточки — главное действие первой фазы: сказать вслух. */
.mic-big{width:96px;height:96px;margin:var(--sp-6) auto 0;border-radius:50%;
         background:var(--accent-soft);border:1px solid var(--accent-line);
         color:var(--accent-text);display:flex;align-items:center;justify-content:center;
         cursor:pointer;transition:transform var(--dur) var(--ease),
                                   box-shadow var(--dur) var(--ease), opacity var(--dur)}
.mic-big svg{width:34px;height:34px;fill:currentColor}
.mic-big:hover{transform:translateY(-2px);box-shadow:var(--sh-lift)}
.mic-big:disabled{opacity:.6;cursor:default;transform:none}
.mic-big.rec{background:var(--danger-soft);border-color:var(--danger-line);
             color:var(--danger-text);animation:micpulse 1.1s ease-in-out infinite}
@keyframes micpulse{50%{transform:scale(1.06)}}
.mic-note{color:var(--dim);font-size:var(--fs-sm);margin-top:var(--sp-3)}

.heard{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line-soft);
       color:var(--muted);font-size:var(--fs-md)}
.heard b{color:var(--ink);font-weight:600}
.heard.ok,.heard.ok b{color:var(--ok-text)}

.cards-foot{flex:none;padding-top:var(--sp-4)}
.grades{display:flex;gap:var(--sp-2)}
.grade{flex:1 1 0;min-width:0;min-height:60px;padding:0 6px;border-radius:var(--rad-md);
       background:var(--surface);border:1px solid var(--line);color:var(--ink);cursor:pointer;
       font-weight:600;font-size:var(--fs-md);
       transition:border-color var(--dur), transform var(--dur), background var(--dur)}
.grade:hover{transform:translateY(-2px);border-color:var(--accent-line)}
.grade:active{transform:translateY(0)}
.grade.again{border-color:var(--danger-line);color:var(--danger-text)}
.grade.easy{border-color:var(--ok-line);color:var(--ok-text)}
.swipe-hint{text-align:center;color:var(--dim);font-size:var(--fs-xs);margin-top:var(--sp-3)}

/* =========================================================================
   Разбор звонка
   ========================================================================= */

.rv-head{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-6);flex:none}
.rv-head .portrait{width:56px;height:74px;border-radius:var(--rad-sm);font-size:24px}
.rv-head h1{font-size:var(--fs-xl)}
.rv-head .city{color:var(--dim);font-size:var(--fs-sm);margin-top:3px}

.rv-sec{margin-bottom:var(--sp-7)}

/* Похвала крупно и первой: человек только что говорил на чужом языке, и первое,
   что он должен прочитать, — что у него вышло. */
.praise{background:var(--ok-soft);border:1px solid var(--ok-line);border-radius:var(--rad-lg);
        padding:var(--sp-6) var(--sp-5);font-family:var(--font-display);font-weight:600;
        font-size:var(--fs-xl);line-height:1.3;letter-spacing:-.02em}

.miss{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-lg);
      padding:var(--sp-5);box-shadow:var(--sh-card)}
.miss + .miss{margin-top:var(--sp-3)}
.miss .said{color:var(--muted);font-size:var(--fs-md);text-decoration:line-through;
            text-decoration-color:var(--danger);text-decoration-thickness:1.5px}
.miss .arrow{color:var(--dim);font-size:var(--fs-sm);margin:var(--sp-2) 0}
.miss .better{font-family:var(--font-display);font-weight:600;font-size:var(--fs-lg);
              color:var(--accent-text);letter-spacing:-.02em}
.miss .why{color:var(--muted);font-size:var(--fs-sm);margin-top:var(--sp-3)}

/* Слова лентой: их пять-десять, и вертикальный список выталкивает разговор
   и кнопку за нижний край экрана. */
.words{display:flex;gap:var(--sp-3);overflow-x:auto;scroll-snap-type:x mandatory;
       scrollbar-width:none;padding:2px var(--sp-5) var(--sp-4);
       margin:0 calc(-1 * var(--sp-5))}
.words::-webkit-scrollbar{display:none}
.word{flex:0 0 clamp(220px,68vw,260px);scroll-snap-align:center;background:var(--surface);
      border:1px solid var(--line);border-radius:var(--rad-lg);padding:var(--sp-4);
      box-shadow:var(--sh-card);display:flex;flex-direction:column;
      transition:opacity var(--dur), border-color var(--dur)}
.word.picked{opacity:.55;border-color:var(--line-soft);box-shadow:none}
.word .top{display:flex;align-items:flex-start;gap:var(--sp-2)}
.word .en{font-family:var(--font-display);font-weight:600;font-size:var(--fs-lg);
          letter-spacing:-.02em;flex:1;min-width:0}
.word .ru{color:var(--muted);font-size:var(--fs-md);margin-top:2px}
.word .ctx{color:var(--dim);font-size:var(--fs-sm);margin-top:var(--sp-3);flex:1}
.word .reason{color:var(--dim);font-size:var(--fs-xs);margin-top:var(--sp-2)}
.word .acts{display:flex;gap:var(--sp-2);margin-top:var(--sp-4)}
.word .acts button{flex:1;min-height:40px;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), opacity var(--dur)}
.word .acts button:hover{border-color:var(--accent-line)}
.word .acts button.on{border-color:var(--accent-line);color:var(--accent-text)}
.word .acts button:disabled{cursor:default;opacity:.5}

/* Разговор свёрнут: он нужен единицам и не должен стоять между разбором
   и следующим шагом. */
.transcript{border:1px solid var(--line);border-radius:var(--rad-lg);background:var(--surface);
            overflow:hidden}
.transcript > summary{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);cursor:pointer;font-weight:600;
  list-style:none;transition:color var(--dur-fast)}
.transcript > summary::-webkit-details-marker{display:none}
.transcript > summary:after{content:"+";color:var(--accent-text);font-size:22px;line-height:1}
.transcript[open] > summary:after{content:"–"}
.transcript > summary:hover{color:var(--accent-text)}
.transcript .body{padding:0 var(--sp-5) var(--sp-5);border-top:1px solid var(--line-soft)}
.line{display:flex;gap:var(--sp-3);padding:var(--sp-2) 0;font-size:var(--fs-md);line-height:1.45}
.line .who{flex:none;width:62px;color:var(--dim);font-size:var(--fs-xs);padding-top:3px;
           text-transform:uppercase;letter-spacing:.05em}
.line.assistant p{color:var(--muted)}
.line mark{background:var(--danger-soft);color:inherit;border-radius:4px;padding:1px 3px;
           box-shadow:inset 0 -1px 0 var(--danger-line)}
.replay{display:inline-flex;align-items:center;gap:5px;margin-left:7px;padding:3px 10px;
        border-radius:var(--rad-pill);background:transparent;border:1px solid var(--line);
        color:var(--muted);font-size:var(--fs-xs);line-height:1.3;vertical-align:baseline;
        cursor:pointer;transition:color var(--dur), border-color var(--dur)}
.replay svg{width:8px;height:8px;fill:currentColor}
.replay.playing{color:var(--accent-text);border-color:var(--accent-line)}
.more{background:none;border:none;color:var(--accent-text);cursor:pointer;
      font-size:var(--fs-sm);padding:var(--sp-2) 0}

/* Уровень по звонку — сразу под шапкой: человек сначала узнаёт, где он. */
.lv-box{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);margin-bottom:var(--sp-6)}
.lv-main{display:flex;align-items:flex-start;gap:var(--sp-4)}
.lv-text{flex:1;min-width:0}
.lv-text b{display:block;font-weight:600}
.lv-text span{display:block;color:var(--muted);font-size:var(--fs-sm);margin-top:4px;line-height:1.4}
.lv-box .seg{margin-top:var(--sp-4)}

/* Одна большая кнопка внизу разбора: следующий шаг ровно один. */
.rv-foot{flex:none;padding-top:var(--sp-5)}

/* =========================================================================
   Домашка
   ========================================================================= */

.hw-intro{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-6);flex:none}
.hw-intro .portrait{width:56px;height:74px;border-radius:var(--rad-sm);font-size:24px}
.hw-intro h1{font-size:var(--fs-xl)}
.hw-intro .city{color:var(--dim);font-size:var(--fs-sm);margin-top:3px}

.task{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-lg);
      box-shadow:var(--sh-card);overflow:hidden;
      transition:border-color var(--dur), opacity var(--dur)}
.task + .task{margin-top:var(--sp-3)}
.task.done{opacity:.62}
.task.open{border-color:var(--accent-line)}
.task-head{display:flex;align-items:center;gap:var(--sp-4);width:100%;text-align:left;
           padding:var(--sp-4) var(--sp-5);background:none;border:none;color:var(--ink);
           cursor:pointer}
.task-mark{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
           color:var(--dim);font-size:var(--fs-sm);font-style:normal;
           display:flex;align-items:center;justify-content:center}
.task.done .task-mark{background:var(--grad-accent);border-color:transparent;color:var(--on-accent)}
.task-name{flex:1;font-weight:600}
.task-name em{display:block;font-style:normal;font-weight:400;color:var(--muted);
              font-size:var(--fs-sm);margin-top:2px}
.task-state{flex:none;color:var(--dim);font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.task-body{padding:var(--sp-4) var(--sp-5) var(--sp-5);border-top:1px solid var(--line-soft)}

.say + .say{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line-soft)}
.say-ru{font-size:var(--fs-md)}
.say-answer{color:var(--muted);font-size:var(--fs-md);margin-top:var(--sp-2)}
.verdict{font-size:var(--fs-sm);margin-top:var(--sp-2)}
.verdict.ok{color:var(--ok-text)}
.verdict.no{color:var(--danger-text)}
.better{font-family:var(--font-display);font-weight:600;font-size:var(--fs-md);
        color:var(--accent-text);margin-top:var(--sp-2);letter-spacing:-.02em}
.why{color:var(--muted);font-size:var(--fs-sm);margin-top:var(--sp-2)}
.note{color:var(--muted);font-size:var(--fs-sm);line-height:1.45}
.note.stray{color:var(--dim);text-align:center;margin-top:var(--sp-4)}

.go{width:100%;margin-top:var(--sp-3);min-height:var(--tap);border-radius:var(--rad-pill);
    background:transparent;border:1px solid var(--line);color:var(--ink);cursor:pointer;
    font-weight:600;font-size:var(--fs-md);
    transition:border-color var(--dur), opacity var(--dur), transform var(--dur)}
.go:hover{border-color:var(--accent-line);transform:translateY(-1px)}
.go:disabled{opacity:.5;cursor:default;transform:none}
.task .mic{width:100%;margin-top:var(--sp-3)}

.chat{display:flex;flex-direction:column;gap:var(--sp-2)}
.turn{max-width:92%;padding:10px 14px;border-radius:var(--rad-md);font-size:var(--fs-md);
      line-height:1.45}
.turn.assistant{align-self:flex-start;display:flex;align-items:flex-start;gap:9px;
                flex-wrap:wrap;background:var(--bg);border:1px solid var(--line);
                border-bottom-left-radius:5px}
.turn.assistant span{flex-basis:100%;color:var(--dim);font-size:var(--fs-sm);margin-top:3px}
.turn.user{align-self:flex-end;background:var(--accent-soft);border:1px solid var(--accent-line);
           border-bottom-right-radius:5px}
.turn p{flex:1}
.exchange{color:var(--dim);font-size:var(--fs-xs);margin-top:var(--sp-4);
          text-transform:uppercase;letter-spacing:.06em}
.rep{display:flex;align-items:flex-start;gap:9px;margin-top:var(--sp-3);font-size:var(--fs-md)}
.rep p{flex:1}

.bonus{display:inline-flex;align-items:center;margin-top:var(--sp-5);padding:12px 20px;
       border-radius:var(--rad-pill);background:var(--ok-soft);border:1px solid var(--ok-line);
       color:var(--ok-text);font-weight:600}

/* Своя ситуация. Блок стоит НАД списком готовых сцен: человек, у которого
   есть конкретный повод, не должен пролистывать двенадцать чужих, чтобы
   добраться до своего. */
.scene-own{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--sp-4);margin-bottom:var(--sp-5)}
.scene-own h3{font-family:var(--display);font-size:17px;margin-bottom:var(--sp-1)}
.scene-own p{font-size:14px;margin-bottom:var(--sp-3)}
.scene-own .btn{width:100%}
.scene-note{margin-top:var(--sp-2);font-size:14px;color:var(--muted)}

/* Свою сцену отличаем от канонной рамкой, а не цветом фона: цветной
   прямоугольник среди двенадцати одинаковых читается как реклама. */
.scene.mine{border-color:rgba(242,153,74,.45);position:relative}
.scene.mine .n{color:var(--accent)}
.scene-drop{position:absolute;top:10px;right:12px;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  color:var(--dim);font-size:14px;cursor:pointer}
.scene-drop:hover{color:var(--ink);background:rgba(255,255,255,.06)}

/* Ряд времени напоминания. Отдельный от .seg, а не он же с модификатором:
   значений шесть, и в общем ряду они сжались бы до сорока пикселей — мимо
   такой кнопки палец промахивается. Здесь они переносятся на вторую строку
   и остаются нажимаемыми. Табличные цифры — чтобы «09:00» и «21:00» имели
   одну ширину и ряд не дёргался при выборе. */
.remind-times{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.remind-times button{flex:1 1 84px;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;font-size:var(--fs-md);
                     font-variant-numeric:tabular-nums;
                     transition:border-color var(--dur), color var(--dur),
                                background var(--dur)}
.remind-times button:hover{border-color:var(--accent-line)}
.remind-times button.on{border-color:var(--accent-line);color:var(--accent-text);
                        background:var(--accent-soft)}
.remind-times button:disabled{opacity:.5;cursor:default}

/* =========================================================================
   Мои данные
   ========================================================================= */

/* Последний блок профиля, за кнопкой «Выйти». Черта сверху — потому что он
   не про настройки: выше человек что-то выбирает, здесь смотрит и стирает. */
.pf-data{margin-top:var(--sp-6);padding-top:var(--sp-6);
         border-top:1px solid var(--line-soft)}
.pf-data .btn{width:100%;margin-top:var(--sp-4);min-height:46px;font-weight:500}

/* Список хранимого. Не таблица и не поля ответа: человек читает его один раз
   и целиком, и ему нужны фразы, а не колонки. Цвет и размер — как у .hint,
   подписей под тумблерами: это такой же поясняющий текст, а не содержимое
   экрана. Точка вместо list-style — маркер браузера прыгает по вертикали от
   длины строки, а строки здесь в две-три. */
.data-list{list-style:none;margin-top:var(--sp-4);padding:0}
.data-list li{position:relative;padding-left:var(--sp-4);color:var(--muted);
              font-size:var(--fs-sm);line-height:1.45}
.data-list li + li{margin-top:var(--sp-2)}
.data-list li:before{content:"";position:absolute;left:3px;top:8px;
                     width:4px;height:4px;border-radius:50%;background:var(--dim)}

/* Кнопка удаления в спокойном состоянии — самая тихая на экране. Красная
   кнопка, за которой ещё ничего не подтверждено, пугает человека, который
   просто листает профиль; красным здесь становится только второй шаг. */
.erase{display:block;margin-top:var(--sp-5);padding:6px 0;background:none;
       border:none;color:var(--dim);font-size:var(--fs-sm);cursor:pointer;
       transition:color var(--dur)}
.erase:hover{color:var(--danger-text)}
.erase:disabled{opacity:.5;cursor:default}

/* Второй шаг. Коробка та же, что у выключения записи (.danger-box в ui.css),
   но кнопки в ней разного веса: «Отмена» заполненная и вдвое шире, «Удалить
   навсегда» — текстом. Передумавший не должен выбирать между двумя
   одинаковыми кнопками, а промах пальцем не должен стоить аккаунта. */
.erase-box ul{margin:var(--sp-3) 0 0;padding-left:var(--sp-5);
              font-size:var(--fs-sm);line-height:1.45}
.erase-box li + li{margin-top:var(--sp-1)}
.erase-box p + p{margin-top:var(--sp-3)}
.erase-box .row{gap:var(--sp-3)}
.erase-box .keep{flex:2 1 0;background:var(--grad-accent);border-color:transparent;
                 color:var(--on-accent);font-weight:600;font-size:var(--fs-base)}
.erase-box .go{flex:1 1 0;border-color:transparent;color:var(--danger-text)}
.erase-box .go:hover{border-color:var(--danger-line)}
.erase-box button:disabled{opacity:.5;cursor:default}

/* Экран после удаления. Живёт секунды до перехода на вход, и в нём нет
   ничего, кроме двух строк по центру: нажимать человеку уже нечего. */
.erased{margin:auto 0;text-align:center;padding:var(--sp-8) 0}
.erased b{display:block;font-family:var(--font-display);font-weight:700;
          font-size:var(--fs-xl);letter-spacing:-.03em}
.erased p{color:var(--muted);font-size:var(--fs-md);line-height:1.45;
          margin-top:var(--sp-3)}