/* ---------------------------------------------------------------------------
   gekon.css — один язык оформления для всех страниц конторы.

   Каждая страница подключает этот файл ПОСЛЕ своего <style>: общий вид
   отсюда, частности — со страницы. Правило со страницы, у которого в
   селекторе есть класс, по-прежнему выигрывает у правила отсюда.

   27 СЕНТЯБРЯ 2026 — SHIFT, ВИЗУАЛЬНАЯ КОНЦЕПЦИЯ 09
   Зак прислал макет («SHIFT / Design concept 09») и сказал применить его
   полностью. Что из него взято:
     * тёмно-зелёная боковая навигация вместо синей полосы сверху: две группы,
       Workforce и Management, у каждого пункта свой значок, знак SHIFT
       (три смещённые полосы — буква S, строки табеля, смены) сверху;
     * белая шапка страницы: над заголовком — компания, сам заголовок крупно;
     * зелёный — единственный цвет действия; тёмно-зелёные плитки-счётчики;
     * статусы — залитые плашки с белым текстом и точкой;
     * таблицы без вертикальных линий, шапка светлая, строки через одну;
     * Avenir Next / Segoe UI для текста, моноширинный — для кодов и часов.
   Имена переменных оставлены прежними (--navy и т. д.): их читают сотни
   правил на страницах, и менять их все ради слова — значит сломать
   что-нибудь незаметное. --navy теперь значит «основной цвет», и он зелёный.
   --------------------------------------------------------------------------- */

:root {
  /* Основной цвет действия и его оттенки. Имя историческое. */
  --navy:#236249; --navy-hi:#1A4E3A; --navy-tint:#E8F1EA;
  /* Боковая панель и тёмные плитки. */
  --forest:#142820; --forest-2:#1D3A2D; --forest-3:#2A4A3A; --spark:#55DF91;

  /* Текст: три ступени. */
  --ink:#1D2A25; --ink2:#44524C; --grey:#67746E;

  /* Поверхности. */
  --bg:#F4F6F3; --card:#FFFFFF; --face:#EEF1EE; --face2:#F5F7F5;

  /* Линии: видимая и почти невидимая — внутри данных. */
  --line:#DDE4DE; --line2:#ECF0EC;

  /* Смысловые: залитые плашки и текст. */
  --ok:#1C7446; --warn:#98590A; --bad:#A83330; --err:#A83330; --info:#2659B8;

  --r:6px;
  --side:224px;
  --shadow:0 18px 44px rgba(20,40,32,.18);
  --ui:"Avenir Next", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing:border-box; }

body {
  margin:0; background:var(--bg); color:var(--ink);
  font:400 14px/1.55 var(--ui);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3 { font-weight:600; text-wrap:balance; letter-spacing:-.01em; }
h1 { font-size:22px; }
h2 { font-size:16px; }

.n, .num, td.right, th.right, .money, [data-num] { font-variant-numeric:tabular-nums; }
.mono, code { font-family:var(--mono); font-variant-numeric:tabular-nums; }

a { color:var(--navy); }

/* --- шапка страницы ----------------------------------------------------------
   Белая. Над заголовком мелко — компания (#brand-co), под ней крупно — имя
   страницы. Справа — кто вошёл, язык, кнопки страницы и выход. */
header {
  background:var(--card); color:var(--ink);
  border-bottom:1px solid var(--line);
  padding:18px 32px 16px; display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap;
  position:sticky; top:0; z-index:40;
}
header b, header #brand { font-size:24px; font-weight:600; letter-spacing:-.025em; line-height:1.15; }
#brand-co {
  display:block; font-size:11px; font-weight:650; letter-spacing:.09em; text-transform:uppercase;
  color:var(--grey); margin-bottom:4px; line-height:1.3;
}
#brand-co:empty { display:none; }
header .sp { flex:1; }
header small { color:var(--grey); font-size:12.5px; opacity:1; }
header a { color:var(--navy); font-size:13px; text-decoration:none; }
header a:hover { text-decoration:underline; }
header button {
  background:var(--face); color:var(--ink); border:1px solid transparent;
  border-radius:7px; padding:8px 13px; cursor:pointer; font:inherit; font-size:13px; font-weight:550;
}
header button:hover { background:#E3E9E4; }
header button:focus-visible { outline:3px solid #8FB7A4; outline-offset:2px; }
header button.primary { background:var(--navy); color:#fff; }
header button.primary:hover { background:var(--navy-hi); }

/* --- боковая навигация ---------------------------------------------------------
   #nav заполняет renderNav() на каждой странице: знак SHIFT, две группы
   ссылок. Пока человек не вошёл, панели нет (#app скрыт). */
#nav {
  position:fixed; inset:0 auto 0 0; width:var(--side); z-index:60;
  background:var(--forest); color:#DCE7DD;
  display:flex; flex-direction:column; gap:2px;
  padding:22px 14px 20px; overflow-y:auto; scrollbar-width:thin;
}
#nav:empty { display:none; }
#nav[hidden] { display:none !important; }
body:has(#app[hidden]) #nav { display:none; }
/* Место под панель — только когда она правда есть. */
body:has(#nav:not([hidden]):not(:empty)):not(:has(#app[hidden])) { padding-left:var(--side); }

.navbrand {
  display:flex; align-items:center; gap:10px; padding:0 8px 22px; color:#fff;
  font-size:28px; font-weight:750; letter-spacing:-.06em; line-height:1;
}
.navbrand svg { width:30px; height:30px; color:var(--spark); flex:none; }
.navbrand small {
  display:block; font-size:8.5px; font-weight:650; letter-spacing:.24em; color:#CFE0D3;
  margin-top:4px; text-transform:uppercase;
}
.navgrp {
  margin:18px 10px 8px; font-size:10px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:#9FB6A6;
}
.navgrp:first-of-type { margin-top:4px; }
#nav a {
  display:flex; align-items:center; gap:11px;
  color:#C9D8CD; text-decoration:none; padding:9px 11px; border-radius:7px;
  font-size:13.5px; font-weight:500; white-space:nowrap;
}
#nav a::before {
  content:""; width:18px; height:18px; flex:none; background:currentColor; opacity:.9;
  -webkit-mask:var(--ico) center/18px no-repeat; mask:var(--ico) center/18px no-repeat;
}
#nav a:hover { background:var(--forest-3); color:#fff; }
#nav a[aria-current] { background:#fff; color:var(--forest); font-weight:650; }
#nav a:focus-visible { outline:3px solid var(--spark); outline-offset:1px; }

/* Значки: тонкая линия 1.7, как в макете. Одна маска на страницу. */
#nav a[href="people.html"]        { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 21v-3a6 6 0 0 1 12 0v3M16 5a3 3 0 0 1 0 6M18 15a5 5 0 0 1 3 5'/%3E%3C/svg%3E"); }
#nav a[href="report.html"]        { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
#nav a[href="onsite.html"]        { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V3h14v18M2 21h20M9 7h1m4 0h1M9 11h1m4 0h1M10 21v-6h4v6'/%3E%3C/svg%3E"); }
#nav a[href="daily.html"]         { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5h13M8 12h13M8 19h13M3 5h1M3 12h1M3 19h1'/%3E%3C/svg%3E"); }
#nav a[href="alerts.html"]        { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17h14l-2-3V9a5 5 0 0 0-10 0v5zM10 21h4'/%3E%3C/svg%3E"); }
#nav a[href="dob.html"]           { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='m7 12 3 3 7-7'/%3E%3C/svg%3E"); }
#nav a[href="worktypes.html"]     { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 10 5-10 5L2 8zm-10 9 10 5 10-5M2 17l10 5 10-5'/%3E%3C/svg%3E"); }
#nav a[href="change-orders.html"] { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10l4 4v14H7zM17 3v5h4M3 7v14M11 12h6M11 16h6'/%3E%3C/svg%3E"); }
#nav a[href="sites.html"]         { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h7l2 3h9v11H3z'/%3E%3C/svg%3E"); }
#nav a[href="payroll.html"]       { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13m-5-5 5 5 5-5M4 16v5h16v-5'/%3E%3C/svg%3E"); }
#nav a[href="access.html"]        { --ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h5m5 0h6M4 17h10m5 0h1'/%3E%3Ccircle cx='11' cy='7' r='2'/%3E%3Ccircle cx='16' cy='17' r='2'/%3E%3C/svg%3E"); }

/* Кнопка меню — только на узком экране. */
#navtoggle { display:none; }

/* --- полотно --------------------------------------------------------------- */
main { max-width:1440px; margin:26px auto; padding:0 32px 64px; }

.card {
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:20px 22px;
}

/* Вход: белая карточка на светлом, над ней знак SHIFT. */
.signin { max-width:440px; margin:10vh auto; padding:30px 30px 26px; box-shadow:0 10px 30px rgba(20,40,32,.06); }
.signin::before {
  content:"SHIFT"; display:block; margin:0 0 22px; padding-left:36px;
  font:750 25px/30px var(--ui); letter-spacing:-.06em; color:var(--ink);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M7 5h27l-6 9H1zM12 17h20l-6 9H6zM12 29h27l-6 9H6z' fill='%23236249'/%3E%3C/svg%3E") left center/28px no-repeat;
}
a.signin::before, .pubnote .signin::before { content:none; }
.signin h1 { font-size:22px; margin:0 0 6px; }
.signin p { color:var(--grey); margin:0 0 18px; font-size:14px; }

.step { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.step:first-of-type { margin-top:0; padding-top:0; border-top:0; }

.bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
.bar .muted { font-size:13px; }
.row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.row.mid { align-items:center; }

/* --- органы управления ------------------------------------------------------ */
button, .btn { font-family:var(--ui); }

button.primary {
  background:var(--navy); color:#fff; border:1px solid var(--navy);
  border-radius:7px; padding:9px 16px; font-size:14px; font-weight:600;
  cursor:pointer; font-family:inherit; box-shadow:0 3px 8px rgba(35,98,73,.14);
}
button.primary:hover:not(:disabled) { background:var(--navy-hi); border-color:var(--navy-hi); }
button.primary:disabled { opacity:.42; cursor:default; box-shadow:none; }

button.ghost {
  background:var(--face); color:var(--ink); border:1px solid transparent;
  border-radius:7px; padding:8px 14px; font-size:13.5px; font-weight:550; cursor:pointer;
  font-family:inherit;
}
button.ghost:hover { background:#E2E9E3; }

button.danger {
  background:#FBEEEC; color:var(--bad); border:1px solid transparent;
  border-radius:7px; padding:8px 14px; font-size:13.5px; font-weight:550; cursor:pointer;
  font-family:inherit;
}
button.danger:hover { background:#F7E0DC; }

button.small { padding:5px 10px; font-size:12.5px; border-radius:6px; }

/* Кнопка без класса — самая частая на страницах («Copy», «Card», «Print»):
   по умолчанию она такая же, как ghost. Вес нулевой, так что любое правило
   страницы выигрывает. */
:where(main, .card, dialog) :where(button:not([class])) {
  background:var(--face); color:var(--ink); border:1px solid transparent; border-radius:7px;
  padding:7px 12px; font:inherit; font-size:13px; font-weight:550; cursor:pointer;
}
:where(main, .card, dialog) :where(button:not([class])):hover { background:#E2E9E3; }

button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
  outline:3px solid #8FB7A4; outline-offset:2px;
}

/* Плитки-счётчики и быстрый выбор. Счётчики — тёмно-зелёные плитки из
   макета; выбранная светлеет и получает зелёную кромку. */
.counts button {
  background:var(--forest-2); border:0; border-radius:8px; color:#fff;
  padding:12px 16px 13px; cursor:pointer; font:inherit; font-size:13px; text-align:left;
  box-shadow:none; min-width:112px;
}
.counts button * { color:inherit; }
.counts button:hover { background:#244834; }
.counts button[aria-pressed="true"] {
  background:var(--navy); box-shadow:inset 0 0 0 2px var(--spark); font-weight:500;
}
.counts button.zero { background:#E7ECE8; color:var(--grey); }
.counts button.zero[aria-pressed="true"] { background:#DCE5DE; color:var(--ink); box-shadow:inset 0 0 0 2px var(--navy); }

.quick button {
  background:var(--face); border:1px solid transparent; border-radius:6px;
  padding:7px 12px; cursor:pointer; font:inherit; font-size:13px; font-weight:550; text-align:left;
  color:var(--ink2);
}
.quick button:hover { background:#E2E9E3; }
.quick button[aria-pressed="true"] { background:var(--navy); color:#fff; }

/* Поле ввода. :where() обнуляет вес: любое правило страницы с классом
   выигрывает у этого без борьбы. */
:where(input[type=email], input[type=text], input[type=date], input[type=search],
       input[type=number], input[type=tel], input[type=month], input[type=time], select, textarea) {
  padding:8px 10px; border:1px solid var(--line); border-radius:7px;
  font-size:14px; font-family:inherit; background:var(--card); color:var(--ink);
}
:where(input[type=date], input[type=time]) { width:170px; }
:where(input, select, textarea):focus {
  outline:3px solid rgba(35,98,73,.22); outline-offset:0; border-color:var(--navy);
}
:where(input, select):disabled { background:#F0F2F0; color:var(--grey); }
input[type=checkbox], input[type=radio] { accent-color:var(--navy); }

label.field {
  display:block; font-size:11px; color:var(--grey); margin-bottom:5px;
  text-transform:uppercase; letter-spacing:.08em; font-weight:650;
}

.grid2 > * > label:not(:has(input)), .fld > label:not(:has(input)) { min-height:3.1em; }
.row .wide { flex:1; min-width:0; }
.row .wide > input, .row .wide > select, .row .wide > textarea { width:100%; }

/* --- таблицы ------------------------------------------------------------------
   Светлая шапка заглавными, без вертикальных линий, строки через одну. */
table.roster, table.pay, table.list, table.lab, table.acc,
table.days, table.tt {
  width:100%; border-collapse:separate; border-spacing:0; background:var(--card);
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
}
table.roster th, table.pay th, table.list th, table.lab th, table.acc th,
table.days th, table.tt th {
  text-align:left; font-size:10.5px; font-weight:650; letter-spacing:.08em;
  text-transform:uppercase; color:var(--grey); background:var(--face2);
  padding:11px 12px; white-space:nowrap;
  border-bottom:1px solid var(--line);
}
table th.right, table td.right, th.n, td.n { text-align:right; }
table th.ctr,   table td.ctr   { text-align:center; }
table td.right, table td.n, table td.ctr { font-variant-numeric:tabular-nums; }
table th { vertical-align:middle; }

table.roster td, table.pay td, table.list td, table.lab td, table.acc td,
table.days td, table.tt td {
  padding:10px 12px; border-bottom:1px solid var(--line2); vertical-align:middle;
}
table.roster tbody tr:nth-child(even) td, table.list tbody tr:nth-child(even) td,
table.acc tbody tr:nth-child(even) td { background:#FAFBFA; }
table.roster tr:last-child td, table.pay tr:last-child td,
table.list tr:last-child td, table.acc tr:last-child td { border-bottom:0; }
table.roster tbody tr:hover td, table.list tbody tr:hover td, table.acc tbody tr:hover td { background:var(--navy-tint); }
table.roster .nm { font-weight:600; }
table.roster img.th { border-radius:4px; border:0; background:#DCE3DE; }

/* Широкая таблица прокручивается в своей коробке, а не тащит страницу вбок:
   с боковой панелью полотно стало на 224 px уже, и таблица людей в него
   больше не влезает целиком. */
main :is(div, section):has(> table.roster, > table.pay, > table.list, > table.acc, > table.days, > table.tt) {
  overflow-x:auto;
}

/* --- плашки: залитые, белый текст, точка перед словом -------------------- */
.pill {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; padding:3px 8px 3px 7px;
  border-radius:4px; border:0; background:#58626A; color:#fff;
  letter-spacing:.01em; white-space:nowrap;
}
.pill::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.9; }
.pill.OK       { background:#0B7A43; }
.pill.SOON,
.pill.NO_DATE  { background:#A45B00; }
.pill.PENDING  { background:var(--info); }
.pill.EXPIRED,
.pill.NO_CARD  { background:#B02A2E; }
.pill.INACTIVE { background:#E6EAE7; color:var(--ink2); }
.pill.DISMISSED { background:#58626A; }
.pill.role     { background:var(--navy-tint); color:var(--navy); }
.pill.role::before { content:none; }

/* --- мелочь ---------------------------------------------------------------- */
.muted { color:var(--grey); font-size:13px; }
.note  { color:var(--ink2); font-size:13px; }
.empty { color:var(--grey); font-size:14px; padding:14px 0; }
.big   { font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
#msg, #sigmsg { margin:14px 0; font-size:14px; }
#msg.err, #sigmsg.err { color:var(--bad); }
#msg.ok,  #sigmsg.ok  { color:var(--ok); }
[hidden] { display:none !important; }
hr { border:0; border-top:1px solid var(--line); margin:18px 0; }

/* Уведомление: янтарная полоса из макета («One office shift was left open»). */
.notice {
  display:flex; gap:12px; align-items:center; background:#FFF8EA;
  border:1px solid #EADCBC; padding:13px 16px; border-radius:8px; color:#7A5419; font-size:13px;
}

/* --- подсказки ---------------------------------------------------------------- */
.tipq {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%;
  border:1px solid var(--line); background:var(--card); color:var(--grey);
  font-size:10px; font-weight:700; line-height:1; cursor:help;
  margin-left:5px; vertical-align:middle; user-select:none; flex:0 0 auto;
  font-family:inherit; text-transform:none; letter-spacing:0;
}
.tipq:hover, .tipq.on { background:var(--navy); border-color:var(--navy); color:#fff; }
.tipq:focus-visible { outline:3px solid #8FB7A4; outline-offset:1px; }

/* --- переключатель языка: теперь на белой шапке ------------------------------- */
.l2pick { display:inline-flex; gap:0; margin-right:4px; }
.l2pick button {
  font:650 11px/1 var(--mono); letter-spacing:.06em; padding:6px 8px; cursor:pointer;
  background:transparent; color:var(--grey);
  border:1px solid var(--line); border-radius:0;
}
.l2pick button:first-child { border-radius:6px 0 0 6px; }
.l2pick button:last-child  { border-radius:0 6px 6px 0; }
.l2pick button + button { border-left:0; }
.l2pick button[aria-pressed="true"] { background:var(--forest); border-color:var(--forest); color:#fff; }
.l2pick button:hover { color:var(--ink); background:var(--face); }
.l2pick button[aria-pressed="true"]:hover { color:#fff; background:var(--forest); }

#tip {
  position:fixed; z-index:9999; max-width:320px;
  background:var(--forest); color:#fff; padding:10px 12px; border-radius:8px;
  font-size:12.5px; line-height:1.5; font-weight:400; text-align:left;
  white-space:normal; box-shadow:var(--shadow); pointer-events:none;
}
#tip .es { display:block; margin-top:6px; opacity:.78; font-style:normal; }
#tip[hidden] { display:none !important; }

/* --- диалог ---------------------------------------------------------------- */
dialog {
  border:0; border-radius:14px; padding:0; box-shadow:var(--shadow);
  background:var(--card); color:var(--ink); font-family:var(--ui);
}
dialog::backdrop { background:rgba(16,36,28,.42); backdrop-filter:blur(2px); }

/* --- строка состояния ------------------------------------------------------- */
.statusbar {
  display:flex; flex-wrap:wrap; border-top:1px solid var(--line);
  background:var(--face2); font-size:12px; color:var(--ink2);
}
.statusbar > * { padding:8px 12px; border-right:1px solid var(--line2); }
.statusbar > :first-child { flex:1 1 210px; }
.statusbar > :last-child { border-right:0; }
.statusbar b { font-weight:600; color:var(--ink); }

/* --- узкий экран ---------------------------------------------------------------
   Боковая панель уходит за край и выезжает по кнопке меню в шапке. */
@media (max-width:900px) {
  body:has(#nav:not([hidden]):not(:empty)):not(:has(#app[hidden])) { padding-left:0; }
  #nav {
    transform:translateX(-102%); transition:transform .18s ease-out;
    box-shadow:none; width:min(280px, 84vw);
  }
  body.navopen #nav { transform:none; box-shadow:12px 0 40px rgba(20,40,32,.3); }
  body.navopen::after {
    content:""; position:fixed; inset:0; background:rgba(16,36,28,.38); z-index:55;
  }
  #navtoggle {
    display:inline-flex; flex-direction:column; justify-content:center; gap:4px;
    width:40px; height:40px; padding:0 11px; border-radius:8px; background:var(--face);
    border:0; cursor:pointer; flex:none;
  }
  #navtoggle span { display:block; height:2px; background:var(--ink); border-radius:2px; }
  body:has(#app[hidden]) #navtoggle { display:none; }
}

@media (max-width:760px) {
  table.roster, table.list, table.pay, table.lab, table.acc,
  table.days, table.tt, table.crew {
    display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  header { padding:12px 16px; gap:10px 12px; }
  header b, header #brand { font-size:20px; }
  main { margin:16px auto; padding:0 16px 48px; }
  .card { padding:16px; }
  .signin { margin:6vh 16px; padding:24px 20px 20px; }
}

@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }

/* --- печать ----------------------------------------------------------------- */
@media print {
  header, nav, #navtoggle, .bar, button { display:none !important; }
  body { background:#fff; padding-left:0 !important; }
  main { max-width:none; margin:0; padding:0; }
  .card { border:0; padding:0; }
}

/* --- плитки-счётчики -----------------------------------------------------------
   Тёмно-зелёные плитки из макета: подпись, крупное число, строка пояснения.
   Одна разметка на все страницы, которым есть что посчитать. */
.metrics { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin:0 0 18px; }
.metrics:empty { display:none; }
.metric {
  background:var(--forest-2); color:#fff; border-radius:8px; padding:14px 16px 13px;
  display:flex; flex-direction:column; min-width:0;
}
.metric .ml { font-size:12.5px; color:#D4E3D8; }
.metric b { font-size:30px; font-weight:550; letter-spacing:-.03em; line-height:1.15; margin:8px 0 3px;
            font-variant-numeric:tabular-nums; }
.metric small { font-size:11.5px; color:#BCD0C2; }
.metric.warn { background:#5A3A0C; }
.metric.warn b { color:#FFD58A; }