/* ============================================================================
   Капифолио — экраны-спутники точь-в-точь по макету web/demo/botscan.html.
   Задача 0010 (docs/tasks/0010-точь-в-точь-по-макету.md), зона «Разработчик В»:
   вход (v-auth), приветствие (v-welcome), Активы (v-coin), настройки
   (v-security), поддержка (v-support), донат (v-donate) и «скоро» (v-soon).

   Каждое правило прижато классом .sat на секции экрана — ни одно не достаёт
   до Обзора, Сделок, Бирж, Ботов и мастера (tests/спутники-фронт.test.mjs).

   Цвет — ТОЛЬКО из пятнадцати токенов палитры, которые заводит :root
   web/style.css (раздел 7 задачи: палитрой владеет один человек). Литералов
   цвета в файле нет ни одного. Ступени, которых нет отдельным токеном
   (текст на .7 и .85, граница на .12), смешаны из токена через color-mix —
   так значение макета точное, а цвет всё равно следует за палитрой.
   Радиусы, кегли, отступы и формы — числами раздела 5 задачи, а не
   переменными лестницы: они сняты с макета и не должны уезжать вместе с ней.

   Макет десктопный и медиазапросов не знает. Поведение уже 600px наше
   (раздел 8, п. 6): поля карточек и крупные числа мягче.
   ========================================================================== */

/* ── 1. Каркас экрана: карточка, заголовки, метки, разделитель ──────────── */
/* Карточка макета: #111827, граница .08, радиус 14, поля 22px 26px. */
.sat .card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px 18px;box-shadow:none}
.sat .card.flush{padding:0}
/* Карточка-акцент — плашка «Что сделать» макета: жёлтая граница, без полосы
   сверху. Голубой полосы градиентом в макете нет. */
.sat .card.accent{border-color:var(--accent-border)}
.sat .card.accent::before{content:none}
.sat > .card + .card{margin-top:22px}
.sat .divider{height:1px;background:var(--line);margin:18px 0}

/* Заголовок экрана — h1 макета: 24px, 700, сплошным цветом текста. */
.sat .h1{font-size:24px;font-weight:700;letter-spacing:0;background:none;color:var(--text)}
/* Заголовок над списком карточек — h2 экрана «Биржи» макета (17px, 600),
   заголовок в карточке — h2 карточки (18px, 600). Обычным регистром. */
.sat .section-title{margin:22px 0 10px}
.sat .section-title:first-child{margin-top:0}
.sat .section-title .h2{font-size:17px;font-weight:600}
.sat .card-head{margin-bottom:14px}
.sat .card-head .h2,.sat .card > .h2{font-size:18px;font-weight:600}
/* Метка над значением — «Капитал сейчас» макета: 12px, трекинг .08em. */
.sat .label{font-size:12px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)}
/* Метка, которая стоит заголовком карточки, — это h2 макета, не капслок. */
.sat-set .card > .label:first-child,.sat-sup .card > .label:first-child{font-size:18px;
  font-weight:600;letter-spacing:0;text-transform:none;color:var(--text)}
/* Пояснения под блоками — 13px, межстрочное 1.5, приглушённым. */
.sat p.small{font-size:13px;line-height:1.5}
.sat a:not(.btn):not(.foot-card){color:var(--accent)}
.sat a:not(.btn):not(.foot-card):hover{color:var(--accent-hover)}

@media (min-width:600px){
  .sat .card{padding:22px 26px}
  .sat .card.flush{padding:0}
}

/* ── 2. Кнопки — раздел 5.3, дословно ───────────────────────────────────── */
/* Главная: плоская жёлтая, радиус 10. Ни градиента, ни тени, ни пилюли. */
.sat .btn.primary{min-width:220px;min-height:0;padding:14px 24px;border:0;border-radius:10px;
  background:var(--accent);color:var(--card);font-size:15px;font-weight:600;box-shadow:none}
/* Вторичная — контур той же величины; наведение красит границу и текст. */
.sat .btn:not(.primary){min-width:220px;min-height:0;padding:14px 24px;border-radius:10px;
  border:1px solid var(--line-strong);background:transparent;
  color:color-mix(in srgb,var(--text) 85%,transparent);font-size:15px;font-weight:600}
.sat .btn:not(.primary):hover{border-color:var(--accent);color:var(--accent)}
/* Малая — пилюля 8px 16px, 13px: «Подключить», «Удалить», «Активы». */
.sat .btn.sm{min-width:0;min-height:0;padding:8px 16px;border-radius:999px;font-size:13px;
  font-weight:600}
/* Малая во всю ширину — кнопка «Добавить» формы кошелька: 11px 18px, радиус 10. */
.sat .btn.sm.block{padding:11px 18px;border-radius:10px}
/* «Удалить» в макете при наведении краснеет, а не жёлтеет. */
.sat [data-action="conn-delete"]:hover{border-color:var(--red);color:var(--red)}

/* ── 3. Чип выбора — чип периода макета ─────────────────────────────────── */
/* 7px 14px, 13px, 600. Включён: жёлтая подложка, жёлтый текст и граница.
   Выключен: прозрачный, текст .7, граница .12. */
.sat .chip{min-height:0;padding:7px 14px;border-radius:999px;background:transparent;
  border:1px solid color-mix(in srgb,var(--line-strong) 86%,transparent);
  color:color-mix(in srgb,var(--text) 70%,transparent);font-size:13px;font-weight:600;box-shadow:none}
.sat .chip.on,.sat .chip[aria-pressed="true"]{background:var(--accent-bg);color:var(--accent);
  border-color:var(--accent);box-shadow:none}

/* ── 4. Вход (v-auth) ────────────────────────────────────────────────────── */
/* Экрана входа в макете нет: композиция наша, кожа — макета. Знак марки не
   перерисовывается (допущение Д1 задачи), плитка под ним — монограмма. */
.sat-auth{gap:14px;padding:48px 0 32px}
.sat-auth .mark{width:56px;height:56px;display:grid;place-items:center;
  background:var(--mono-chip);border:1px solid var(--line);border-radius:14px}
.sat-auth .mark svg{width:34px;height:34px}
.sat-auth h1{font-size:24px;font-weight:700;letter-spacing:0;background:none;color:var(--text)}
.sat-auth p{font-size:14px;line-height:1.5;color:var(--muted)}
.sat-auth .auth-note{font-size:12px}

/* «Почему это безопасно» — блок экрана «Биржи» макета: поля 16px 18px,
   заголовок 16px, строки 14px на .75 с межстрочным 1.6, галочка — знак в
   строке, а не зелёная плашка. */
.sat .auth-safe{padding:16px 18px;margin-top:14px;text-align:left}
.sat .auth-safe .h2{font-size:16px;font-weight:600;margin-bottom:12px}
.sat .auth-safe .alloc-list{gap:6px;margin-top:0}
.sat .auth-safe .alloc-row,.sat-set .alloc-row.check{grid-template-columns:auto 1fr;gap:6px;
  padding:0;border:0;font-size:14px;line-height:1.6;color:color-mix(in srgb,var(--text) 75%,transparent)}
.sat .auth-safe .alloc-row .pos,.sat-set .alloc-row.check .pos{width:auto;height:auto;
  background:none;color:inherit;font-size:inherit}
.sat-set .alloc-row.check{grid-template-columns:auto 1fr auto}
.sat-set .card .alloc-list:has(.check){gap:6px}

/* ── 5. Приветствие (v-welcome) ──────────────────────────────────────────── */
/* «Капитал сейчас» и «Заработано за период» макета — 44px, 700, −.02em. */
.sat-welcome .big-num,.sat-welcome .hero-num{font-size:36px;font-weight:700;
  letter-spacing:-.02em;line-height:1}
.sat-welcome .label + .big-num,.sat-welcome .label + .hero-num{margin-top:10px}
/* Метка «пример» — метка-подпись макета: 10px, 1px 6px, радиус 4, жёлтая. */
.sat-welcome .demo-tag{font-size:10px;font-weight:600;letter-spacing:0;text-transform:none;
  padding:1px 6px;border:0;border-radius:4px;background:var(--accent-bg);color:var(--accent)}
.sat-welcome .alloc-row.check,.sat-welcome .alloc-row.plain{padding:12px 0;font-size:14px;
  border-bottom:1px solid var(--line)}
.sat-welcome .alloc-row:last-child{border-bottom:0}
.sat-welcome .hint{font-size:12px;color:var(--muted)}
@media (min-width:600px){
  .sat-welcome .big-num,.sat-welcome .hero-num{font-size:44px}
}

/* ── 6. Активы (v-coin) ──────────────────────────────────────────────────── */
/* В макете Активы — заглушка, поэтому композиция наша; строки — ритм списка
   «Где деньги» макета: 600 у имени и суммы, граница снизу, кегль 16 на
   широком экране. Суммы Sans с табличными цифрами, моноширинного нет. */
.sat-coin .coin-row{padding:12px 0;font-size:14px;border-bottom:1px solid var(--line)}
.sat-coin .coin-row:last-child{border-bottom:0}
.sat-coin .coin-row .k{font-size:inherit;font-weight:600}
.sat-coin .coin-row b{font-weight:600}
.sat-coin .coin-row.bucket svg{color:inherit}
.sat-coin .card-head .money{font-size:13px}
.sat-coin .emptybox .ic{width:44px;height:44px;border-radius:10px;
  background:var(--mono-chip);border:1px solid var(--line);color:var(--muted)}
.sat-coin .note{font-size:13px;border-left-color:var(--accent)}
@media (min-width:600px){
  .sat-coin .coin-row{padding:14px 0;font-size:16px}
}

/* ── 7. Настройки (v-security) ───────────────────────────────────────────── */
.sat-set .alloc-row.two{padding:12px 0;font-size:14px;border-bottom:1px solid var(--line)}
.sat-set .alloc-row.two:last-child{border-bottom:0}
.sat-set .heat{color:var(--accent);font-weight:600}
.sat .dot-new{background:var(--accent);box-shadow:none}
/* «Ещё у нас есть»: рельса с этими ссылками уходит, блок живёт под
   шестерёнкой настроек на любой ширине (решение Н-1 / Д4 задачи). */
.sat-set .foot-links{display:block;margin:32px 0 22px;padding-top:16px;border-top:1px solid var(--line)}
.sat-set .foot-card{background:var(--bg-app);border:1px solid var(--line);border-radius:10px;
  color:var(--muted)}
.sat-set .foot-card b{color:var(--text)}
.sat-set .foot-card:hover{border-color:var(--accent-border);background:var(--bg-app)}

/* ── 8. Поддержка (v-support) ────────────────────────────────────────────── */
/* Поле ввода — поле макета: #0A0F1C, граница .14, радиус 10, 14px.
   Своё сообщение — жёлтая плашка-акцент, ответ — вложенная плашка. */
.sat-sup .chat-log{padding:18px;gap:10px}
.sat-sup .msg{border-radius:10px;font-size:14px;line-height:1.5}
.sat-sup .msg.mine{background:var(--accent-bg);border:1px solid var(--accent-border);
  border-bottom-right-radius:4px}
.sat-sup .msg.theirs{background:var(--bg-app);border:1px solid var(--line);border-bottom-left-radius:4px}
.sat-sup .msg .when{font-size:11px;color:var(--muted)}
.sat-sup .chat-day{font-size:11px;letter-spacing:.08em;color:var(--muted);opacity:1}
.sat-sup .chat-form{padding:14px 18px 18px;gap:10px;border-top:1px solid var(--line)}
.sat-sup .chat-form textarea{background:var(--bg-app);border:1px solid var(--line-strong);
  border-radius:10px;padding:11px 14px;font-size:14px;color:var(--text)}
.sat-sup .chat-form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;
  border-color:var(--accent-border)}
.sat-sup .chat-foot{padding:0 18px 18px}

/* ── 9. Донат (v-donate) ─────────────────────────────────────────────────── */
/* Адрес — поле макета; моноширинный оставлен: адрес сверяют посимвольно. */
.sat-donate .chips{gap:6px;padding:2px 0 4px}
.sat-donate .donate-box{gap:16px;margin-top:16px}
.sat-donate .donate-qr{padding:8px;border-radius:10px}
.sat-donate .donate-addr code{font-size:14px;background:var(--bg-app);
  border:1px solid var(--line-strong);border-radius:10px;padding:12px 14px}
.sat-donate .sat-donate-copy{margin-top:16px}

/* ── 10. «Скоро» (v-soon) — заглушка макета ─────────────────────────────── */
/* Без карточки: колонка по центру, поля 80px 32px, зазор 12, заголовок 22px
   600, текст 14px приглушённым, жёлтая кнопка min-width 220 — не во всю
   ширину. Метка «в разработке» — пилюля статуса строки площадки макета. */
.sat-soon .soon-card{background:none;border:0;border-radius:0;padding:48px 0;gap:12px}
/* Демо-штриховка карточки (.demo .card::after) заглушке ни к чему: карточки
   нет, чисел примера на экране тоже нет. */
.sat-soon .soon-card::after{content:none}
.sat-soon .soon-card .ex-logo.lg{width:56px;height:56px;border-radius:10px;
  background:var(--mono-chip);border:1px solid var(--line);color:var(--text)}
.sat-soon .soon-card .h2{font-size:22px;font-weight:600}
.sat-soon .soon-card .label{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;
  padding:2px 8px;border:1px solid var(--accent-border);border-radius:999px;color:var(--accent)}
.sat-soon .soon-card .body,.sat-soon .soon-card .small{font-size:14px;color:var(--muted);max-width:40ch}
.sat-soon .soon-card .btn{width:auto;margin-top:12px}
@media (min-width:600px){
  .sat-soon .soon-card{padding:80px 32px}
}