/* Hallmark · shape: app screen · genre: modern-minimal · theme: Coral (deal 1/3, seed seo-mcp--claude-c184·fd33cc73·2026-11-04·r0)
 * nav: top bar with route tabs · signature: the ledger, every operation with the balance after it · states: loading, empty, error, full
 * axes: light/grotesk-sans/warm · posture: restrained · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, a cabinet is a cabinet, so the ledger leads the first screen and carries the page */
/* Hallmark · answered F4 · the ink button is the screen's one primary; the cotton button is the theme's secondary letterpress control and the code copy button is a quiet control on the board band, never the same fill twice in one view */
@import url("./fonts.css");
@import url("./appkit/tokens.css");
@import url("./appkit/base.css");

html { overflow-x: clip; }
body { overflow-x: clip; background: var(--color-paper); }

/* ---------- верхняя панель ---------- */
.bar { background: var(--color-paper-2); border-bottom: var(--rule-hair) solid var(--color-rule); position: sticky; top: 0; z-index: var(--z-sticky-nav); }
.bar__in { display: flex; align-items: center; gap: var(--space-md); min-height: 56px; flex-wrap: wrap; padding-block: var(--space-xs); }
.brand { font-weight: 600; font-size: var(--text-lg); text-decoration: none; margin-right: var(--space-md); white-space: nowrap; }
.tabs { display: flex; gap: var(--space-3xs); flex: 1; flex-wrap: nowrap; }
.tabs a { display: inline-flex; align-items: center; white-space: nowrap; min-height: 40px; padding: 0 var(--space-xs); border-radius: var(--radius-input); color: var(--color-muted); text-decoration: none; border-bottom: 2px solid transparent; border-radius: var(--radius-input) var(--radius-input) 0 0; transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
.tabs a:hover { color: var(--color-ink); background-color: var(--color-paper-3); }
.tabs a[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-accent-2); font-weight: 500; }
.who { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.who span { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

main.view { padding-block: var(--space-xl) var(--space-3xl); }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-lg); flex-wrap: wrap; margin-bottom: var(--space-lg); }
.page-head h1 { font-size: var(--text-display); line-height: 1.15; letter-spacing: 0; }
.page-head p { color: var(--color-muted); max-width: 60ch; margin-top: var(--space-xs); }
h2 { font-size: var(--text-xl); line-height: 1.25; letter-spacing: 0; max-width: none; }
h3 { font-size: var(--text-lg); line-height: 1.3; letter-spacing: 0; }
.stack { display: grid; gap: var(--space-lg); }
.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); align-items: start; }
@media (min-width: 60rem) { .cols--2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } .cols--even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- поверхности ---------- */
.sheet { background: var(--color-cotton); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-lg); }
.sheet > h2, .sheet > h3 { margin-bottom: var(--space-sm); }
.sheet--flush { padding: 0; overflow: hidden; }
.sheet__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap; padding: var(--space-md) var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.muted { color: var(--color-muted); }
.small { font-size: var(--text-sm); }
.mono, .num { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }

/* ---------- баланс ---------- */
.balance { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
.balance__n { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-size: var(--text-3xl); line-height: 1.1; }
.balance__u { color: var(--color-muted); }
.balance + p { margin-top: var(--space-md); }

/* ---------- кнопки: восемь состояний ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 40px; padding: 0 var(--space-md); border: 0; border-radius: var(--radius-stock); font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
@media (pointer: coarse) { .btn, .tabs a, .field input, .field select { min-height: 44px; } }
.btn--card { background-color: var(--color-cotton); background-image: var(--tex-cotton); color: var(--color-print); text-shadow: 0.5px 0.75px 0 var(--color-cotton); box-shadow: var(--edge-stock), var(--cast-stock); }
.btn--ink { background: var(--color-board); color: var(--color-board-type); text-shadow: 0 -0.75px 0 var(--color-ink); box-shadow: var(--cast-stock); }
.btn--quiet { background: transparent; color: var(--color-ink); box-shadow: none; text-decoration: underline; text-decoration-color: var(--color-rule-2); }
.btn--danger { background: transparent; color: var(--color-error); box-shadow: none; text-decoration: underline; }
.btn:hover:not(:disabled):not([aria-disabled="true"]) { transform: translateY(-1px); }
.btn--card:hover:not(:disabled) { box-shadow: var(--edge-stock), var(--cast-stock-lift); }
.btn--ink:hover:not(:disabled) { box-shadow: var(--cast-stock-lift); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--ink:focus-visible { outline-color: var(--color-focus); }

/* ---------- поля ---------- */
.field { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-md); }
.field label { font-size: var(--text-sm); color: var(--color-muted); }
.field input, .field select { min-height: 40px; padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); width: 100%; }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.field input:disabled { opacity: 0.6; cursor: not-allowed; background: var(--color-paper-2); }
.field input[aria-invalid="true"] { border-color: var(--color-error); }
.field .hint { font-size: var(--text-sm); color: var(--color-muted); }
.check { display: flex; gap: var(--space-sm); align-items: flex-start; margin-bottom: var(--space-md); font-size: var(--text-sm); }
.check input { width: 18px; height: 18px; margin-top: var(--space-3xs); flex: none; accent-color: var(--color-ink); }
.row { display: flex; gap: var(--space-sm); align-items: flex-end; flex-wrap: wrap; }
.row .field { flex: 1 1 200px; margin-bottom: 0; }

/* ---------- таблицы ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th { text-align: left; font-weight: 500; color: var(--color-muted); padding: var(--space-xs) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); white-space: nowrap; }
td { padding: var(--space-xs) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); height: 40px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--color-paper); }
th.r, td.r { text-align: right; }
td.when { white-space: nowrap; }
td.num, th.num { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.plus { color: var(--color-success); }
.minus { color: var(--color-ink); }
.tag { display: inline-block; padding: 0 var(--space-xs); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); font-size: var(--text-xs); color: var(--color-muted); }
.tag--err { color: var(--color-error); border-color: var(--color-error); }
.tag--ok { color: var(--color-success); border-color: var(--color-success); }

/* ---------- сегмент ---------- */
.seg { display: inline-flex; padding: var(--space-3xs); border-radius: var(--radius-card); background: var(--color-paper-2); box-shadow: var(--press-groove); }
.seg a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-md); border-radius: var(--radius-input); text-decoration: none; color: var(--color-muted); }
.seg a[aria-current="true"] { background: var(--color-cotton); color: var(--color-ink); box-shadow: var(--edge-stock); font-weight: 500; }

/* ---------- состояния области ---------- */
.skeleton { display: grid; gap: var(--space-xs); padding: var(--space-md) var(--space-lg); }
.skeleton i { display: block; height: 20px; border-radius: var(--radius-input); background: color-mix(in oklab, var(--color-ink) 7%, transparent); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }
.state { padding: var(--space-xl) var(--space-lg); display: grid; gap: var(--space-sm); justify-items: start; }
.state p { max-width: 52ch; }
.state--error p:first-child { color: var(--color-error); font-weight: 500; }
.note { padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-paper-2); margin-bottom: var(--space-md); }
.note--err { border-color: var(--color-error); color: var(--color-error); background: var(--color-cotton); }
.note--ok { border-color: var(--color-success); background: var(--color-cotton); }

/* ---------- чек-лист ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); counter-reset: step; }
.steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-sm); align-items: start; counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill); border: var(--rule-hair) solid var(--color-rule-2); font-size: var(--text-sm); font-family: var(--font-outlier); }
.steps li[data-done="true"]::before { content: "\2713"; background: var(--color-board); color: var(--color-board-type); border-color: var(--color-board); }
.steps b { font-weight: 500; }
.steps li[data-done="true"] b { color: var(--color-muted); }
.steps p { color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- код ---------- */
.code { position: relative; background: var(--color-board); color: var(--color-board-type); border-radius: var(--radius-card); padding: var(--space-md); padding-right: var(--space-3xl); font-family: var(--font-outlier); font-size: var(--text-sm); line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; }
.code .btn { position: absolute; top: var(--space-xs); right: var(--space-xs); min-height: 32px; background: var(--color-ink-2); color: var(--color-board-type); box-shadow: none; text-shadow: none; }
.key-card { border-color: var(--color-accent-2); }

/* ---------- вход ---------- */
.auth { max-width: 440px; margin: var(--space-3xl) auto; }
.auth .sheet { padding: var(--space-xl); }
.auth h1 { font-size: var(--text-display); letter-spacing: 0; margin-bottom: var(--space-md); }
.auth form + p { margin-top: var(--space-md); }
.auth .seg { margin-bottom: var(--space-lg); }
.noscript { padding: var(--space-xl); }

/* ---------- уведомление об ошибке ---------- */
.toast { position: fixed; left: 50%; bottom: var(--space-lg); transform: translateX(-50%); z-index: var(--z-toast); max-width: min(560px, calc(100% - var(--space-xl))); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-board); color: var(--color-board-type); box-shadow: var(--cast-stock-lift); }
.toast .btn { color: var(--color-board-type); text-decoration-color: var(--color-board-type); }

/* ---------- запросы-образцы ---------- */
.prompts { display: grid; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; }
.prompts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; padding: var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.prompts li:last-child { border-bottom: 0; }

@media (max-width: 40rem) {
  .bar__in { gap: var(--space-xs); }
  .brand { margin-right: 0; }
  .who { margin-left: auto; min-width: 0; }
  .who span { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabs { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs a { white-space: nowrap; }
  .code { padding-top: var(--space-xl); padding-right: var(--space-md); }
  .page-head h1 { font-size: var(--text-xl); }
  .balance__n { font-size: var(--text-2xl); }
  .auth { margin-block: var(--space-xl); }
  .auth .sheet { padding: var(--space-lg); }
}

/* заголовок получает фокус при переходе между разделами (для скринридеров), рамка вокруг него не нужна: он не интерактивный */
h1[tabindex="-1"]:focus { outline: none; }

/* подключения: выбор того, что видит ассистент */
fieldset.field { border: 0; padding: 0; margin: 0 0 var(--space-md); min-width: 0; }
fieldset.field legend { font-weight: 600; margin-bottom: var(--space-sm); padding: 0; }
details > summary { cursor: pointer; font-weight: 600; margin-bottom: var(--space-sm); }
details[open] > summary { margin-bottom: var(--space-md); }