/* Общий стиль сайта веб-экранов (/assets/style.css, отдаёт сервис входа Core). Дизайн — макет BONLE Web v1 (журнал 162).
   Модуль подключает этот файл ПЕРВЫМ, ставит строку шапки .shapka-sajta и скрипт меню /assets/shell.js;
   оформление содержимого раздела — у модуля. Цвета брать из переменных, своих значений тех же имён не задавать. */
:root {
  --bg: #f3f7f6; --surface: #ffffff; --surface-subtle: #edf3f1; --ink: #182d2c; --muted: #526865; --border: #dbe6e3;
  --accent: #006c63; --accent-dark: #00534d; --accent-soft: #e0f1ed; --focus: #00776e;
  --ok: #27876b; --ok-soft: #eaf7f0; --warn: #8b3f19; --warn-soft: #fff0e8; --err: #b3404e; --err-soft: #fceef0;
  --sidebar: #172e2e; --sidebar-text: #edf6f4; --sidebar-muted: #acc7c1; --sidebar-focus: #a1e0d6;
  --wb: #a41597; --wb-soft: #fbe8fa; --ozon: #005bff; --ozon-soft: #e9f1ff; --yandex: #ffcc00; --yandex-soft: #fff6cf;
  --radius: 14px; --shadow: 0 3px 14px #172e2e0f; --bok: 220px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; }
header { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5; }
h1 { font-size: 20px; margin: 0 0 10px; }
h2 { font-size: 16px; margin: 0 0 10px; }
h3 { font-size: 14px; margin: 16px 0 8px; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.spacer { flex: 1; }
.info { color: var(--muted); margin: 4px 0; }
.error-text { color: var(--err); }
main { max-width: 1240px; margin: 0 auto; padding: 0 20px 40px; }
section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 18px; margin-top: 14px; }
button, .knopka { display: inline-block; padding: 7px 14px; border: 1px solid var(--border); background: var(--surface); border-radius: 10px;
  cursor: pointer; font: inherit; color: inherit; text-decoration: none; }
button:where(:not(:disabled)):hover, .knopka:hover { border-color: var(--accent); color: var(--accent-dark); }
button.primary, .knopka.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button.primary:where(:not(:disabled)):hover, .knopka.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
button:disabled { opacity: .55; cursor: default; }
select, input { font: inherit; accent-color: var(--accent); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
th { color: var(--muted); font-weight: 600; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Строка шапки сайта: «Разделы» · название раздела · … · имя вошедшего · «Выйти». */
.shapka-sajta { display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 0 20px; background: var(--surface);
  border-bottom: 1px solid var(--border); color: var(--ink); font-size: 13px; }
.shapka-sajta a { color: var(--accent-dark); text-decoration: none; }
.shapka-sajta a:hover { text-decoration: underline; }
.shapka-sajta .razdel { font-weight: 600; }
.shapka-sajta .kto { color: var(--muted); }

/* Страницы сервиса входа: вход, разделы, отказ. */
.vhod-main { max-width: 520px; }
.vhod-main:has(table) { max-width: 1240px; }
.vhod-main:has(.prava-spisok) { max-width: 1240px; }
.vhod-karta { margin-top: 48px; padding: 22px 26px; }
.vhod-main section { overflow-x: auto; }
.razdely { list-style: none; padding: 0; margin: 0; }
.razdely li { border-bottom: 1px solid var(--border); }
.razdely li:last-child { border-bottom: 0; }
.razdely a { display: block; padding: 10px 2px; font-size: 15px; text-decoration: none; }
.razdely a:hover { text-decoration: underline; }
.razdely-gruppa { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin: 18px 0 2px; }

/* Оболочка: меню рисует /assets/shell.js и ставит html.s-obolochkoj. Без скрипта этих блоков нет и экран работает как раньше. */
.obolochka-bok, .obolochka-niz { display: none; }
html.s-obolochkoj body { padding-left: var(--bok); }
html.s-obolochkoj .shapka-sajta > a[href="/"] { display: none; }
html.s-obolochkoj .obolochka-bok { display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: var(--bok);
  background: var(--sidebar); color: var(--sidebar-text); padding: 22px 12px; overflow-y: auto; z-index: 30; }
.obolochka-znak { display: block; padding: 0 12px 26px; color: #fff; font-size: 22px; font-weight: 700; letter-spacing: .05em; text-decoration: none; }
.obolochka-znak:hover { color: #fff; }
.obolochka-bok ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.obolochka-punkt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--sidebar-muted);
  text-decoration: none; font-size: 14px; }
.obolochka-punkt:hover { color: #fff; background: #ffffff0f; }
.obolochka-punkt.aktiven { color: #fff; background: #ffffff1f; }
.obolochka-bok svg, .obolochka-niz svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.obolochka-pod a { display: block; padding: 6px 12px 6px 44px; border-radius: 8px; color: var(--sidebar-muted); text-decoration: none; font-size: 13px; }
.obolochka-pod a:hover, .obolochka-pod a.aktiven { color: #fff; }
.obolochka-bok a:focus-visible { outline-color: var(--sidebar-focus); }

@media (min-width: 761px) and (max-width: 1100px) {
  :root { --bok: 68px; }
  html.s-obolochkoj .obolochka-bok { padding: 22px 10px; }
  .obolochka-znak { padding: 0 0 24px; text-align: center; }
  .obolochka-znak span, .obolochka-punkt span, .obolochka-pod { display: none; }
  .obolochka-punkt { justify-content: center; padding: 12px 0; }
}
@media (max-width: 760px) {
  html.s-obolochkoj body { padding-left: 0; padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  html.s-obolochkoj .obolochka-bok { display: none; }
  html.s-obolochkoj .obolochka-niz { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; position: fixed;
    inset: auto 0 0 0; z-index: 40; background: #fffffff5; border-top: 1px solid var(--border);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .obolochka-niz a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 54px;
    border-radius: 11px; color: var(--muted); font-size: 11px; line-height: 1.2; text-decoration: none; }
  .obolochka-niz a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .obolochka-niz a.aktiven { color: var(--accent); background: var(--accent-soft); }
  main { padding: 0 14px 28px; }
  .shapka-sajta { padding: 0 14px; }
  .vhod-karta { margin-top: 20px; }
}
@media print {
  .obolochka-bok, .obolochka-niz { display: none !important; }
  html.s-obolochkoj body { padding: 0; }
}

/* Страница прав (/settings/access): список людей и окна «Изменить права» / «Добавить пользователя». */
.prava-zagolovok { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin: 24px 0 18px; }
.prava-zagolovok h1 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; margin: 4px 0 6px; }
.prava-nadstrochnik { margin: 0; color: var(--accent-dark); font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.prava-podpis { margin: 0; color: var(--muted); }
.prava-soob { background: var(--accent-soft); color: var(--accent-dark); border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; }
.vhod-main .prava-karta { padding: 0; overflow-x: hidden; }
.prava-panel { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 18px 20px; }
.prava-panel h2 { margin: 0 0 4px; }
.prava-poisk { width: min(100%, 245px); }
.prava-poisk input, .prava-kto input { width: 100%; min-height: 39px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--ink); }
.prava-skryto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.prava-stroka { display: grid; grid-template-columns: minmax(112px,1.1fr) minmax(112px,1fr) minmax(140px,1.25fr) minmax(84px,.8fr) auto;
  gap: 12px; align-items: center; padding: 12px 20px; }
.prava-stroka[hidden] { display: none; }
.prava-golovy { background: var(--surface-subtle); border-block: 1px solid var(--border); color: var(--muted); font-size: 11px; font-weight: 650; }
.prava-chelovek + .prava-chelovek { border-top: 1px solid var(--border); }
.prava-stroka > * { min-width: 0; overflow-wrap: anywhere; }
.prava-lico small, .prava-vhod, .prava-vhod small { color: var(--muted); }
.prava-lico small { display: block; margin-top: 3px; }
.prava-vhod { font-size: 12px; }
.prava-vhod small { font-size: 11px; }
.prava-plashki { display: flex; flex-wrap: wrap; gap: 4px; }
.prava-plashka { background: var(--accent-soft); color: var(--accent-dark); border-radius: 5px; padding: 3px 6px; font-size: 11px; line-height: 1.35; }
.prava-pusto-yach { color: var(--muted); font-size: 12px; }
.prava-dejstvie button { min-height: 34px; font-weight: 650; }
.prava-pusto { color: var(--muted); padding: 12px 20px 16px; margin: 0; }
.prava-okno { width: min(580px, calc(100vw - 20px)); max-width: calc(100vw - 20px); max-height: 88dvh; padding: 0; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.prava-okno::backdrop { background: rgb(0 0 0 / .45); }
.prava-shapka-okna, .prava-podval { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 17px 22px; }
.prava-shapka-okna { border-bottom: 1px solid var(--border); }
.prava-shapka-okna h2 { margin: 0 0 4px; font-size: 20px; }
.prava-shapka-okna button { flex: 0 0 32px; padding: 0; min-height: 32px; font-size: 20px; line-height: 1; }
.prava-telo { padding: 14px 22px 18px; }
.prava-kto { display: grid; gap: 5px; font-weight: 650; margin: 0 0 6px; }
.prava-primechanie { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.prava-oshibka { background: var(--err-soft); color: var(--err); border: 1px solid var(--err); border-radius: 8px; margin: 0 0 12px; padding: 8px 10px; }
.prava-oshibka[hidden] { display: none; }
.prava-okno fieldset { min-width: 0; margin: 0; padding: 8px 0 12px; border: 0; border-bottom: 1px solid var(--border); }
.prava-okno fieldset + fieldset { margin-top: 9px; }
.prava-okno legend { padding: 0; font-weight: 650; }
.prava-varianty { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 6px; }
.prava-varianty label { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 8px; border: 1px solid var(--border);
  border-radius: 7px; cursor: pointer; }
.prava-varianty input { margin: 0; }
.prava-podval { justify-content: flex-end; background: var(--surface); border-top: 1px solid var(--border); position: sticky; bottom: 0; }
.prava-okno form { margin: 0; }

@media (max-width: 920px) {
  .prava-golovy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; border: 0; }
  .prava-chelovek { grid-template-columns: minmax(0,1fr) auto; align-items: start; }
  .prava-yachejka { grid-column: 1 / -1; }
  .prava-yachejka::before { display: block; content: attr(data-label); font-size: 11px; font-weight: 650; color: var(--muted); margin-bottom: 4px; }
  .prava-dejstvie { grid-column: 2; grid-row: 1; }
}
@media (max-width: 760px) {
  .prava-zagolovok { margin-bottom: 14px; }
  .prava-panel, .prava-stroka { padding-inline: 14px; }
  .prava-poisk { width: 100%; }
  .prava-shapka-okna, .prava-telo, .prava-podval { padding-inline: 14px; }
  .prava-varianty label { min-height: 40px; }
}