/* Kanvo — components: header/footer/кнопки/карточки/таблицы/auth/admin.
   Всё на токенах (base.css): МАТЕРИАЛ = var(--sp/r/fs/fw/lh/цвет) [тюнится студией];
   СТРУКТУРА = var(--st-*) [скелет, не тюнится]. Никаких магических чисел. Брейк 768px. */

/* бренд-знак (лого в header/footer) — следует за темой: подложка = accent, колонки = on-accent */
.bm-bg{fill:var(--accent)}
.bm-col{fill:var(--on-accent)}

/* header */
.site-header{padding:var(--sp-5) 0;border-bottom:1px solid var(--hairline)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:var(--sp-3);text-decoration:none}
.brand-name{font-weight:var(--fw-bold);font-size:var(--fs-xl);color:var(--text-strong);letter-spacing:var(--tracking-snug)}
.brand-name-sm{font-size:var(--fs-base)}

/* theme toggle */
.theme-toggle{width:var(--st-toggle);height:var(--st-toggle);display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--btn2-border);border-radius:var(--r-sm);color:var(--text-dim);cursor:pointer;transition:background var(--st-dur),border-color var(--st-dur)}
.theme-toggle:hover{background:var(--btn2-hover)}
.theme-toggle .icon-moon,.theme-toggle .icon-sun{display:inline-flex;align-items:center}
.theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-sun{display:inline-flex}

/* iOS-style toggle (переиспользуемый) — трек-пилюля + скользящий кружок, на токенах */
.ios-toggle{display:inline-flex;align-items:center;gap:var(--sp-2);cursor:pointer;position:relative}
.ios-toggle input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.ios-track{flex:none;width:var(--st-ios-w);height:var(--st-ios-h);border-radius:var(--r-pill);background:var(--chip-bg);position:relative;transition:background var(--st-dur)}
.ios-track::after{content:"";position:absolute;top:var(--sp-0);left:var(--sp-0);width:var(--st-ios-knob);height:var(--st-ios-knob);border-radius:var(--r-round);background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform var(--st-dur)}
.ios-toggle input:checked + .ios-track{background:var(--accent)}
.ios-toggle input:checked + .ios-track::after{transform:translateX(var(--st-ios-travel))}
.ios-toggle input:focus-visible + .ios-track{outline:2px solid var(--accent);outline-offset:2px}

/* badge + lede (лендинг/витрина) */
.badge{display:inline-block;background:var(--accent-soft);color:var(--on-soft);font-size:var(--fs-sm);font-weight:var(--fw-medium);padding:var(--sp-1) var(--sp-4);border-radius:var(--r-pill);margin-bottom:var(--sp-5)}
.lede{font-size:var(--fs-lg);line-height:var(--lh-relaxed);color:var(--text);margin:0 auto var(--sp-6);max-width:var(--st-w-lede)}

/* buttons */
.cta-row{display:inline-flex;gap:var(--sp-3);flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:inherit;font-size:var(--fs-md);font-weight:var(--fw-medium);padding:var(--sp-3) var(--sp-5);border-radius:var(--radius);border:1px solid transparent;cursor:pointer;text-decoration:none;line-height:1;transition:background var(--st-dur),border-color var(--st-dur)}
.btn svg{flex:none;width:var(--st-ico);height:var(--st-ico)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--btn2-border)}
.btn-secondary:hover:not([disabled]){background:var(--btn2-hover)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-sm{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm)}
.chip{font-size:var(--fs-2xs);font-weight:var(--fw-medium);background:var(--chip-bg);color:var(--chip-text);padding:var(--sp-0) var(--sp-2);border-radius:var(--r-pill)}
.micro{font-size:var(--fs-sm);color:var(--text-dim);margin:var(--sp-4) 0 0}

/* footer */
.site-footer{border-top:1px solid var(--hairline);padding:var(--sp-5) 0}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--sp-3)}
.footer-legal{text-align:right;font-size:var(--fs-sm);color:var(--text-dim);line-height:var(--lh-relaxed)}
.footer-legal a{color:var(--link);text-decoration:none}
.footer-legal a:hover{text-decoration:underline}
.footer-legal .copy{color:var(--text-dim);margin-left:var(--sp-2)}

/* auth result pages */
.auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--sp-7) 0}
.auth-card{width:100%;max-width:var(--st-w-card);margin:0 auto;text-align:center;background:var(--card-bg);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--sp-7) var(--sp-6)}
.auth-ico{display:inline-flex;width:var(--st-ico-circle);height:var(--st-ico-circle);align-items:center;justify-content:center;border-radius:var(--r-round);margin-bottom:var(--sp-4);color:var(--accent);background:var(--accent-soft)}
.auth-ico svg{width:var(--st-ico-lg);height:var(--st-ico-lg)}
.auth-pending .auth-ico{color:var(--warn);background:var(--warn-soft)}
.auth-error .auth-ico{color:var(--err);background:var(--err-soft)}
.auth-card h1{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--text-strong);margin:0 0 var(--sp-3);letter-spacing:var(--tracking-snug)}
.auth-text{font-size:var(--fs-base);line-height:var(--lh-relaxed);color:var(--text);margin:0}
.auth-note{font-size:var(--fs-sm);line-height:var(--lh-relaxed);color:var(--text-faint);margin:var(--sp-3) 0 0}
.auth-actions{display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-5)}

/* avatar (профиль) + tiles (guzzzi vitals) */
.user-ava{width:var(--st-avatar-sm);height:var(--st-avatar-sm);border-radius:var(--r-round);background:var(--accent);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);font-size:var(--fs-lg);text-transform:uppercase}
.tile{min-width:var(--st-w-tile);padding:var(--card-pad);border:1px solid var(--hairline);border-radius:var(--radius);background:var(--card-bg);display:flex;flex-direction:column;gap:var(--sp-1);align-items:flex-start}
.tile-title{font-weight:var(--fw-semi);color:var(--text-strong)}
.tile-note{font-size:var(--fs-xs);color:var(--text-faint);background:var(--chip-bg);padding:var(--sp-0) var(--sp-2);border-radius:var(--r-pill)}
.tile-soon{opacity:.75}

/* profile (/me) */
.profile-card{text-align:center}
.profile-name{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--text-strong);margin:0 0 var(--sp-3);letter-spacing:var(--tracking-snug)}
.user-ava-lg{width:var(--st-avatar-lg);height:var(--st-avatar-lg);font-size:var(--st-ico-lg);margin:0 auto var(--sp-4)}
.profile-un{color:var(--text-dim);margin:0 0 var(--sp-5);font-size:var(--fs-sm)}
.profile-dl{text-align:left;margin:0;border-top:1px solid var(--hairline)}
.profile-dl>div{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) var(--sp-0);border-bottom:1px solid var(--hairline)}
.profile-dl dt{color:var(--text-dim);font-size:var(--fs-sm);margin:0}
.profile-dl dd{color:var(--text-strong);font-size:var(--fs-sm);margin:0;font-weight:var(--fw-medium)}

/* --- Табы разделов: ОДИН канон на все app-страницы (Guzzzi · Здоровье · Интерфейс · Риг).
   Было три разных набора (шрифт, вес, паддинг, цвет активного, отступы сверху/снизу) — глаз ловил
   расхождение. Ключевое: горизонтального паддинга у ярлыка НЕТ, разделяет gap — иначе первый ярлык
   уезжает вправо на свой паддинг (замер: 273 против 257) и ломает левую линию страницы.
   Guzzzi и Риг ходят на .k-* (07.09); .hz-* и .iface-* вписаны в тот же селектор, пока их страницы не переведены. */
.k-tabs,.hz-tabs,.iface-tabs{display:flex;gap:var(--sp-5);border-bottom:1px solid var(--hairline);margin-top:var(--sp-4);overflow-x:auto;overflow-y:hidden}   /* overflow-y: активный ярлык на 1px выше полосы (margin-bottom:-1px) и без этого рисует вертикальную прокрутку (Pet, 07.09) */
.k-tab,.hz-tab-btn,.iface-tab{font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--text-dim);background:transparent;border:none;border-bottom:var(--st-tab-line) solid transparent;padding:var(--sp-2) 0;margin-bottom:-1px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:color var(--st-dur),border-color var(--st-dur)}
.k-tab:hover,.hz-tab-btn:hover,.iface-tab:hover{color:var(--text)}
.k-tab.active,.k-tab.is-active,.hz-tab-btn.active,.iface-tab.is-active{color:var(--accent);border-bottom-color:var(--accent)}
.k-tab:focus-visible,.hz-tab-btn:focus-visible,.iface-tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-sm)}
/* Панель под табами — один отступ на всех, НЕЗАВИСИМО от того, с чего она начинается.
   Иначе схлопывание полей делает его разным: панель, начинающаяся с section.admin-sec
   (margin-top 32), получала 32, а начинающаяся с сетки тайлов (16) — только 16.
   Поэтому первому ребёнку верхнее поле снимаем и держим отступ на самой панели. */
.k-pane,.hz-pane,.iface-panel{margin-top:var(--sp-6)}
.k-pane>:first-child,.hz-pane>:first-child,.iface-panel>:first-child{margin-top:0}

/* admin (/admin) */
.admin-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-2);gap:var(--sp-3);flex-wrap:wrap}
.admin-head h1{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--text-strong);margin:0;letter-spacing:var(--tracking-snug)}
.admin-sec{margin-top:var(--sp-6);overflow-x:auto}
.admin-sec h2{font-size:var(--fs-base);font-weight:var(--fw-semi);color:var(--text-strong);margin:0 0 var(--sp-3);display:flex;align-items:center;gap:var(--sp-2)}
.admin-sec h2 .cnt{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--chip-text);background:var(--chip-bg);padding:var(--sp-0) var(--sp-2);border-radius:var(--r-pill)}
.admin-empty{color:var(--text-faint);font-size:var(--fs-sm);margin:0}
.adm-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.adm-table th{text-align:left;font-weight:var(--fw-medium);color:var(--text-dim);font-size:var(--fs-xs);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--hairline);white-space:nowrap}
.adm-table td{padding:var(--sp-3) var(--sp-3);border-bottom:1px solid var(--hairline);color:var(--text);vertical-align:middle}
.adm-table .dim{color:var(--text-faint)}
.adm-table .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-xs)}
.adm-actions{white-space:nowrap}   /* НЕ display:flex — на <td> ломает border-collapse (призрак-линия у пустой ячейки) */
.adm-actions form,.role-form{display:inline-block;margin:0;vertical-align:middle}
.adm-actions form + form{margin-left:var(--sp-2)}
.you{font-size:var(--fs-2xs);color:var(--on-soft);background:var(--accent-soft);padding:var(--sp-0) var(--sp-2);border-radius:var(--r-pill);margin-left:var(--sp-1)}
.role-form select{font-family:inherit;font-size:var(--fs-sm);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);border:1px solid var(--btn2-border);background:var(--card-bg);color:var(--text-strong);cursor:pointer}
.adm-audit td{font-size:var(--fs-sm)}

/* Skeleton-loader (§10) — плашки-плейсхолдеры формы контента при загрузке/refresh (НЕ спиннеры).
   Солид-база --skel + бегущий блик --skel-hi. Форма повторяет layout → нет прыжка.
   reduced-motion гасит shimmer (animation-duration в base.css). Переиспользуемо. */
.skel{display:block;background-color:var(--skel);background-image:linear-gradient(90deg,transparent,var(--skel-hi),transparent);background-size:200% 100%;background-repeat:no-repeat;animation:kanvo-skel var(--st-skel-dur) ease-in-out infinite;border-radius:var(--r-sm)}
[hidden] .skel{animation:none}                 /* скрытая панель — блик не крутим (перф) */
.skel-line{height:var(--st-skel-line);border-radius:var(--r-pill)}
.skel-line + .skel-line{margin-top:var(--sp-2)}
.skel-w-30{width:30%}.skel-w-40{width:40%}.skel-w-50{width:50%}.skel-w-60{width:60%}.skel-w-70{width:70%}.skel-w-90{width:90%}
.skel-tile{height:var(--st-skel-tile);border-radius:var(--radius)}
.skel-block{border-radius:var(--r-md)}
.skel-stack{display:flex;flex-direction:column;gap:var(--sp-2)}

/* form controls — стилизованный нативный <select> (канон дропдауна ДЛЯ ФОРМ: appearance:none + токены + CSS-стрелка).
   Нативный: опции НЕ клипаются в overflow + мобилка-пикер + a11y. Фокус ВНУТРЬ (-1px) — скролл-контейнер не режет кольцо. */
.k-field{position:relative;display:inline-flex;align-items:center}
.k-field select{appearance:none;-webkit-appearance:none;font-family:inherit;font-size:var(--fs-sm);color:var(--text);
  background:var(--card-bg);border:1px solid var(--btn2-border);border-radius:var(--r-sm);line-height:1;cursor:pointer;
  padding:var(--sp-2) calc(var(--sp-5) + var(--sp-3)) var(--sp-2) var(--sp-3);transition:border-color var(--st-dur),background var(--st-dur)}
.k-field select:hover{border-color:var(--text-faint)}
.k-field select:focus-visible{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.k-field::after{content:"";position:absolute;right:var(--sp-3);top:50%;width:0;height:0;pointer-events:none;
  transform:translateY(-1px);border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--text-dim)}

/* таблица со скроллом — фикс-высота + залипающая шапка (канон для растущих: /admin, состав, дашборды). Фокус внутрь. */
.table-scroll{max-height:var(--st-table-max);overflow-y:auto;border:1px solid var(--hairline);border-radius:var(--radius)}
.table-scroll>.adm-table{margin:0}
.table-scroll .adm-table tr:last-child td{border-bottom:0}   /* нижнюю рамку даёт обёртка — строку не дублируем */
.table-scroll thead th{position:sticky;top:0;background:var(--card-bg);z-index:1}
.table-scroll :focus-visible{outline-offset:-1px}

/* flyout-поповер — fixed/портал (в body, вне transform-предка), позиция по JS. НЕ клипается overflow-баром.
   Канон меню из узких контейнеров (nav «Модули» и т.п.). CSP: координаты через element.style (CSSOM), не inline-атрибут. */
.kflyout-panel{position:fixed;z-index:var(--st-z-drawer);min-width:210px;max-width:280px;margin:0;padding:var(--sp-1);
  list-style:none;background:var(--card-bg);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--st-shadow-pop)}
.kflyout-panel[hidden]{display:none}

/* structural flip: < 768 = узкий (литерал — CSS не даёт var() в media) */
@media (max-width:767px){
  .lede{font-size:var(--fs-md)}
  .site-footer .wrap{flex-direction:column;align-items:flex-start}
  .footer-legal{text-align:left}
  .tile{width:100%}
  .auth-card{padding:var(--sp-6) var(--sp-5)}
  .wrap{padding:0 var(--sp-4)}
}

/* --- автообновление витрин (Риг, Цех): переключатель рядом с «Обновить» --- */
.ar-host { display: inline-flex; align-items: center; }
.ar-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); color: var(--text-dim);
  margin-right: var(--sp-3); cursor: pointer; user-select: none;
}
.ar-toggle input { accent-color: var(--accent); margin: 0; cursor: pointer; }
.ar-step {
  font: inherit; color: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1px 4px;
}
/* На узком экране прячем ПОЯСНЕНИЕ, но не сам выбор шага: подпись без него
   читается («обновляется каждые»), а шаг — это управление, а не украшение. */
@media (max-width: 640px) { .ar-toggle span { display: none; } }

/* --- витринные компоненты (D-0054, 07.09): плитки, крупное число, таблица с мобильными
   подписями data-l, подсказка, моно, инлайн-форма, предупреждение и приглушение. Их делят
   Guzzzi, Риг и Цех, а жили они в стилях одной панели (guzzzi.css). Имена k-*; псевдонимы gz-*
   сняты 07.09 (D-0055) — все три страницы ходят на k-*. --- */
.k-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);margin-top:var(--sp-4)}
.k-tiles .tile{gap:var(--sp-1)}
.k-tiles-3{grid-template-columns:repeat(3,1fr)}
.k-big{font-size:var(--fs-lg);font-weight:var(--fw-semi);color:var(--text-strong)}
.k-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.k-inline{margin:0;display:inline-flex;align-items:center;gap:var(--sp-2)}
.k-hint{font-size:var(--fs-xs);color:var(--text-faint);margin:var(--sp-1) 0 0}
.k-hint-inline{margin:0}   /* подсказка внутри ряда/строки: без верхнего поля */
.k-warn{color:var(--warn);font-weight:var(--fw-medium)}
/* 09.09: оговорка о приборе идёт ПЕРЕД таблицей, а не сноской под ней. Пока
   молчали о том, что батарея модели не различает, таблица читалась как «все
   одинаково хороши» — то есть врала уверенно. Рамка нужна, чтобы её не пролистали. */
.lp-batt{border-left:3px solid var(--warn);padding:var(--sp-2) var(--sp-3);margin:var(--sp-3) 0 0;
         background:var(--card-bg);border-radius:var(--r-sm)}
.k-dim{color:var(--text-faint)}
.k-table-wrap{overflow-x:auto;margin-top:var(--sp-2)}
.k-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.k-table th{text-align:left;font-weight:var(--fw-medium);color:var(--text-dim);font-size:var(--fs-xs);padding:var(--sp-2);border-bottom:1px solid var(--hairline);white-space:nowrap}
.k-table td{padding:var(--sp-2);border-bottom:1px solid var(--hairline)}
.k-table th:not(:first-child),.k-table td:not(:first-child){text-align:right;white-space:nowrap}
/* текстовая таблица: колонки — слова, а не числа; выравнивание влево и перенос */
.k-table-text th,.k-table-text td{text-align:left!important;white-space:normal!important}
/* Таблица, которая КАРТОЧКИ ВСЕГДА, а не только на узком экране (09.09, просьба Pet).
   Нужна там, где в ячейке живёт длинный список: «Семейство моделей» на /petr/rig (страница переехала в DEN 04.10.26)
   разъезжалось — одна колонка на десять строк растягивала всю строку таблицы, и
   шесть колонок читались как каша. Правила те же, что в мобильном блоке ниже, но
   без порога ширины; подпись ставится НАД значением, иначе длинный список
   прижимается к правому краю. Мобильный блок идёт следом и на узком экране
   перекрывает эти правила — там канон «подпись слева, значение справа» уже принят. */
.k-table-cards thead{display:none}
.k-table-cards,.k-table-cards tbody,.k-table-cards tr,.k-table-cards td{display:block;width:auto}
.k-table-cards tbody{display:grid;grid-template-columns:1fr;gap:var(--sp-3)}
@media (min-width:900px){.k-table-cards tbody{grid-template-columns:1fr 1fr}}
.k-table-cards tr{border:1px solid var(--hairline);border-radius:var(--r-md);padding:var(--sp-3);margin:0}
.k-table-cards td{border:none;padding:var(--sp-1) 0;text-align:left!important}
.k-table-cards td[data-l]{display:block}
.k-table-cards td[data-l]::before{content:attr(data-l);display:block;color:var(--text-dim);font-size:var(--fs-xs);margin-bottom:2px}

@media (max-width:767px){
  .k-tiles,.k-tiles-3{grid-template-columns:1fr}
  .k-table thead{display:none}
  .k-table,.k-table tbody,.k-table tr,.k-table td{display:block;width:auto}
  .k-table tr{border:1px solid var(--hairline);border-radius:var(--r-md);padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-3)}
  .k-table td{border:none;padding:var(--sp-1) 0;text-align:left!important}
  .k-table td[data-l]{display:flex;justify-content:space-between;gap:var(--sp-3)}
  .k-table td[data-l]::before{content:attr(data-l);color:var(--text-dim);font-size:var(--fs-xs)}
  .k-table td:first-child{font-weight:var(--fw-medium);color:var(--text-strong)}
}

/* --- ряды «ярлык + ручка» (D-0055, 07.09): вынесены из guzzzi.css, их делят Guzzzi и Риг.
   .k-ctl колонка рядов · .k-ctl-row ряд · .k-ctl-lbl ярлык фиксированной ширины ·
   .k-ctl-wrap ряд с переносом (несколько форм подряд) · .k-ctl-top выравнивание по верху
   (тумблеры, textarea). Нативный <select> внутри ряда стилизован здесь же — как было
   в guzzzi.css, декларации перенесены без изменений; канон формы — .k-field. --- */
.k-ctl{display:flex;flex-direction:column;gap:var(--sp-4)}
.k-ctl-row{display:flex;align-items:center;gap:var(--sp-4)}
.k-ctl-wrap{flex-wrap:wrap}
.k-ctl-top{align-items:flex-start}
.k-ctl-lbl{min-width:110px;font-size:var(--fs-sm);color:var(--text-dim)}
.k-ctl select{font-family:inherit;font-size:var(--fs-sm);padding:var(--sp-1) var(--sp-2);border-radius:var(--r-sm);border:1px solid var(--btn2-border);background:var(--card-bg);color:var(--text-strong);cursor:pointer}
@media (max-width:767px){
  .k-ctl-row{flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
  .k-ctl-lbl{min-width:0}
}