.form-fields { border: 0; padding: 0; margin: 0; min-width: 0; width: 100%; }
:root{
  /* Фирменные цвета сайта bayard39.ru */
  --brand:#ffff33;          /* акцент: логотип, основное действие, активный пункт меню */
  --brand-dim:#d6d62b;
  --black:#000;

  /* Поверхности. Чистый чёрный — только шапка; таблица на приподнятой поверхности,
     иначе на большом полотне текст «звенит» и читать колонки тяжело. */
  --bg:#101215;
  --surface:#181b20;
  --surface-2:#1f2329;
  --line:#2c313a;
  --line-soft:#23272e;

  --ink:#e9ecf1;            /* 13.4:1 на --surface */
  --ink-soft:#a8b1bd;       /*  6.6:1 — вторичный текст */
  --ink-mute:#868f9c;       /*  4.8:1 — вторичные подписи, мельче 14px */

  /* Статусы. Не берём брендовый #ffff33 как заливку строки: сплошной жёлтый =
     «нажми меня», подложка = «посмотри сюда». Разводим их по насыщенности. */
  --warn:#f2c53d;   --warn-bg:#332a10;   --warn-ink:#f7d977;
  --dang:#ff5a52;   --dang-bg:#3a1614;   --dang-ink:#ff8f89;
  /* --exp притушен до #cc1c12: на исходном #ff2d20 белый текст плашки давал 3.7:1 */
  --exp:#cc1c12;    --exp-bg:#521310;    --exp-ink:#ffb3ad;
  --ok:#57c98a;

  --r:8px;  --r-sm:5px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --shadow:0 2px 8px rgba(0,0,0,.45);
  --font-h:"Exo 2","Segoe UI",Tahoma,sans-serif;
  --font-b:Montserrat,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
     font:16px/1.5 var(--font-b);font-weight:400}
a,a:visited{color:var(--brand-dim)}
a:hover{color:var(--brand)}

/* ---------- шапка ---------- */
.top{background:var(--black);border-bottom:2px solid var(--brand);
     padding:0 var(--s5);display:flex;align-items:center;gap:var(--s5);
     position:sticky;top:0;z-index:100;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--brand);
       font:italic 800 20px/1 var(--font-h);letter-spacing:.02em;white-space:nowrap}
.brand svg{flex:none}
.brand small{display:block;font:500 10px/1.2 var(--font-b);font-style:normal;
             color:var(--ink-mute);letter-spacing:.08em;text-transform:uppercase;margin-top:3px}
.offline{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);
  background:var(--warn-bg);color:var(--warn-ink);border-bottom:2px solid var(--warn);
  font-size:14px;line-height:1.4}
.offline .icon{flex:none;stroke:var(--warn)}
.nav{display:flex;gap:var(--s1);margin-left:auto;flex-wrap:wrap}
.nav a{display:flex;align-items:center;min-height:44px;padding:0 var(--s4);
       color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:14px;
       border-bottom:3px solid transparent;transition:color .15s ease,border-color .15s ease}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--brand);border-bottom-color:var(--brand)}

main{padding:var(--s5);max-width:1680px;margin:0 auto}
h1{font:italic 800 26px/1.2 var(--font-h);margin:0 0 var(--s2);letter-spacing:.01em}
h2{font:700 16px/1.3 var(--font-h);margin:var(--s6) 0 var(--s3);
   text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
.lead{color:var(--ink-soft);font-size:14px;margin:0 0 var(--s5);max-width:75ch}
.sub{font-size:12px;color:var(--ink-soft);line-height:1.4}
.count{color:var(--ink-mute);font-style:normal;font-weight:600}

/* ---------- баннер ---------- */
.banner{border:1px solid;border-left-width:4px;border-radius:var(--r);
        padding:var(--s4) var(--s5);margin-bottom:var(--s5);background:var(--surface)}
.banner.b-danger{border-color:var(--dang);background:linear-gradient(var(--dang-bg),var(--surface) 70%)}
.banner.b-warn{border-color:var(--warn);background:linear-gradient(var(--warn-bg),var(--surface) 70%)}
.banner.b-ok{border-color:var(--ok);background:var(--surface)}
.banner.flash{padding:var(--s3) var(--s4);font-size:14px}
/* «Что нового»: текст слева, крестик справа вверху. */
.banner.news{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);font-size:14px}
.banner.news[hidden]{display:none}
/* Общие .banner ul/li — сетка ссылок на людей; здесь обычный список текста. */
.banner.news ul{display:block;margin:var(--s2) 0 0;padding-left:1.2em;list-style:disc;max-height:none;overflow:visible}
.banner.news li{display:list-item}
.banner.news .icon{vertical-align:-3px}
.banner-head{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
/* Свёрнутая шапка — это <summary>. Свой значок вместо системного треугольника:
   у него в разных браузерах разный размер и отступ, и он ломает выравнивание строки. */
summary.banner-head{cursor:pointer;list-style:none;user-select:none}
summary.banner-head::-webkit-details-marker{display:none}
summary.banner-head::after{content:"свернуть \25B4";margin-left:auto;font-size:12px;
  color:var(--ink-mute);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
details:not([open]) > summary.banner-head{margin-bottom:0}
details:not([open]) > summary.banner-head::after{content:"развернуть \25BE"}
summary.banner-head:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.banner h3{font:700 15px/1.2 var(--font-h);margin:0;text-transform:uppercase;letter-spacing:.05em}
/* длинный список не должен отжимать таблицу за экран — после ~6 строк скроллим внутри */
.banner ul{margin:0;padding:0;list-style:none;max-height:200px;overflow:auto;
           display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:var(--s1) var(--s5)}
.banner li{display:flex;gap:var(--s2);align-items:baseline;padding:3px 0;font-size:14px}
/* Дыры в документах — не две колонки коротких строк, а строка на тип со всеми
   фамилиями сразу: в колонку такой список не влезает и рвётся посередине. */
.banner ul.gaps{display:block}
.banner li a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px dotted var(--ink-mute)}
.banner li a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.banner .what{color:var(--ink-soft);font-size:13px}

.tag{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
     font:700 11px/1 var(--font-b);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.tag.e{background:var(--exp);color:#fff}
.tag.d{background:var(--dang);color:#2a0503}
.tag.w{background:var(--warn);color:#2b2205}
.tag.n{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line)}
.swatch{width:14px;height:14px;border-radius:3px;flex:none;display:inline-block}
.sub-head{font:700 12px/1.3 var(--font-b);letter-spacing:.06em;text-transform:uppercase;
          color:var(--ink-soft);margin:var(--s6) 0 var(--s2);
          padding-top:var(--s4);border-top:1px solid var(--line)}
.btn-link{display:inline-flex;align-items:center;min-height:38px;padding:0 var(--s4);
          border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);
          text-decoration:none;font:700 13px/1 var(--font-b);letter-spacing:.03em}
.btn-link:hover{border-color:var(--brand);color:var(--brand)}
/* переключатель выборки в реестре */
.segs{display:flex;flex-wrap:wrap}
.seg{display:flex;align-items:center;min-height:38px;padding:0 var(--s4);font-size:13px;
     font-weight:600;color:var(--ink-soft);text-decoration:none;border:1px solid var(--line);
     border-right:none;white-space:nowrap}
.seg:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.seg:last-child{border-right:1px solid var(--line);border-radius:0 var(--r-sm) var(--r-sm) 0}
.seg:hover{color:var(--ink)}
.seg[aria-current="page"]{background:var(--brand);color:var(--black);border-color:var(--brand)}
/* незаполненное обязательное сведение реестра */
td.miss{background:var(--warn-bg);box-shadow:inset 3px 0 0 var(--warn)}
td.miss .sub{color:var(--warn-ink);font-weight:600}
.req{color:var(--warn);font-weight:700}

/* ---------- вход ---------- */
.logout{display:flex;align-items:center;gap:var(--s3);margin-left:var(--s3);
        padding-left:var(--s3);border-left:1px solid #222}
.who{font:600 13px/1 var(--font-b);color:var(--ink-mute);max-width:150px;
     overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logout button{min-height:32px;padding:0 var(--s3);font-size:12px}
.login-wrap{display:flex;justify-content:center;padding:6vh 0 var(--s6)}
.login{width:100%;max-width:380px;padding:var(--s6) var(--s5)}
.login svg{display:block}
.login h1{text-align:center;font-size:22px;margin-bottom:var(--s2)}
.form-error{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s4);
            padding:10px var(--s3);border-radius:var(--r-sm);font-size:13px;font-weight:600;
            background:var(--dang-bg);color:var(--dang-ink);border:1px solid var(--dang)}
.form-error .icon{flex:none;color:var(--dang)}

/* ---------- таблицы ---------- */
.scroll{overflow:auto;border:1px solid var(--line);border-radius:var(--r);
        background:var(--surface)}
/* Кап высоты там, где таблица длинная и без шапки в ней теряешься: главная, реестр,
   ведомость. Шапка примерзает только внутри такого контейнера — без кап-высоты
   .scroll по вертикали не прокручивается, и sticky у thead просто не срабатывает.
   На коротких страницах кап не ставим: вложенный вертикальный скролл рядом со
   скроллом страницы там только мешает. */
/* dvh, а не vh: на мобильных 100vh считается без адресной строки и уезжает под неё */
.scroll.capped{max-height:calc(100dvh - 300px)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
th,td{padding:9px var(--s3);text-align:left;vertical-align:middle;
      border-bottom:1px solid var(--line-soft)}
thead th{position:sticky;top:0;z-index:2;background:var(--surface-2);
         font:700 11px/1.3 var(--font-b);letter-spacing:.05em;text-transform:uppercase;
         color:var(--ink-soft);border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(255,255,255,.04)}
/* даты — моноширинные цифры, иначе колонка «пляшет» при скролле */
.d{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;display:block}

/* Примечание бывает в несколько строк — колонка не должна распирать таблицу */
td.note{max-width:280px;white-space:normal;color:var(--ink-soft);font-size:12px}

/* первая колонка примерзает — таблица широкая, без неё теряешь, чью строку читаешь */
.name{position:sticky;left:0;z-index:1;background:var(--surface);
      white-space:nowrap;font-weight:600;font-size:14px;
      box-shadow:1px 0 0 var(--line)}
thead .name{z-index:3;background:var(--surface-2)}
tbody tr:hover .name{background:#1d2127}
.name a{color:var(--ink);text-decoration:none}
.name a:hover{color:var(--brand)}

/* Статус: подложка + левая полоса + подпись словами.
   Цвет никогда не единственный носитель смысла (WCAG 1.4.1). */
td.warn{background:var(--warn-bg);box-shadow:inset 3px 0 0 var(--warn)}
td.warn .sub{color:var(--warn-ink);font-weight:600}
td.danger{background:var(--dang-bg);box-shadow:inset 3px 0 0 var(--dang)}
td.danger .sub{color:var(--dang-ink);font-weight:700}
td.expired{background:var(--exp-bg);box-shadow:inset 3px 0 0 var(--exp)}
td.expired .d{color:var(--exp-ink)}
td.expired .sub{color:var(--exp-ink);font-weight:700}
td.ok .sub{color:var(--ok)}
td.none{color:var(--ink-mute)}
tr.warn>td:first-child,tr.danger>td:first-child,tr.expired>td:first-child{position:relative}
tr.warn td{background:rgba(242,197,61,.06)}
tr.danger td{background:rgba(255,90,82,.07)}
tr.expired td{background:rgba(255,45,32,.09)}

/* ---------- формы ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
      padding:var(--s5)}
/* Модальное окно — тег <dialog>: Esc и фокус браузер держит сам. Свои цвета
   обязательны, иначе окно приезжает белым поверх тёмной страницы. */
dialog{color:var(--ink);max-height:85vh;overflow:auto}
dialog::backdrop{background:rgb(0 0 0 / .6)}
label{display:block;font:600 11px/1.3 var(--font-b);letter-spacing:.04em;
      text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
input,select,textarea{font:400 14px/1.4 var(--font-b);color:var(--ink);
      padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
      background:var(--surface-2);max-width:100%;min-height:38px}
input[type=date]{font-variant-numeric:tabular-nums}
input:hover,select:hover{border-color:#3b424d}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
      box-shadow:0 0 0 3px rgba(255,255,51,.18)}
::placeholder{color:var(--ink-mute)}
.check{display:flex;align-items:center;gap:8px;min-height:38px;
       font:500 14px/1 var(--font-b);text-transform:none;letter-spacing:0;color:var(--ink)}
.check input{width:18px;height:18px;min-height:0;accent-color:var(--brand)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s4)}
.row{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap}

button{font:700 13px/1 var(--font-b);letter-spacing:.03em;
       padding:0 var(--s4);min-height:38px;border-radius:var(--r-sm);
       border:1px solid transparent;background:var(--brand);color:var(--black);
       cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
button:hover{background:var(--brand-dim)}
button.sec{background:transparent;color:var(--ink);border-color:var(--line)}
button.sec:hover{background:var(--surface-2);border-color:#3b424d}
button.del{background:transparent;color:var(--dang-ink);border-color:transparent;
           padding:0 9px;min-width:34px;min-height:34px;display:inline-flex;
           align-items:center;justify-content:center}
button.del:hover{background:var(--dang-bg);color:#fff;border-color:var(--dang)}
/* видимый фокус обязателен — с клавиатуры иначе не понять, где ты */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:3px}

/* ---------- сканы ---------- */
.files{min-width:250px}
.file{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.file a{display:inline-flex;align-items:center;gap:5px;color:var(--brand-dim);
        text-decoration:none;font-size:12px;max-width:165px;
        overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file a:hover{color:var(--brand);text-decoration:underline}
.files input[type=file]{width:100%;font-size:12px;background:none;border:none;
        padding:2px 0;min-height:0;color:var(--ink-soft)}
.files input[type=file]::file-selector-button{font:600 12px var(--font-b);color:var(--ink);
        background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm);
        padding:5px 10px;margin-right:8px;cursor:pointer;min-height:30px}
.files input[type=file]::file-selector-button:hover{border-color:var(--brand);color:var(--brand)}
.clip{display:inline-flex;align-items:center;gap:2px;color:var(--ink-mute);
      font-size:11px;font-weight:700;margin-left:5px;vertical-align:middle}
.icon{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;
      stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-lg{width:18px;height:18px}
/* только для скринридера */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
/* ============ УЗКИЕ ЭКРАНЫ ============
   Таблица на 9 колонок в 375px нечитаема даже с горизонтальным скроллом:
   листаешь вбок и теряешь, чью строку смотришь. Поэтому ниже 860px таблицы
   разворачиваются в карточки — каждая строка становится блоком, а заголовок
   колонки подставляется из data-label перед значением. */
@media (max-width:860px){
  main{padding:var(--s4)}
  h1{font-size:21px}
  h2{margin-top:var(--s5)}
  .banner{padding:var(--s4)}
  /* в одну колонку 17 записей — это два экрана до таблицы, поэтому скроллим внутри */
  .banner ul{grid-template-columns:1fr;max-height:45dvh}
  .banner li{flex-wrap:wrap;gap:var(--s1) var(--s2)}

  .scroll,.scroll.capped{overflow:visible;border:none;background:none;
                         border-radius:0;max-height:none}
  table,tbody,tr,td{display:block;width:auto}
  thead{display:none}                       /* заголовки переехали в ::before */
  table{font-size:14px}

  tbody tr{background:var(--surface);border:1px solid var(--line);
           border-radius:var(--r);margin-bottom:var(--s3);
           padding:var(--s3) var(--s4);overflow:hidden}
  tbody tr:last-child td{border-bottom:none}

  td{border:none;padding:7px 0;display:flex;gap:var(--s4);flex-wrap:wrap;
     align-items:center;justify-content:space-between;min-height:38px}
  td::before{content:attr(data-label);flex:none;max-width:48%;
             font:600 11px/1.3 var(--font-b);letter-spacing:.04em;
             text-transform:uppercase;color:var(--ink-soft)}
  td:not([data-label])::before{content:none}
  td>*{text-align:right}

  /* заголовок карточки — фамилия / тип документа */
  td.name{position:static;box-shadow:none;background:none;display:block;
          font-size:16px;padding:0 0 var(--s3);margin-bottom:var(--s2);
          border-bottom:1px solid var(--line)}
  td.name>*{text-align:left}
  tbody tr:hover .name{background:none}
  tbody tr:hover td{background:none}

  /* подложка статуса растягивается до краёв карточки, полоса слева остаётся */
  td.warn,td.danger,td.expired{margin-inline:calc(var(--s4) * -1);
        padding-inline:var(--s4);border-radius:0}
  .d{display:inline-block}
  /* «осталось N дней» — своей строкой под значением, иначе не влезает рядом с полем */
  td .sub{flex-basis:100%;text-align:right;margin:0}
  /* «документа нет» — строку оставляем (это важно), но она не должна занимать
     столько же места, сколько заполненная */
  td.none{min-height:0;padding:3px 0;font-size:13px}
  td.none::before{font-size:10px;color:var(--ink-mute)}

  /* поля ввода в карточке — на всю ширину, тач-цель 44px.
     Селекторы ниже повторяют специфичность базовых правил (.files input[type=file],
     button.del), иначе те выигрывают у голого input/button независимо от порядка. */
  input,select,textarea,button{min-height:44px}
  button.del{min-height:44px;min-width:44px}
  .files input[type=file]{min-height:44px}
  .check{min-height:44px}
  .check input{width:24px;height:24px}
  td input:not([type=file]),td select{width:100%;max-width:62%}
  td.name select{max-width:100%}
  td.files{display:block}
  td.files::before{display:block;margin-bottom:6px;max-width:none}
  td.files>*{text-align:left}
  td.act{display:block;padding:var(--s2) 0 0}
  td.act button{width:100%;text-align:center;justify-content:center}
  /* на десктопе достаточно ✕ рядом со строкой, на мобилке крестик во всю ширину
     карточки не читается — подписываем */
  td.act .del{color:var(--dang-ink);border:1px solid var(--line);gap:8px}
  td.act .del::after{content:"Удалить документ";font:700 13px/1 var(--font-b)}
  .file a{max-width:none}

  .swatch{width:18px;height:18px}
}


/* ---------- график смен ---------- */
/* День по объектам: карточки, а не таблица — на объекте от нуля до пяти человек,
   в таблицу это ложится дырами. */
.objs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--s4)}
.obj{background:var(--surface);border:1px solid var(--line);border-left-width:4px;
     border-radius:var(--r);padding:var(--s4)}
.obj.is-gap{border-left-color:var(--dang);background:linear-gradient(var(--dang-bg),var(--surface) 60%)}
.obj-head{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s2)}
.obj h3{font:700 15px/1.3 var(--font-h);margin:0;text-transform:uppercase;letter-spacing:.04em}
.obj h3 a{color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--ink-mute)}
.obj h3 a:hover{color:var(--brand);border-bottom-color:var(--brand)}
.on-shift{margin:0;padding:0;list-style:none}
.on-shift li{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;padding:3px 0;font-size:14px}
.on-shift a{color:var(--ink);text-decoration:none;font-weight:600}
.on-shift a:hover{color:var(--brand)}
.on-shift .hrs{color:var(--ink-soft);font-size:13px;font-variant-numeric:tabular-nums}

/* Полоска площадок группы под заголовком: где я сейчас и куда перейти.
   Тот же .seg, что у «← август / октябрь →» — активная площадка выделяется
   брендовым уже готовым правилом .seg[aria-current]. */
.grp{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:0 0 var(--s4)}
.grp-lab{font:700 11px/1.3 var(--font-b);letter-spacing:.06em;text-transform:uppercase;
         color:var(--ink-mute)}
.grp details{font-size:13px}
.grp summary{cursor:pointer;color:var(--ink-soft);list-style:none;min-height:38px;
             display:flex;align-items:center}
.grp summary::-webkit-details-marker{display:none}
.grp summary::after{content:" ▾"}
.grp details[open] summary::after{content:" ▴"}
.grp .rest{padding:var(--s2) 0;max-width:70ch;color:var(--ink-soft);font-size:13px}

/* Месяц по объекту: клетки узкие, как в Excel. Правится прямо в таблице,
   одна форма на всю сетку — без JS и без «сохранилось ли». */
table.sheet{width:auto;font-variant-numeric:tabular-nums}
.sheet th,.sheet td{padding:2px;text-align:center;border-bottom:1px solid var(--line-soft)}
.sheet thead th{padding:5px 2px;min-width:34px}
.sheet th.name,.sheet td.name{text-align:left;padding:2px var(--s3);min-width:200px}
.sheet td.name{display:flex;align-items:center;gap:6px}
/* Название ручной строки ведомости — текст, а не число: по левому краю, как ФИО рядом */
.sheet td.name input{text-align:left;width:auto;flex:1}
.sheet .tag{padding:2px 6px}
.sheet input{width:38px;min-height:32px;padding:2px;text-align:center;font-size:13px;
             border-color:transparent;background:transparent;border-radius:3px}
.sheet input:hover{border-color:var(--line)}
.sheet input:focus{background:var(--surface-2)}
/* заполненная клетка видна на просвет: placeholder=" " у всех, значит
   :not(:placeholder-shown) = «здесь что-то введено» — подсветка без единой строчки JS */
.sheet input:not(:placeholder-shown){background:var(--surface-2);color:var(--ink);font-weight:700}
/* Клетка смены, когда допуск в этот день уже просрочен / вот-вот истечёт,
   и нижняя полоса — вторые сутки подряд без отдыха. Подсветка только у
   заполненных клеток: пустой день предупреждать не о чем. */
.sheet td.cell-exp input:not(:placeholder-shown){outline:2px solid var(--dang);background:rgba(255,45,32,.22)!important;color:#fff}
.sheet td.cell-warn input:not(:placeholder-shown){outline:1px solid var(--warn);background:rgba(242,197,61,.18)!important}
.sheet td.cell-consec input:not(:placeholder-shown){box-shadow:inset 0 -3px 0 var(--dang)}
/* «Заменить» — тот же размер, что у крестика рядом, но приглушённее и не
   красным: строка никуда не девается, меняется только имя над сменами.
   Проступает при наведении на строку, чтобы не рябить в тридцати строках. */
.sheet td.name a.swap,.sheet td.name button.fill{flex:none;color:var(--ink-soft);opacity:.35;border-radius:var(--r-sm);
  min-width:34px;min-height:34px;display:inline-flex;align-items:center;justify-content:center}
/* «Продолжить по образцу» — та же приглушённая кнопка, что «заменить». */
.sheet td.name button.fill{background:transparent;border-color:transparent;padding:0}
.sheet tbody tr:hover a.swap,.sheet tbody tr:hover button.fill{opacity:.8}
.sheet td.name a.swap:hover,.sheet td.name a.swap:focus,
.sheet td.name button.fill:hover,.sheet td.name button.fill:focus{opacity:1;color:var(--brand);
  background:var(--surface-2)}
/* Переименование площадки — свёрнутым блоком на всю ширину карточки. Поле имени
   стояло в общем ряду и подворачивалось под руку вместо «завести ещё одну». */
.rename{width:100%;margin-bottom:var(--s2)}
.rename summary{cursor:pointer;list-style:none;font:600 13px/1.4 var(--font-b);
  color:var(--ink-soft);min-height:38px;display:inline-flex;align-items:center;gap:8px}
.rename summary::-webkit-details-marker{display:none}
.rename summary::before{content:"▸";color:var(--ink-mute)}
.rename[open] summary::before{content:"▾"}
.rename summary:hover{color:var(--ink)}
.rename summary b{font:800 15px/1.2 var(--font-h);letter-spacing:.02em;color:var(--ink)}
.rename .box{border-left:2px solid var(--line);padding:var(--s2) 0 var(--s2) var(--s3);
             margin-bottom:var(--s2)}
.rename .box .sub{max-width:64ch;margin-top:6px}

/* Пара потолков «будни / выходные» — одной строкой под общей подписью, иначе
   в форме площадки получаются два поля с почти одинаковыми именами. */
/* Строка под полями оплаты: во что превращается цена часа. Своя строка, а не
   подпись под полем — в ряду настроек места на неё нет. */
.pay-hint{flex-basis:100%;margin:0;color:var(--ink-mute)}
/* Цена смены и цена часа — одно число в двух видах: переносим их только парой */
.pay-pair{display:flex;gap:var(--s3);align-items:flex-end}
/* Подзаголовок «Оплата» внутри ряда настроек — своей строкой, как h2 у секции */
.pay-head{flex-basis:100%;margin-top:var(--s3)}
/* Способ оплаты, который в этом месяце не считает ничего: свёрнут и приглушён */
details.off{padding:var(--s3) var(--s4)}
.off-head{cursor:pointer;list-style:none;color:var(--ink-mute);font-size:13px;
          line-height:1.4;max-width:80ch}
.off-head::-webkit-details-marker{display:none}
.off-head::before{content:"▸ ";color:var(--ink-mute)}
details.off[open] .off-head::before{content:"▾ "}
.off-head:hover{color:var(--ink-soft)}
.caps{display:inline-flex;align-items:center;gap:var(--s2)}
.caps input{width:64px}
.sheet th.wk,.sheet td.wk{background:rgba(255,255,255,.045)}
.sheet tr.add select{min-height:32px;font-size:13px;max-width:220px;width:100%}
.sheet .sum{font-weight:700;color:var(--ink-soft)}
.sheet tfoot td{position:sticky;bottom:0;background:var(--surface-2);
                border-top:1px solid var(--line);font-weight:700}
.sheet tfoot td.gap{background:var(--dang-bg);color:var(--dang-ink)}
.sheet tbody tr:hover td.name{background:#1d2127}
/* Площадка внутри группы («ТЕХНИКА — ЗАОСТРОВЬЕ»). Без своей полосы заголовок
   секции неотличим от строки охранника, а в табеле техники их девять. */
.sheet tr.sect td{background:var(--surface-2);border-top:2px solid var(--line);
                  font-weight:700;color:var(--ink-soft)}
.sheet tr.sect td.name{border-left:3px solid var(--line);
                       font:800 13px/1.3 var(--font-h);text-transform:uppercase;
                       letter-spacing:.04em}
/* Площадка, чья это страница: формы внизу правят её, а не соседнюю. Брендовая
   полоса осталась только у неё — у всех сразу она ничего не говорила. */
.sheet tr.sect.here td{background:#252b34;color:var(--ink)}
.sheet tr.sect.here td.name{border-left-color:var(--brand)}
.sheet tr.sect a{color:var(--ink-soft);text-decoration:none;
                 border-bottom:1px dotted var(--ink-mute)}
.sheet tr.sect a:hover{color:var(--brand);border-bottom-color:var(--brand)}
/* Ведомость — та же сетка, но в клетках не «24», а «10000»: под часы ширины мало.
   Колонок здесь одиннадцать вместо тридцати одной, место есть. */
.sheet.money th,.sheet.money td{padding:2px var(--s2)}
.sheet.money input{width:82px;text-align:right;padding-right:5px}
.sheet.money .sum,.sheet.money td.place{text-align:right}
.sheet.money td.place{color:var(--ink-soft);font-size:12px;text-align:left}

@media (max-width:860px){
  /* сетку табеля НЕ разворачиваем в карточки — 31 клетка карточкой нечитаема,
     она остаётся таблицей с горизонтальным скроллом */
  .sheet,.sheet tbody,.sheet tfoot,.sheet tr,.sheet td,.sheet th{display:revert}
  .sheet{display:table}
  .sheet thead{display:table-header-group}
  .sheet td.name{display:flex}
  .sheet td::before{content:none}
  .sheet td{padding:2px;min-height:0}
  .sheet tbody tr{background:none;border:none;border-radius:0;margin:0;padding:0}
  /* специфичность как у общего правила td input — иначе клетка ужимается до 17px */
  .sheet td input:not([type=hidden]){width:44px;max-width:none;min-height:38px}
  .sheet td select{min-height:38px}
  .scroll:has(.sheet){overflow:auto;border:1px solid var(--line);
                      border-radius:var(--r);background:var(--surface)}
}

@media (max-width:640px){
  /* шапка: подпись под логотипом убираем, меню растягиваем на всю ширину */
  /* меню переносится на вторую строку — залипшая шапка съедала бы ~100px
     из и без того короткого экрана. Таблицы здесь не capped, скроллить
     нечему: шапка уезжает вместе со страницей. */
  .top{position:static;padding:0 var(--s4);gap:var(--s2);flex-wrap:wrap;min-height:52px}
  .brand{font-size:17px;padding:var(--s2) 0}
  .brand small{display:none}
  .nav{margin-left:auto;width:100%;order:3;border-top:1px solid #1c1c1c}
  .nav a{flex:1;justify-content:center;padding:0 var(--s2);font-size:13px;min-height:46px}
  main{padding:var(--s3)}
  .card{padding:var(--s4)}
  .grid{grid-template-columns:1fr;gap:var(--s3)}
  td input:not([type=file]),td select{max-width:58%}
}