/* The look of every page (plan and mockups confirmed by Lev 09.11.2026; design A "Печать" of Tablinum, decision of Lev
   10.11.2026, docs/name-and-design.md, section 6). Own font files and own SVG icons only: no external fonts, CDN or
   libraries (brief, section 7). Colors checked for contrast (WCAG 2.2, 1.4.3: text 4.5:1; 1.4.11: borders of fields
   3:1). Main screens: laptops 1536x864 and 1920x1080; narrower than 1400 the room menu shrinks to icons, narrower than
   1100 the panel "Сведения" folds away, narrower than 860 one or two panes (tablet), narrower than 600 one pane at a
   time and a menu at the bottom (phone). */

/* Fonts (app/static/fonts, licenses and sources there): PT Sans for the text, PT Serif for the logo and the headings,
   PT Mono for numbers and IDs. Whole fonts, not cut down: the license reserves their names for unmodified fonts.
   font-display: swap shows the text at once in the next font of the list while a file loads. */
@font-face { font-family: "PT Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/ptsans/PT_Sans-Web-Regular.woff2") format("woff2"); }
@font-face { font-family: "PT Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/ptsans/PT_Sans-Web-Bold.woff2") format("woff2"); }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/ptserif/PT_Serif-Web-Bold.woff2") format("woff2"); }
@font-face { font-family: "PT Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/ptmono/PTM55FT.woff2") format("woff2"); }

:root {
  --bg: #f7f5f0; --panel: #ffffff; --soft: #fbfaf6; --line: #e3ded3; --line-soft: #eeeae2; --line-strong: #d6cfc2;
  --control: #8b95a5;
  --text: #1a2233; --muted: #5b6372; --label: #667085; --nav: #344054; --faint: #98a1b2;
  --accent: #1f3a68; --accent-hover: #172d52; --accent-weak: #e8edf5; --accent-text: #1f3a68;
  --hover: #f3f0ea; --sel: #e8edf5;
  /* The top bar: dark blue; the logo has its own colours (app/static/brand, scripts/brand/make_logo.py). */
  --brand: #14233f; --brand-muted: #c9d2e3; --nav-bg: #efebe3;
  --font: "PT Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "PT Serif", Georgia, "Times New Roman", serif;
  --ok: #157a3a; --ok-weak: #e2f3e7; --warn: #7a5000; --warn-weak: #fff1cf; --err: #b42318; --err-weak: #fde8e6;
  --violet: #5b3fb8; --violet-weak: #eee8fb; --teal: #0f6b78; --teal-weak: #e0f2f4; --gray: #475467; --gray-weak: #eef0f3;
  --top: 48px; --nav-width: 228px; --nav-icons: 64px; --bottom: 60px;
  --radius: 8px; --shadow: 0 8px 28px rgba(16, 24, 40, 0.14);
  --mono: "PT Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 14px/1.45 var(--font);
}
a { color: var(--accent-text); }
a:hover { color: var(--accent-hover); }
h1 { font-family: var(--serif); font-weight: 700; font-size: 20px; line-height: 1.3; margin: 0 0 12px; }
h2 { font-family: var(--serif); font-weight: 700; font-size: 16px; margin: 20px 0 8px; }
h3 { font-size: 14px; margin: 14px 0 6px; }
p { margin: 0 0 10px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 4px; z-index: 100; background: #fff; padding: 6px 10px; border-radius: 6px; }
.skip:focus { left: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); font-weight: 400; }
.ok { color: var(--ok); }
.err, .error-text { color: var(--err); }
.nowrap { white-space: nowrap; }
.mono, .pid { font-family: var(--mono); font-size: 0.93em; }
.spacer { flex: 1; }
svg.i { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
svg.i18 { width: 18px; height: 18px; flex: none; }
svg.i12 { width: 12px; height: 12px; flex: none; }

/* --- Buttons, fields ----------------------------------------------------------------------------------------- */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 12px;
  font: inherit; font-weight: 700; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer;
  color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 7px;
}
button:hover, .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
button.secondary, .btn.secondary { color: var(--text); background: #fff; border-color: var(--line-strong); font-weight: 400; }
button.secondary:hover, .btn.secondary:hover { background: var(--hover); color: var(--text); border-color: var(--line-strong); }
button.ghost, .btn.ghost { color: var(--nav); background: transparent; border-color: transparent; font-weight: 400; }
button.ghost:hover, .btn.ghost:hover { background: var(--hover); color: var(--text); }
button.danger, .btn.danger { color: var(--err); background: #fff; border-color: #e6b5b0; }
button.danger:hover, .btn.danger:hover { background: var(--err-weak); color: var(--err); }
button.ghost.danger { border-color: transparent; background: transparent; }
button.icon, .btn.icon { width: 32px; padding: 0; }
button[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: default; pointer-events: none; }
button.link { min-height: 0; padding: 0; color: var(--accent-text); background: none; border: 0; font-weight: 400; }
button.link:hover { color: var(--accent-hover); text-decoration: underline; background: none; }

input[type="email"], input[type="password"], input[type="text"], input[type="tel"], input[type="number"],
input[type="search"], input[type="date"], select, textarea {
  min-height: 32px; padding: 5px 9px; font: inherit; color: var(--text); background: #fff;
  border: 1px solid var(--control); border-radius: 7px;
}
textarea { width: 100%; line-height: 1.45; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--label); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
label.check { display: inline-flex; gap: 8px; align-items: center; }

.form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.form.wide-form { max-width: 760px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
.form label > span.muted, .form .hint { font-weight: 400; }
.form label.check { flex-direction: row; font-weight: 400; }
.form button { align-self: flex-start; }
.hint { font-size: 13px; color: var(--muted); }
form.inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.steps li { margin-bottom: 12px; }

/* Messages. */
.notice, .error, .warning { padding: 9px 12px; border-radius: 8px; margin: 0 0 12px; }
.notice { background: var(--accent-weak); color: var(--accent-text); }
.notice a { color: inherit; font-weight: 600; }
/* Files that stopped uploading (app/templates/room.html): the list opens on demand and scrolls when long. */
.notice.unfinished p { margin: 0; }
.notice.unfinished summary { cursor: pointer; margin-top: 4px; }
.notice.unfinished ul { margin: 6px 0 0; padding-left: 20px; max-height: 160px; overflow: auto; font-size: 13px; }
.error { background: var(--err-weak); color: var(--err); }
.warning { background: var(--warn-weak); color: var(--warn); }

/* Labels of status, levels of rights. */
.chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.3; white-space: nowrap; background: var(--gray-weak); color: var(--gray);
}
.chip.blue { background: var(--accent-weak); color: var(--accent-text); }
.chip.green { background: var(--ok-weak); color: var(--ok); }
.chip.amber { background: var(--warn-weak); color: var(--warn); }
.chip.red { background: var(--err-weak); color: var(--err); }
.chip.violet { background: var(--violet-weak); color: var(--violet); }
.chip.teal { background: var(--teal-weak); color: var(--teal); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--faint); }
.dot.high { background: var(--err); } .dot.normal { background: #98a1b2; } .dot.low { background: #d0d5dd; }
.count:not(td):not(th) {     /* a badge with a number; td.count and th.count are number columns of the tables */
  display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 600;
  line-height: 18px; text-align: center; color: #fff; background: var(--accent);
}

/* --- Top bar: dark blue, white text, the logo (mockup of design A, the logo of Lev 12.11.2026) ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 40; height: var(--top); display: flex; align-items: center; gap: 12px;
  padding: 0 12px 0 16px; background: var(--brand); color: #fff; border-bottom: 1px solid var(--brand);
}
.topbar :focus-visible { outline-color: var(--brand-muted); }
/* The logo of Lev (12.11.2026, app/static/brand): the mark 30 px high and TABLINUM in the proportions of his picture
   (the mark 152, TABLINUM 76.4 with the overshoots, the gap 64.2 of its pixels), TABLINUM centred on the cord. */
.logo { display: flex; align-items: center; gap: 12.7px; color: #fff; text-decoration: none; white-space: nowrap; }
.logo:hover { color: #fff; }
.logo .mark { width: auto; height: 30px; flex: none; display: block; }
.logo .logo-name { width: auto; height: 15.07px; flex: none; display: block; }
.vsep { width: 1px; height: 22px; background: var(--line); flex: none; }
.topbar .vsep { background: rgba(255, 255, 255, 0.22); }
.top-links { display: flex; gap: 2px; }
.top-links a { color: var(--brand-muted); text-decoration: none; padding: 6px 10px; border-radius: 6px; white-space: nowrap; }
.top-links a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.top-links a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, 0.14); }

/* Drop-down menus made of <details>: they work without the page script; the script closes them on a click
   outside and on Escape (app/static/app.js). */
details.drop { position: relative; }
details.drop > summary { list-style: none; cursor: pointer; }
details.drop > summary::-webkit-details-marker { display: none; }
.drop-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 230px; max-width: min(360px, 92vw);
  max-height: 70vh; overflow: auto; padding: 6px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow);
}
.drop-menu.left { left: 0; right: auto; }
.drop-menu a, .drop-menu button.item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 6px 10px; border-radius: 6px;
  color: var(--text); text-decoration: none; font-weight: 400; background: none; border: 0; justify-content: flex-start;
}
.drop-menu a:hover, .drop-menu button.item:hover { background: var(--hover); color: var(--text); }
.drop-menu a[aria-current="true"] { background: var(--sel); color: var(--accent-text); font-weight: 600; }
.drop-menu .menu-head { padding: 6px 10px 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.drop-menu .menu-head b { display: block; }
.drop-menu form { margin: 0; }
.drop-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

.room-switch > summary {
  display: flex; align-items: center; gap: 6px; max-width: 46vw; padding: 5px 8px; border-radius: 6px; font-weight: 600;
}
.room-switch > summary:hover { background: rgba(255, 255, 255, 0.1); }
.room-switch .room-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu > summary { display: flex; align-items: center; gap: 8px; padding: 3px 6px 3px 3px; border-radius: 999px; }
.user-menu > summary:hover { background: rgba(255, 255, 255, 0.1); }
.topbar .drop-menu { color: var(--text); }        /* the menus of the dark top bar are light */
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent-weak); color: var(--brand);
  display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none;
}

/* The switcher of languages: the names in the languages themselves, no flags (W3C, language negotiation). */
.lang { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 7px; overflow: hidden; margin: 0; flex: none; }
.lang button {
  min-height: 28px; padding: 0 9px; border: 0; border-radius: 0; background: #fff; color: var(--muted);
  font-size: 12.5px; font-weight: 600;
}
.lang button:hover { background: var(--hover); color: var(--text); }
.lang button[aria-pressed="true"] { background: var(--text); color: #fff; }
.topbar > .lang { border-color: rgba(255, 255, 255, 0.32); }
.topbar > .lang button { background: transparent; color: var(--brand-muted); }
.topbar > .lang button:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.topbar > .lang button[aria-pressed="true"] { background: #fff; color: var(--brand); }

/* --- Layouts ------------------------------------------------------------------------------------------------- */
.page { max-width: 1280px; margin: 0 auto; padding: 22px 28px 40px; }
.page.narrow { max-width: 880px; }

/* Pages of a room: the menu of the room on the left, the content on the right. */
.shell { display: grid; grid-template-columns: min(var(--w-nav, var(--nav-width)), 30vw) minmax(0, 1fr); min-height: calc(100vh - var(--top)); }
/* The menu, its border and the content have their own places: the border lies over the right edge of the menu. */
.shell > .sidenav { grid-column: 1; grid-row: 1; }
.shell > main { grid-column: 2; grid-row: 1; }
.shell > .nav-resizer {
  grid-column: 1; grid-row: 1; justify-self: end; position: sticky; top: var(--top); height: calc(100vh - var(--top));
  margin: 0 -5px 0 0; z-index: 5;
}
.sidenav {
  position: sticky; top: var(--top); height: calc(100vh - var(--top)); overflow: auto; display: flex; flex-direction: column;
  gap: 2px; padding: 12px 8px; background: var(--nav-bg); border-right: 1px solid var(--line);
}
.sidenav a, .sidenav button.collapse {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 7px 10px; border-radius: 7px; white-space: nowrap;
  color: var(--nav); text-decoration: none; font-weight: 400; background: none; border: 0; justify-content: flex-start;
}
.sidenav a:hover, .sidenav button.collapse:hover { background: rgba(20, 35, 63, 0.06); color: var(--text); }
.sidenav a[aria-current="page"] { background: #fff; color: var(--accent-text); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); }
.sidenav .count { margin-left: auto; }
.sidenav .group-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 12px 10px 4px; font-weight: 600; }
.sidenav button.collapse { margin-top: 6px; color: var(--muted); font-weight: 400; font-size: 13px; }
.sidenav .whoami { margin-top: auto; padding: 10px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); white-space: normal; }
.sidenav .collapse .when-collapsed { display: none; }

/* The menu shrunk to icons: chosen with the button (remembered in the browser), or by itself on windows narrower than
   1400 points unless the person opened it there. */
.nav-collapsed .shell { grid-template-columns: var(--nav-icons) minmax(0, 1fr); }
.nav-collapsed .sidenav { align-items: center; padding: 12px 6px; }
.nav-collapsed .sidenav a, .nav-collapsed .sidenav button.collapse { width: 44px; height: 40px; min-height: 40px; justify-content: center; padding: 0; position: relative; }
.nav-collapsed .sidenav .label, .nav-collapsed .sidenav .group-label, .nav-collapsed .sidenav .whoami { display: none; }
.nav-collapsed .sidenav .count { position: absolute; top: 1px; right: -3px; margin: 0; }
.nav-collapsed .sidenav .group-sep { width: 32px; border-top: 1px solid var(--line); margin: 6px 0; }
.nav-collapsed .sidenav .collapse .when-collapsed { display: inline; }
.nav-collapsed .sidenav .collapse .when-open { display: none; }
@media (max-width: 1399px) {
  html:not(.nav-expanded) .shell { grid-template-columns: var(--nav-icons) minmax(0, 1fr); }
  html:not(.nav-expanded) .sidenav { align-items: center; padding: 12px 6px; }
  html:not(.nav-expanded) .sidenav a, html:not(.nav-expanded) .sidenav button.collapse { width: 44px; height: 40px; min-height: 40px; justify-content: center; padding: 0; position: relative; }
  html:not(.nav-expanded) .sidenav .label, html:not(.nav-expanded) .sidenav .group-label, html:not(.nav-expanded) .sidenav .whoami { display: none; }
  html:not(.nav-expanded) .sidenav .count { position: absolute; top: 1px; right: -3px; margin: 0; }
  html:not(.nav-expanded) .sidenav .group-sep { width: 32px; border-top: 1px solid var(--line); margin: 6px 0; }
  html:not(.nav-expanded) .sidenav .collapse .when-collapsed { display: inline; }
  html:not(.nav-expanded) .sidenav .collapse .when-open { display: none; }
}
.sidenav .group-sep { display: none; }
.nav-collapsed .sidenav .group-sep { display: block; }
@media (max-width: 1399px) { html:not(.nav-expanded) .sidenav .group-sep { display: block; } }
/* A narrower menu: long names end with "…" (the full name is in the title of the link). */
.sidenav .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1399px) { html:not(.nav-expanded) .nav-resizer { display: none; } }

.content { min-width: 0; display: flex; flex-direction: column; }
.content.fill { height: calc(100vh - var(--top)); overflow: hidden; }
.content-body { padding: 4px 20px 32px; }
.pagehead { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 14px 20px 10px; }
.pagehead h1 { font-size: 18px; margin: 0; }
.pagehead .sub { color: var(--muted); }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; color: var(--muted); font-size: 13px; }
.crumbs a, .crumbs button.crumb { color: var(--muted); text-decoration: none; background: none; border: 0; padding: 2px 4px; min-height: 0; font: inherit; font-weight: 400; border-radius: 4px; cursor: pointer; }
.crumbs a:hover, .crumbs button.crumb:hover { color: var(--text); background: var(--hover); }
.crumbs b { color: var(--text); font-weight: 600; padding: 2px 4px; }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 0 20px 10px; }
.tabs-nav { display: flex; gap: 2px; padding: 0 20px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; }
.tabs-nav a, .tabs-nav span {
  padding: 8px 10px 9px; color: var(--muted); font-weight: 500; text-decoration: none; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tabs-nav a:hover { color: var(--text); }
.tabs-nav [aria-current="page"] { color: var(--accent-text); border-color: var(--accent); }
.search-box { position: relative; display: inline-flex; align-items: center; }
.search-box svg { position: absolute; left: 9px; color: var(--label); pointer-events: none; }
.search-box input { padding-left: 30px; min-width: 260px; }
.find-id .search-box input, #tree-search { min-width: 310px; }   /* the long hints stay whole */

/* Cards, panels, tables. */
.panel { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.panel.danger-zone { border-color: #f1c7c2; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.facts { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 6px 16px; margin: 0 0 12px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.table-wrap { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: auto; max-height: calc(100vh - 220px); }
.table-wrap.plain { max-height: none; }
table.grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
table.grid th {
  position: sticky; top: 0; z-index: 2; background: #fff; text-align: left; font-weight: 600; color: var(--label);
  font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: bottom;
}
table.grid td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.grid tbody tr:hover td { background: var(--soft); }
table.grid td.count, table.grid th.count { text-align: right; font-variant-numeric: tabular-nums; }
table.grid tr:last-child td { border-bottom: 0; }
table.grid .sub { display: block; color: var(--muted); font-size: 12.5px; }

/* --- Portal: rooms as cards ------------------------------------------------------------------------------------ */
.portal-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.portal-head h1 { margin: 0 12px 0 0; }
.roomcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.card:hover { border-color: var(--line-strong); box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06); }
.card .cn { font-weight: 650; font-size: 15px; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.card .cn:hover { color: var(--accent-text); }
.card .cm { color: var(--muted); font-size: 13px; }
.card .stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--nav); }
.card .stats b { font-variant-numeric: tabular-nums; }
.card .go { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* --- Documents: folders on the left, the folder on the right, details ------------------------------------------- */
.split {
  flex: 1; min-height: 0; display: flex; margin: 0 20px 16px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; position: relative;
}
.pane { min-height: 0; overflow: auto; }
/* Widths: the kept width of the person (CSS variable from app/static/widths.js) or the default; on a smaller window
   the side panes give way down to their smallest width, the list keeps 360 points. */
.pane.folders { flex: 0 1 var(--w-tree, 260px); min-width: 180px; border-right: 1px solid var(--line); padding: 8px 6px; background: var(--soft); }
.pane.list { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.pane.list > .list-scroll { flex: 1; min-height: 0; overflow: auto; }
.pane.details { flex: 0 1 var(--w-info, 280px); min-width: 240px; border-left: 1px solid var(--line); padding: 14px 16px; background: var(--soft); }
.split.people .pane.folders { flex-basis: var(--w-groups, 260px); }
.split.people .pane.details { flex-basis: var(--w-person, 280px); }
@media (min-width: 860px) { .pane.list { min-width: 360px; } }

/* Borders between panes that people drag (Lev, 12.11.2026; app/static/widths.js): an invisible strip over the line
   between two panes, a line of the accent color under the mouse, while dragging and with the keyboard. */
.resizer { flex: none; position: relative; z-index: 4; width: 9px; margin: 0 -5px 0 -4px; cursor: col-resize; touch-action: none; }
.resizer::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 3px; border-radius: 2px; background: transparent;
}
.resizer:hover::after, .resizer.active::after, .resizer:focus-visible::after { background: var(--accent); }
.resizer:focus-visible { outline: none; }
html.resizing, html.resizing * { cursor: col-resize !important; user-select: none !important; }
.no-js .resizer { display: none; }
.nav-collapsed .nav-resizer, .details-closed .resizer[data-pane="info"] { display: none; }
.details-closed .pane.details { display: none; }
.pane.details h2 { font-size: 14px; margin: 0 0 4px; overflow-wrap: anywhere; display: flex; gap: 8px; align-items: flex-start; }
.pane.details .facts { grid-template-columns: 96px 1fr; font-size: 13px; margin: 12px 0 16px; }
.pane.details .sec { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--label); margin: 14px 0 6px; font-weight: 600; }
.rights-mini { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; font-size: 13px; align-items: center; }
.details-empty { color: var(--muted); font-size: 13px; }

ul.folder-tree, ul.folder-tree ul { list-style: none; margin: 0; padding: 0; }
ul.folder-tree ul { padding-left: 16px; }
.folder-item {
  display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 30px; padding: 0 6px; border-radius: 6px;
  color: var(--nav); white-space: nowrap; cursor: pointer; text-decoration: none;
}
.folder-item:hover { background: var(--hover); color: var(--text); }
[role="treeitem"]:focus { outline: none; }
[role="treeitem"]:focus-visible > .folder-item { outline: 2px solid var(--accent); outline-offset: -2px; }
[role="treeitem"][aria-selected="true"] > .folder-item { background: var(--sel); color: var(--accent-text); font-weight: 600; }
[role="treeitem"][aria-expanded="false"] > ul { display: none; }
.folder-item .chev { width: 18px; height: 18px; display: inline-grid; place-items: center; color: var(--label); flex: none; border-radius: 4px; }
.folder-item .chev:hover { background: var(--line); }
[role="treeitem"][aria-expanded="true"] > .folder-item .chev svg { transform: rotate(90deg); }
.folder-item .n { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 18px; font-size: 12.5px; }
[role="treeitem"][aria-selected="true"] > .folder-item .n { color: var(--accent-text); }
.folder-item .tx { overflow: hidden; text-overflow: ellipsis; }
.folder-item.path-only .tx { color: var(--muted); font-style: italic; }
.folder-item.drop-into { background: var(--accent-weak); box-shadow: inset 0 0 0 2px var(--accent); }
li.trash-node { margin-top: 8px; border-top: 1px dashed var(--line-strong); padding-top: 8px; }
.folder-item.drop-trash { background: var(--err-weak); box-shadow: inset 0 0 0 2px var(--err); }

.tree-box { min-height: 100%; }
.tree-box.drop-root { outline: 2px dashed var(--accent); outline-offset: -4px; background: var(--accent-weak); }
table.tree { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; user-select: none; }
table.tree th {
  position: sticky; top: 0; z-index: 2; background: #fff; text-align: left; font-weight: 600; color: var(--label);
  font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.tree td { padding: 0 10px; height: 38px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; vertical-align: middle; }
table.tree tr { cursor: default; }
table.tree tr:focus { outline: none; }
table.tree tr:focus-visible td { box-shadow: inset 0 0 0 2px var(--accent); }
table.tree tbody tr:hover td { background: var(--hover); }
table.tree tr.selected td { background: var(--sel); }
table.tree tr.cut td { opacity: 0.5; }
table.tree td.cb, table.tree th.cb { width: 34px; padding: 0 0 0 12px; }
table.tree td.num, table.tree td.pid, table.tree td.size, table.tree td.date { color: var(--muted); width: 1%; font-variant-numeric: tabular-nums; }
table.tree td.pid { font-family: var(--mono); font-size: 12.5px; }
table.tree td.name { width: 100%; max-width: 0; }
table.tree td.status { width: 1%; padding-right: 8px; }
table.tree td.path { color: var(--muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
table.tree .nm { display: flex; align-items: center; min-width: 0; gap: 0; }
table.tree .nm .doc-link, table.tree .nm .folder-name, table.tree .nm .trash-name { overflow: hidden; text-overflow: ellipsis; }
table.tree .doc-link { color: var(--text); text-decoration: none; font-weight: 500; }
table.tree .doc-link:hover { color: var(--accent-text); text-decoration: underline; }
table.tree .folder-name { font-weight: 600; }
table.tree tr.path-only .folder-name { font-weight: 400; color: var(--muted); }
table.tree .path-note { margin-left: 6px; font-size: 12px; }
table.tree tr.infected .doc-link { color: var(--err); text-decoration: line-through; }
table.tree tr.drop-into td { background: var(--accent-weak); box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
table.tree tr.drop-before td { box-shadow: inset 0 2px 0 var(--accent); }
table.tree tr.drop-after td { box-shadow: inset 0 -2px 0 var(--accent); }
table.tree tr.match .doc-link, table.tree tr.match .folder-name, table.tree tr.match .trash-name { background: #fff4c2; }
table.tree tr.trash-item td { color: var(--muted); cursor: grab; }
table.tree tr.trash-item .trash-name { color: var(--text); }
.empty-row td, .empty-tree { color: var(--muted); padding: 24px 12px !important; white-space: normal !important; height: auto !important; }
.toggle, .toggle-space { display: none; }
.more {
  visibility: hidden; flex: none; margin-left: 6px; min-height: 24px; width: 28px; padding: 0; color: var(--nav);
  background: #fff; border: 1px solid var(--line-strong); border-radius: 6px;
}
.more:hover { background: var(--hover); color: var(--text); }
table.tree tr:hover .more, table.tree tr.selected .more, table.tree tr:focus-within .more { visibility: visible; }

/* Without the page script the whole tree is one table with steps (it is still read and originals download). */
.no-js .pane.folders, .no-js .pane.details, .no-js .col-check, .no-js .statusbar .when-js { display: none; }
.no-js table.tree tr[data-depth] td.name { padding-left: calc(10px + var(--depth, 0) * 18px); }
table.tree td.name.depth-1 { --depth: 1; } table.tree td.name.depth-2 { --depth: 2; } table.tree td.name.depth-3 { --depth: 3; }
table.tree td.name.depth-4 { --depth: 4; } table.tree td.name.depth-5 { --depth: 5; } table.tree td.name.depth-6 { --depth: 6; }
table.tree td.name.depth-7 { --depth: 7; } table.tree td.name.depth-8 { --depth: 8; } table.tree td.name.depth-9 { --depth: 9; }
table.tree td.name.depth-10 { --depth: 10; }
.row-path { display: none; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.tree-box.searching .row-path { display: block; }
.tree-box.searching td.name { padding-top: 4px; padding-bottom: 4px; }
details.drop.disabled > summary { opacity: 0.45; pointer-events: none; }
table.tree tr.trash-item .sub { display: block; font-size: 12px; white-space: normal; }
.statusbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 16px; padding: 7px 12px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12.5px; background: var(--soft);
}
.statusbar .drop-hint { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.selection-actions { display: contents; }

/* File icons (own SVG files in app/static/icons, no icon fonts). */
span.icon { display: inline-block; flex: none; width: 20px; height: 20px; margin-right: 8px; background-repeat: no-repeat; background-size: contain; vertical-align: middle; }
.icon-folder { background-image: url("/static/icons/folder.svg"); }
.icon-file { background-image: url("/static/icons/file.svg"); }
.icon-pdf { background-image: url("/static/icons/pdf.svg"); }
.icon-word { background-image: url("/static/icons/word.svg"); }
.icon-excel { background-image: url("/static/icons/excel.svg"); }
.icon-slides { background-image: url("/static/icons/slides.svg"); }
.icon-image { background-image: url("/static/icons/image.svg"); }
.icon-archive { background-image: url("/static/icons/archive.svg"); }
.icon-mail { background-image: url("/static/icons/mail.svg"); }
.icon-text { background-image: url("/static/icons/text.svg"); }
.icon-drawing { background-image: url("/static/icons/drawing.svg"); }
.icon-video { background-image: url("/static/icons/video.svg"); }
.icon-trash { background-image: url("/static/icons/trash.svg"); }
.folder-item .icon { width: 18px; height: 18px; margin-right: 2px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; font-size: 12px; font-weight: 600; border-radius: 999px; background: var(--gray-weak); color: var(--gray); white-space: nowrap; }
.badge-pending, .badge-not_scanned { background: var(--warn-weak); color: var(--warn); }
.badge-infected { background: var(--err-weak); color: var(--err); }
/* In the narrow column of "Сведения" a long status wraps instead of going past the panel (check of 10.11.2026:
   "проверяется антивирусом" stood 14 points out at 1536 points). */
.facts dd .badge { white-space: normal; max-width: 100%; border-radius: 10px; }

/* Context menu and dialogs of the page scripts. */
.menu {
  position: absolute; z-index: 60; min-width: 230px; padding: 5px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow);
}
.menu button {
  display: flex; justify-content: space-between; gap: 24px; width: 100%; min-height: 32px; padding: 5px 10px; color: var(--text);
  text-align: left; background: none; border: 0; border-radius: 6px; font-weight: 400;
}
.menu button:hover, .menu button:focus { background: var(--hover); outline: none; color: var(--text); }
.menu button[disabled] { color: var(--muted); background: none; }
.menu hr { margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
.menu .keys { color: var(--muted); font-size: 12px; }
.dialog { width: min(560px, calc(100vw - 32px)); padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.dialog::backdrop { background: rgba(16, 24, 40, 0.38); }
.dialog h2 { margin: 0 0 10px; font-size: 16px; }
.dialog-form { display: flex; flex-direction: column; gap: 10px; }
.dialog-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
.dialog-form label.check { flex-direction: row; gap: 8px; align-items: center; font-weight: 400; }
.dialog-form fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px; }
.dialog-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; justify-content: flex-end; }
.picker { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: var(--soft); }
.picker .folder-item.chosen { background: var(--sel); color: var(--accent-text); font-weight: 600; }
.uploads {
  position: fixed; right: 16px; bottom: 16px; z-index: 45; width: min(440px, calc(100vw - 32px)); max-height: 40vh; overflow: auto;
  padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
}
.uploads-head { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.uploads ol { margin: 8px 0 0; padding-left: 20px; font-size: 13px; }
.uploads .hint { margin: 6px 0 0; }
.uploads .warning { margin: 6px 0 0; font-weight: 600; }
.upload-name { word-break: break-all; }

/* --- Q&A as a mailbox: the list with tabs on the left, the question on the right ------------------------------- */
.qa-split { flex: 1; min-height: 0; display: flex; margin: 0 20px 16px; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.qa-list { flex: 0 1 var(--w-qa, 460px); min-width: 300px; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.qa-tabs { display: flex; flex-wrap: wrap; gap: 0 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--line); flex: none; }
.qa-tabs a { padding: 7px 7px 9px; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; font-size: 13px; text-decoration: none; }
.qa-tabs a:hover { color: var(--text); }
.qa-tabs a[aria-current="page"] { color: var(--accent-text); border-color: var(--accent); }
.qa-tabs em { font-style: normal; color: var(--muted); margin-left: 3px; }
.qa-filters { padding: 8px 10px; border-bottom: 1px solid var(--line); flex: none; }
.qa-filters summary { cursor: pointer; color: var(--muted); font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.qa-filters form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.qa-filters select, .qa-filters input { min-height: 28px; font-size: 12.5px; padding: 3px 7px; }
.qa-filters .active { color: var(--accent-text); font-weight: 600; }
.qa-items { overflow: auto; flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none; }
.qi { border-bottom: 1px solid var(--line-soft); }
.qi a { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 14px 10px 12px; color: var(--text); text-decoration: none; }
.qi a:hover { background: var(--hover); }
.qi[aria-current="true"] a { background: var(--sel); box-shadow: inset 3px 0 0 var(--accent); }
.qi .dot { margin-top: 6px; }
.qi .head { font-weight: 500; display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.qi .head .who { color: var(--muted); font-weight: 400; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi .time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.qi .text { grid-column: 2 / 4; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qi .meta { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; color: var(--muted); font-size: 12px; }
.qi.unread .head, .qi.unread .text { color: var(--text); font-weight: 700; }
.qi.unread .head .who { font-weight: 600; }
.qa-empty { padding: 24px 16px; color: var(--muted); }
.qd { flex: 1 1 0; min-width: 0; overflow: auto; padding: 18px 22px 28px; }
@media (min-width: 860px) { .qd { min-width: 360px; } }
.qd .title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.qd .title h2 { font-size: 18px; margin: 0; }
.qd .sub { color: var(--muted); font-size: 13px; margin: 6px 0 12px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.qd .refs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ref { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 4px; border: 1px solid var(--line); border-radius: 6px; font-size: 12.5px; background: #fff; color: var(--text); text-decoration: none; max-width: 100%; }
.ref .icon { width: 18px; height: 18px; margin-right: 2px; }
a.ref:hover { border-color: var(--line-strong); color: var(--accent-text); }
.msg { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; background: #fff; }
.msg .mh { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.msg .mh b { color: var(--text); font-weight: 600; }
.msg .body, .qa-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.answer { border-color: #b9dcc4; background: #f6fbf7; }
.msg.review { border-color: #f1d48a; background: #fffbf0; }
.msg.assign { background: var(--soft); }
.msg.declined { border-color: #f1c7c2; background: #fff8f7; }
.msg form { margin-top: 10px; }
.qd details.more-actions { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
.qd details.more-actions > summary, .qd details.sub-form > summary { cursor: pointer; color: var(--accent-text); font-weight: 500; margin: 6px 0; }
.qd .action-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.qd .history { font-size: 13px; }
.qd .back-link { display: none; }
.qa-placeholder { flex: 1; display: grid; place-items: center; color: var(--muted); padding: 24px; text-align: center; }

/* --- Viewer: one bar on top, pages on gray, the side panel with details and questions ------------------------- */
.viewer-shell { display: grid; grid-template-rows: 52px minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) 300px; height: 100vh; background: #fff; }
.viewer-shell.side-closed { grid-template-columns: minmax(0, 1fr) 0; }
.vbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid var(--line); background: #fff; min-width: 0; }
.vbar .docname { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.vbar .docname b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vbar .back { color: var(--muted); }
.vtools { display: flex; align-items: center; gap: 6px; color: var(--nav); flex: none; }
.vtools input { width: 52px; text-align: center; min-height: 28px; padding: 2px 4px; }
.zoom-text { min-width: 48px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
.vactions { display: flex; align-items: center; gap: 6px; flex: none; }
.vcanvas { background: #eceef1; overflow: auto; padding: 22px 16px 40px; min-height: 0; }
.vcanvas > .notice, .vcanvas > .error, .vcanvas > .warning { max-width: 900px; margin: 0 auto 14px; }
.pages { width: min(100%, 900px); margin: 0 auto; }
.page-sheet { margin: 0 0 16px; background: #fff; box-shadow: 0 2px 10px rgba(16, 24, 40, 0.18); scroll-margin-top: 16px; }
.page-sheet img, .page-sheet canvas { display: block; width: 100%; height: auto; user-select: none; }
.page-sheet canvas { background: #f6f8fa; }
.vside { border-left: 1px solid var(--line); padding: 14px 16px; overflow: auto; background: var(--soft); min-height: 0; }
.side-closed .vside { display: none; }
.vside .sec { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--label); margin: 14px 0 6px; font-weight: 600; }
.vside .sec:first-child { margin-top: 0; }
.vside .facts { grid-template-columns: 96px 1fr; font-size: 13px; }
.mini-q { display: block; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: #fff; font-size: 13px; color: var(--text); text-decoration: none; }
a.mini-q:hover { border-color: var(--line-strong); }
.mini-q .r { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.versions { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.versions li { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: #fff; overflow-wrap: anywhere; }
.versions .r { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.versions .sub { color: var(--muted); font-size: 12.5px; }
.print-note { display: none; }
@media print {
  .topbar, .vbar, .vcanvas, .vside, .bottom-nav { display: none !important; }
  .viewer-shell { display: block; height: auto; }
  .print-note { display: block; margin: 32px; font-size: 1.2em; }
}

/* --- Rights of groups: levels as colored labels ---------------------------------------------------------------- */
.legend { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.lvl {
  display: inline-flex; min-width: 92px; justify-content: center; align-items: center; min-height: 24px; padding: 0 8px;
  border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid transparent; white-space: nowrap;
}
button.lvl { cursor: pointer; font-family: inherit; }
button.lvl:hover { border-color: var(--control); }
.lvl-hidden { background: #f0f1f4; color: #5b6576; }
.lvl-view { background: var(--accent-weak); color: var(--accent-text); }
.lvl-print { background: var(--teal-weak); color: var(--teal); }
.lvl-download_pdf { background: var(--violet-weak); color: var(--violet); }
.lvl-download_original { background: var(--ok-weak); color: var(--ok); }
.lvl-full { background: var(--ok-weak); color: var(--ok); }
.lvl.inherited { background: transparent; border: 1px dashed var(--line-strong); color: var(--muted); font-weight: 500; }
button.lvl.inherited:hover { border-color: var(--control); }
.legend .lvl { min-width: 0; }
table.matrix th.g { text-align: center; min-width: 120px; white-space: normal; }
table.matrix td.lv { text-align: center; vertical-align: middle; padding: 5px 8px; }
table.matrix th.stick, table.matrix td.stick { position: sticky; left: 0; z-index: 1; background: #fff; }
table.matrix th.stick { z-index: 3; }
table.matrix td.num.stick { min-width: 56px; }
/* The column of names (Lev, 12.11.2026): names in one line with the steps of the levels, the width dragged by the
   border in the head of the column (--w-name, app/static/widths.js), a long name ends with "…", whole in its title. */
table.matrix td.name.stick, table.matrix th.name.stick { left: 56px; white-space: nowrap; }
table.matrix td.num, table.matrix td.name { vertical-align: middle; }
table.matrix .nm { display: flex; align-items: center; width: var(--w-name, 320px); min-width: 0; }
table.matrix th.name .nm { display: block; overflow: hidden; text-overflow: ellipsis; }
table.matrix .nm .tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* A phone: no border to drag; the names take less than half of the screen, so a column of levels is in sight. */
@media (max-width: 599px) { table.matrix .nm { width: 44vw; } }
table.matrix td.name .icon { width: 18px; height: 18px; margin-right: 6px; flex: none; }
table.matrix .depth-pad { display: inline-block; flex: none; }
table.matrix th .resizer { position: absolute; top: 0; bottom: 0; right: -5px; margin: 0; }
/* Folders open and close (Lev, 12.11.2026): the rows of a folder come from the server when it is opened. */
table.matrix .chev {
  width: 22px; height: 22px; flex: none; display: inline-grid; place-items: center; padding: 0; margin: 0 2px 0 -4px;
  border: 0; border-radius: 4px; background: none; color: var(--label); cursor: pointer;
}
table.matrix button.chev:hover { background: var(--line); }
table.matrix tr.open > td .chev svg { transform: rotate(90deg); }
table.matrix .chev.wait svg { opacity: 0.35; }
/* A closed folder with a level of this group set somewhere inside: a mark next to the level (else it is unseen). */
.inside { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); vertical-align: middle; flex: none; }
table.matrix .inside { display: none; margin-left: 5px; }
table.matrix tr.folder:not(.open) .inside { display: inline-block; }
table.matrix tr.root td { background: var(--soft); font-weight: 600; }
table.matrix tr.target td, table.matrix tr.found td { background: #fff8d6; }
table.matrix tr.more td { color: var(--muted); font-style: italic; background: var(--soft); }
.rights-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- Sign-in pages: a card in the middle ------------------------------------------------------------------------ */
.auth-page { min-height: calc(100vh - var(--top)); display: flex; flex-direction: column; align-items: center; padding: 40px 16px 48px; }
/* The logo with the subtitle above the card (decision of Lev 12.11.2026): 400 px wide, the subtitle in the language
   of the page (auth.html). */
.auth-brand { display: block; width: min(400px, 100%); margin: 0 0 28px; }
.auth-brand img { display: block; width: 100%; height: auto; }
.auth-card { width: min(440px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px 28px; box-shadow: 0 2px 14px rgba(16, 24, 40, 0.06); }
.auth-card.wide { width: min(620px, 100%); }
.auth-card h1 { font-size: 20px; }
.auth-card .form { max-width: none; }
.auth-card .form button[type="submit"] { align-self: stretch; min-height: 38px; }
.auth-links { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.qr { margin: 8px 0; }
.qr-code { display: block; background: #fff; }
.secret {
  display: inline-block; margin-top: 4px; padding: 4px 8px; font-size: 1.05em; letter-spacing: 0.05em; background: var(--soft);
  border: 1px solid var(--line); border-radius: 6px; word-break: break-all; font-family: var(--mono);
}

/* --- Bottom menu of a phone ------------------------------------------------------------------------------------ */
.bottom-nav { display: none; }

/* --- Narrower screens ------------------------------------------------------------------------------------------ */
@media (max-width: 1099px) {
  .pane.details { position: absolute; right: 0; top: 0; bottom: 0; z-index: 5; box-shadow: var(--shadow); width: 280px; }
  html:not(.details-open) .pane.details { display: none; }
  .resizer[data-pane="info"], .resizer[data-pane="person"] { display: none; }   /* the panel lies over the list */
  .viewer-shell { grid-template-columns: minmax(0, 1fr) 0; }
  .viewer-shell .vside { display: none; }
  .viewer-shell.side-open { grid-template-columns: minmax(0, 1fr) 280px; }
  .viewer-shell.side-open .vside { display: block; }
  .qa-list { flex-basis: var(--w-qa, 380px); }
  /* Signed in: the mark alone. The four links of the platform administrator, the languages and the menu of the person
     need 1012 points next to the mark and TABLINUM (measured 12.11.2026 at 900 and 1024 points). */
  .topbar.signed-in .logo .logo-name { display: none; }
}
@media (max-width: 859px) {
  .pane.folders { display: none; }
  .qa-split.has-question .qa-list { display: none; }
  .qa-split:not(.has-question) .qd { display: none; }
  .qa-list { flex: 1 1 auto; min-width: 0; width: 100%; border-right: 0; }
  .resizer[data-pane="tree"], .resizer[data-pane="groups"], .resizer[data-pane="qa"] { display: none; }
  .qd .back-link { display: inline-flex; margin-bottom: 8px; }
  .page { padding: 16px; }
  .search-box input { min-width: 180px; }
  .vtools .zoom-group { display: none; }
  /* Signed in, the top bar on a tablet: the name of the person and the languages go into the menu of the person, as on
     a phone, and the links get narrower. Measured 12.11.2026: the four links of the platform administrator needed 853
     points (85 more than a tablet of 768), the switcher of rooms with a long name 664 (64 more than 600); now both fit
     from 600 to 859. */
  .topbar { gap: 8px; }
  .topbar.signed-in > .lang { display: none; }
  .user-menu .user-name { display: none; }
  .mobile-lang { display: flex !important; }
  .top-links a { padding: 6px 7px; }
}
@media (max-width: 599px) {
  :root { --top: 52px; }
  body { font-size: 15px; }
  .topbar { gap: 8px; padding: 0 8px 0 10px; }
  .logo .logo-name, .topbar .vsep, .top-links, .user-menu .user-name { display: none; }
  .topbar:not(.signed-in) .logo .logo-name { display: block; }   /* not signed in: the name fits next to the languages */
  .topbar.signed-in > .lang { display: none; }
  .room-switch > summary { max-width: 58vw; }
  .shell { display: block; padding-bottom: calc(var(--bottom) + env(safe-area-inset-bottom, 0px)); }
  .sidenav, .resizer { display: none; }      /* one pane at a time: no borders to drag (Lev, 12.11.2026) */
  .content.fill { height: calc(100vh - var(--top) - var(--bottom)); }
  .pagehead { padding: 10px 12px 8px; }
  .toolbar { padding: 0 12px 8px; }
  /* The toolbar of the documents in one short row: the actions on the selected rows appear when something is selected
     (every row also has its menu "..."), Excel and the actions show icons only, their names stay for screen readers. */
  #tree-toolbar .vsep, #tree-toolbar .spacer { display: none; }
  #tree-toolbar button.ghost[disabled] { display: none; }
  #tree-toolbar button.ghost, #tree-toolbar > a.btn { font-size: 0; gap: 0; width: 40px; padding: 0; }
  .content-body { padding: 4px 12px 24px; }
  .split, .qa-split { margin: 0 0 0; border-radius: 0; border-left: 0; border-right: 0; }
  .tabs-nav { padding: 0 12px; }
  .search-box { flex: 1 1 100%; }
  .search-box input, .find-id .search-box input, #tree-search { min-width: 0; width: 100%; }
  .find-id { flex: 1 1 100%; flex-wrap: nowrap; }
  .find-id .search-box { flex: 1 1 auto; }
  button, .btn { min-height: 40px; }
  button.icon, .btn.icon { width: 40px; }
  .lang button { min-height: 36px; }
  table.tree td { height: 52px; }
  table.tree td.pid, table.tree td.date, table.tree th.pid, table.tree th.date, table.tree td.num, table.tree th.num { display: none; }
  table.tree .more { visibility: visible; width: 36px; min-height: 36px; }
  .statusbar .drop-hint { display: none; }
  .page { padding: 14px 12px 28px; }
  .roomcards { grid-template-columns: 1fr; }
  .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    height: calc(var(--bottom) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #fff; border-top: 1px solid var(--line);
  }
  .bottom-nav > a, .bottom-nav > details > summary {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--bottom);
    font-size: 11.5px; color: var(--muted); text-decoration: none; position: relative;
  }
  .bottom-nav > a[aria-current="page"] { color: var(--accent-text); font-weight: 600; }
  .bottom-nav .count { position: absolute; top: 6px; left: 56%; font-size: 10px; line-height: 15px; min-width: 15px; padding: 0 4px; }
  .bottom-nav details.drop { position: static; }
  .bottom-nav .drop-menu { position: fixed; left: 8px; right: 8px; bottom: calc(var(--bottom) + 8px); top: auto; max-width: none; }
  .viewer-shell { grid-template-rows: 52px minmax(0, 1fr) 56px; }
  .vbar .vtools, .vbar .vactions { display: none; }
  .vbottom { display: flex !important; grid-column: 1 / -1; align-items: center; justify-content: space-around; border-top: 1px solid var(--line); background: #fff; }
  .vbottom .btn, .vbottom button { min-height: 40px; }
  .viewer-shell.side-open { grid-template-columns: minmax(0, 1fr) 0; }
  .viewer-shell.side-open .vside { display: block; position: fixed; inset: 52px 0 56px 0; z-index: 30; }
  .qd { padding: 14px 12px 24px; }
  .qd .action-row .btn, .qd .action-row button { flex: 1 1 auto; }
  .auth-page { padding: 20px 12px; }
  .auth-brand { width: min(340px, 100%); margin-bottom: 20px; }
  .auth-card { padding: 20px 16px; }
  .mobile-lang { display: flex !important; }
  /* The archives of the page "Скачивания" as cards, one under another: in the check of 11.11.2026 the table was 716
     points wide on a phone of 390, the password was cut and "Скачать" and "Удалить" were off the screen. */
  table.archives thead { display: none; }
  table.archives, table.archives tbody, table.archives tr, table.archives td { display: block; width: 100%; }
  table.archives tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.archives td, table.archives td.count { padding: 2px 0; border: 0; text-align: left; }
  table.archives td.actions { padding-top: 8px; }
}
@media (max-width: 359px) {
  /* The mark and TABLINUM (181 points) and the languages (130) do not fit into a phone of 320: the mark alone. */
  .topbar:not(.signed-in) .logo .logo-name { display: none; }
}
.vbottom { display: none; }
.mobile-lang { display: none; }
.depth-pad { display: inline-block; width: 0; }
.depth-pad.pad-1 { width: 0; } .depth-pad.pad-2 { width: 14px; } .depth-pad.pad-3 { width: 28px; }
.depth-pad.pad-4 { width: 42px; } .depth-pad.pad-5 { width: 56px; } .depth-pad.pad-6 { width: 70px; }
.depth-pad.pad-7 { width: 84px; } .depth-pad.pad-8 { width: 98px; } .depth-pad.pad-9 { width: 112px; }
.depth-pad.pad-10 { width: 126px; }

/* --- People and groups of a room on one page (plan and mockup confirmed by Lev 10.11.2026): the groups on the left,
   the people of the chosen group, the panel "Сведения" of the chosen person (app/templates/room_members.html). ----- */
.page-notes { padding: 0 20px; }
.page-notes .notice, .page-notes .error { margin-bottom: 10px; }
.btn.small, button.small { min-height: 28px; padding: 0 10px; font-size: 13px; }
/* The list of groups scrolls, not the pane: the form "Новая группа" opens over the people, wider than the pane. */
.pane.folders.groups-pane { display: flex; flex-direction: column; gap: 8px; overflow: visible; }
.groups-pane .new-group { align-self: flex-start; margin: 2px 2px 0; }
.group-list { list-style: none; margin: 0; padding: 0; }
.groups-pane .group-list { flex: 1; min-height: 0; overflow: auto; }
.group-item {
  display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 32px; padding: 0 8px; border-radius: 6px;
  color: var(--nav); text-decoration: none; white-space: nowrap;
}
.group-item:hover { background: var(--hover); color: var(--text); }
.group-item[aria-current="page"] { background: var(--sel); color: var(--accent-text); font-weight: 600; }
.group-item .tx { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.group-item .n { color: var(--muted); font-size: 12.5px; font-weight: 400; font-variant-numeric: tabular-nums; }
.group-item[aria-current="page"] .n { color: var(--accent-text); }
.group-item .mark {
  font-size: 10.5px; font-weight: 600; line-height: 16px; padding: 0 5px; border-radius: 999px;
  background: var(--violet-weak); color: var(--violet);
}
.group-item.group-all { margin-bottom: 6px; }
.group-item.drop-into { background: var(--accent-weak); box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent-text); }
.people-list { min-width: 0; }
.group-switch { display: none; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.group-switch select { flex: 1; min-width: 0; }
.group-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.group-head h2 { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.group-head .drop-menu .item-off { margin: 0; padding: 6px 10px; color: var(--faint); cursor: default; }
.group-head .drop-menu .item-off .hint { display: block; font-size: 12px; white-space: normal; }
.drop-menu button.item.danger { color: var(--err); }
.drop-form { padding: 12px 14px; min-width: 300px; }
.drop-form .form { max-width: none; }
.drop-form .hint { margin: 10px 0 0; }
.drop-menu.invite-form { width: min(420px, 92vw); max-width: min(420px, 92vw); max-height: 80vh; }
.people-form { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.people-form .list-scroll { flex: 1; min-height: 0; overflow: auto; }
.people-form .list-scroll:focus { outline: none; }
.people-toolbar { padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.people-table { user-select: none; }
/* Cells a little narrower than in other tables: on a laptop of 1536 points with the room menu open the list of
   everyone fits without scrolling sideways (check of 10.11.2026: 9 points too wide). */
table.people-table th, table.people-table td { padding-left: 8px; padding-right: 8px; }
table.people-table td { vertical-align: middle; }
table.people-table th.cb, table.people-table td.cb { width: 34px; padding-right: 0; }
table.people-table .col-group { display: none; }
table.people-table.show-group .col-group { display: table-cell; }
table.people-table .col-more { width: 36px; padding: 0 4px; }
table.people-table tbody tr.selected td { background: var(--sel); }
table.people-table tbody tr.current td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
table.people-table .person-link { color: var(--text); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
table.people-table .person-link:hover { color: var(--accent-text); text-decoration: underline; }
table.people-table tr:hover .more, table.people-table tr.selected .more, table.people-table tr:focus-within .more { visibility: visible; }
.empty-list { margin: 0; padding: 24px 16px; color: var(--muted); }
.people-details .panel-head { display: flex; align-items: flex-start; gap: 8px; }
.people-details .panel-head h2 { flex: 1; }
.people-details form { margin: 0 0 10px; }
.people-details .hint { margin: 0 0 8px; font-size: 12.5px; }
.people-details .details-empty p { margin: 0 0 10px; }
.panel-form { display: flex; flex-direction: column; gap: 6px; }
.panel-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--label); }
.panel-form select { width: 100%; font-weight: 400; }
.panel-form button { align-self: flex-start; }
.dialog-names { margin: 0; padding-left: 20px; max-height: 30vh; overflow: auto; }
@media (max-width: 859px) {
  .group-switch { display: flex; }
  .pane.folders.groups-pane { display: none; }   /* the groups are the list above the people */
}
@media (max-width: 599px) {
  .page-notes { padding: 0 12px; }
  table.people-table .col-role, table.people-table .col-date { display: none; }
  table.people-table .more { visibility: visible; width: 36px; min-height: 36px; }
  .people-toolbar button.ghost[disabled] { display: none; }
}
/* Without the page script the groups are links and the actions forms, so both panes stay (the documents hide theirs). */
@media (min-width: 860px) { .no-js .pane.folders.groups-pane { display: flex; } }
@media (min-width: 1100px) { .no-js .pane.details.people-details { display: block; } }

/* --- Personal data: the act of destruction, printed on paper (app/templates/pd_act.html) -------------------------- */
.act { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 24px 28px; margin-top: 12px; }
.act h1 { text-align: center; font-size: 20px; margin: 0 0 4px; }
.act .act-date { text-align: center; margin: 0 0 18px; }
table.act-fields { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
table.act-fields th, table.act-fields td { text-align: left; vertical-align: top; padding: 7px 8px; border: 1px solid var(--line); }
table.act-fields th { width: 34%; font-weight: 600; }
table.act-fields td { overflow-wrap: anywhere; }
ul.plain { margin: 0; padding-left: 18px; }
.blank { display: inline-block; width: 100%; max-width: 260px; min-height: 1.2em; border-bottom: 1px solid var(--text); }
table.act-sign { width: 100%; border-collapse: collapse; margin: 18px 0 12px; }
table.act-sign td { width: 33%; padding: 6px 8px 2px; }
table.act-sign .sign-line { border-bottom: 1px solid var(--text); }
table.act-sign tr.hint td { padding-top: 0; font-size: 12px; }
@media (max-width: 599px) {
  .act { padding: 14px 12px; }
  table.act-fields th, table.act-fields td { padding: 6px; }
}
@media print {
  .no-print { display: none !important; }
  .act { border: 0; padding: 0; margin: 0; }
  .page { padding: 0; max-width: none; }
}

/* Documents for the users (app/legal.py): the footer of the pages, public pages, the acceptance screen. */
/* The sign-in card leaves room for the footer on the first screen. */
.auth-page { min-height: calc(100vh - var(--top) - 64px); }
.site-footer { padding: 16px 16px 28px; border-top: 1px solid var(--line-soft); font-size: 13px; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent-hover); }
.legal-dialog { width: min(620px, calc(100vw - 32px)); }
.legal-dialog .legal-text p { margin: 0 0 8px; }
.legal-text h2 { font-size: 17px; margin: 22px 0 8px; }
.legal-text h3 { font-size: 15px; margin: 16px 0 6px; }
.legal-text p, .legal-text li { line-height: 1.55; overflow-wrap: anywhere; }
.legal-text ol, .legal-text ul { padding-left: 22px; }
.legal-note { font-style: italic; color: var(--muted); }
.legal-gap { font-style: italic; color: var(--muted); }
.legal-draft-mark { color: var(--warn); font-weight: 700; }
.legal-draft { background: var(--warn-weak); color: var(--warn); }
.legal-box { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 2px 16px 12px; margin: 10px 0 6px; background: var(--soft); }
.legal-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form label.legal-tick { align-items: flex-start; }
.legal-tick input { margin-top: 3px; flex: none; }
.legal-decline { margin-top: 12px; }
.legal-list { padding-left: 20px; }
.legal-list li { margin: 6px 0; }
.legal-page .grid + .hint { margin-top: 12px; }