/* Дополнения к стилям прототипа: то, чего в прототипе нет (вход по ссылке, слот ошибок формы, витрина компонентов).
   Цвета — только токены из tokens.css. */
.auth-layout{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--bg)}
.auth-layout .driver-invite{width:min(460px,100%);min-height:520px;gap:28px}
.auth-layout .driver-invite h1{font-size:28px}
.auth-form,.demo-users{display:grid;gap:10px;position:relative;z-index:1}
.auth-form label{font-size:12px;font-weight:800;color:var(--on-brand-muted)}
.auth-form input{width:100%;border:0;border-radius:12px;padding:14px 14px;font-size:16px;color:var(--ink);background:var(--surface)}
.auth-form .field-error{color:var(--on-brand);background:color-mix(in srgb,var(--danger) 70%,transparent);border-radius:8px;padding:6px 9px;font-size:12px}
.auth-sent{position:relative;z-index:1;background:color-mix(in srgb,var(--on-brand) 15%,transparent);border-radius:14px;padding:16px;font-size:14px;line-height:1.6}
[data-form-errors]:empty{display:none}
.form-error{margin:0 0 12px}
.top-actions form{margin:0}
.sidebar-foot .logout{margin-top:6px}
/* Витрина компонентов /styleguide/ (только DEBUG) */
.sg-section{margin-bottom:30px}
.sg-section>h2{font-size:18px;margin:0 0 12px}
.sg-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.sg-swatch{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);font-size:11px}
.sg-swatch span{display:block;height:46px}
.sg-swatch code{display:block;padding:7px 9px;color:var(--muted)}
.sg-table td,.sg-table th{text-align:left;padding:7px 10px;border-top:1px solid var(--line);font-size:13px}
[x-cloak]{display:none!important}
.history-foot-inner{display:contents}
.toast[hidden]{display:none}
/* На телефоне у менеджера своя шапка (.mobile-head); верхняя панель прототипа нужна была только для демо-переключателей */
@media(max-width:850px){.is-manager .topbar{display:none}}
body{min-height:100vh;min-height:100dvh}
/* F2: кабинет менеджера */
#shell{display:contents}
[aria-invalid="true"]{border-color:var(--danger)!important}
a.button,a.text-button,a.workflow-link,a.now-row,a.dashboard-return,a.dashboard-repair-row,a.doc-row{text-decoration:none}
a.dashboard-return,a.dashboard-repair-row,a.doc-row{color:inherit}
a.dashboard-return{display:block}
a.text-button,a.link-plate{display:inline-block}
tr[data-href]{cursor:pointer}
.drawer-foot form{display:inline;margin:0}
.drawer-foot-actions{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.inline-form{display:inline;margin:0}
.header-actions form{margin:0}

/* F3: категории расходов — цвета CATS прототипа через токены --chart-N */
.exp-cat.chart-1{background:color-mix(in srgb,var(--chart-1) 13%,transparent);color:var(--chart-1)}
.exp-cat.chart-2{background:color-mix(in srgb,var(--chart-2) 13%,transparent);color:var(--chart-2)}
.exp-cat.chart-3{background:color-mix(in srgb,var(--chart-3) 13%,transparent);color:var(--chart-3)}
.exp-cat.chart-4{background:color-mix(in srgb,var(--chart-4) 13%,transparent);color:var(--chart-4)}
.exp-cat.chart-5{background:color-mix(in srgb,var(--chart-5) 13%,transparent);color:var(--chart-5)}
.legend-dot.chart-1,.stack .chart-1{background:var(--chart-1)}
.legend-dot.chart-2,.stack .chart-2{background:var(--chart-2)}
.legend-dot.chart-3,.stack .chart-3{background:var(--chart-3)}
.legend-dot.chart-4,.stack .chart-4{background:var(--chart-4)}
.legend-dot.chart-5,.stack .chart-5{background:var(--chart-5)}
.month-bar{text-decoration:none;color:inherit}
.icon-button.is-disabled{opacity:.4;pointer-events:none}
.now-row{text-decoration:none;color:inherit}
a.flag-row{text-decoration:none;color:inherit}
.fines-card .history-row{cursor:pointer}
.compact-drop{padding:10px 12px}
.span-2[data-form-errors]{grid-column:1/-1}
/* Экран водителя (F4): то, чего нет в прототипе — ссылки вместо кнопок, отмена взятия, штрафы, выход */
.driver-nav a{text-decoration:none;display:inline-flex;align-items:center}
.driver-city-form{margin-bottom:12px}
.driver-logout{margin-top:24px}
.undo-card{border-color:var(--brand-line);background:var(--brand-surface)}
.undo-card form{margin-top:10px}
.is-driver .undo-card{background:var(--brand-ink);border-color:var(--dk-line)}
.fine-card .detail-grid{margin-top:10px}
.fine-card small{display:block;color:var(--muted);font-size:12px}
.driver-card .doc-actions{margin-top:6px}
[data-uploading] .button[data-upload-wait]{opacity:.6;pointer-events:none}
.upload-note{font-size:12px;color:var(--muted);margin-top:6px}
/* Подсказка при ДТП: в прототипе — по подписи input[value="ДТП"], у нас значения — коды IssueKind */
form:has([data-accident]:checked) .dtp-hint{display:block}
/* F5, доступность: на тёмных плашках (hero, приглашение, «Машина у вас», приёмка) рамка фокуса светлая */
:is(.welcome-main,.driver-invite,.trip-hero,.my-car-pin,.acceptance-pin) :focus-visible{outline-color:var(--on-brand)}
/* Неактивная вкладка водителя на сером: --muted-2 даёт 3.9:1, нужно 4.5:1 */
@media not (prefers-color-scheme:dark){.driver-nav :is(a,button):not(.active){color:var(--gray-800)}}
/* Тёмная тема водителя: рамка фокуса светлая (--dk-brand-text даёт 8:1 к --dk-surface) */
@media(prefers-color-scheme:dark){.is-driver{--focus:var(--dk-brand-text)}}
/* Ссылка «Перейти к содержимому»: видна только при фокусе с клавиатуры */
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--surface);color:var(--brand-dark);border-radius:10px;padding:10px 14px;font-weight:800;box-shadow:var(--shadow)}
.skip-link:focus{top:12px}
/* В прокручиваемых рядах (вкладки водителя, кнопки шапки на телефоне, месяцы, ссылки в таблице) рамка фокуса рисуется внутри — иначе её обрезает край */
:is(.driver-nav,.header-actions,.month-bars,.table-wrap,.history-list) :focus-visible{outline-offset:-3px}