/* Forum styles. The palette, fonts and the two themes are taken from the reading
   room (Vita/tools/site.css): "vellum" by day, "athanor" by night. Keep the
   variable values in sync with it; test_contrast checks text contrast here. */
:root {
  --serif: "EB Garamond", "Cormorant Garamond", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --display: "Cormorant Garamond", "EB Garamond", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", Consolas, "SF Mono", ui-monospace, monospace;
  --ui: system-ui, -apple-system, "Segoe UI", sans-serif;

  color-scheme: light;
  --bg: #f1e9d6; --panel: #faf5e8; --ink: #251d13; --muted: #5c5144; --line: #d6c8aa;
  --gold: #74550f; --azure: #1a56a0; --rubric: #a12d1c; --silver: #45586b;
  --accent: var(--azure); --warn: #a12d1c;
  --chip: #e9dec4; --author-ink: #4a3410; --malachite: #285e37;
  --glass: rgba(241, 233, 214, .86); --glow: rgba(143, 106, 26, .18);
  --grain: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(110, 80, 30, .14));
  --grid: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0c0f; --panel: #12141a; --ink: #e9e0cb; --muted: #8e897b; --line: #272a32;
    --gold: #d6b161; --azure: #6cb6ff; --rubric: #e5664a; --silver: #a9b9cc;
    --warn: #ff8a70;
    --chip: #1a1d24; --author-ink: #ecd8a6; --malachite: #86cf9c;
    --glass: rgba(11, 12, 15, .78); --glow: rgba(214, 177, 97, .22);
    --grain: radial-gradient(1100px 520px at 50% -8%, rgba(214, 177, 97, .08), transparent 62%);
    --grid: linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 34px 34px,
            linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 34px 34px;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0c0f; --panel: #12141a; --ink: #e9e0cb; --muted: #8e897b; --line: #272a32;
  --gold: #d6b161; --azure: #6cb6ff; --rubric: #e5664a; --silver: #a9b9cc;
  --warn: #ff8a70;
  --chip: #1a1d24; --author-ink: #ecd8a6; --malachite: #86cf9c;
  --glass: rgba(11, 12, 15, .78); --glow: rgba(214, 177, 97, .22);
  --grain: radial-gradient(1100px 520px at 50% -8%, rgba(214, 177, 97, .08), transparent 62%);
  --grid: linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 34px 34px,
          linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px) 0 0 / 34px 34px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); font: 16px/1.55 var(--ui); background: var(--grain), var(--grid), var(--bg);
  background-color: var(--bg); background-attachment: fixed; -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere; }
::selection { background: var(--glow); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
code { font: 13px/1.5 var(--mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Site bar, as in the reading room (wraps instead of scrolling: more links here). */
nav.site { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 12px;
  font: 12px/1 var(--mono); letter-spacing: .03em; background: var(--glass); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 5;
  transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
/* menu.css makes the narrow line relative (for its ☰ panel): sticky holds the panel too. */
body > nav.site:has(.navmore) { position: sticky; }
nav.site.tuck { transform: translateY(-100%); }
nav.site a, nav.site .navbtn { text-decoration: none; padding: 7px 10px; border-radius: 3px; color: var(--muted);
  text-transform: uppercase; }
nav.site a:hover, nav.site .navbtn:hover { color: var(--ink); background: var(--chip); }
nav.site a.brand { color: var(--gold); font-weight: 600; margin-right: 10px; padding-left: 2px; text-transform: none;
  letter-spacing: .08em; }
/* The brand's mark: the app icon's emblem as a mask (--emblem, cut by tools/site_pwa_icons.py
   as emblem-mask.png), in the theme's gold; the owner, 2026-10-15: the ☉ sign «не серьезно». */
:root { --emblem: url(data:image/png;base64,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); }
nav.site a.brand::before { content: ""; display: inline-block; width: 22px; height: 22px; margin: -6px 8px -6px 0; vertical-align: middle; background: currentColor;
  -webkit-mask: var(--emblem) center / contain no-repeat; mask: var(--emblem) center / contain no-repeat; }
nav.site a.on { color: var(--gold); box-shadow: inset 0 -1px 0 var(--gold); border-radius: 0; }
nav.site a.on + a.fsub { margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--line); border-radius: 0; }
nav.site a.here { color: var(--gold); box-shadow: inset 0 -1px 0 var(--gold); border-radius: 0; }
nav.site a.me { text-transform: none; }
/* One's own name (the owner, 2026-10-14: «имя тоже надо подсветить красиво»): gold, in a
   thin gold pill on the line; in the ☰ panel — gold, as a line of the list. */
nav.site .mnav.you > a.me { color: var(--gold); font-weight: 600; }
/* The pill while the name stands in the line (not .packed: line.js, menu.css). */
nav.site:not(.packed) .mnav.you > a.me { padding: 4px 11px; margin: 0 4px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 999px; background: color-mix(in srgb, var(--gold) 8%, transparent); }
nav.site:not(.packed) .mnav.you > a.me:hover { color: var(--gold); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }
nav.site:not(.packed) .mnav.you > a.me.here { box-shadow: none; border-color: var(--gold); }
nav.site .grow { flex: 1 1 auto; }
nav.site .navbtn { font: inherit; background: transparent; border: 0; cursor: pointer; letter-spacing: inherit; }
/* «Выйти» — red, as a danger is in the book (the rubric); asking, framed in it. */
nav.site .navbtn.out, nav.site .navmore .mnav > form > button.out { color: var(--rubric); }
nav.site .navbtn.out:hover, nav.site .navmore .mnav > form > button.out:hover { color: var(--rubric); background: color-mix(in srgb, var(--rubric) 12%, transparent); }
nav.site .navbtn.out.sure, nav.site .navmore .mnav > form > button.out.sure { color: var(--rubric); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--rubric); border-radius: 3px; background: color-mix(in srgb, var(--rubric) 12%, transparent); }
nav.site .themebtn { flex: none; width: 30px; height: 26px; padding: 0; margin-left: 4px; font: 15px/1 var(--mono);
  color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
nav.site .themebtn:hover { color: var(--gold); border-color: var(--gold); }
/* The ☰ panel: static/menu.css, the reading room's меню.css (tools/site_menu.css) as is.
   On a wide screen `order` puts the reading room's sections before «Форум» and one's own
   pages to the right. */
nav.site a.brand { order: 0; }
nav.site .mnav.room > a { order: 1; }
nav.site > a.on { order: 2; }
nav.site > a.fsub { order: 3; }
nav.site .grow { order: 4; }
nav.site > a.in, nav.site .mnav.you > a, nav.site .mnav.you > form { order: 5; }
nav.site .themebtn, nav.site .mkb.way, nav.site .mkb.reload { order: 6; }
nav.site .musbox { order: 6; margin-left: 4px; }   /* ‹ ♪ › of music.js before ⟳ (2026-10-16); .grow leaves the room */
body nav.site .navmore .mtext { order: 7; }   /* «Aa» of line.js (menu.css) after them */   /* ⟳ ↶ of way.js by the theme */
nav.site .navmenu { order: 7; }   /* ☰ at the right end, as in the reading room */
form.inline { display: inline; margin: 0; }

main { max-width: 880px; margin: 0 auto; padding: 8px 16px 60px; }
.foot { max-width: 880px; margin: 0 auto; padding: 18px 16px 30px; border-top: 1px solid var(--line); }

h1, h2 { font-family: var(--display); font-weight: 500; color: var(--gold); }
h1 { font-size: 34px; line-height: 1.15; margin: 6px 0; letter-spacing: .01em; }
h2 { font-size: 24px; line-height: 1.2; margin: 26px 0 8px; }
.pagehead { padding: 14px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.kicker { font: 600 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 6px 0 0; }
.sub { color: var(--muted); font: italic 17px/1.4 var(--serif); margin: 4px 0; }
.meta { color: var(--muted); font: 12px/1.6 var(--mono); letter-spacing: .01em; }
.crumbs { margin: 14px 0 0; }
.empty { color: var(--muted); font: italic 16px/1.5 var(--serif); }
.warn { color: var(--warn); }
.flash { padding: 10px 14px; margin: 12px 0; background: var(--panel); border: 1px solid var(--line);
  border-left: 2px solid var(--malachite); border-radius: 3px; }
.errors { margin: 12px 0; padding: 10px 14px 10px 32px; background: var(--panel); border: 1px solid var(--line);
  border-left: 2px solid var(--warn); border-radius: 3px; color: var(--warn); }
.tag { display: inline-block; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; margin: 2px 4px 2px 0; }
.tag.warn { color: var(--warn); border-color: var(--warn); }

/* Buttons: one kind everywhere — a hairline frame, mono caps, a glow of gold on touch. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 12px;
  font: 500 12px/1 var(--mono); letter-spacing: .04em; color: var(--ink); background: transparent; text-decoration: none;
  border: 1px solid var(--line); border-radius: 3px; cursor: pointer; transition: border-color .15s, color .15s, box-shadow .15s; }
.btn:hover { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 14px var(--glow); }
.btn.gold { border-color: var(--gold); color: var(--gold); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.btn.small { min-height: 26px; padding: 0 8px; font-size: 11px; }
.btn.on { border-color: var(--gold); color: var(--gold); }
.actions { margin: 10px 0 16px; }
.pager { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0; align-items: center; }
.pager .gap { color: var(--muted); }

/* Lists of sections and threads: cards as in the reading room index. */
ol.sections, ol.threads, ol.recent, ol.posts, ol.adminlist, ol.edits { list-style: none; padding: 0; margin: 12px 0; }
ol.sections > li, ol.threads > li, ol.recent > li { margin: 8px 0; padding: 10px 14px; background: var(--panel);
  border: 1px solid var(--line); border-left: 2px solid var(--gold); border-radius: 3px; }
ol.threads > li.pinned { border-left-color: var(--azure); }
li.deleted, .card.deleted { border-style: dashed; }  /* no opacity: keeps text contrast */
a.ttl { text-decoration: none; font: 500 20px/1.3 var(--display); color: var(--gold); }
a.ttl:hover { text-shadow: 0 0 14px var(--glow); }
.desc { margin: 4px 0; font: 16px/1.45 var(--serif); }
.excerpt { margin: 6px 0 0; font: 16px/1.5 var(--serif); }

/* Entity chips: the apparatus is azure, as links always were. */
ul.chips { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip a { display: inline-block; padding: 3px 8px; border: 1px solid var(--line); border-radius: 3px; background: var(--chip);
  text-decoration: none; color: var(--ink); font: 14px/1.35 var(--serif); }
.chip a:hover { border-color: var(--azure); color: var(--azure); }
.chip .kind, label.check .kind { font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--azure); }
.chip.k-turn .kind { color: var(--gold); }
.chip.stale a { text-decoration: line-through; }
.anchor { margin-top: 8px; }

/* Posts */
li.post { margin: 12px 0; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; }
.phead { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
a.who { font: 600 15px/1.3 var(--ui); color: var(--author-ink); text-decoration: none; }
a.who:hover { color: var(--gold); }
.role { font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
a.when { text-decoration: none; }
.pbody { font: 18px/1.6 var(--serif); margin-top: 6px; }
.pbody p { margin: 0 0 .7em; }
.pbody blockquote { margin: .4em 0 .8em; padding: 2px 12px; border-left: 2px solid var(--line); color: var(--muted); }
.pbody blockquote p { margin: 0; }
.pbody.plain { white-space: pre-wrap; }
.pactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.removed { margin: 6px 0; }
.modbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }

/* A quotation from the text: Sol's gold frame, the place in the text below. */
figure.quote { margin: 8px 0 12px; padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--gold);
  background: var(--bg); border-radius: 3px; }
figure.quote blockquote { margin: 0; font: italic 18px/1.55 var(--serif); color: var(--author-ink); white-space: pre-wrap; }
figure.quote figcaption { margin-top: 6px; }

/* Forms */
.card { margin: 14px 0; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 3px; }
.card h2:first-child { margin-top: 0; }
label { display: block; margin: 12px 0 4px; font: 600 12px/1.3 var(--mono); letter-spacing: .04em; color: var(--muted); }
label.check { display: flex; gap: 8px; align-items: baseline; font: 16px/1.4 var(--serif); color: var(--ink); letter-spacing: 0; margin: 6px 0; }
input, select, textarea { width: 100%; max-width: 100%; font: 16px/1.4 var(--ui); color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px; }
textarea { font: 17px/1.55 var(--serif); resize: vertical; }
input[type="checkbox"] { width: auto; accent-color: var(--gold); }
input:focus, select:focus, textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 1px var(--gold); }
form button[type="submit"].gold { margin-top: 12px; }
fieldset { border: 1px solid var(--line); border-radius: 3px; margin: 14px 0; padding: 4px 12px 10px; }
legend { font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); padding: 0 6px; }
.hint { margin: 6px 0 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.row input { flex: 1 1 200px; width: auto; }
.row .inline { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.row .inline input, .row .inline select { width: auto; flex: 1 1 140px; }
.stack .btn { margin-top: 10px; }
.linkbox code { display: block; padding: 8px 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 3px;
  word-break: break-all; user-select: all; }

/* Index of entities, admin */
details.sec { margin: 22px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
details.sec > summary { cursor: pointer; font: 500 22px/1.3 var(--display); list-style: none; color: var(--gold); }
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary::before { content: "✦"; color: var(--gold); font-size: 13px; margin-right: 10px; display: inline-block;
  transition: transform .2s; vertical-align: 3px; }
details.sec[open] > summary::before { transform: rotate(45deg); }
ul.index { columns: 2 260px; padding-left: 18px; font: 17px/1.5 var(--serif); }
ul.index li { break-inside: avoid; }
ul.adminnav { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
nav.admintabs { margin: 14px 0 0; }
nav.admintabs ul.adminnav { margin: 0; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
table.tbl th, table.tbl td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.tbl th { font: 600 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
table.tbl tr.undone td { opacity: .55; }
table.tbl tr.undone td:nth-child(5) { text-decoration: line-through; }
ol.edits .st-applied { border-left: 2px solid var(--malachite); }
ol.edits .st-rejected, ol.edits .st-conflict { border-left: 2px solid var(--warn); }
ol.edits .st-pending { border-left: 2px solid var(--gold); }

/* The top line on a phone, as the reading room's: the sign for the brand, tighter links. */
/* A middle window (913px) holds the reading room's sections, the forum's, one's own pages
   and ? in one row only with tighter links (2026-10-14, ? of «Как читать» added). */
@media (min-width: 761px) and (max-width: 1000px) { nav.site a, nav.site .navbtn { padding: 7px 6px; } nav.site a.brand { margin-right: 6px; } }
@media (max-width: 560px) {
  nav.site { padding: 6px 8px; letter-spacing: 0; row-gap: 2px; }
  nav.site a, nav.site .navbtn { padding: 7px 6px; }
  nav.site a.brand { font-size: 0; margin-right: 2px; }
  nav.site a.brand::before { width: 24px; height: 24px; margin: -6px 0; }
}
@media (max-width: 360px) { nav.site { font-size: 11px; } nav.site a, nav.site .navbtn { padding: 7px 4px; } }
@media (max-width: 600px) {
  h1 { font-size: 28px; }
  li.post { padding: 10px 12px; }
  .pbody { font-size: 17px; }
}

/* Personal-data review (/privacy) */
mark { background: var(--chip); color: var(--rubric); font-weight: 600; padding: 0 2px; border-radius: 2px; }
.pv-counts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pv-filter { display: flex; gap: 6px; margin: 10px 0; }
.pv-group { margin: 12px 0; }
.pv-status { margin: 6px 0; }
.tag.pv-open { color: var(--gold); }
.tag.pv-done { color: var(--malachite); }
.tag.pv-err { color: var(--warn); }
form.decide { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
form.decide input[type="text"] { width: auto; flex: 0 1 200px; }
details.pv-quotes > summary { cursor: pointer; color: var(--muted); margin: 6px 0; }
li.pv-quote { margin: 10px 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.pv-context, .pv-source { white-space: pre-wrap; }
.pv-context { margin: 4px 0; color: var(--muted); }

/* comments on the encyclopedia's words: rich text (formatter.render_rich) */
.comment.pending { border-style: dashed; }
.comment > .meta:first-child { margin-top: 0; }
.rich { overflow-wrap: anywhere; }
.rich h2, .rich h3, .rich h4, .rich h5, .rich h6 { font-family: var(--display); margin: 1em 0 .4em; line-height: 1.25; }
.rich h2 { font-size: 22px; } .rich h3 { font-size: 20px; } .rich h4 { font-size: 18px; }
.rich h5, .rich h6 { font-size: 16px; }
.rich > :first-child { margin-top: 0; }
.rich ul, .rich ol { padding-left: 1.4em; margin: .4em 0 .8em; }
.rich li { margin: .2em 0; }
.rich blockquote { margin: .4em 0 .8em; padding: 2px 12px; border-left: 2px solid var(--line); color: var(--muted); }
.rich pre { overflow-x: auto; padding: 8px 10px; background: var(--chip); border-radius: 3px; }
.rich :not(pre) > code { padding: 0 3px; background: var(--chip); border-radius: 2px; }
.rich table { border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; margin: .6em 0 1em; }
.rich th, .rich td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rich th { font: 600 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rich hr { border: 0; border-top: 1px solid var(--line); margin: 1em 0; }
/* Long texts come folded: the whole comment (teaser in the summary), and its sections. */
details.comment > summary, details.body > summary, .rich details.rs > summary { cursor: pointer; list-style: none; }
details.comment > summary::-webkit-details-marker, details.body > summary::-webkit-details-marker,
.rich details.rs > summary::-webkit-details-marker { display: none; }
details.comment > summary .meta { margin: 0; }
details.comment > summary .teaser, details.body > summary .teaser { margin: 4px 0 0; font: 16px/1.45 var(--serif); }
details.comment > summary .meta::before, details.body > summary .more::before { content: "▸ "; color: var(--gold); }
details.comment[open] > summary .meta::before, details.body[open] > summary .more::before { content: "▾ "; }
details.comment[open] > summary { margin-bottom: 10px; }
details.comment[open] > summary .teaser { display: none; }
details.body > summary .more { font: 12px/1.4 var(--mono); color: var(--muted); }
details.body[open] > summary .teaser { display: none; }
details.body[open] > summary { margin-bottom: 8px; }
.rich details.rs { border-top: 1px solid var(--line); margin: .3em 0; }
.rich details.rs > summary > :is(h2, h3, h4, h5, h6) { display: inline; margin: 0; }
.rich details.rs > summary { padding: .5em 0; }
.rich details.rs > summary::before { content: "▸ "; color: var(--gold); }
.rich details.rs[open] > summary::before { content: "▾ "; }
/* A chat folds by its questions: the question is the summary, the answer inside, indented. */
.rich details.ask > summary .q { font: italic 17px/1.45 var(--serif); color: var(--ink); }
.rich details.ask[open] > summary .q { color: var(--gold); }
.rich details.ask[open] { padding-left: 14px; border-left: 2px solid var(--line); }
.rich details.ask[open] > summary { margin-left: -14px; }

/* Documents (/admin/files): one line per file being sent, a bar under it. */
.uploads .up { margin: 8px 0; font: 12px/1.5 var(--mono); }
.uploads .up .bar { height: 4px; background: var(--line); margin-top: 3px; }
.uploads .up .bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .3s; }
.uploads .up.err { color: var(--warn); }
table.files td:nth-child(2) { white-space: nowrap; }

/* Pictures in posts (attachments.py, attach.js): thumbnails in a row, the whole picture a tap away. */
ul.pics { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
ul.pics li.pic { position: relative; margin: 0; }
ul.pics img { display: block; width: auto; height: auto; max-width: min(240px, 100%); max-height: 240px;
  border: 1px solid var(--line); border-radius: 3px; background: var(--bg); }
ul.pics a:hover img { border-color: var(--gold); }
ul.pics.edit img { max-width: 120px; max-height: 120px; }
ul.pics .x { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  font: 16px/1 var(--mono); color: var(--ink); background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
ul.pics .x:hover { color: var(--warn); border-color: var(--warn); }
ul.pics li.busy img { opacity: .45; }
ul.pics li.busy::after { content: "…"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font: 600 20px/1 var(--mono); color: var(--gold); }
ul.pics li.err img { outline: 2px solid var(--warn); }
.attach-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 10px; }
.attach-row label.pick { position: relative; margin: 0; color: var(--ink); }
.attach-status:empty { display: none; }
.filein { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
form.dropping { outline: 2px dashed var(--gold); outline-offset: 4px; }
.hint-fb { font: 16px/1.5 var(--serif); border-left: 2px solid var(--azure); }

/* «Сообщить о проблеме» at the bottom right, as in the reading room (its FAB_CSS). */
.fab { position: fixed; right: 10px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 6;
  display: flex; align-items: center; gap: 8px; height: 40px; min-width: 40px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 20px; background: transparent; color: var(--gold); text-decoration: none;
  opacity: .32; transition: opacity .6s ease, background-color .6s ease; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none; }
.fab span { font: 16px/1 var(--mono); }
.fab b { display: none; font: 600 12px/1 var(--mono); letter-spacing: .04em; color: var(--ink); white-space: nowrap; }
.fab.open, .fab:hover, .fab:focus-visible { opacity: 1; background: var(--glass); border-color: var(--gold);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22); transition-duration: .12s; }
.fab.open b, .fab:hover b, .fab:focus-visible b { display: inline; }
.foot { padding-bottom: 64px; }  /* the last line is not under the button */
@media print { .fab { display: none; } }

/* «Вход на другом устройстве» (auth/device.html): the code big and mono, the QR on white. */
.devcode { margin: 4px 0 10px; font: 600 34px/1.2 var(--mono); letter-spacing: .12em; color: var(--gold); user-select: all; }
.qrbox { max-width: 260px; margin: 6px 0 10px; }
.qrbox svg.qr { display: block; width: 100%; height: auto; border-radius: 3px; }
input.code { font: 600 22px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; max-width: 14em; }