/* generated by build-css.mjs — не править */
/* ТОР-ЭВАКУАТОР — токены дизайн-системы v0.1 (2026-10-22).
   Приглушённые охра и графит (решение Дениса: не сигнальный жёлтый и не чистый чёрный).
   Контраст WCAG (проверено скриптом): текст/фон 14,7; вторичный/фон ≥5,8; текст на охре 7,3 / 5,7. */

:root, .t-dark {
  --bg: #141518;          /* графит */
  --surf: #1C1E22;
  --surf2: #25282D;
  --line: #33373D;
  --text: #ECE6D8;        /* тёплый белый */
  --mute: #A29C8E;
  --acc: #C8A04A;         /* охра — заливки, кнопки */
  --acc-ink: #16171A;     /* текст на охре */
  --acc-text: #D4AE5C;    /* охра как текст/линии на тёмном */
  --acc-soft: rgba(200, 160, 74, .12);
  --ok: #7FA37A;
  --warn: #D08A4E;
  --photo-a: #23262B; --photo-b: #0E0F11;
}
.t-light {
  --bg: #EEEEEC;          /* нейтральный светло-серый (кремовый фон запрещён скиллом sayt-vebverfi) */
  --surf: #FFFFFF;
  --surf2: #E3E2DE;
  --line: #D2D0CA;
  --text: #1B1C1F;
  --mute: #615B50;
  --acc: #B48A2E;
  --acc-ink: #16171A;
  --acc-text: #7A5A14;
  --acc-soft: rgba(180, 138, 46, .14);
  --ok: #3F6B3A;
  --warn: #9A5320;
  --photo-a: #D9D2C3; --photo-b: #B9B09E;
}
:root {
  --f-disp: "Oswald", "Arial Narrow", sans-serif;   /* заголовки, цифры, кнопки */
  --f-text: "Onest", system-ui, sans-serif;          /* текст */
  --r-card: 10px; --r-btn: 8px; --r-pill: 999px;
  --pad: 18px; --gap: 12px;
  --h1: 34px; --h2: 22px; --h3: 17px; --body: 15px; --small: 13px;
  --sw: 1.6;              /* толщина линий иконок */
}

/* ТОР-ЭВАКУАТОР — стили компонентов. Все цвета и размеры — из tokens.css (var(--*)). */

.tor-root { background: var(--bg); color: var(--text); font: 400 var(--body)/1.45 var(--f-text); -webkit-font-smoothing: antialiased; }
.tor-root *, .tor-root *::before, .tor-root *::after { box-sizing: border-box; }
.tor-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: var(--sw); stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Button */
.tor-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 22px; border-radius: var(--r-btn);
  font: 600 16px/1 var(--f-disp); text-transform: uppercase; letter-spacing: .06em; border: 1px solid transparent; cursor: pointer; text-decoration: none; }
.tor-btn--block { display: flex; width: 100%; }
.tor-btn--sm { height: 44px; font-size: 14px; padding: 0 16px; }
.tor-btn--primary { background: var(--acc); color: var(--acc-ink); }
.tor-btn--secondary { background: transparent; color: var(--text); border-color: var(--line); }
.tor-btn--ghost { background: transparent; color: var(--acc-text); padding: 0 6px; }
.tor-btn:disabled { opacity: .45; cursor: default; }

/* StatusPill (плашка состояния, не кнопка) */
.tor-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--surf); border: 1px solid var(--line); font-size: var(--small); color: var(--text); }
.tor-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); }
.tor-pill--busy .tor-pill__dot { background: var(--warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--warn) 22%, transparent); }
.tor-pill--off .tor-pill__dot { background: var(--mute); box-shadow: none; }

/* Card */
.tor-card { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.tor-card__body { padding: 16px; }
.tor-card__title { font: 600 var(--h3)/1.1 var(--f-disp); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; }

/* SituationTile */
.tor-tile { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 14px; display: grid; gap: 18px; min-height: 108px; text-align: left; color: var(--text); cursor: pointer; font: inherit; }
.tor-tile .tor-icon { color: var(--acc-text); width: 26px; height: 26px; }
.tor-tile b { font-weight: 600; font-size: 15px; display: block; }
.tor-tile small { color: var(--mute); font-size: 12px; }
.tor-tile--selected { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }

/* PriceBreakdown */
.tor-price__rows { padding: 6px 16px; }
.tor-price__row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.tor-price__row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tor-price__row--muted span:first-child { color: var(--mute); }
.tor-price__total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 16px; }
.tor-price__total span { color: var(--mute); }
.tor-price__total b { font: 700 32px/1 var(--f-disp); }
.tor-price__note { margin: 0 16px 16px; padding: 12px 14px; border-radius: var(--r-card); background: var(--acc-soft); font-size: 13px; }

/* OrderTimeline */
.tor-tl { padding: 16px; }
.tor-tl__s { display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; padding-bottom: 14px; position: relative; font-size: 14px; }
.tor-tl__s::before { content: ""; position: absolute; left: 8px; top: 16px; bottom: -2px; width: 1px; background: var(--line); }
.tor-tl__s:last-child::before { display: none; }
.tor-tl__c { width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); margin-top: 1px; }
.tor-tl__s--done .tor-tl__c { background: var(--acc); border-color: var(--acc); }
.tor-tl__s--now .tor-tl__c { border: 5px solid var(--acc); }
.tor-tl__s--now span { font-weight: 600; }
.tor-tl__s--wait { color: var(--mute); }
.tor-tl time { color: var(--mute); font-size: 12px; font-variant-numeric: tabular-nums; }

/* DriverCard */
.tor-drv { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.tor-drv__ava { width: 44px; height: 44px; border-radius: 50%; background: var(--surf2); display: grid; place-items: center; font: 600 16px/1 var(--f-disp); color: var(--acc-text); flex: none; }
.tor-drv__who { flex: 1; min-width: 0; }
.tor-drv__who b { display: block; font-weight: 600; }
.tor-drv__who small { color: var(--mute); font-size: 12px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tor-iconbtn { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--r-btn); display: grid; place-items: center; color: var(--text); background: transparent; cursor: pointer; flex: none; }

/* ExtraWorkApproval */
.tor-ask { width: 100%; padding: 16px; display: grid; gap: 12px; }
.tor-ask__q { display: flex; justify-content: space-between; gap: 10px; }
.tor-ask__q b { font-weight: 600; }
.tor-ask__q small { color: var(--mute); font-size: 12px; display: block; }
.tor-ask__price { font: 600 18px/1 var(--f-disp); white-space: nowrap; }
.tor-ask__two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tor-ask__done { font-size: 13px; color: var(--mute); }

/* BottomNav */
.tor-nav { background: var(--bg); border-top: 1px solid var(--line); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 8px 6px 14px; }
.tor-nav__item { display: grid; justify-items: center; gap: 4px; font-size: 11px; color: var(--mute); background: none; border: 0; cursor: pointer; font-family: var(--f-text); }
.tor-nav__item--active { color: var(--acc-text); }