/* The plain pages' own styles (sign-in, library, admin, overview, not found, Геовед's home, sites and documents),
 * on the kit's tokens (style.css): the survey-document look, ruled lists, square pictures, serif titles.
 *
 * Every colour is a variable of style.css (rule 2 there: a literal here is a colour the dark theme cannot reach), no
 * inline styles anywhere (CSP): what a script sizes it sets through the CSSOM. Linked by the page templates only; the
 * workspace pages do not load it.
 */

/* ---------- cards: a titled section, its heading ruled off ---------- */
.wrap > .card, .wrap > section.card { margin-bottom: 22px; overflow: hidden; }
.card-hd { display: flex; align-items: baseline; gap: 14px; padding: 16px 22px 12px; border-bottom: 1px solid var(--rule); }
.card-hd h2 { font-family: var(--serif); font-size: 20px; font-weight: 700; margin: 0; letter-spacing: 0; color: var(--ink); }
.card-hd h2 .h-sub, .h-sub { color: var(--faint); font-family: var(--narrow); font-weight: 400; letter-spacing: 0; font-size: 16px; }
.card-hd p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; max-width: 88ch; }
.card-bd { padding: 20px 22px; }
.mono { font-family: var(--mono); }
.back { font-family: var(--narrow); font-size: 14px; font-weight: 700; color: var(--accent-ink); text-decoration: none; }
.back:hover { text-decoration: underline; }
.err-lines { white-space: pre-line; }
.empty { color: var(--muted); font-size: 13.5px; margin: 4px 0 8px; font-style: italic; }

/* ---------- the library: "My maps" ---------- */
.viewing-bar { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.viewing-bar b { color: var(--ink); }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 20px;
  border: 1px dashed var(--muted); border-radius: 0; background: var(--inset); transition: border-color .12s, background .12s; }
.dropzone.over { border-color: var(--accent); border-style: solid; background: var(--accent-soft); }
.dz-hint { margin: 0; font-size: 13px; color: var(--faint); }
.pdf-hint { margin: 0; font-size: 12px; color: var(--faint); }
.upbar { height: 4px; margin-top: 12px; border-radius: 0; background: var(--line2); overflow: hidden; }
.upbar-fill { height: 100%; width: 0%; background: var(--accent); transition: width .3s linear; }
.upbar.working .upbar-fill { animation: chip-pulse 1.2s ease-in-out infinite; }  /* one file: nothing to count */
.warm-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.warm-row .hint { margin: 0; }
#card-upload .err { margin-top: 10px; }

/* the recently opened maps (L3): one line under the maps page's head (the maps page's block below), as Скановед's
   reports opened last (the owner, 2026-11-02: «repeat the same system»; scanoved/web/src/index.css `.lib-last`): the
   last opened in full, its folder cut first, then after a hairline up to three before it, a small picture and a name
   each, at most 150px; below 960px the last one alone */
.last-main { flex: 1 1 0; display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none;
  color: var(--ink); }
.last-main:hover .last-name { color: var(--accent-ink); }
.last-thumb, .last-more-thumb { flex: none; width: 48px; height: 36px; border: 1px solid var(--line); border-radius: 0;
  overflow: hidden; background: repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%) 50% / 8px 8px; }
.last-thumb img, .last-more-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.last-label { flex: none; font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-ink); }
.last-name { min-width: 0; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.last-path { flex: 1 1 0; min-width: 0; font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.last-more { flex: 0 1 auto; display: flex; align-items: center; gap: 14px; min-width: 0; padding-left: 18px;
  border-left: 1px solid var(--line2); }
.last-more-item { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 150px; text-decoration: none;
  color: var(--muted); font-size: 13px; }
.last-more-item:hover { color: var(--accent-ink); }
.last-more-thumb { width: 32px; height: 24px; background-size: 6px 6px; }
.last-more-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- the library: the finder (L1, L4) ---------- */
.lib-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 10px 22px; border-bottom: 1px solid var(--line); }
.pathbar { flex: 1 1 260px; min-width: 0; }
.path { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  font-family: var(--narrow); font-size: 14px; }
.path li { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.path-sep { color: var(--faint); padding: 0 3px; }
.path-part { color: var(--accent-ink); font-weight: 700; text-decoration: none; padding: 2px 6px; border-radius: 0;
  border: 1px solid transparent; max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.path-part:hover { background: var(--panel2); }
.path-part.current { color: var(--ink); cursor: default; }
.lib-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sortswitch { display: inline-flex; height: var(--h-ctl); border: var(--btn-bw) solid var(--btn-line); border-radius: var(--btn-r);
  overflow: hidden; }
.sortswitch .tool { border: 0; border-radius: 0; box-shadow: none; border-right: 1px solid var(--btn-line); }
.sortswitch .tool:last-child { border-right: 0; }
.sortswitch .tool[aria-pressed="true"] { background: var(--go-soft); color: var(--go-ink); }
.sortswitch .tool:focus-visible { box-shadow: var(--ring-in); }  /* inside the clipped switch */
.lib-bd { padding-top: 6px; }

.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: minmax(200px, 1.4fr) minmax(0, 2fr) auto; align-items: center; gap: 8px 16px;
  padding: 9px 6px; border-bottom: 1px solid var(--line2); border-radius: 0; position: relative;
  transition: background .12s, box-shadow .12s; }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--panel2); }
.row.dragging { opacity: .45; }
.row.drop-over, .path-part.drop-over { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.row-folder { padding-top: 6px; padding-bottom: 6px; }
.row-main { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: var(--ink); }
.row-main:hover .row-name { color: var(--accent-ink); }
.row-main:has(.row-from:hover) .row-name { color: inherit; }  /* the «из …» line leads elsewhere: the name stays still */
.row-thumb { flex: none; width: 64px; height: 48px; border: 1px solid var(--line); border-radius: 0; overflow: hidden;
  background: repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%) 50% / 10px 10px; }
.row-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* A folder drawn in CSS (no icon font, no inline SVG per row): an outlined tab and body, as on a survey's index. */
.folder-icon { flex: none; position: relative; width: 30px; height: 21px; margin: 0 17px; border-radius: 0;
  background: var(--panel2); border: 1px solid var(--muted); }
.folder-icon::before { content: ""; position: absolute; left: -1px; top: -5px; width: 13px; height: 5px; border-radius: 0;
  background: var(--panel2); border: 1px solid var(--muted); border-bottom: 0; }
.row-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.row-name { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { font-size: 12px; color: var(--faint); }
.row-chips { min-width: 0; }
.row-acts { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; position: relative; }
.row-acts .tool { height: var(--h-ctl); padding: 0 10px; font-size: 13px; }
.row-acts .act-menu { width: var(--h-ctl); padding: 0; justify-content: center; }
.menu { position: fixed; inset: auto; margin: 0; min-width: 210px; flex-direction: column; overflow: auto;
  padding: 4px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--btn-r); box-shadow: var(--shadow-menu); }
.menu:popover-open { display: flex; }
.menu-item { flex-shrink: 0; min-height: 30px; text-align: left; font: inherit; font-family: var(--sans); font-size: 13.5px; color: var(--ink);
  background: none; border: 0; border-radius: calc(var(--btn-r) - 1px); padding: 0 10px; cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: var(--panel2); }
.menu-item[data-act="delete"] { color: var(--bad-ink); }

/* a map's block chips: one faint tray per row of the overview (the owner's call, 2026-10-17) */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-wait { color: var(--faint); font-size: 12px; }
.chip-group { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 2px; border-radius: 0; background: transparent;
  border: 1px dotted var(--line); }
.bchip { font-size: 12px; padding: 0 6px; text-decoration: none; }
.bchip:hover { border-color: currentColor; }
.chip-empty { color: var(--faint); background: transparent; }

/* the "Move to…" tree */
.tree { list-style: none; margin: 0; padding: 2px; max-height: 50vh; overflow-y: auto; border: 1px solid var(--line);
  border-radius: 0; background: var(--inset); }
.tree-item { padding-left: calc(var(--depth, 0) * 18px); }
.tree-item label { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 0; cursor: pointer;
  font-size: 13px; color: var(--ink); }
.tree-item label:hover { background: var(--panel2); }
.tree-item.off label { color: var(--faint); cursor: default; }

/* ---------- admin ---------- */
.adm-scroll { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-table th { text-align: left; font-family: var(--narrow); font-size: 14px; font-weight: 700; color: var(--ink); padding: 6px 10px;
  border-bottom: 2px solid var(--rule); white-space: nowrap; }
.adm-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.adm-name { font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.adm-full { color: var(--bad); font-weight: 700; }
.adm-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.adm-acts .tool { font-size: 13px; padding: 3px 9px; text-decoration: none; }
.adm-new { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.adm-new label { display: flex; flex-direction: column; gap: 4px; font-family: var(--narrow); font-size: 14px; font-weight: 700; color: var(--ink); }
.adm-new input { font-size: 13px; min-width: 0; }
/* The kit styles text and number fields; a password field is one more of the same kind. */
input[type=password] { font-family: var(--sans); font-size: 13px; background: var(--field); color: var(--ink);
  border: 1px solid var(--line); border-radius: 2px; padding: 6px 8px; box-shadow: none; }
#adm-status:empty { display: none; }

/* ---------- the overview ---------- */
.mapbar { max-width: 1180px; margin: 0 auto; padding: 16px 24px 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mapbar-dims { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.mapbar + .wrap { padding-top: 14px; }
.mp-hero { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.mp-visual { flex: 0 0 340px; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 12px; }
.mp-picture { position: relative; }
.mp-original { position: absolute; right: 8px; bottom: 8px; padding: 4px 10px; border-radius: 4px; font-size: 12.5px;
  font-weight: 600; color: var(--on-fill); background: var(--ink); text-decoration: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.mp-original:hover { filter: brightness(1.25); }
.mp-original:focus-visible { outline: none; box-shadow: var(--ring); }
.mp-thumb { display: block; width: 100%; aspect-ratio: 4 / 5; border: 1px solid var(--rule); cursor: zoom-in;
  border-radius: 0; overflow: hidden;
  background: repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%) 50% / 16px 16px; }
.mp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mp-meta { flex: 1 1 260px; min-width: 0; }
/* «О карте»: what Геовед knows of the sheet, above the file's own facts */
.mp-about { margin: 0 0 14px; }
.mp-about-h { margin: 0 0 4px; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.mp-about-title { margin: 0 0 10px; font-family: var(--serif); font-size: 16px; line-height: 1.35; color: var(--ink); }
.mp-about .mp-facts a { color: var(--accent-ink); }
/* where the map comes from (the one «из …» line, its height kept before map.js draws it) and the way to its file in
   the other programs («в Геоведе →», «в Скановеде →») */
.mp-from { min-height: 20px; margin: 0 0 10px; font-size: 13.5px; }
.mp-from .from, .mp-from .from > span:not(.glyph) { display: inline; white-space: normal; }  /* room for it whole */
.mp-from .from > .glyph { margin-right: 6px; vertical-align: -1px; }
.mp-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; font-size: 13px; }
.mp-links a { color: var(--accent-ink); text-decoration: none; }
.mp-links a:hover { text-decoration: underline; }
.mp-tech { padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.mp-title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.mp-name { flex: 1; min-width: 0; font-family: var(--serif); font-size: 26px; font-weight: 700; letter-spacing: 0;
  margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.mp-title-row .tool { flex: none; }
#err-map-rename:empty { display: none; }
#err-map-rename { margin-bottom: 12px; }
/* Two columns, label then value, so the facts line up rather than reading as a sentence. */
.mp-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 13px; align-items: baseline; }
.mp-facts dt { color: var(--muted); font-family: var(--narrow); font-size: 14px; font-weight: 400; }
.mp-facts dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.mp-export { flex: 0 1 320px; min-width: 240px; margin-left: auto; display: flex; flex-direction: column; gap: 10px;
  padding-left: 18px; border-left: 1px solid var(--line); }
.mp-export button.run { align-self: flex-start; }
.dl-what { margin: 0; font-size: 12.5px; color: var(--muted); }
.mp-legend { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line);
  min-width: 0; overflow-wrap: anywhere; }
.mp-legend-pic { display: block; width: 160px; max-width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--line);
  border-radius: 0; background: var(--field); overflow: hidden; }
.mp-legend-pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mp-legend-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dl-status { margin: 0; font-size: 12px; color: var(--accent-ink); font-family: var(--mono); }
.dl-status:empty { display: none; }
.dl-list { list-style: none; margin: 0; padding: 8px 12px; display: grid; gap: 4px; font-size: 13px; background: var(--inset);
  border: 1px solid var(--line); border-radius: 0; }
.dl-list:empty { display: none; }
.dl-list li { display: flex; justify-content: space-between; gap: 12px; }
.dl-list li::before { content: "✓"; color: var(--accent); font-weight: 700; margin-right: -4px; }
.dl-list li.dl-outdated::before { content: "!"; color: var(--outdated-ink); }
.dl-list li.off::before { content: "–"; color: var(--faint); }
.dl-list .dl-name { flex: 1; color: var(--ink); }
.dl-list li.off .dl-name { color: var(--faint); }
.dl-list li.dl-outdated .dl-detail { color: var(--outdated-ink); }
.dl-list .dl-detail { color: var(--muted); font-family: var(--mono); font-size: 11.5px; text-align: right; }
#err-overview { margin-bottom: 16px; }

.blockrow { margin-bottom: 26px; }
.blockrow-hd { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px 0; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.blockgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.blockcard .card-bd { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.bc-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bc-hd h3 { font-family: var(--serif); font-size: 17px; font-weight: 700; margin: 0; color: var(--ink); }
.bc-desc { margin: 0; font-size: 13px; color: var(--muted); }
.bc-needs { margin: 0; font-size: 12px; color: var(--faint); }
.bc-needs.missing { color: var(--warn); font-weight: 700; }
.bc-when { margin: 0; font-family: var(--mono); font-size: 11.5px; color: var(--faint); }
.bc-err { margin: 0; font-size: 12px; color: var(--bad); overflow-wrap: anywhere; }
/* `margin-top: auto` pins Open to the bottom: a card with an error line and one without present the same target. */
.bc-open { margin-top: auto; align-self: flex-start; }
/* quieter than the next step's green (below), and never the red-brown of a failed one */
.blockcard.bc-confirmed { border-color: var(--line); box-shadow: inset 0 3px 0 var(--go-line); }
.blockcard.bc-outdated, .blockcard.bc-changed { border-color: var(--outdated-line); box-shadow: inset 0 3px 0 var(--outdated-line); }
.blockcard.bc-failed { border-color: var(--bad-line); box-shadow: inset 0 3px 0 var(--bad); }
/* One primary action (the owner, 2026-11-01): only the next step's card is green, the others open from an outlined
   button; a confirmed step says so in words, a step that cannot start yet is quieter and says what it waits for. */
.blockcard.bc-next { border-color: var(--go-line); box-shadow: inset 0 3px 0 var(--go); }
.bc-next-tag { margin: -4px 0 0; font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--go-ink); }
.bc-when.bc-done { font-family: var(--sans); font-size: 12.5px; color: var(--go-ink); }
.bc-when.bc-done::before { content: "✓ "; }
.blockcard.bc-blocked .bc-hd h3, .blockcard.bc-blocked .bc-desc { color: var(--muted); }
a.tool.bc-open { display: inline-flex; align-items: center; text-decoration: none; }

/* ---------- sign-in: a title page ---------- */
.login-wrap { min-height: calc(100dvh - var(--topbar-h)); display: grid; place-items: center; padding: 24px 16px; }
.login { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--rule); border-radius: 0;
  box-shadow: var(--shadow-pop); padding: 30px 30px 28px; }
.login .mark { width: 40px; height: 40px; border-radius: 0; }
.login h1 { font-family: var(--serif); font-size: 26px; font-weight: 700; margin: 16px 0 20px; padding-bottom: 12px;
  letter-spacing: 0; color: var(--ink); border-bottom: 3px double var(--rule); }
.login form { display: flex; flex-direction: column; gap: 14px; }
.login input[type=text], .login input[type=password] { font-family: var(--sans); font-size: 15px; padding: 10px 12px; border-radius: 2px; }
.login form button { font-family: var(--mono); font-weight: 400; font-size: 14px; letter-spacing: 0; color: var(--on-fill);
  background: var(--go); border: 1px solid var(--go); border-radius: var(--btn-r); padding: 10px; cursor: pointer;
  margin-top: 4px; box-shadow: var(--shadow-run); }
.login form button:hover { background: var(--go-hi); border-color: var(--go-hi); }
.login .err { margin: 0 0 14px; }

/* ---------- phone width: one column, a 16 px gutter, no sideways scroll ---------- */
@media (max-width: 720px) {
  .wrap { padding: 18px 16px 72px; }
  .mapbar { padding: 14px 16px 0; }
  .card-bd, .card-hd, .lib-bar { padding-left: 16px; padding-right: 16px; }
  .card-hd { flex-wrap: wrap; }
  .row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 4px; }
  .row-acts { justify-content: flex-start; }
  .row-folder { grid-template-columns: minmax(0, 1fr) auto; }
  .row-folder .row-chips { display: none; }
  .mp-visual { flex-basis: 100%; }
  .mp-export { margin-left: 0; flex-basis: 100%; padding-left: 0; border-left: 0; }
  .path-part { max-width: 18ch; }
}

/* ---------- the maps page's two views (static/pages/library.js; the owner, 2026-11-01) ---------- */
/* The maps come first and nothing jumps (the owner, 2026-11-01): a slim head, the last map as one line, then the list,
   every part at its final size from the first paint (skeleton rows, the chips' room kept), coming in with the shared
   motion tokens (style.css), none under reduced motion. */
/* The head: "My maps" and its quota, a short line on what to do (an upload's line in its place while there is one),
   warming the models (quiet), the one upload action; the upload's bar along the card's foot. */
.lib-top { position: relative; }
.lib-top-row { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; padding: 12px 22px; }
.lib-top-title { flex: none; margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--ink); }
.lib-top-title .h-sub { display: inline-block; min-width: 13ch; margin-left: 6px; font-size: 13.5px; }  /* its room kept */
.lib-top-desc, .lib-top-status { flex: 1 1 160px; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.lib-top-desc { color: var(--muted); font-size: 13.5px; }
.lib-top-status { color: var(--muted); font-size: 13px; }
.lib-top-status:empty, .lib-top-status:not(:empty) + .lib-top-desc { display: none; }
.lib-top .warm-row { flex: none; margin: 0; flex-wrap: nowrap; gap: 8px; }
.lib-top #btn-warm { padding: 2px 9px; font-size: 12.5px; color: var(--muted); border-color: var(--line); background: transparent; }
.lib-top #btn-warm:hover:not(:disabled) { color: var(--ink); border-color: var(--btn-line); }
.lib-top #btn-upload { flex: none; margin-left: auto; }
.lib-top .upbar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; margin: 0; }
.lib-top .err.show { margin: 0 22px 12px; }
.lib-last { display: flex; align-items: center; gap: 12px 18px; padding: 7px 22px; border-top: 1px solid var(--line2); }
/* Files dragged over the page: the drop target covers it until they leave or drop (it takes no pointer events). */
.lib-drop { position: fixed; inset: 12px; z-index: 60; justify-content: center; pointer-events: none;
  animation: lib-drop-in var(--motion) var(--ease-out); }
.lib-drop, .lib-drop.over { border: 2px dashed var(--accent); background: color-mix(in srgb, var(--accent-soft) 94%, transparent); }
.lib-drop-what { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--accent-ink); }
@keyframes lib-drop-in { from { opacity: 0; } }
/* The list's head: the title, the sliding tab, then the sort and the quiet way to the finder (in every view, in place). */
.lib-hd { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
.lib-title { margin: 0; }
.lib-hd-tools { margin-left: auto; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.lib-folders-link { font-family: var(--narrow); font-size: 13.5px; color: var(--muted); text-decoration: none; }
.lib-folders-link:hover { color: var(--accent-ink); text-decoration: underline; }
/* The sliding tab: a segmented box in the buttons' geometry; the green thumb slides under the chosen view. */
.lib-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; height: var(--h-bar); padding: 0;
  border: var(--btn-bw) solid var(--btn-line); border-radius: var(--btn-r); background: var(--field); overflow: hidden; }
.lib-switch [role="tab"] { position: relative; z-index: 1; min-width: 0; padding: 0 16px; border: 0; background: transparent;
  font: inherit; font-size: 13.5px; color: var(--ink); white-space: nowrap; cursor: pointer; border-radius: 0;
  transition: color var(--motion) var(--ease-out); }
.lib-switch [role="tab"] + [role="tab"] { border-left: 1px solid var(--btn-line); }
.lib-switch [role="tab"]:hover { color: var(--ink); }
.lib-switch [role="tab"][aria-selected="true"] { color: var(--go-ink); font-weight: 700; }
.lib-switch [role="tab"]:focus-visible { outline: none; box-shadow: var(--ring-in); }
.lib-switch-thumb { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 50%;
  border-radius: 0; background: var(--go-soft);
  transition: transform var(--motion) var(--ease-out), opacity var(--motion) var(--ease-out); }
.lib-switch[data-at="1"] .lib-switch-thumb { transform: translateX(100%); }
.lib-switch[data-at="-1"] .lib-switch-thumb { opacity: 0; }
/* «По участкам» and «Все карты»: Скановед's bar (the owner, 2026-11-02; scanoved/web/src/index.css `.lib-bar`): the
   search on the left, which maps to show on the right, each choice with its count (blank until the chips are read, a
   digit's room kept) */
.lib-filter { flex: 1 1 260px; max-width: 420px; height: var(--h-bar); padding: 0 10px; border: var(--btn-bw) solid var(--btn-line);
  border-radius: var(--btn-r); background: var(--field); color: var(--ink); font: inherit; font-size: 13.5px; }
.lib-filter::placeholder { color: var(--faint); }
.lib-filter:focus { outline: none; box-shadow: var(--ring); }
.lib-bar .lib-tools, .lib-states { margin-left: auto; }
.lib-tool-n { color: var(--faint); font-variant-numeric: tabular-nums; }
.lib-tool-n:empty::before { content: "0"; visibility: hidden; }
.lib-states .tool[aria-pressed="true"] .lib-tool-n { color: inherit; }
/* «По участкам»: a section per участок (or folder), its head a closable bar, its maps the finder's rows. */
.lib-groups { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.lib-group { border: 1px solid var(--line); border-radius: 0; background: var(--panel); overflow: hidden;
  transition: box-shadow var(--motion-slow) var(--ease-out), border-color var(--motion-slow) var(--ease-out); }
.lib-group.focused { border-color: var(--go-line); box-shadow: 0 0 0 3px var(--go-soft); }
.lib-group-hd { display: flex; align-items: center; gap: 10px; padding: 0 12px 0 0; background: var(--panel2); }
.lib-group-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0;
  background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.lib-group-toggle:focus-visible { outline: none; box-shadow: var(--ring-in); }
.lib-caret { flex: none; width: 12px; color: var(--muted); font-size: 11px; transition: transform var(--motion) var(--ease-out); }
.lib-group.closed .lib-caret { transform: rotate(-90deg); }
/* A group folds: its rows' track goes from their height to none, fading (the rule under the head folds with them). */
.lib-group-body { display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows var(--motion) var(--ease-out), opacity var(--motion) var(--ease-out); }
.lib-group.closed .lib-group-body { grid-template-rows: 0fr; opacity: 0; }
.lib-group-clip { min-height: 0; overflow: hidden; }
.lib-group-icon { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--btn-r); font-size: 13px;
  color: var(--accent-ink); background: color-mix(in srgb, currentColor 12%, transparent); }
.lib-group-icon.k-root, .lib-group-icon.k-folder { color: var(--muted); }
.lib-group-name { min-width: 0; font-family: var(--serif); font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.lib-group-count { flex: none; color: var(--faint); font-size: 12.5px; }
.lib-group-links { flex: none; display: flex; align-items: center; gap: 14px; }
.lib-group-link { font-family: var(--narrow); font-size: 13px; color: var(--accent-ink); text-decoration: none; white-space: nowrap; }
.lib-group-link:hover { text-decoration: underline; }
.lib-group-rows { padding: 2px 12px 4px; border-top: 1px solid var(--line); }
/* where a map lies (the two views) */
.row-where { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a map's row (library.js mapRow): its name's link covers the picture and the words, so one click opens the map; its
   «из …» line (where it comes from in Геовед) is a link of its own over it */
.row-main-map { position: relative; }
.row-open { color: inherit; text-decoration: none; }
.row-open::after { content: ""; position: absolute; inset: 0; }
.row-from { position: relative; z-index: 1; align-self: flex-start; font-size: 12px; }
/* A map row's chips have their room before they are read (two trays at a desktop width; library.js draws a known
   map's chips unlit, the exact size, until their states come). */
.row-map.row-skel .row-chips, .row-map .chips-wait { min-height: 58px; }
.chips-pending .bchip, .chips-pending .bchip * { color: transparent; background: var(--line2); border-color: transparent;
  box-shadow: none; }
/* Skeleton rows (the template's, until the script draws the maps): a real row's size, in the rules' quiet ink. */
.lib .skel-box { display: block; background: var(--line2); border-radius: 2px; }
.lib .row-skel .row-text { flex: 1; }
.lib .row-thumb.skel-box { border-color: var(--line2); border-radius: 0; }
.lib .skel-line { width: min(240px, 70%); height: 11px; margin: 3px 0; }
.lib .skel-line.short { width: min(140px, 40%); }
.lib .skel-name { width: 180px; height: 14px; }
.lib-skel .lib-group-toggle { cursor: default; }
/* Coming in: rows (a folder's, «Все карты»') and groups fade up 4px where they stay, the first eight one after another. */
.lib-enter > .row, .lib-enter > .lib-group { animation: lib-in var(--motion) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 24ms); }
/* from a light ink, as the kit's rows (style.css m-rise): the skeleton's place is never blank on the way */
@keyframes lib-in { from { opacity: .4; transform: translateY(4px); } }
/* A list that is shorter than the one before closes up (library.js `holdHeight`). */
.lib-bd.lib-settle { transition: min-height var(--motion-slow) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .lib-switch-thumb, .lib-switch [role="tab"], .lib-caret, .lib-group, .lib-group-body, .lib-bd.lib-settle { transition: none; }
  .lib-enter > .row, .lib-enter > .lib-group, .lib-drop { animation: none; }
}
@media (max-width: 960px) {
  .last-more { display: none; }
}
@media (max-width: 720px) {
  .lib-hd-tools { margin-left: 0; flex-basis: 100%; }
  .lib-states { margin-left: 0; }
  .lib-top-desc { display: none; }
  .lib-last { padding-left: 16px; padding-right: 16px; }
  .lib-top-row { padding-left: 16px; padding-right: 16px; }
  .lib-group-hd { flex-wrap: wrap; padding-bottom: 6px; }
  .lib-group-links { padding-left: 46px; }
}

@keyframes hub-in { from { opacity: 0; transform: translateY(6px); } }

/* the page viewer (static/pages/hub_viewer.js): here, because a map's overview opens it too and links only this sheet */
.ql-dlg { width: 96vw; height: 94vh; max-width: none; max-height: none; padding: 0; border: 1px solid var(--rule); border-radius: var(--r-float);
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; overflow: hidden; }
.ql-dlg:not([open]) { display: none; }
.ql-dlg:focus { outline: none; }  /* it holds the focus for ← → only */
.ql-dlg::backdrop { background: var(--backdrop); }
.ql-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
.ql-head .spacer { flex: 1; }
.ql-title { min-width: 0; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-count, .ql-sharp { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.ql-sharp::before { content: "◌ "; animation: chip-pulse 1.2s ease-in-out infinite; }
.ql-acts { display: inline-flex; gap: 6px; }
.ql-stage { position: relative; flex: 1; overflow: hidden; cursor: grab; touch-action: none;
  background: repeating-conic-gradient(var(--panel2) 0% 25%, var(--panel) 0% 50%) 50% / 24px 24px; }
.ql-stage.grabbing { cursor: grabbing; }
.ql-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; box-shadow: 0 6px 30px rgba(0, 0, 0, .25);
  background: #fff; image-rendering: auto; }