/* Tokens and shared components: sticky header with three sections, tiles, tables, notes. The main page adds macroscope.css. */
:root {
  --paper: #f4f6f8;
  --surface: #fdfdfe;
  --ink: #12161c;
  --ink-2: #4a5260;
  --muted: #7b8392;
  --rule: #e1e5ea;
  --axis: #c3c9d2;
  --chip: #e9edf2;
  --scenario: #1f5fbf;
  --reality: #d6402b;
  --un: #6f7a8a;
  --un-low: #a3acb9;
  --band: rgba(111, 122, 138, 0.15);
  --male: #2f6db5;
  --female: #d0566b;
  --age-young: #86b6ef;
  --age-work: #3987e5;
  --age-old: #184f95;
  --v1: #86b6ef; --v2: #5598e7; --v3: #2a78d6; --v4: #1c5cab; --v5: #104281; --v6: #0d366b;
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300; --c7: #4a3aa7; --c8: #e34948;
  --past1: #c9ced6; --past2: #aab2be; --past3: #858e9c; --past4: #5b6472;
  --good: #0f7a3a;
  --warn: #b26a00;
  --crit: #c0352a;
  --focus: #1f5fbf;
  --f-display: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-body: "Golos Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --r: 10px;
  --gap: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0e1115; --surface: #151a20; --ink: #eef1f5; --ink-2: #b4bcc8; --muted: #858e9c; --rule: #252b33; --axis: #3a424d; --chip: #1f252d;
    --scenario: #3987e5; --reality: #e5583c; --un: #9aa3b2; --un-low: #69727f; --band: rgba(154, 163, 178, 0.14);
    --male: #3987e5; --female: #d9566f; --age-young: #1c5cab; --age-work: #3987e5; --age-old: #86b6ef;
    --v1: #1c5cab; --v2: #256abf; --v3: #3987e5; --v4: #5598e7; --v5: #86b6ef; --v6: #b7d3f6;
    --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767;
    --past1: #3a424d; --past2: #525c69; --past3: #737d8b; --past4: #9aa3b0;
    --good: #2fb35f; --warn: #e3a21a; --crit: #ff6b5b; --focus: #5598e7;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0e1115; --surface: #151a20; --ink: #eef1f5; --ink-2: #b4bcc8; --muted: #858e9c; --rule: #252b33; --axis: #3a424d; --chip: #1f252d;
  --scenario: #3987e5; --reality: #e5583c; --un: #9aa3b2; --un-low: #69727f; --band: rgba(154, 163, 178, 0.14);
  --male: #3987e5; --female: #d9566f; --age-young: #1c5cab; --age-work: #3987e5; --age-old: #86b6ef;
  --v1: #1c5cab; --v2: #256abf; --v3: #3987e5; --v4: #5598e7; --v5: #86b6ef; --v6: #b7d3f6;
  --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767;
  --past1: #3a424d; --past2: #525c69; --past3: #737d8b; --past4: #9aa3b0;
  --good: #2fb35f; --warn: #e3a21a; --crit: #ff6b5b; --focus: #5598e7;
  color-scheme: dark;
}

* { box-sizing: border-box; }
:where([hidden]) { display: none !important; }
body { background: var(--paper); color: var(--ink); font: 15px/1.5 var(--f-body); }
a { color: var(--scenario); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 500; letter-spacing: 0.01em; text-wrap: balance; margin: 0; }
.wrap { max-width: 1320px; margin: 0 auto; padding-inline: 16px; }

/* header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--paper); border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding-block: 10px; }
.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-inline-start: auto; }
.tab { border: 0; background: transparent; padding: 7px 12px; border-radius: 8px; cursor: pointer; color: var(--ink-2); font-weight: 500; }
.tab:hover { background: var(--chip); }
.tools { display: flex; gap: 6px; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 5px 10px; cursor: pointer; color: var(--ink-2); font-size: 13px; }
.seg button[aria-pressed="true"] { background: var(--chip); color: var(--ink); font-weight: 600; }

main { padding-block: 18px 40px; }

/* forms */
.hint { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
select.sel { width: 100%; padding: 7px 10px; border: 1px solid var(--axis); border-radius: 8px; background: var(--surface); }

/* content */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1180px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tiles { grid-template-columns: minmax(0, 1fr); } }
.tile { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tile .k { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.tile .v { font-size: 28px; font-weight: 600; line-height: 1.1; }
.tile .d { font-size: 13px; color: var(--ink-2); }
.tile .src { font-size: 11.5px; color: var(--muted); }
.down { color: var(--crit); }
.up { color: var(--good); }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-2); }
.legend .key { display: inline-flex; align-items: center; gap: 6px; }
.legend svg { flex-shrink: 0; }

/* tables */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--rule); text-align: end; white-space: nowrap; }
th:first-child, td:first-child { text-align: start; position: sticky; left: 0; background: var(--surface); }
th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 500; }
td.num, th.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
tr:hover td { background: var(--chip); }
.pill { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; }
.pill.crit { color: var(--crit); } .pill.warn { color: var(--warn); } .pill.ok { color: var(--good); }
.note { border-inline-start: 3px solid var(--ink); padding: 10px 14px; background: var(--surface); border-radius: 0 var(--r) var(--r) 0; font-size: 14px; color: var(--ink-2); }
.note b { color: var(--ink); }
.prose { max-width: 78ch; }
.prose p, .prose li { color: var(--ink-2); }
.prose h3 { font-size: 20px; margin-top: 22px; margin-bottom: 6px; }

/* loading: a ring with a comet running round it, its tail fading out. The comet slowly goes from teal through blue and
   violet to pink and back at one lightness, so it stays bright the whole way (.spin.mono keeps the accent of the card's
   topic). It shows itself after a moment, so a quick load does not flash it. */
@property --spin-h { syntax: '<number>'; inherits: true; initial-value: 195; }
.spin { --sz: 40px; --w: 4px; --spin-l: 0.6; position: relative; display: inline-block; flex: 0 0 auto; width: var(--sz); height: var(--sz); border-radius: 50%;
  color: var(--c1); color: oklch(var(--spin-l) 0.17 var(--spin-h)); box-shadow: inset 0 0 0 var(--w) color-mix(in srgb, var(--muted) 15%, transparent);
  animation: spin-in 0.3s ease 0.2s both, spin-turn 0.8s linear infinite, spin-hue 3.2s ease-in-out infinite alternate; }
.spin::before { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(transparent 0 0.06turn, color-mix(in srgb, currentColor 30%, transparent) 0.5turn, currentColor);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--w) - 0.5px), #000 calc(100% - var(--w) + 0.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--w) - 0.5px), #000 calc(100% - var(--w) + 0.5px)); }
.spin::after { content: ''; position: absolute; top: 0; left: calc(50% - var(--w) / 2); width: var(--w); height: var(--w); border-radius: 50%; background: currentColor;
  box-shadow: 0 0 8px 1px color-mix(in srgb, currentColor 60%, transparent); }
.spin.mono { color: var(--accent, var(--c1)); animation: spin-in 0.3s ease 0.2s both, spin-turn 0.8s linear infinite; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .spin { --spin-l: 0.72; } }
:root[data-theme="dark"] .spin { --spin-l: 0.72; }
@keyframes spin-in { from { opacity: 0; transform: scale(0.6); } }
@keyframes spin-turn { to { rotate: 1turn; } }
@keyframes spin-hue { to { --spin-h: 350; } }

.toast { position: fixed; inset-inline: 0; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); margin-inline: auto; width: max-content; max-width: calc(100% - 32px); background: var(--ink); color: var(--paper); padding: 9px 14px; border-radius: 8px; font-size: 13.5px; z-index: 50; }
/* a new release: over the page that is about to reload into it (site/shared/site.js), the colour of the page under it */
.upd { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px;
  background: var(--lx-base, var(--paper)); color: var(--ink-2); font: 500 16px/1.4 var(--f-body); text-align: center; animation: upd-in 0.2s ease both; }
.upd p { margin: 0; }
.upd .spin { --sz: 44px; animation: spin-turn 0.8s linear infinite, spin-hue 3.2s ease-in-out infinite alternate; }
@keyframes upd-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Static pages (home, forecasts, data, countries): page layout, headings, findings, figures, tables. */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--surface); color: var(--ink); padding: 6px 10px; border-radius: 8px; }
.skip:focus { left: 16px; }
a.brand { text-decoration: none; color: var(--ink); }
a.brand .name { font-family: var(--f-display); font-size: 22px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
a.tab { text-decoration: none; display: inline-block; }
a.tab[aria-current="page"] { background: var(--ink); color: var(--paper); }
.seg-link { display: inline-block; border: 1px solid var(--rule); border-radius: 8px; padding: 5px 10px; font-size: 13px; color: var(--ink-2); text-decoration: none; }
.seg-link:hover { border-color: var(--axis); color: var(--ink); }

.page { display: flex; flex-direction: column; gap: 34px; padding-block: 26px 10px; }
.page section { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 80px; }
.lead { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 72ch; margin: 0; }
h1.ph { font-size: clamp(30px, 5vw, 52px); line-height: 1.02; text-transform: uppercase; }
h2.sh { font-size: clamp(22px, 3vw, 30px); line-height: 1.1; text-transform: uppercase; }
h3.ch { font-family: var(--f-body); font-size: 17px; font-weight: 600; letter-spacing: 0; }
.meta-line { color: var(--muted); font-size: 13px; }

.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--axis); border-radius: 9px; padding: 8px 14px; font-weight: 500; text-decoration: none; color: var(--ink); background: var(--surface); }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.findings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--gap); }
@media (max-width: 900px) { .findings { grid-template-columns: minmax(0, 1fr); } }
.findings li { background: var(--surface); border: 1px solid var(--rule); border-inline-start: 3px solid var(--reality); border-radius: 0 var(--r) var(--r) 0; padding: 12px 14px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.findings li b { color: var(--ink); }
.principles { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; color: var(--ink-2); max-width: 80ch; }
.principles b { color: var(--ink); }

.toc { display: flex; flex-wrap: wrap; gap: 6px; }
.toc a { border: 1px solid var(--rule); border-radius: 999px; padding: 3px 11px; font-size: 13px; color: var(--ink-2); text-decoration: none; background: var(--surface); }
.toc a:hover { border-color: var(--axis); color: var(--ink); }

.case { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; padding-top: 18px; border-top: 1px solid var(--rule); }
@media (min-width: 1200px) { .case { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr); } }
.case .fig { max-width: 680px; }
.case .txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.case .note-s { color: var(--ink-2); font-size: 13.5px; margin: 0; }
.case .srcs { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; }
.fig { max-width: 860px; margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fig .cap { font-size: 12.5px; color: var(--muted); }
svg.schart { display: block; width: 100%; height: auto; }
.schart text { font-family: var(--f-mono); font-size: 12.5px; fill: var(--muted); }
.schart .grid { stroke: var(--rule); stroke-width: 1; }
.schart .axis, .schart .tick { stroke: var(--axis); stroke-width: 1; }
ul.legend { list-style: none; margin: 0; padding: 0; }

.static td small { color: var(--muted); font-family: var(--f-body); }
.static td.wrap, .static th.wrap { white-space: normal; text-align: start; min-width: 8.5em; }
.wrapcells td { white-space: normal; text-align: start; vertical-align: top; }
.wrapcells td:first-child { min-width: 140px; }
.src-list { columns: 2 340px; column-gap: 28px; font-size: 13px; color: var(--ink-2); padding-inline-start: 18px; margin: 0; }
.src-list li { break-inside: avoid; margin-bottom: 4px; }
.src-list a { word-break: break-word; }
.codes { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }
code { font-family: var(--f-mono); font-size: 0.92em; background: var(--chip); padding: 1px 5px; border-radius: 5px; }
main p code { overflow-wrap: anywhere; }
.foot { border-top: 1px solid var(--rule); margin-top: 36px; padding-block: 18px 34px; color: var(--muted); font-size: 13px; }
.foot p { margin: 0 0 6px; max-width: 90ch; }
.sub-link { color: var(--muted); font-size: 13px; text-decoration: none; }
.sub-link:hover { color: var(--ink); text-decoration: underline; }
.tools { align-items: center; }
@media (max-width: 720px) {
  .top .wrap { gap: 6px 10px; padding-block: 8px; }.top .wrap > .brand { order: 1; }
  .top .wrap > .tools { order: 2; margin-inline-start: auto; }
  .top .tabs { order: 3; flex-basis: 100%; margin-inline-start: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: space-between; gap: 2px; }
  .top .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 6px 10px; white-space: nowrap; }
  .page { gap: 28px; padding-block: 18px 6px; }
}
.dsets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 800px) { .dsets { grid-template-columns: minmax(0, 1fr); } }
.dset { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dset p { margin: 0; color: var(--ink-2); font-size: 14px; }
.dset code { word-break: break-all; }
#agents code, .principles code, .dset h3, .dset details { overflow-wrap: anywhere; }
@media (max-width: 480px) { .sub-link { display: none; } }
@media (max-width: 420px) { .top .tab { padding: 6px 6px; font-size: 14px; } }  /* all four menu items fit from 350 px */

/* Indicator base: country pages, explorer, forecast summary */
.cpick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14px; color: var(--ink-2); }
.cpick select.sel { width: auto; min-width: 0; max-width: 100%; flex: 0 1 300px; }
.cpick .btn { padding: 6px 12px; }
.fig.wide { max-width: 980px; }
h3.sh3 { font-size: 20px; text-transform: uppercase; margin-top: 8px; }
.icards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 1100px) { .icards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .icards { grid-template-columns: minmax(0, 1fr); } }
.icard { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.icard p { margin: 0; }
.icard .iv { color: var(--ink-2); font-size: 14px; }
.icard .iv b { font-size: 22px; color: var(--ink); }
.icard .iv small, .icard .def, .icard .src { color: var(--muted); font-size: 12.5px; }
.schart .pt { fill: var(--un); fill-opacity: 0.55; stroke: none; }
.schart .pt.hi { fill: var(--reality); fill-opacity: 0.95; }
.schart text.pl { fill: var(--ink); font-family: var(--f-body); font-size: 12px; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }

details summary { cursor: pointer; color: var(--ink-2); margin-bottom: 8px; }
.tiles.tiles3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .tiles.tiles3 { grid-template-columns: minmax(0, 1fr); } }
/* data coverage (/data/coverage/): map, legend, region × indicator table */
.cv-ctl { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 4px 0 10px; }
.cv-ctl label { display: inline-flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 14px; color: var(--ink-2); }
.cv-ctl .sel { max-width: 100%; }
.cv-map { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 6px; min-height: 120px; }
.cv-map svg { display: block; width: 100%; height: auto; }
/* the map is on its way: a spinner in a box of the map's own shape, so nothing jumps when it comes */
.cv-map:has(> .spin) { display: grid; place-items: center; aspect-ratio: 1000 / 435; }
.cv-map path, .cv-map circle { stroke: var(--surface); stroke-width: 0.5; cursor: pointer; }
.cv-map .on { stroke: var(--ink); stroke-width: 1.4; }
.cv-map .s-recent, .cv-map .s-l4, .cv-map .s-fc_yes, .cv-key .s-recent, .cv-key .s-l4, .cv-key .s-fc_yes { fill: var(--good); background: var(--good); }
.cv-map .s-l3, .cv-key .s-l3 { fill: color-mix(in srgb, var(--good) 55%, var(--warn)); background: color-mix(in srgb, var(--good) 55%, var(--warn)); }
.cv-map .s-old, .cv-map .s-l2, .cv-key .s-old, .cv-key .s-l2 { fill: var(--warn); background: var(--warn); }
.cv-map .s-stale, .cv-map .s-l1, .cv-key .s-stale, .cv-key .s-l1 { fill: color-mix(in srgb, var(--warn) 45%, var(--crit)); background: color-mix(in srgb, var(--warn) 45%, var(--crit)); }
.cv-map .s-none, .cv-map .s-l0, .cv-key .s-none, .cv-key .s-l0 { fill: var(--crit); background: var(--crit); }
.cv-map .s-fc_no, .cv-key .s-fc_no { fill: color-mix(in srgb, var(--crit) 35%, var(--chip)); background: color-mix(in srgb, var(--crit) 35%, var(--chip)); }
.cv-map .s-out { fill: var(--chip); }
.cv-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.cv-key { display: inline-flex; align-items: center; gap: 6px; }
.cv-key i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.cv-info { min-height: 1.5em; margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.cv-tbl td.cv-l4 { background: color-mix(in srgb, var(--good) 24%, transparent); }
.cv-tbl td.cv-l3 { background: color-mix(in srgb, var(--good) 12%, color-mix(in srgb, var(--warn) 12%, transparent)); }
.cv-tbl td.cv-l2 { background: color-mix(in srgb, var(--warn) 22%, transparent); }
.cv-tbl td.cv-l1 { background: color-mix(in srgb, var(--crit) 14%, color-mix(in srgb, var(--warn) 10%, transparent)); }
.cv-tbl td.cv-l0 { background: color-mix(in srgb, var(--crit) 22%, transparent); }
#checks td.cv-l4 { background: color-mix(in srgb, var(--good) 24%, transparent); }
#checks td.cv-l3 { background: color-mix(in srgb, var(--good) 12%, transparent); }
#checks td.cv-l2 { background: color-mix(in srgb, var(--warn) 22%, transparent); }
#checks td.cv-l1, #checks td.cv-l0 { background: color-mix(in srgb, var(--crit) 16%, transparent); }
.cv-tbl tr.cv-g th { text-align: start; background: var(--chip); font-size: 13px; }
.cv-tbl tr.on td { outline: 2px solid var(--focus); outline-offset: -2px; }
.cv-pick { background: none; border: 0; padding: 0; font: inherit; color: var(--scenario); cursor: pointer; text-align: start; }
.cv-pick:hover { text-decoration: underline; }

/* the privacy page (/ru/privacy/) and a person's public page (/ru/u/<handle>/, drawn by server/accounts.mjs) */
.pv, .u-page { max-width: 720px; }
.pv-sec, .u-sec { margin-top: 28px; }
.pv-sec p { line-height: 1.55; }
.u-head { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.u-ava { flex: none; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font: 600 28px/1 Oswald, var(--sans, sans-serif);
  color: #fff; background: linear-gradient(145deg, hsl(var(--h, 210) 62% 58%), hsl(calc(var(--h, 210) + 40) 58% 42%)); letter-spacing: .02em; }
.u-name { margin: 0; overflow-wrap: anywhere; }
.u-handle { margin: 4px 0 0; color: var(--muted); font-family: 'IBM Plex Mono', monospace; }
.u-bio { white-space: pre-line; margin-top: 18px; }
/* a person's page: followers, the button «Подписаться», their collections and «Важное»; a person's collection
   (/ru/u/<handle>/s/<tail>/), server/accounts.mjs */
.u-page .btn-primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.u-counts { margin: 6px 0 0; color: var(--muted); }
.u-follow { margin: 14px 0 0; }
.u-follow .btn { cursor: pointer; font: inherit; font-weight: 500; }
.u-follow .btn[disabled] { opacity: .6; cursor: progress; }
.u-list { list-style: none; padding: 0; margin: 10px 0 0; }
.u-list li { padding: 11px 0; border-bottom: 1px solid var(--rule, var(--axis)); }
.u-list li > a { font-weight: 500; }
.u-meta { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; }
.u-note { margin: 5px 0 0; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; font-size: 15px; }
.u-note::before { content: '«'; color: var(--muted); } .u-note::after { content: '»'; color: var(--muted); }
.u-by { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 12px; }
.u-by > a { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; color: var(--ink); }
.u-by .u-meta { display: inline; margin: 0; }
.u-ava-s { width: 30px; height: 30px; font-size: 12px; }
.u-col .ph { margin-top: 14px; }
.u-steps { padding-left: 1.4em; margin: 18px 0 0; }
.u-steps li { padding: 8px 0 10px; }
.u-steps li > a { font-weight: 500; }
/* «Пожаловаться» under a person's page and collection, the editors' mark (server/accounts.mjs, site/shared/site.js) */
.u-report { margin: 28px 0 0; font-size: 14px; color: var(--muted); }
.u-report summary { cursor: pointer; width: max-content; }
.u-report-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 460px; margin-top: 10px; }
.u-report-form label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.u-report-form select, .u-report-form textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule, var(--axis)); border-radius: 8px; padding: 7px 9px; width: 100%; min-width: 0; box-sizing: border-box; }
.u-report-form .btn { cursor: pointer; font: inherit; }
.u-report-out { margin-left: 8px; }
.u-hidden { color: var(--warn, #b45309); font-size: 14px; }
/* the field for robots: off the screen, never seen or reached by people */
.pf-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Main page: the macroscope. One time axis, indicator blocks under it, controls on the left, observations below. */
html:not(.js) .js-only { display: none !important; }
html.js .nojs-only { display: none !important; }

.mscope { display: flex; flex-direction: column; gap: 14px; }
.ms-top { display: flex; flex-direction: column; gap: 6px; }
.ms-top h1 { font-size: clamp(30px, 4.6vw, 48px); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; }
.ms-lead { margin: 0; max-width: 78ch; color: var(--ink-2); font-size: 16px; line-height: 1.5; }
.ms-q { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; margin: 0 -2px; }
.ms-q::-webkit-scrollbar { display: none; }
.ms-q a { flex: 0 0 auto; white-space: nowrap; border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px; font-size: 13.5px; color: var(--ink-2); text-decoration: none; background: var(--surface); }
.ms-q a:hover { border-color: var(--axis); color: var(--ink); }
.ms-q a[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ms-q a.ms-feed { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; }

.ms-grid { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 18px; align-items: start; }
.ms-side { position: sticky; top: 66px; max-height: calc(100vh - 80px); overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 2px 4px 8px 0; scrollbar-width: thin; }
.ms-box { display: flex; flex-direction: column; gap: 8px; }
.ms-lab { font-size: 12px; color: var(--muted); }
.ms-toggle { display: none; }
.ms-sets { display: flex; flex-direction: column; gap: 14px; }
.ms-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 960px) {
  .ms-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ms-side { position: static; max-height: none; overflow: visible; padding: 0; }
  .ms-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 1px solid var(--axis); background: var(--surface); border-radius: 9px; padding: 8px 12px; font-weight: 500; cursor: pointer; text-align: start; }
  .ms-toggle::after { content: "▾"; color: var(--muted); }
  .ms-toggle[aria-expanded="true"]::after { content: "▴"; }
  .ms-toggle small { color: var(--muted); font-weight: 400; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.js .ms-sets { display: none; }
  html.js .ms-side.open .ms-sets { display: flex; }
}

/* countries */
.ms-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--axis); border-radius: 999px; padding: 3px 10px; font-size: 13.5px; background: var(--surface); }
.chip:has(.x) { padding-inline-end: 3px; }
.chip .x { border: 0; background: transparent; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; width: 22px; height: 22px; border-radius: 50%; }
.chip .x:hover { color: var(--ink); background: var(--chip); }
.ms-find { position: relative; }
.ms-find input { width: 100%; padding: 7px 10px; border: 1px solid var(--axis); border-radius: 8px; background: var(--surface); }
.ms-list { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--axis); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14); padding: 4px; }
.ms-list .opt { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.ms-list .opt span { color: var(--muted); font-size: 12px; text-align: end; }
.ms-list .opt[aria-selected="true"], .ms-list .opt:hover { background: var(--chip); }
.ms-quick { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.ms-quick button { border: 0; background: transparent; color: var(--scenario); padding: 2px 4px; font-size: 13px; cursor: pointer; border-radius: 6px; }
.ms-quick button:hover { background: var(--chip); }
.ms-quick button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }

/* indicators and forecasts */
.ly-sec { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ly-sec legend { font-size: 12px; color: var(--muted); padding: 0; margin-bottom: 4px; }
.ly-sec + .ly-sec { margin-top: 8px; }
.ly { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 2px; }
.ly label { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 7px; cursor: pointer; font-size: 14px; line-height: 1.3; min-width: 0; }
.ly label:hover { background: var(--chip); }
.ly input { accent-color: var(--ink); margin: 0; flex: 0 0 auto; }
.ly label small { color: var(--muted); font-size: 11.5px; margin-inline-start: auto; white-space: nowrap; }
.ly.nodata label { color: var(--muted); }
.ly-i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--muted); font: 600 11px/1 var(--f-body); cursor: pointer; }
.ly-i:hover, .ly-i[aria-expanded="true"] { border-color: var(--axis); color: var(--ink); }
.ly-def { grid-column: 1 / -1; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); padding: 2px 6px 6px 29px; }
.ly-def p { margin: 0 0 4px; }
.ly-xy { margin: 0; }
.ly-note { grid-column: 1 / -1; margin: 0 0 4px 29px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.ly-more { align-self: flex-start; border: 0; background: transparent; color: var(--scenario); cursor: pointer; padding: 4px 6px; font-size: 13px; }

/* toolbar */
.ms-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; min-height: 34px; }
.ms-tools .sp { flex: 1 1 auto; }
.sel-l { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.sel-l select { padding: 5px 8px; border: 1px solid var(--axis); border-radius: 8px; background: var(--surface); color: var(--ink); max-width: 230px; }
.ms-gens { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.ms-gens .chip { font-size: 13px; padding: 2px 8px; } .ms-gens .chip:has(.x) { padding-inline-end: 2px; }
.ms-gens select { padding: 4px 6px; border: 1px solid var(--axis); border-radius: 8px; background: var(--surface); color: var(--ink); }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.tbtn { border: 1px solid var(--rule); background: var(--surface); border-radius: 8px; padding: 5px 10px; font-size: 13px; cursor: pointer; color: var(--ink-2); }
.tbtn:hover { border-color: var(--axis); color: var(--ink); }
.tbtn[aria-expanded="true"] { background: var(--chip); color: var(--ink); }
.seg button[disabled] { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 600px) { .ms-tools .sp { display: none; } }

/* the figure */
.ms-fig { position: relative; margin: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 12px 12px 10px; min-width: 0; }
.ms-chart { position: relative; min-height: 180px; transition: opacity 0.15s; }
.mscope.loading .ms-chart { opacity: 0.4; }
/* while the data of the chart is on its way: a spinner over the faded chart */
.ms-spin { display: none; position: absolute; inset: 0; margin: auto; z-index: 2; pointer-events: none; }
.mscope.loading .ms-spin { display: block; }
.ms-empty { color: var(--muted); padding: 40px 0; text-align: center; margin: 0; }
.mc { position: relative; display: flex; flex-direction: column; outline: none; touch-action: pan-y; }
.mc:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.mc-panel + .mc-panel { margin-top: 10px; }
.mc-head { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; padding-inline-start: var(--mc-ml, 52px); font-size: 13.5px; min-height: 22px; }
.mc-t { font-weight: 600; color: var(--ink); }
.mc-u { color: var(--muted); font-size: 12px; }
.mc-v { margin-inline-start: auto; display: flex; gap: 2px 12px; flex-wrap: wrap; justify-content: flex-end; font-size: 12.5px; color: var(--ink-2); }
.mc-v .hv { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.mc-v b { font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.mc-v small { color: var(--muted); font-size: 11.5px; }
.mc-v .ck { align-self: center; }
.mc-svg, .mc-axis { display: block; width: 100%; height: auto; overflow: visible; }
.mc .gl { stroke: var(--rule); stroke-width: 1; }
.mc .gl.zero { stroke: var(--axis); }
.mc .gv { stroke: var(--rule); stroke-width: 1; opacity: 0.55; }
.mc .yl, .mc-axis text { font-family: var(--f-mono); font-size: 11px; fill: var(--muted); }
.mc .future { fill: var(--chip); opacity: 0.5; }
.mc .wsp { fill: var(--crit); stroke: none; }
.mc .wsp.war, .mc .wsp.hist { opacity: 0.13; } .mc .wsp.part { opacity: 0.08; } .mc .wsp.minor { opacity: 0.05; }
.mc .nowl { stroke: var(--axis); stroke-width: 1; }
.mc .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mc .ln.proj { stroke-dasharray: 6 4; stroke-linecap: butt; }
.mc .ln.low { stroke-dasharray: 1.5 3.5; stroke-width: 1.6; }
.mc .ln.past { stroke-width: 1.25; stroke-dasharray: 3 3; stroke-linecap: butt; }
.mc .ln.past.p1 { stroke: var(--past1); } .mc .ln.past.p2 { stroke: var(--past2); } .mc .ln.past.p3 { stroke: var(--past3); } .mc .ln.past.p4 { stroke: var(--past4); }
.mc .band { stroke: none; opacity: 0.13; }
.mc .dot, .mc .nat, .mc .hd { stroke: var(--surface); stroke-width: 2; }
.mc .nat.prov { stroke-width: 1.6; fill: var(--surface) !important; }
.mc .s1 { stroke: var(--c1); } .mc .s2 { stroke: var(--c2); } .mc .s3 { stroke: var(--c3); } .mc .s4 { stroke: var(--c4); }
.mc .s5 { stroke: var(--c5); } .mc .s6 { stroke: var(--c6); } .mc .s7 { stroke: var(--c7); } .mc .s8 { stroke: var(--c8); }
.mc .band.s1, .mc .dot.s1, .mc .nat.s1, .mc .hd.s1 { fill: var(--c1); } .mc .band.s2, .mc .dot.s2, .mc .nat.s2, .mc .hd.s2 { fill: var(--c2); }
.mc .band.s3, .mc .dot.s3, .mc .nat.s3, .mc .hd.s3 { fill: var(--c3); } .mc .band.s4, .mc .dot.s4, .mc .nat.s4, .mc .hd.s4 { fill: var(--c4); }
.mc .band.s5, .mc .dot.s5, .mc .nat.s5, .mc .hd.s5 { fill: var(--c5); } .mc .band.s6, .mc .dot.s6, .mc .nat.s6, .mc .hd.s6 { fill: var(--c6); }
.mc .band.s7, .mc .dot.s7, .mc .nat.s7, .mc .hd.s7 { fill: var(--c7); } .mc .band.s8, .mc .dot.s8, .mc .nat.s8, .mc .hd.s8 { fill: var(--c8); }
.mc .dot, .mc .nat:not(.prov), .mc .hd { stroke: var(--surface); }
.mc .nat.prov.s1 { stroke: var(--c1); } .mc .nat.prov.s2 { stroke: var(--c2); } .mc .nat.prov.s3 { stroke: var(--c3); } .mc .nat.prov.s4 { stroke: var(--c4); }
.mc .nat.prov.s5 { stroke: var(--c5); } .mc .nat.prov.s6 { stroke: var(--c6); } .mc .nat.prov.s7 { stroke: var(--c7); } .mc .nat.prov.s8 { stroke: var(--c8); }
.mc-cross { position: absolute; width: 0; border-inline-start: 1px solid var(--ink-2); pointer-events: none; z-index: 3; }
.mc-cross span { position: absolute; top: -20px; transform: translateX(-50%); background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: 11px; padding: 1px 6px; border-radius: 6px; }
.mc-tip { position: absolute; z-index: 4; pointer-events: none; background: var(--surface); border: 1px solid var(--axis); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14); min-width: 170px; max-width: 300px; }
.mc-tip .yr { font-family: var(--f-mono); color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.mc-tip .h { color: var(--muted); font-size: 11.5px; margin: 6px 0 2px; }
.mc-tip .r { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.mc-tip .r span { color: var(--ink-2); }
.mc-tip .r b { font-family: var(--f-mono); font-weight: 600; }
.mc-tip .r small { color: var(--muted); font-weight: 400; }

/* legend of line styles and colours */
.ms-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--ink-2); padding: 10px 0 0; margin: 0; }
.kk { display: inline-flex; align-items: center; gap: 6px; }
.kk-note { color: var(--muted); }
.ck { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--ink-2); flex: 0 0 auto; }
.kl { width: 18px; height: 0; border-top: 2px solid var(--ink-2); display: inline-block; flex: 0 0 auto; }
.kl.dash { border-top-style: dashed; } .kl.dot { border-top-style: dotted; } .kl.past { border-top: 1.5px dashed var(--past3); }
.kd { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-2); display: inline-block; }
.kb { width: 16px; height: 10px; background: var(--ink-2); opacity: 0.2; display: inline-block; border-radius: 2px; }
.kb.war, .kb.hist { background: var(--crit); opacity: 0.3; } .kb.part { background: var(--crit); opacity: 0.18; } .kb.minor { background: var(--crit); opacity: 0.1; }
.ck.s1 { background: var(--c1); } .ck.s2 { background: var(--c2); } .ck.s3 { background: var(--c3); } .ck.s4 { background: var(--c4); }
.ck.s5 { background: var(--c5); } .ck.s6 { background: var(--c6); } .ck.s7 { background: var(--c7); } .ck.s8 { background: var(--c8); }
.kl.s1 { border-color: var(--c1); } .kl.s2 { border-color: var(--c2); } .kl.s3 { border-color: var(--c3); } .kl.s4 { border-color: var(--c4); }
.kl.s5 { border-color: var(--c5); } .kl.s6 { border-color: var(--c6); } .kl.s7 { border-color: var(--c7); } .kl.s8 { border-color: var(--c8); }

/* relation view */
.ms-ytitle { font-size: 12.5px; color: var(--ink-2); margin: 0 0 4px; }
.ms-xyplot { position: relative; }
.mc-scatter { display: block; width: 100%; height: auto; overflow: visible; }
.mc-scatter .gl, .mc-scatter .gv { stroke: var(--rule); stroke-width: 1; }
.mc-scatter .yl, .mc-scatter .xl { font-family: var(--f-mono); font-size: 11px; fill: var(--muted); }
.mc-scatter .ttl { font-size: 12px; fill: var(--ink-2); }
.mc-scatter .pt { fill: var(--un); fill-opacity: 0.45; }
.mc-scatter .pt.hi { fill-opacity: 1; stroke: var(--surface); stroke-width: 2; }
.mc-scatter .trail { fill: none; stroke-width: 1.6; stroke-linejoin: round; opacity: 0.85; }
.mc-scatter .tdot { stroke: var(--surface); stroke-width: 1.5; }
.mc-scatter .pl { font-size: 12.5px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.mc-scatter .tyr { font-family: var(--f-mono); font-size: 11px; fill: var(--muted); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.mc-scatter .s1 { stroke: var(--c1); } .mc-scatter .s2 { stroke: var(--c2); } .mc-scatter .s3 { stroke: var(--c3); } .mc-scatter .s4 { stroke: var(--c4); }
.mc-scatter .s5 { stroke: var(--c5); } .mc-scatter .s6 { stroke: var(--c6); } .mc-scatter .s7 { stroke: var(--c7); } .mc-scatter .s8 { stroke: var(--c8); }
.mc-scatter .pt.s1, .mc-scatter .tdot.s1 { fill: var(--c1); } .mc-scatter .pt.s2, .mc-scatter .tdot.s2 { fill: var(--c2); }
.mc-scatter .pt.s3, .mc-scatter .tdot.s3 { fill: var(--c3); } .mc-scatter .pt.s4, .mc-scatter .tdot.s4 { fill: var(--c4); }
.mc-scatter .pt.s5, .mc-scatter .tdot.s5 { fill: var(--c5); } .mc-scatter .pt.s6, .mc-scatter .tdot.s6 { fill: var(--c6); }
.mc-scatter .pt.s7, .mc-scatter .tdot.s7 { fill: var(--c7); } .mc-scatter .pt.s8, .mc-scatter .tdot.s8 { fill: var(--c8); }
.mc-scatter .pt.hi { stroke: var(--surface); }
.ms-yearbar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ms-yr { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 13px; color: var(--muted); }
.ms-yr output { font-family: var(--f-mono); color: var(--ink); min-width: 3em; font-weight: 600; }
.ms-yr input[type="range"] { flex: 1; accent-color: var(--ink); }

/* table view and observations */
.ms-table .tbl-wrap { max-height: 420px; overflow: auto; }
.ms-table td.proj { font-style: italic; color: var(--ink-2); }
.page section.ms-ins, .ms-ins { display: block; columns: 2 420px; column-gap: 36px; }
.ins-sec { min-width: 0; break-inside: avoid; margin-bottom: 18px; }
.ins-sec h3 { font: 600 13px/1.3 var(--f-body); color: var(--muted); margin: 0 0 8px; letter-spacing: 0; text-transform: none; }
.ins-sec ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ins-sec li { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); padding-inline-start: 12px; border-inline-start: 2px solid var(--rule); max-width: 75ch; }
.ins-sec li b { color: var(--ink); font-weight: 600; }
.ins-cav { column-span: all; font-size: 12.5px; color: var(--muted); margin: 0; max-width: 90ch; }
.ms-links { font-size: 13px; color: var(--muted); margin: 0; }
.ms-static-note { font-size: 13px; color: var(--muted); margin: 0; }

/* below the macroscope */
.home-more { display: flex; flex-direction: column; gap: 34px; }
.cty-index { columns: 5 180px; column-gap: 20px; font-size: 13.5px; margin: 0; padding: 0; list-style: none; }
.cty-index li { break-inside: avoid; padding: 1px 0; }
.toast[hidden] { display: none; }
@media (max-width: 600px) {
  .ms-top h1 { font-size: 30px; }
  .ms-lead { font-size: 14.5px; }
  .ms-quick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline-end: -16px; padding-inline-end: 16px; }
  .ms-quick::-webkit-scrollbar { display: none; }
  .ms-quick button { flex: 0 0 auto; white-space: nowrap; }
  .ms-fig { padding: 10px 8px 8px; margin-inline: -4px; }
  .ms-tools { gap: 6px 8px; }
  .sel-l select { max-width: 150px; }
}

/* The feed of findings. With JavaScript it is a full-screen app (.lx): a deck of cards over a backdrop tinted by the
   card's topic, up for the next card, down for the last one; every card turns over to «more». Without JavaScript the page
   is an ordinary list of the best findings (.feed). Cards (.fc) and their charts (.cc) are shared by both. */

/* topics: the backdrop tint of the app and the accent of a card */
[data-topic] { --tint: #eceff3; --accent: var(--c1); }
[data-topic="forecasts"] { --tint: #e6e9fb; --accent: #4b5bd6; }
[data-topic="population"] { --tint: #dff2ee; --accent: #0f8a73; }
[data-topic="fertility"] { --tint: #fbe6ea; --accent: #cf4f6b; }
[data-topic="health"] { --tint: #e4f3df; --accent: #2f8a3c; }
[data-topic="digital"] { --tint: #ece6fb; --accent: #7552d1; }
[data-topic="economy"] { --tint: #faefd9; --accent: #b97a00; }
[data-topic="markets"] { --tint: #e2f0ed; --accent: #147568; }
[data-topic="causes"] { --tint: #e0edf9; --accent: #2a72c9; }
[data-topic="paths"] { --tint: #f7e4f1; --accent: #b9478f; }
[data-topic="records"] { --tint: #f5efd3; --accent: #a07e00; }
[data-topic="migration"] { --tint: #e2edf8; --accent: #2f6db5; }
[data-topic="energy"] { --tint: #f8f0d8; --accent: #b58100; }
[data-topic="security"] { --tint: #f6e4e1; --accent: #c0352a; }
[data-topic="religion"] { --tint: #eee8dc; --accent: #8c652f; }
[data-topic="science"] { --tint: #e8e5fa; --accent: #6654bd; }
[data-topic="education"] { --tint: #e3f0f7; --accent: #1f7a9c; }
[data-topic="nature"] { --tint: #dff1eb; --accent: #1a8365; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-topic] { --tint: #13171c; }
  :root:not([data-theme="light"]) [data-topic="forecasts"] { --tint: #141830; --accent: #9aa5f5; }
  :root:not([data-theme="light"]) [data-topic="population"] { --tint: #0d2420; --accent: #4fc9ad; }
  :root:not([data-theme="light"]) [data-topic="fertility"] { --tint: #2c1218; --accent: #f08aa0; }
  :root:not([data-theme="light"]) [data-topic="health"] { --tint: #122312; --accent: #6fcf79; }
  :root:not([data-theme="light"]) [data-topic="digital"] { --tint: #1d1630; --accent: #b49cf5; }
  :root:not([data-theme="light"]) [data-topic="economy"] { --tint: #2a1f0c; --accent: #e9b54a; }
  :root:not([data-theme="light"]) [data-topic="markets"] { --tint: #102621; --accent: #70cbbb; }
  :root:not([data-theme="light"]) [data-topic="causes"] { --tint: #0e1d2e; --accent: #7db5f0; }
  :root:not([data-theme="light"]) [data-topic="paths"] { --tint: #2a1225; --accent: #e58cc6; }
  :root:not([data-theme="light"]) [data-topic="records"] { --tint: #27220c; --accent: #e0c552; }
  :root:not([data-theme="light"]) [data-topic="religion"] { --tint: #292113; --accent: #dbb779; }
  :root:not([data-theme="light"]) [data-topic="science"] { --tint: #1c1731; --accent: #b0a0ed; }
  :root:not([data-theme="light"]) [data-topic="education"] { --tint: #0f1f27; --accent: #6cc0de; }
  :root:not([data-theme="light"]) [data-topic="nature"] { --tint: #10251e; --accent: #61c6a6; }
}
:root[data-theme="dark"] [data-topic] { --tint: #13171c; }
:root[data-theme="dark"] [data-topic="forecasts"] { --tint: #141830; --accent: #9aa5f5; }
:root[data-theme="dark"] [data-topic="population"] { --tint: #0d2420; --accent: #4fc9ad; }
:root[data-theme="dark"] [data-topic="fertility"] { --tint: #2c1218; --accent: #f08aa0; }
:root[data-theme="dark"] [data-topic="health"] { --tint: #122312; --accent: #6fcf79; }
:root[data-theme="dark"] [data-topic="digital"] { --tint: #1d1630; --accent: #b49cf5; }
:root[data-theme="dark"] [data-topic="economy"] { --tint: #2a1f0c; --accent: #e9b54a; }
:root[data-theme="dark"] [data-topic="markets"] { --tint: #102621; --accent: #70cbbb; }
:root[data-theme="dark"] [data-topic="causes"] { --tint: #0e1d2e; --accent: #7db5f0; }
:root[data-theme="dark"] [data-topic="paths"] { --tint: #2a1225; --accent: #e58cc6; }
:root[data-theme="dark"] [data-topic="records"] { --tint: #27220c; --accent: #e0c552; }
:root[data-theme="dark"] [data-topic="religion"] { --tint: #292113; --accent: #dbb779; }
:root[data-theme="dark"] [data-topic="science"] { --tint: #1c1731; --accent: #b0a0ed; }
:root[data-theme="dark"] [data-topic="education"] { --tint: #0f1f27; --accent: #6cc0de; }
:root[data-theme="dark"] [data-topic="nature"] { --tint: #10251e; --accent: #61c6a6; }

/* ------------------------------------------------------------------ a card (the app and the static list) */
.fc { position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: 18px; padding: 16px 16px 12px;
  display: flex; flex-direction: column; gap: 10px; }
.fc-meta { display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.fc-topic { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font-weight: 500; }
.fc-topic i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent, var(--c1)); }
/* the place: what the card is about, as plain as its topic and darker (a country, «Мир», «Россия и США», «12 стран») */
.fc-loc { color: var(--ink); font-weight: 500; }
.fc-h { font-family: var(--f-body); font-size: clamp(19px, 2.6vw, 23px); line-height: 1.22; font-weight: 600; letter-spacing: -0.005em; text-transform: none; text-wrap: balance; margin: 0; }
.fc-chart { min-height: 120px; }
.fc-t { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.fc-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.fc-open { white-space: nowrap; }
.fc-stamp { position: absolute; top: 22px; padding: 5px 12px; border: 3px solid currentColor; border-radius: 10px; font: 700 20px/1 var(--f-display); letter-spacing: 0.04em;
  text-transform: uppercase; opacity: 0; pointer-events: none; background: var(--surface); z-index: 3; }
.fc-stamp.yes { left: 18px; color: var(--good); transform: rotate(-12deg); }
.fc-stamp.no { right: 18px; color: var(--crit); transform: rotate(12deg); }

/* card charts */
.cc { display: block; width: 100%; height: auto; overflow: visible; }
.cc .gl { stroke: var(--rule); stroke-width: 1; }
.cc .gl.zero { stroke: var(--axis); }
.cc .yl, .cc .xl, .cc .bl, .cc .bv { font-family: var(--f-mono); font-size: 11px; fill: var(--muted); }
.cc .bl { font-family: var(--f-body); fill: var(--ink-2); font-size: 12px; }
.cc .bv { fill: var(--ink); }
.cc .ln { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.cc .ln.fact.s1 { stroke: var(--c1); } .cc .ln.fact.s2 { stroke: var(--c2); } .cc .ln.proj { stroke: var(--c1); stroke-dasharray: 6 4; stroke-linecap: butt; }
.cc .strand-dot.s1 { fill: var(--c1); } .cc .strand-dot.s2 { fill: var(--c2); }
/* a duel: two lines on one scale, the gap after the overtaking shaded, a ring and the year where one overtook the other */
.cc.k-duel .ln { stroke-width: 2.8; }
.cc .gap { fill: var(--c1); opacity: 0.12; }
.cc .end { stroke: var(--card, var(--surface)); stroke-width: 2; }
.cc .end.s1 { fill: var(--c1); } .cc .end.s2 { fill: var(--c2); }
.cc .xline { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.6; }
.cc .xring { fill: var(--card, var(--surface)); stroke: var(--ink); stroke-width: 2.2; }
.cc .xt { font: 700 13px/1 var(--f-body); fill: var(--ink); paint-order: stroke; stroke: var(--card, var(--surface)); stroke-width: 4px; stroke-linejoin: round; }
/* …and its two numbers, large, in the colours of their lines */
.fc-duel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; align-items: start; }
.fc-duel .dv { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fc-duel .dv b { font: 500 clamp(30px, 9.2vw, 44px)/0.95 var(--f-display); letter-spacing: -0.005em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-duel .dv b small { font-size: 0.55em; letter-spacing: 0; margin-left: 0.12em; }
.fc-duel .dv.a b { color: var(--c1); } .fc-duel .dv.b b { color: var(--c2); }
.fc-duel .dv span { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.25; color: var(--ink-2); }
.fc-duel .dv span::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 12px; height: 3px; border-radius: 2px; background: var(--c1); }
.fc-duel .dv.b span::before { background: var(--c2); }
.fc-duel .dc { grid-column: 1 / -1; margin: 6px 0 0; font-size: 12px; line-height: 1.3; color: var(--muted); }
.cc.k-strands .xl { font-size: 11px; }
.cc.k-strands .bv.change { font-size: 14px; font-weight: 600; }
.lx-facts { list-style: none; padding: 0; }
.lx-facts li { margin: 16px 0; }
.lx-facts p { margin: 5px 0; }
.lx-facts small { color: var(--muted); }
.cc .ln.past { stroke: var(--past2); stroke-width: 1.2; stroke-dasharray: 3 3; stroke-linecap: butt; }
.cc .ln.past.phi { stroke: var(--past4); stroke-width: 1.8; }
.cc .band { fill: var(--c1); opacity: 0.13; stroke: none; }
.cc .hl { fill: var(--chip); opacity: 0.9; }
.cc .hl.war { fill: var(--crit); opacity: 0.12; }
/* a guess: «as forecast» across the unknown years, a question mark, the line the answer opens, points with their values */
.cc .zone { fill: var(--accent, var(--c1)); opacity: 0.16; }
.cc .ask { font: 600 19px/1 var(--f-body); fill: var(--muted); }
.cc .ln.rv { stroke: var(--c1); }
.cc .pin { stroke: var(--card, var(--surface)); stroke-width: 2.5; }
.cc .pin.fc { fill: var(--past4); }
.cc .pin.fv { fill: var(--c1); }
.cc .pt { font: 600 12.5px/1 var(--f-body); paint-order: stroke; stroke: var(--card, var(--surface)); stroke-width: 4px; stroke-linejoin: round; }
.cc .pt.fc { fill: var(--ink-2); }
.cc .pt.fv { fill: var(--c1); }
.cc .ref { stroke: var(--axis); stroke-width: 1; stroke-dasharray: 4 3; }
.cc .lab { font: 600 12px/1 var(--f-body); paint-order: stroke; stroke: var(--card, var(--surface)); stroke-width: 3px; stroke-linejoin: round; }
.cc .lab.s1 { fill: var(--c1); } .cc .lab.s2 { fill: var(--c2); }
.cc .lead { fill: none; stroke-width: 1; } .cc .lead.s1 { stroke: var(--c1); } .cc .lead.s2 { stroke: var(--c2); }
.cc .mk { fill: var(--c1); stroke: var(--surface); stroke-width: 2; }
.cc .dt { fill: var(--un); fill-opacity: 0.4; }
.cc .dt.hi { fill: var(--c2); fill-opacity: 1; stroke: var(--surface); stroke-width: 2; }
.cc .fit { stroke: var(--ink-2); stroke-width: 1.2; stroke-dasharray: 5 4; }
.cc .bar { fill: var(--c1); }
.cc .bar.neg, .cc .bar.s2 { fill: var(--c2); }
.cc .bar.tot { fill: var(--ink-2); }
.cc .bl.tot, .cc .bv.tot { font-weight: 600; fill: var(--ink); }
/* bars with room: each value large, in the display type and the colour of its bar, as the two numbers of a duel */
.cc .bl.big { font-size: 14px; }
.cc .bv.big { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.005em; font-variant-numeric: tabular-nums; fill: var(--c1); }
.cc .bv.big.s2 { fill: var(--c2); }
.cc .bv.big.tot { font-weight: 500; fill: var(--ink); }
.cc .trk { fill: var(--c1); opacity: 0.13; } .cc .trk.s2 { fill: var(--c2); } .cc .trk.tot { fill: var(--ink-2); }
.cc-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; }
/* a name too long for one line: its lines even, its mark beside the first one */
.cc-leg span { display: inline-flex; align-items: flex-start; gap: 6px; text-wrap: balance; }
.cc-leg .ck { flex: none; width: 16px; height: 0; margin-top: calc(0.75em - 1.25px); border-top: 2.5px solid var(--c1); }
.cc-leg .ck.s2 { border-color: var(--c2); }
.cc-leg .ck.past { border-top: 2px dashed var(--past3); }
.cc-leg .ck.now { border-top: 2.5px dashed var(--c1); }

/* ------------------------------------------------------------------ the static list (no JavaScript) */
.feed { display: flex; flex-direction: column; gap: 14px; max-width: 640px; width: 100%; margin-inline: auto; }
.fd-top h1 { font-size: clamp(28px, 4.4vw, 44px); line-height: 1; text-transform: uppercase; }
.fd-lead { margin: 6px 0 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }
.fd-static { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fd-static .fc-h a { color: inherit; text-decoration: none; }
.fd-static .fc-h a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fd-rel { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 8px; font-size: 15.5px; line-height: 1.4; }
.fd-col { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.4; }
.fd-col .hint { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); }

/* ------------------------------------------------------------------ the app (site/feed/feed.js): a deck of cards on the whole
   screen; every card turns over to «more»; a row of actions under the card; a top bar that hides while paging forward;
   a sheet for the menu, topics, saved cards, people and the profile. Without JavaScript the page stays a list (.feed). */
.lx { display: none; }
html.fd-app:not(.fd-fail) .lx { display: flex; }
html.fd-app:not(.fd-fail) body > .top, html.fd-app:not(.fd-fail) body > .foot, html.fd-app:not(.fd-fail) .skip, html.fd-app:not(.fd-fail) .feed { display: none; }
html.fd-pick .lx { visibility: hidden; }  /* the root: till its language is picked (site/build.py feed_page) */
html.fd-app:not(.fd-fail), html.fd-app:not(.fd-fail) body { height: 100%; overflow: hidden; overscroll-behavior: none; }
/* the base of the page: one colour under every card. The status bar of the app on the home screen takes its colour from
   the page once (iOS 26), so the top of the screen keeps this base and the card's topic shows below it (.lx::before). */
html.fd-app { --lx-base: #eceff3; }
@media (prefers-color-scheme: dark) { html.fd-app:not([data-theme="light"]) { --lx-base: #0c0f14; } }
html.fd-app[data-theme="dark"] { --lx-base: #0c0f14; }
html.fd-app:not(.fd-fail), html.fd-app:not(.fd-fail) body { background: var(--lx-base); }
/* glass, as on an iPhone: a light translucent capsule with a bright rim and a soft shadow; it floats over the card or the
   backdrop. --glass is its fill, --glass-rim the edge that catches the light. */
.lx, .lx-sheet { --card: #fdfdfe; --card-line: rgba(16, 20, 32, 0.06); --goal: #1f5fbf;
  --glass: rgba(255, 255, 255, 0.62); --glass-hi: rgba(255, 255, 255, 0.9); --glass-rim: rgba(255, 255, 255, 0.95); --glass-line: rgba(16, 20, 32, 0.07);
  --glass-shadow: 0 10px 28px -12px rgba(16, 20, 40, 0.3), 0 2px 6px -2px rgba(16, 20, 40, 0.1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lx, :root:not([data-theme="light"]) .lx-sheet { --card: #232b36; --card-line: rgba(255, 255, 255, 0.1); --goal: #86aef0;
    --glass: rgba(58, 67, 82, 0.58); --glass-hi: rgba(72, 82, 98, 0.72); --glass-rim: rgba(255, 255, 255, 0.16); --glass-line: rgba(255, 255, 255, 0.07);
    --glass-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.65), 0 2px 6px -2px rgba(0, 0, 0, 0.4); }
  :root:not([data-theme="light"]) .lx[data-topic], :root:not([data-theme="light"]) .lx [data-topic], html.fd-app:not([data-theme="light"]) body[data-topic] { --tint: #0c0f14; }
}
:root[data-theme="dark"] .lx, :root[data-theme="dark"] .lx-sheet { --card: #232b36; --card-line: rgba(255, 255, 255, 0.1); --goal: #86aef0;
  --glass: rgba(58, 67, 82, 0.58); --glass-hi: rgba(72, 82, 98, 0.72); --glass-rim: rgba(255, 255, 255, 0.16); --glass-line: rgba(255, 255, 255, 0.07);
  --glass-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.65), 0 2px 6px -2px rgba(0, 0, 0, 0.4); }
:root[data-theme="dark"] .lx[data-topic], :root[data-theme="dark"] .lx [data-topic], html.fd-app[data-theme="dark"] body[data-topic] { --tint: #0c0f14; }
.lx-tools, .lx-fl, .lx-fr, .lx-pick { position: relative; background: linear-gradient(180deg, var(--glass-hi), var(--glass));
  box-shadow: var(--glass-shadow), 0 0 0 0.5px var(--glass-line), inset 0 1px 0 var(--glass-rim); }
/* the rim: brighter at the top left and the bottom right, where the light falls */
.lx-tools::after, .lx-fl::after, .lx-fr::after, .lx-pick::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--glass-rim), transparent 35%, transparent 65%, color-mix(in srgb, var(--glass-rim) 60%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.lx { position: fixed; inset: 0; z-index: 30; flex-direction: column; color: var(--ink); background-color: var(--lx-base);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); -webkit-tap-highlight-color: transparent; }
/* the topic's colour rises from below and fades out before the top, so it never meets the status bar in a line */
.lx::before { content: ''; position: absolute; inset: 0; z-index: -1; background-color: var(--tint); transition: background-color 0.45s ease; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.5) 120px, #000 55%); mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.5) 120px, #000 55%); }
.lx button { font: inherit; color: inherit; }
.lx svg[aria-hidden], .lx-sheet svg[aria-hidden] { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* top: the name, the language, the theme, topics, saved, the profile; a row of chips. Hidden while paging forward. */
.lx-head { flex: 0 0 auto; display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.25s ease, opacity 0.2s ease; }
.lx-head-in { overflow: hidden; min-height: 0; }
.lx.chrome-off .lx-head { grid-template-rows: 0fr; opacity: 0; }
.lx-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px 0 16px; }
.lx-home { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; cursor: pointer; font: 600 15px/1 var(--f-display) !important; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--ink); padding: 8px 2px; margin-right: auto; }
.lx-home svg[aria-hidden] { width: 16px; height: 16px; }
/* the language, the theme, topics, saved and the profile: one glass capsule, as a toolbar on an iPhone */
.lx-tools { display: flex; align-items: center; height: 42px; padding: 0 3px; border-radius: 999px; }
.lx-lang { display: grid; place-items: center; min-width: 36px; height: 36px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); text-decoration: none; }
.lx-ib { position: relative; width: 38px; height: 36px; border: 0; border-radius: 999px; background: none; display: grid; place-items: center; cursor: pointer; flex: 0 0 auto; }
.lx-ib:active, .lx-lang:active { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.lx-ib svg[aria-hidden] { width: 20px; height: 20px; }
.lx-ib b { position: absolute; top: -5px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 600 10.5px/17px var(--f-body); text-align: center; }
.lx-chips-row { display: flex; gap: 6px; overflow-x: auto; padding: 8px 8px 2px; scrollbar-width: none; }
.lx-chips-row::-webkit-scrollbar { display: none; }
.lx-chip { flex: 0 0 auto; border: 0; background: color-mix(in srgb, var(--card) 62%, transparent); box-shadow: inset 0 0 0 0.5px var(--glass-line), inset 0 1px 0 var(--glass-rim);
  border-radius: 999px; padding: 7px 13px; font-size: 13.5px; line-height: 1.2; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.lx-chip.on { background: var(--ink); color: var(--paper); box-shadow: 0 4px 12px -6px rgba(16, 20, 40, 0.5); }
.lx-chip small { color: var(--muted); font-size: 11.5px; }
.lx-chip.on small { color: inherit; opacity: 0.7; }
.lx-mode { flex: 0 0 auto; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--card) 62%, transparent);
  box-shadow: inset 0 0 0 0.5px var(--glass-line), inset 0 1px 0 var(--glass-rim); }
.lx-mode button { border: 0; background: none; border-radius: 999px; padding: 4px 12px; font-size: 13.5px; line-height: 1.2; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.lx-mode button[aria-pressed="true"] { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 20, 40, 0.18), 0 0 0 0.5px var(--glass-line); }

/* the stage and the card: the room around the card shows the topic's colour; no outline in light, a soft one in dark */
.lx-stage { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 560px; margin: 0 auto; }
/* corners: the row of actions floats --dock-in inside the card, so the card's corner is its corner plus that (concentric).
   On a phone with a home indicator the card's bottom corners follow the round corners of the screen, 8 px inside them,
   and the actions step a little further in so they keep clear of those corners. */
.lx .lx-card { --dock-h: 46px; --dock-in: calc(8px + min(4px, env(safe-area-inset-bottom, 0px)));
  --dock-zone: calc(var(--dock-h) + var(--dock-in) + 10px); --r: calc(var(--dock-h) / 2 + 8px); --rb: calc(var(--r) + min(15px, env(safe-area-inset-bottom, 0px) * 0.45));
  box-sizing: border-box; border: 0; border-radius: var(--r) var(--r) var(--rb) var(--rb); padding: 0; gap: 0; overflow: hidden; background: var(--card);
  box-shadow: 0 1px 2px rgba(16, 20, 32, 0.06), 0 22px 48px -20px rgba(16, 20, 40, 0.38); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  display: flex; flex-direction: column; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lx .lx-card { box-shadow: 0 0 0 1px var(--card-line), 0 22px 48px -20px rgba(0, 0, 0, 0.6); } }
:root[data-theme="dark"] .lx .lx-card { box-shadow: 0 0 0 1px var(--card-line), 0 22px 48px -20px rgba(0, 0, 0, 0.6); }
.lx-face { box-sizing: border-box; padding: 14px 18px 8px; display: flex; flex-direction: column; gap: 10px; min-height: 0; background: var(--card); }
.lx .f-main { overflow: hidden; }
.lx .f-main.solo { flex: 1 1 auto; padding-bottom: 14px; }
.lx .fc-h { font-size: clamp(21px, 5.8vw, 27px); line-height: 1.17; letter-spacing: -0.01em; margin: 0; }
.lx .fc-chart { flex: 1 1 auto; min-height: 64px; display: flex; flex-direction: column; justify-content: center; }
.lx .fc-t { margin: 0; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.lx .fc-src { margin: 0; font-size: 12px; line-height: 1.35; color: var(--muted); }
.lx .roomy .fc-h { font-size: clamp(24px, 6.6vw, 30px); line-height: 1.14; }
.lx .roomy .fc-t { font-size: 17px; line-height: 1.45; }
.lx .roomy.lx-face { gap: 12px; }
.lx .tight .fc-h { font-size: clamp(18px, 5vw, 22px); }
.lx .tight .fc-t { font-size: 14px; line-height: 1.4; }
.lx .tight.lx-face { gap: 7px; padding-top: 12px; }
.lx .tighter.lx-face { gap: 3px; padding: 8px 12px var(--dock-zone); }
.lx .tighter .fc-meta { gap: 2px 8px; line-height: 1.2; font-size: 11px; }
.lx .tighter .fc-h { font-size: 17px; }
.lx .tighter .fc-t { font-size: 13px; line-height: 1.3; }
.lx .tighter .fc-src { display: none; }
.lx .tight .cc-leg { line-height: 1.25; }
.lx .tighter .cc-leg { font-size: 11px; }
.lx .roomy .fc-duel .dv b { font-size: clamp(34px, 10.5vw, 50px); }
.lx .tight .fc-duel .dv b { font-size: clamp(26px, 7.6vw, 36px); }
.lx .tight .fc-duel .dc { display: none; }
.lx .tighter .fc-duel .dv b { font-size: 25px; }
.lx .tighter .fc-duel .dv span { font-size: 12px; }

/* the deck: a pile; the next card waits under the top one, the last one waits above the screen. Cards are not made
   anew on paging: the next card itself comes up (it grows and its veil clears as the finger moves), the one that flew
   away waits above for a step back. Only transform and opacity move, so the phone moves them without redrawing. */
/* the same room on every side of the card, the bottom too: the home indicator of the phone lies over the card's foot */
.lx-stage > .lx-card { position: absolute; inset: 8px; touch-action: none; will-change: transform; }
.lx-veil { position: absolute; inset: 0; z-index: 8; background: var(--card); opacity: 0; pointer-events: none; will-change: opacity; }
.lx-top { z-index: 2; }
.lx-under { z-index: 1; transform: translateY(12px) scale(0.955); pointer-events: none; }
.lx-under > .lx-veil { opacity: 0.6; }
.lx-above { z-index: 3; transform: translateY(-112%); pointer-events: none; visibility: hidden; }
.lx-above.lx-pull { visibility: visible; }
.lx-gone { z-index: 3; pointer-events: none; }
.lx-move { transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.3, 1); }
.lx-settle { transition: transform 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.15); }
.lx-move > .lx-veil, .lx-settle > .lx-veil { transition: opacity 0.38s ease; }
.lx-fly { transition: transform 0.34s cubic-bezier(0.3, 0.6, 0.4, 1); }
.lx-drag, .lx-drag > .lx-veil { transition: none !important; }
/* the chart of the next card waits to draw itself until the card comes up */
.lx .lx-under .cc *, .lx .lx-under .fc-duel b { animation-play-state: paused !important; }

/* the back of a card: the card turns over to «more», which scrolls */
.lx-faces { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; perspective: 1400px; }
.lx-rig { position: relative; height: 100%; transform-style: preserve-3d; will-change: transform; }
.lx-rig.lx-glide { transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.25, 1); }
.lx-rig > .lx-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lx-face.f-main { touch-action: none; }
.lx-face.f-more { transform: rotateY(180deg); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; padding-bottom: 22px; }
.lx-face.f-more::-webkit-scrollbar { display: none; }
/* Safari routes touches to the hidden side of a turned card: the side that is away is switched off halfway through the turn */
.lx-face.f-more { visibility: hidden; transition: visibility 0s linear 0.22s; }
.on-side .lx-face.f-more { visibility: visible; }
.on-side .lx-face.f-main { visibility: hidden; transition: visibility 0s linear 0.22s; }
.lx-xdrag .lx-face.f-main, .lx-xdrag .lx-face.f-more { visibility: visible; transition: none; }
/* the top of the card: what and where on the left, the way to «more» on the right */
.lx-top-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.lx-top-row .fc-meta { padding-top: 6px; min-width: 0; }
.lx-pill, .lx-back { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; border: 0; border-radius: 999px; background: var(--chip); padding: 7px 10px 7px 12px;
  font-size: 13px !important; font-weight: 500; color: var(--ink) !important; cursor: pointer; white-space: nowrap; }
.lx-back { padding: 7px 12px 7px 8px; }
.lx-pill svg[aria-hidden], .lx-back svg[aria-hidden] { width: 15px; height: 15px; }
.lx-pulse { animation: lx-pulse 1.4s ease-in-out 0.6s 3; }
@keyframes lx-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, var(--c1)) 50%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent, var(--c1)) 0%, transparent); } }
/* the top of «more»: the way back, and which side this is */
.lx-side-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lx-pl { font: 600 12px/1 var(--f-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent, var(--c1)); }
.lx-face h4 { margin: 8px 0 0; font: 600 15px/1.3 var(--f-body); text-transform: none; letter-spacing: 0; color: var(--ink); }
.lx-face > p:not(.fc-t):not(.fc-src):not(.lx-small):not(.lx-q) { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.lx-face .lx-sh { margin: 0; }
.lx .fc-chart.lx-err { min-height: 0; flex: 0 0 auto; display: block; margin-top: 2px; }
/* a card whose body is still coming from the server: a spinner in the place of its chart until the chart is there */
.lx .fc-chart.lx-wait { margin: 10px 0 4px; border-radius: 14px; background: color-mix(in srgb, var(--muted) 8%, transparent); align-items: center; }
/* the feed itself is on its way: a spinner in the middle of the first card */
.lx .lx-load { align-items: center; justify-content: center; }
.lx .lx-load .spin { --sz: 48px; --w: 4.5px; }
/* the first visit: a hint under the button */
.lx-coach { position: absolute; left: 24px; right: 24px; top: 46%; z-index: 6; display: flex; justify-content: center; pointer-events: none; animation: fx-fade 0.4s ease both; }
.lx-coach span { padding: 9px 14px; border-radius: 16px; background: var(--ink); color: var(--paper); font: 500 13.5px/1.35 var(--f-body); text-align: center;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); }

/* the row of actions at the foot of the card, as under a post: heart, reaction, share — save, more. Two glass capsules
   float over the card; its sides keep clear of them, and «more» scrolls under them and fades out at the edge. */
.lx-foot { position: absolute; left: var(--dock-in); right: var(--dock-in); bottom: var(--dock-in); z-index: 6; display: flex; justify-content: space-between;
  align-items: center; pointer-events: none; }
.lx-foot::before { content: ''; position: absolute; left: calc(-1 * var(--dock-in)); right: calc(-1 * var(--dock-in)); bottom: calc(-1 * var(--dock-in)); height: calc(var(--dock-zone) + 18px);
  background: linear-gradient(to top, var(--card) 45%, color-mix(in srgb, var(--card) 0%, transparent)); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; }
.on-side > .lx-foot::before { opacity: 1; }
.lx-fl, .lx-fr { display: flex; align-items: center; height: var(--dock-h); padding: 0 3px; border-radius: 999px; pointer-events: auto; }
.lx-act { position: relative; min-width: 44px; height: 40px; border: 0; background: none; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; cursor: pointer; color: var(--ink) !important; padding: 0 8px; box-sizing: border-box; transition: transform 0.12s ease; }
.lx-act small { font: 600 13px/1 var(--f-body); color: var(--ink-2); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.lx-act small:empty { display: none; }
.lx-act:active { background: color-mix(in srgb, var(--ink) 8%, transparent); transform: scale(0.92); }
.lx .lx-card:has(> .lx-foot) .lx-face { padding-bottom: var(--dock-zone); }
.lx .lx-card:has(> .lx-foot) .lx-face.f-more { padding-bottom: calc(var(--dock-zone) + 16px); }
.lx-act.on[data-act="like"] { color: var(--crit) !important; }
.lx-act.on[data-act="like"] svg { fill: currentColor; animation: lx-beat 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes lx-beat { 0% { transform: scale(0.6); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
.lx-act.on[data-act="save"] { color: var(--scenario) !important; }
.lx-act.on[data-act="save"] svg { fill: currentColor; }
/* reactions, as a context menu on an iPhone: a glass menu pops out of the button; every reaction is a row with its icon
   and its name, the chosen ones ticked; the row under the finger lights up. */
.lx-pick { position: absolute; left: var(--dock-in); bottom: calc(var(--dock-h) + var(--dock-in) + 10px); z-index: 7; width: 236px; max-width: calc(100% - 2 * var(--dock-in));
  box-sizing: border-box; display: flex; flex-direction: column; gap: 1px; padding: 6px; border-radius: 24px;
  transform-origin: 70px 100%; animation: lx-pop 0.32s cubic-bezier(0.25, 1.3, 0.5, 1) backwards; }
.lx-pick.lx-out { animation: lx-unpop 0.16s ease forwards; pointer-events: none; }
@keyframes lx-pop { from { opacity: 0; transform: translateY(12px) scale(0.6); } }
@keyframes lx-unpop { to { opacity: 0; transform: translateY(8px) scale(0.85); } }
.lx-pick, .on-side > .lx-foot .lx-fl, .on-side > .lx-foot .lx-fr { -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
.lx-pick button { display: grid; grid-template-columns: 24px minmax(0, 1fr) 18px; align-items: center; gap: 12px; width: 100%; min-height: 44px; box-sizing: border-box;
  padding: 0 12px; border: 0; border-radius: 18px; background: none; color: var(--ink) !important; font-size: 16px !important; font-weight: 500; text-align: start;
  cursor: pointer; transition: background-color 0.12s ease; animation: fx-fade 0.25s ease backwards; animation-delay: calc(60ms + var(--i, 0) * 25ms); }
.lx-pick button > svg[aria-hidden] { width: 22px; height: 22px; color: var(--ink-2); }
.lx-pick button > svg[aria-hidden]:last-child { width: 18px; height: 18px; stroke-width: 2.4; color: var(--accent, var(--c1)); opacity: 0; transform: scale(0.5);
  transition: opacity 0.15s ease, transform 0.2s cubic-bezier(0.3, 1.6, 0.5, 1); }
.lx-pick button.on > svg[aria-hidden] { color: var(--accent, var(--c1)); }
.lx-pick button.on[data-pick="like"] > svg[aria-hidden]:first-child { color: var(--crit); fill: currentColor; }
.lx-pick button.on > svg[aria-hidden]:last-child { opacity: 1; transform: none; }
.lx-pick button.hot { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.lx-pick button:focus-visible { outline: 2px solid var(--accent, var(--c1)); outline-offset: -2px; }
@media (hover: hover) { .lx-pick:not(.has-hot) button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } }
.lx-act.on[data-act="react"] { color: var(--accent, var(--c1)) !important; }
.lx-burst { position: absolute; left: 50%; top: 42%; z-index: 5; font-size: 84px; line-height: 1; pointer-events: none; transform: translate(-50%, -50%); animation: lx-burst 0.75s ease forwards; }
/* a reaction bursts as its icon on a disc of the topic's colour */
.lx-burst-i { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: var(--accent, var(--c1)); color: #fff;
  box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--accent, var(--c1)) 70%, transparent); }
.lx .lx-burst-i svg[aria-hidden] { width: 52px; height: 52px; stroke-width: 1.8; }
@keyframes lx-burst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -62%) scale(1); } }
/* where to go further: buttons that look like buttons */
.lx-gos { display: flex; flex-direction: column; gap: 6px; }
.lx-go { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; text-align: start; border: 0; border-radius: 14px; padding: 11px 12px;
  background: color-mix(in srgb, var(--accent, var(--c1)) 11%, var(--card)); color: var(--ink) !important; cursor: pointer; text-decoration: none; font-size: 14.5px !important; line-height: 1.3; }
.lx-go.lite { background: var(--chip); }
.lx-go-i { font-size: 18px; flex: 0 0 auto; }
.lx-go-t { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.lx-go-t small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 1px; }
.lx-go svg[aria-hidden] { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent, var(--c1)); }

/* guesses, the install hint, the end */
.lx-small { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.45; }
.lx-q { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.lx-q b { color: var(--ink); font-weight: 600; }
/* a guess: the question over the answers; answered, the verdict in its place */
.lx-top-row { min-height: 34px; flex-shrink: 0; }  /* as tall as «more» in it: a guess that gets it on the answer does not move */
.lx .k-guess .fc-chart, .lx .k-asked .fc-chart { justify-content: center; }
/* the chart is what the question is about: on a short screen the words and the answers give way first */
.lx .k-guess .f-main .fc-chart, .lx .k-asked .f-main .fc-chart { min-height: 150px; }
.lx .k-guess .tighter .fc-chart, .lx .k-asked .tighter .fc-chart { min-height: 120px; }
.lx-ask { display: grid; }
.lx-ask > div { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 2px; }
.lx-ask.done .lx-was { opacity: 0; }
.lx-ask b { font: 600 16px/1.3 var(--f-body); color: var(--ink); }
.lx-ask b.ok { color: var(--good); }
.lx-ask b.no { color: var(--crit); }
.lx-ask span { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
/* three answers stacked as on the chart's scale: above on top, below at the bottom; each says its range */
.lx-guess { display: flex; flex-direction: column; gap: 6px; }
.lx-opt { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 48px; box-sizing: border-box;
  padding: 7px 14px 7px 10px; border: 1.5px solid transparent; border-radius: 14px; background: var(--chip); color: var(--ink); text-align: start; cursor: pointer;
  font-size: 15.5px !important; line-height: 1.25; transition: transform 0.12s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; }
.lx-opt:active { transform: scale(0.98); }
.lx-opt:focus-visible { outline: 2px solid var(--accent, var(--c1)); outline-offset: 2px; }
@media (hover: hover) { .lx-guess:not(.done) .lx-opt:hover { border-color: color-mix(in srgb, var(--accent, var(--c1)) 45%, transparent); } }
.lx-oi { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--accent, var(--c1)); }
.lx .lx-oi svg[aria-hidden] { grid-area: 1 / 1; width: 16px; height: 16px; stroke-width: 2.2; }
.lx .lx-oi svg + svg { stroke-width: 2.6; }
.lx-oi svg:first-child:not(:last-child) { opacity: 0; }  /* answered: the mark replaces the arrow */
.lx-ot { font-weight: 500; min-width: 0; }
.lx-or { font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lx-guess.done .lx-opt { cursor: default; }
.lx-guess.done .lx-opt:active { transform: none; }
.lx-opt.is-ok { background: color-mix(in srgb, var(--good) 14%, var(--card)); border-color: color-mix(in srgb, var(--good) 55%, transparent); }
.lx-opt.is-no { background: color-mix(in srgb, var(--crit) 11%, var(--card)); border-color: color-mix(in srgb, var(--crit) 50%, transparent); }
.lx-opt.is-ok .lx-oi { background: var(--good); color: #fff; }
.lx-opt.is-no .lx-oi { background: var(--crit); color: #fff; }
.lx-opt.is-ok .lx-or, .lx-opt.is-no .lx-or { color: var(--ink-2); }
.lx-opt.is-off { opacity: 0.45; }
.lx .tight .lx-opt { min-height: 42px; font-size: 14.5px !important; }
.lx .tight .lx-q { font-size: 15px; }
.lx .k-guess .tight .lx-ask span { display: none; }
.lx .tight .lx-ask b { font-size: 15px; }
.lx .tighter .lx-guess { gap: 4px; }
.lx .tighter .lx-opt { min-height: 38px; padding-block: 3px; }
.lx .tighter .lx-oi { width: 24px; height: 24px; }
.lx .tighter .lx-ask span { font-size: 12.5px; }
.lx .btns .btn, .lx-sheet .btns .btn { border-radius: 999px; padding: 11px 12px; font-size: 14.5px; cursor: pointer; border: 1px solid var(--rule); background: var(--card); color: var(--ink); }
.lx .btn.primary, .lx-sheet .btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lx .btns, .lx-sheet .btns { display: flex; flex-wrap: wrap; gap: 8px; }
.lx-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.45; }
.lx .k-install .f-main, .lx .k-end .f-main { justify-content: center; }
/* a collection: the cover in the feed, the bar over its cards, the note under a card's front, the conclusion */
.lx .lx-cover { justify-content: center; }
.lx-colsteps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; line-height: 1.35; color: var(--ink-2); min-height: 0; overflow: hidden; }
.lx .tight .lx-colsteps { font-size: 13.5px; gap: 4px; }
.lx .tighter .lx-colsteps { display: none; }
.lx-colbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin: -4px -6px 0; font-size: 12.5px; line-height: 1.25; color: var(--muted); }
.lx-colx { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--chip); color: var(--ink); cursor: pointer; padding: 0; }
.lx .lx-colx svg[aria-hidden] { width: 16px; height: 16px; }
.lx-colq { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-coln { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.lx .lx-note { margin: 0; flex: 0 0 auto; padding: 8px 12px; border-radius: 12px; background: var(--chip); font-size: 14px; line-height: 1.4; color: var(--ink); }
.lx .tighter .lx-note { font-size: 13px; padding: 6px 10px; }
.lx-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 16px; }
.lx-nums div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lx-nums b { font: 500 clamp(24px, 7vw, 32px)/1 var(--f-display); font-variant-numeric: tabular-nums; color: var(--c1); }
.lx-nums b small { font-size: 0.55em; margin-left: 0.12em; }
.lx-nums span { font-size: 13px; line-height: 1.3; color: var(--ink-2); }
.lx .lx-concl .fc-src a { color: inherit; }
.lx .lx-concl .btns .btn svg[aria-hidden], .lx .lx-cover .btns .btn svg[aria-hidden] { width: 15px; height: 15px; vertical-align: -3px; }

/* the sheet: the menu, topics, interests, saved, people, the profile. It scrolls only up and down. */
/* transparent when closed, not merely invisible: Safari reads the colour of a fixed layer near the edges for its bars */
.lx-scrim { position: fixed; inset: 0; z-index: 40; background-color: rgba(6, 9, 15, 0); pointer-events: none; transition: background-color 0.25s ease; }
.lx-scrim.on { background-color: rgba(6, 9, 15, 0.5); pointer-events: auto; }
/* it floats over the screen, as a sheet on an iPhone: away from the edges, round on every corner */
.lx-sheet { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 41; max-height: 88%; display: flex; flex-direction: column;
  max-width: 640px; margin: 0 auto; background: var(--card); color: var(--ink); --rb: calc(31px + min(15px, env(safe-area-inset-bottom, 0px) * 0.45)); border-radius: 34px 34px var(--rb) var(--rb); box-shadow: 0 0 0 0.5px var(--card-line), 0 24px 60px -16px rgba(10, 14, 24, 0.45);
  transform: translateY(calc(100% + 40px)); transition: transform 0.34s cubic-bezier(0.2, 0.9, 0.3, 1); overflow: hidden; overscroll-behavior: contain; }
.lx-sheet.on { transform: none; }
.lx-grab { width: 36px; height: 5px; border-radius: 3px; background: var(--axis); margin: 8px auto 0; flex: 0 0 auto; }
.lx-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--chip); color: var(--ink); display: grid; place-items: center; cursor: pointer; z-index: 2; }
.lx-close svg[aria-hidden] { width: 18px; height: 18px; }
.lx-sheet-body { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 12px 20px 24px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lx-sheet-body > * { max-width: 100%; min-width: 0; }
.lx-sheet-body h4 { margin: 12px 0 2px; font: 600 14px/1.3 var(--f-body); text-transform: none; letter-spacing: 0; color: var(--ink); }
.lx-sheet-body p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.lx-sh { margin: 4px 44px 4px 0; font: 600 19px/1.22 var(--f-body); text-transform: none; letter-spacing: -0.01em; color: var(--ink); }
.lx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: start; border: 0; border-bottom: 1px solid var(--rule);
  background: none; padding: 11px 2px; font-size: 15px; line-height: 1.35; color: var(--ink); cursor: pointer; text-decoration: none; box-sizing: border-box; min-width: 0; }
.lx-row span { min-width: 0; overflow-wrap: anywhere; }
.lx-row small { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.lx-row:active { background: var(--chip); }
.lx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lx-chips .lx-chip { white-space: normal; flex: 0 1 auto; max-width: 100%; box-sizing: border-box; text-align: start; }
.lx-why { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.lx-reg summary { display: flex; justify-content: space-between; padding: 11px 2px; border-bottom: 1px solid var(--rule); cursor: pointer; font-size: 15px; list-style: none; color: var(--ink); }
.lx-reg summary::-webkit-details-marker { display: none; }
.lx-reg summary small { color: var(--muted); font-size: 12.5px; }
.lx-reg[open] summary { font-weight: 600; }
.lx-reg .lx-row { padding-left: 14px; }
.lx-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--rule); border-radius: 12px; padding: 4px 10px; margin-top: 4px; color: var(--muted); }
.lx-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 16px; padding: 6px 0; color: var(--ink); }
.lx-int { display: grid; grid-template-columns: minmax(0, 1fr) 60px 30px 30px 30px; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--ink); }
.lx-meter { height: 7px; border-radius: 999px; background: var(--chip); overflow: hidden; }
.lx-meter i { display: block; height: 100%; width: var(--p); background: var(--c1); }
.lx-mini { width: 30px; height: 30px; border: 1px solid var(--rule); border-radius: 50%; background: none; color: var(--ink); cursor: pointer; display: grid; place-items: center; font-size: 16px; padding: 0; }
.lx-mini svg[aria-hidden] { width: 14px; height: 14px; }
/* what people find interesting, the profile */
.pp-head { margin: 0; color: var(--ink-2); }
.pp-empty { color: var(--ink-2); margin: 0; }
.pp-sec { display: flex; flex-direction: column; gap: 8px; }
.pp-sec h4 { font: 600 15px/1.3 var(--f-body); text-transform: none; letter-spacing: 0; margin: 8px 0 0; }
.pp-sec ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pp-sec li { display: block; }
.pp-sec li:has(.pp-bar) { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 2px 10px; align-items: center; }
.pp-sec li > small { display: block; }
.pp-sec li small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.pp-sec p { margin: 0 0 6px; color: var(--ink-2); }
.pp-card { border: 0; background: transparent; padding: 0; text-align: start; color: var(--ink); cursor: pointer; font-size: 14.5px; line-height: 1.4; }
.pp-card:hover { color: var(--scenario); text-decoration: underline; }
.pp-name { font-size: 14.5px; }
.pp-bar { height: 8px; border-radius: 999px; background: var(--chip); overflow: hidden; }
.pp-bar i { display: block; height: 100%; width: var(--p); background: var(--c1); border-radius: 999px; }
.pr-status { margin: 0; font-size: 15.5px; line-height: 1.45; }
.pr-what, .pr-privacy { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.pr-msg { margin: 0; min-height: 1.3em; color: var(--ink-2); font-size: 14px; }

/* the profile as a card (site/feed/feed.js profileHtml): who, what was done, the number and the sign-in, the buttons */
.pf-head { display: flex; align-items: center; gap: 14px; margin: 4px 44px 2px 0; min-width: 0; }
.pf-ava { flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 21px/1 var(--f-body); letter-spacing: 0.02em;
  background: linear-gradient(145deg, hsl(var(--h) 62% 58%), hsl(calc(var(--h) + 40) 58% 42%)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.pf-ava.none { background: var(--chip); color: var(--muted); box-shadow: none; }
.pf-ava svg[aria-hidden] { width: 28px; height: 28px; }
.pf-who { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pf-name { margin: 0; font: 600 20px/1.2 var(--f-body); letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
.pf-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; line-height: 1; padding: 5px 9px; border-radius: 999px; background: var(--chip); color: var(--ink-2); }
.pf-badge svg[aria-hidden] { width: 14px; height: 14px; stroke-width: 2.4; }
.pf-badge.key { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.pf-badge.owner { background: var(--ink); color: var(--paper); }
.lx-sheet-body .pf-since { margin: 0; font-size: 13px; color: var(--muted); }
.pf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.pf-stat { background: var(--chip); border-radius: 14px; padding: 10px 10px 9px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-stat b { font: 600 20px/1.1 var(--f-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.pf-stat span { font-size: 12px; line-height: 1.25; color: var(--muted); overflow-wrap: break-word; }
.pf-stat.lite { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); padding-block: 8px 7px; }
.pf-stat.lite b { font-size: 16px; }
.pf-ids { flex: 0 0 auto; display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.pf-id { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 10px 12px; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--ink); }
.pf-id:last-child { border-bottom: 0; }
.pf-id small { flex: 1 0 100%; color: var(--muted); font-size: 12px; }
.pf-id > span { flex: 1 0 100%; color: var(--ink-2); font-size: 13.5px; }
.pf-id code { font: 500 13.5px/1.35 var(--f-mono); color: var(--ink); overflow-wrap: anywhere; }
.pf-id > code { flex: 1 1 auto; min-width: 0; }
.pf-copy { flex: 0 0 auto; border: 1px solid var(--rule); background: var(--card); color: var(--ink); border-radius: 999px; padding: 5px 11px; font-size: 13px; cursor: pointer; }
.pf-copy:active { background: var(--chip); }
.lx-go.pf-admin { background: var(--ink); color: var(--paper) !important; }
.lx-go.pf-admin.warn .lx-go-t small { color: #ffb4a8; font-weight: 600; }
/* the owner's admin waits: a dot on the profile button (site/feed/feed.js showAlerts) */
.lx-ib .lx-dot { position: absolute; top: 4px; left: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px var(--card); }
.lx-ib .lx-dot.crit { background: var(--crit); }
.lx-go.pf-admin .lx-go-t small { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.lx-go.pf-admin svg[aria-hidden] { color: var(--paper); }
.pf-danger { color: var(--crit) !important; }
/* the account in the profile card: name, handle, about, the email with its consent, the ways to sign in (feed.js accountHtml) */
.pf-form { display: flex; flex-direction: column; gap: 8px; }
.pf-form label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--muted); }
.pf-form input:not([type=checkbox]):not([type=radio]), .pf-form textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
  padding: 8px 10px; width: 100%; box-sizing: border-box; min-width: 0; }
.pf-form textarea { resize: vertical; min-height: 2.6em; }
.pf-form input:not([type=radio]):focus, .pf-form textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; }
.pf-at { display: flex; align-items: center; gap: 4px; }
.pf-at b { font: 500 16px var(--f-mono); color: var(--muted); }
.pf-form label.pf-tick, .pf-tick { flex-direction: row; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.pf-tick input { margin: 3px 0 0; width: 18px; height: 18px; flex: none; }
.pf-hint { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
/* the field for robots (server/guard.mjs): off the screen; the editors' marks and the blocked account (server/moderation.mjs) */
.pf-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pf-mod { color: var(--warn, #b45309); }
p.pf-mod { border-inline-start: 3px solid var(--warn, #b45309); padding-inline-start: 10px; }
.pf-form select { font: inherit; font-size: 16px; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 8px 10px; }
.pf-m { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; flex: 1 0 100%; padding: 4px 0; }
.pf-m b { font-weight: 500; color: var(--ink); }
.pf-m small { flex: 1 1 auto; color: var(--muted); font-size: 12.5px; }
.pf-mail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pf-mail code { font: 500 14px var(--f-mono); color: var(--ink); overflow-wrap: anywhere; }
.pf-mail small { color: var(--muted); font-size: 12.5px; }
/* keys for agents and suggestions to the editors (feed.js agentsHtml) */
.pf-newkey { background: var(--chip); }
.pf-keyrow small { flex-basis: 100%; }
.pf-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-newkey small { color: var(--ink-2) !important; font-weight: 600; }
.pf-kinds { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pf-kinds legend { padding: 0; margin-bottom: 4px; font-size: 13px; color: var(--muted); }
.pf-sgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-sg { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 12px; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.pf-sg > small { color: var(--muted); font-size: 12px; }
.pf-sg.accepted > small b { color: var(--good, var(--ink)); }
.pf-sg-reply { margin: 4px 0 0; padding: 6px 10px; border-radius: 10px; background: var(--chip); font-size: 13.5px; color: var(--ink-2); }
.pf-sg-reply small { display: block; color: var(--muted); font-size: 11.5px; }
/* a phone: two columns, the number beside its word, so no word breaks in two */
@media (max-width: 480px) {
  .pf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-stat, .pf-stat.lite { flex-direction: row; align-items: baseline; gap: 8px; padding: 8px 11px; }
  .pf-stat b, .pf-stat.lite b { font-size: 17px; min-width: 1.6em; }
  .pf-stat span { font-size: 13px; overflow-wrap: normal; }
}

/* the sections of the site, dropping from the name at the top (site/feed/feed.js openNav) */
.lx-drop { position: fixed; z-index: 35; top: calc(env(safe-area-inset-top, 0px) + 46px); left: 10px; min-width: 236px; max-width: calc(100vw - 20px);
  padding: 6px; border-radius: 18px; background: linear-gradient(180deg, var(--glass-hi), var(--glass));
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: 0 22px 44px -16px rgba(16, 20, 40, 0.42), 0 0 0 0.5px var(--glass-line), inset 0 1px 0 var(--glass-rim);
  transform-origin: 28px 0; transform: scale(0.94) translateY(-6px); opacity: 0; transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.14s ease; }
.lx-drop.on { transform: none; opacity: 1; }
.lx-drop ul { list-style: none; margin: 0; padding: 0; }
.lx-drop a { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; padding: 0 12px; border-radius: 12px;
  color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 500; }
.lx-drop a:hover, .lx-drop a:focus-visible { background: color-mix(in srgb, var(--ink) 7%, transparent); outline: none; }
.lx-drop a:active { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.lx-drop a[aria-current] { font-weight: 600; }
.lx-drop a svg[aria-hidden] { width: 18px; height: 18px; stroke-width: 2.4; color: var(--ink-2); }
.lx-drop .lx-drop-lang { margin-top: 5px; border-radius: 12px; color: var(--ink-2); font-weight: 400; font-size: 15px; position: relative; }
.lx-drop .lx-drop-lang::before { content: ''; position: absolute; left: 12px; right: 12px; top: -3px; border-top: 1px solid var(--glass-line); }
.lx-home svg[aria-hidden] { transition: transform 0.18s ease; }
.lx-home[aria-expanded="true"] svg[aria-hidden] { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .lx-drop { transition: none; transform: none; } .lx-home svg[aria-hidden] { transition: none; } }
.linkbtn { border: 0; background: transparent; color: var(--crit); padding: 0; cursor: pointer; font-size: 13.5px; text-decoration: underline; }
.pf-old { flex-basis: 100%; font-size: 13.5px; color: var(--muted, inherit); }

.lx-toast { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 60px); z-index: 50; max-width: calc(100% - 32px); padding: 9px 16px; border-radius: 999px;
  background: var(--ink); color: var(--paper); font-size: 14px; line-height: 1.3; text-align: center; opacity: 0; transform: translate(-50%, -6px);
  transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; }
.lx-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* the chart of a card on screen draws itself (a card that waits under the top one starts when it comes up) */
.lx .lx-card.reveal .cc:not(.k-strands) .ln.fact { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fx-draw 1s cubic-bezier(0.45, 0.05, 0.25, 1) 0.1s forwards; }
.lx .lx-card.reveal .cc .ln.past, .lx .lx-card.reveal .cc .ln.proj, .lx .lx-card.reveal .cc .band, .lx .lx-card.reveal .cc .mk, .lx .lx-card.reveal .cc .fit { animation: fx-fade 0.5s ease 0.6s both; }
.lx .lx-card.reveal .cc .bar { transform-box: fill-box; animation: fx-grow-y 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 28ms); }
.lx .lx-card.reveal .cc.k-lags .bar { transform-origin: 50% 100%; }
.lx .lx-card.reveal .cc.k-bars .bar { transform-origin: 0 50%; animation-name: fx-grow-x; }
.lx .lx-card.reveal .cc.k-bars .bar.lt { transform-origin: 100% 50%; }
.lx .lx-card.reveal .cc .bv.big { animation: fx-fade 0.4s ease both; }  /* each value's delay is in its own style (site/shared/mchart.mjs) */
.lx .lx-card.reveal .cc .dt { animation: fx-fade 0.45s ease 0.1s both; }
.lx .lx-card.reveal .cc .gap { animation: fx-fade 0.5s ease 0.8s both; }
.lx .lx-card.reveal .cc .end { animation: fx-fade 0.3s ease 0.95s both; }
.lx .lx-card.reveal .cc .lab, .lx .lx-card.reveal .cc .lead, .lx .lx-card.reveal .cc .xline, .lx .lx-card.reveal .cc .xt { animation: fx-fade 0.35s ease 1.05s both; }
.lx .lx-card.reveal .cc .xring { transform-box: fill-box; transform-origin: center; animation: fx-pop 0.5s ease 0.95s both; }
.lx .lx-card.reveal .fc-duel .dv b { animation: fx-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.lx .lx-card.reveal .fc-duel .dv.b b { animation-delay: 0.08s; }
@keyframes fx-rise { from { opacity: 0; transform: translateY(6px); } }
/* a guess: its question waits with the chart; the answer draws on what happened and puts its point */
.lx .lx-card.reveal .cc .zone, .lx .lx-card.reveal .cc .ask, .lx .lx-card.reveal .cc .pin.fc, .lx .lx-card.reveal .cc .pt.fc { animation: fx-fade 0.4s ease 0.7s both; }
.lx .lx-card.reveal .cc .ln.rv { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fx-draw 0.5s cubic-bezier(0.45, 0.05, 0.25, 1) 0.7s forwards; }
.lx .lx-card.reveal .cc .pin.rv { transform-box: fill-box; transform-origin: center; animation: fx-pop 0.45s ease 1.1s both; }
.lx .lx-card.reveal .cc .pt.rv { animation: fx-fade 0.3s ease 1.2s both; }
/* …and when its point is there, the verdict takes the question's place and the answers show which was right;
   until then the chosen answer is only marked */
.lx .lx-card.reveal .lx-ask.done .lx-was { animation: fx-gone 0.2s ease 1.1s both; }
.lx .lx-card.reveal .lx-ask.done .lx-now { animation: fx-fade 0.3s ease 1.2s both; }
.lx .lx-card.reveal .lx-guess.done .lx-opt { animation: fx-unset 0.3s ease 1.15s both; }
.lx .lx-card.reveal .lx-guess.done .lx-opt[aria-pressed="true"] { animation-name: fx-chosen; }
.lx .lx-card.reveal .lx-opt.is-ok .lx-oi, .lx .lx-card.reveal .lx-opt.is-no .lx-oi { animation: fx-mark 0.3s ease 1.15s both; }
.lx .lx-card.reveal .lx-oi svg:first-child:not(:last-child) { animation: fx-gone 0.15s ease 1.15s both; }
.lx .lx-card.reveal .lx-oi svg + svg { transform-origin: center; animation: fx-pop 0.4s ease 1.15s both; }
@keyframes fx-gone { from { opacity: 1; } to { opacity: 0; } }
@keyframes fx-mark { from { background-color: var(--card); color: var(--accent, var(--c1)); } }
@keyframes fx-unset { from { background-color: var(--chip); border-color: transparent; opacity: 1; } }
@keyframes fx-chosen { from { background-color: var(--chip); border-color: var(--accent, var(--c1)); opacity: 1; } }
.lx .lx-card.reveal .cc .dt.hi { transform-box: fill-box; transform-origin: center; animation: fx-pop 0.5s ease 0.55s both; }
@keyframes fx-draw { to { stroke-dashoffset: 0; } }
@keyframes fx-fade { from { opacity: 0; } }
@keyframes fx-grow-y { from { transform: scaleY(0); } }
@keyframes fx-grow-x { from { transform: scaleX(0); } }
@keyframes fx-pop { 0% { transform: scale(0); } 70% { transform: scale(1.4); } 100% { transform: scale(1); } }

@media (min-width: 720px) {
  .lx-bar, .lx-chips-row { max-width: 640px; width: 100%; margin: 0 auto; box-sizing: border-box; }
  .lx-face { padding: 20px 22px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .lx *, .lx, .lx-sheet, .lx-scrim, .lx-head { transition: none !important; animation: none !important; }
  .lx .lx-card.reveal .cc .ln.fact, .lx .lx-card.reveal .cc .ln.rv { stroke-dashoffset: 0; }
}

/* Owner-only editorial rows share the reaction menu; neutral has no mark. */
.lx-pick { max-height: calc(100% - var(--dock-h) - var(--dock-in) - 32px); overflow-y: auto; overscroll-behavior: contain; }
.lx-pick-label { padding: 10px 12px 5px; margin-top: 4px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 12px; }
.lx-pick-hint { padding: 5px 12px 7px; color: var(--ink-2); font-size: 11px; }
.lx-pick button:disabled { opacity: .5; cursor: wait; }
.lx-act[data-editorial="1"]::after, .lx-act[data-editorial="-1"]::after { content: '✓'; position: absolute; right: 2px; top: 1px; font-size: 11px; color: var(--ink); }
.lx-act[data-editorial="-1"]::after { content: '−'; }

/* «Цитата и штамп»: a claim card (site/feed/claim-cards.mjs) — the quote and «Сбылось?»; the answer on the same card */
.o-met, .o-exceeded { --oc: #1f9d55; }
.o-exceeded { --oc: #13753d; }
.o-near { --oc: #a8820a; }
.o-late { --oc: #e0701f; }
.o-missed { --oc: #d43c3c; }
.o-met_then_reversed { --oc: #7952b3; }
.cq { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; }
.cq-who { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.3; color: var(--muted); }
.cq-who b { font-size: 16px; font-weight: 600; color: var(--ink); }
.cq-q { margin: 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--accent, var(--c1)); }
.cq-q p { margin: 0; font-family: var(--f-body); font-size: clamp(19px, 5.3vw, 24px); line-height: 1.32; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.cq-q footer { margin-top: 5px; font-size: 11.5px; color: var(--muted); }
.cq-says { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 3px solid var(--accent, var(--c1)); display: flex; flex-direction: column; gap: 6px; }
.cq-says li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 15px; line-height: 1.3; }
.cq-says b { font: 600 13px/1 var(--f-mono); color: var(--muted); }
.cq-says q { quotes: '«' '»'; color: var(--ink); }
.cq-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cq-rows li { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 3px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.25; }
.cq-rows li:last-child { border-bottom: 0; }
.cq-l { min-width: 0; flex: 1 1 auto; }
/* a row's dot: an empty ring till the answer, then the outcome's colour, how it came out beside it */
.cq-dot { flex: none; box-sizing: border-box; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--muted); opacity: 0.75; }
.cq-rows li[class*="o-"] .cq-dot { opacity: 1; }
.cq-rows li[class*="o-"] .cq-dot { border-color: var(--oc); background: var(--oc); }
.cq-chip { flex: none; font-style: normal; font-size: 14px; font-weight: 700; color: var(--oc); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cq-cap { margin: -4px 0 0; font-size: 12px; color: var(--muted); }
.cq-ask { font: 600 19px/1.1 var(--f-body); color: var(--ink); }
/* «Да / Нет» (owner's decision 2026-10-11): the question large in the room under the quote, two equal capsules, and a quiet
   link for those who only want to see; any of them opens the answer */
.cq-yn { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 0 4px; }
.cq-yn .cq-ask { font: 700 clamp(22px, 6.6vw, 28px)/1.15 var(--f-display); text-align: center; text-wrap: balance; }
.cq-ynb { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.cq-ynb button { min-height: 52px; border-radius: 999px; border: 2px solid var(--ink); background: var(--card, var(--surface)); color: var(--ink); cursor: pointer;
  font: 600 17px/1 var(--f-body) !important; transition: transform 0.12s ease, background 0.2s ease, color 0.2s ease; }
.cq-ynb button:active { transform: scale(0.97); }
@media (hover: hover) { .cq-ynb button:hover { background: var(--ink); color: var(--card, var(--surface)); } }
.cq-skip { min-height: 44px; padding: 0 10px; border: 0; background: none; cursor: pointer; color: var(--muted); font: 500 14px/1 var(--f-body) !important;
  text-decoration: underline; text-underline-offset: 3px; }
.cq-ynb button:focus-visible, .cq-skip:focus-visible, .cq-link:focus-visible { outline: 2px solid var(--focus, var(--c1)); outline-offset: 3px; }
/* after the answer: what the reader said and whether it was right, over the stamp */
.cq-verdict { font: 600 15px/1.25 var(--f-body); color: var(--ink); text-align: center; }
.cq-verdict i { font-style: normal; }
.cq-verdict .ok { color: #1f9d55; }
.cq-verdict .no { color: #d43c3c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cq-verdict .ok { color: #4cc27f; } :root:not([data-theme="light"]) .cq-verdict .no { color: #ef6b6b; } }
:root[data-theme="dark"] .cq-verdict .ok { color: #4cc27f; }
:root[data-theme="dark"] .cq-verdict .no { color: #ef6b6b; }
/* the answer: the stamp in the middle of the room the quote leaves, then the fact, the timeline and the source */
/* neither gives way: a card too tall loses its last rows (paint in feed.js), the stamp keeps its size */
.cq-ans { flex: 1 0 auto; display: flex; flex-direction: column; gap: 10px; }
.cq-res { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 8px 0 14px; }
.cq-res .cq-ask { font-size: 14px; color: var(--muted); font-weight: 500; }
.cq-stamp { box-sizing: border-box; display: block; width: calc(100% - 10px); padding: 0.16em 14px 0.1em; border: 5px solid var(--oc); border-radius: 12px;
  box-shadow: inset 0 0 0 3px var(--card, var(--surface)), inset 0 0 0 5px var(--oc); color: var(--oc); text-align: center;
  font: 700 clamp(22px, 7.5vw, 40px)/1.15 var(--f-display); letter-spacing: 0.05em; text-transform: uppercase; transform: rotate(-4deg); outline: none; }
.lx .cq-stamp span { white-space: nowrap; }
.cq-after { display: flex; flex-direction: column; gap: 8px; }
.cq-fact { margin: 0; font-size: 15.5px; line-height: 1.42; color: var(--ink); text-wrap: pretty; }
.lx .cq-tl.fc-chart { flex: none; min-height: 0; }
.cq-link { border: 0; background: none; padding: 0; color: var(--accent, var(--c1)); font: 500 13.5px/1.3 var(--f-body) !important; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cq-rows .cq-moreline, .cq-says .cq-moreline { display: block; border: 0; min-height: 0; padding-top: 4px; }
/* pressed: the stamp comes down on the card, the rest of the answer follows */
.cq-just .cq-stamp { animation: cq-stamp 0.5s cubic-bezier(0.25, 1, 0.5, 1) both; }
.cq-just .cq-res .cq-ask { animation: cq-up 0.3s ease both; }
.cq-just .cq-after, .cq-just .cq-rows .cq-chip, .cq-just .cq-cap { animation: cq-up 0.35s ease 0.32s both; }
.cq-just .cq-rows .cq-dot { animation: cq-pop 0.3s ease 0.3s both; }
@keyframes cq-stamp { 0% { opacity: 0; transform: rotate(-11deg) scale(1.9); } 55% { opacity: 1; transform: rotate(-3deg) scale(0.95); }
  75% { transform: rotate(-4.5deg) scale(1.025); } 100% { opacity: 1; transform: rotate(-4deg) scale(1); } }
@keyframes cq-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cq-pop { from { transform: scale(0.4); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .cq-just .cq-stamp, .cq-just .cq-res .cq-ask, .cq-just .cq-after, .cq-just .cq-rows .cq-chip, .cq-just .cq-cap, .cq-just .cq-rows .cq-dot { animation: none; } }
.lx .roomy .cq-q p { font-size: clamp(21px, 5.9vw, 27px); }
.lx .tight .cq { gap: 8px; }
.lx .tight .cq-q p { font-size: clamp(17px, 4.7vw, 20px); line-height: 1.3; }
.lx .tight .cq-fact { font-size: 14px; line-height: 1.35; }
.lx .tight .cq-yn { gap: 8px; padding: 4px 0 0; }
.lx .tight .cq-yn .cq-ask { font-size: 21px; }
.lx .tight .cq-ynb button { min-height: 46px; }
.lx .tight .cq-rows li { min-height: 31px; font-size: 14px; }
.lx .tight .cq-says li { font-size: 14px; }
.lx .tight .cq-res { gap: 6px; padding: 4px 0 10px; }
.lx .tighter .cq-q p { font-size: 16px; }
.lx .tighter .cq-who { font-size: 12.5px; }
.lx .tighter .cq-who b { font-size: 14.5px; }
.lx .tighter .cq-fact { font-size: 13px; }
.lx .tighter .cq-rows li { min-height: 27px; font-size: 13px; }
.lx .tighter .cq-dot { width: 16px; height: 16px; }
.lx .tighter .cq-stamp { border-width: 4px; }
.lx .tighter .cq { gap: 6px; }
.lx .tighter .cq-res { padding: 0 0 6px; }
/* the timeline (site/shared/mchart.mjs, k 'claim'): a thin axis; rings for the deadline and the fact, small dots for the words */
.cc .tl { font-family: var(--f-body); font-size: 13.5px; fill: var(--ink-2); }
.cc .tl.f { font-weight: 600; }
.cc.k-claim .xl { font-size: 12.5px; }
.cc .cw { stroke: color-mix(in srgb, var(--ink) 14%, transparent); stroke-width: 2; stroke-linecap: round; }
.cc .cl-late { stroke-width: 2.5; stroke-linecap: round; }
.cc .cl-wait { stroke-width: 2; stroke-dasharray: 5 4; }
.cc .said { fill: var(--ink); }
.cc .due { fill: var(--card, var(--surface)); stroke: var(--ink-2); stroke-width: 2; }
.cc .fhalo { opacity: 0.16; }
.cc .fring { fill: var(--card, var(--surface)); stroke-width: 3.5; }
.cc .nring { fill: var(--card, var(--surface)); stroke-width: 2.5; stroke-dasharray: 3 2.5; }
/* a promise with a number (k 'promise'): the fact line, the goal dashed in blue, the fact at the deadline a ring */
.cc .pband { fill: var(--ink); opacity: 0.045; }
.cc .pfact, .cc .pafter { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.cc .pafter { stroke-opacity: 0.32; }
.cc .pgoal { stroke: var(--goal); stroke-width: 2; stroke-dasharray: 5 4; }
.cc .pgoal-end { fill: var(--card, var(--surface)); stroke: var(--goal); stroke-width: 2; }
.cc .pgap { stroke-width: 2; stroke-dasharray: 2 3; }
.cc .phalo { opacity: 0.14; }
.cc .pring { fill: var(--card, var(--surface)); stroke-width: 3; }
.cc .psaid { fill: var(--card, var(--surface)); stroke: var(--ink); stroke-width: 2; }
.cc .pend { fill: var(--ink); fill-opacity: 0.4; }
.cc.k-promise .xl.b { font-weight: 700; fill: var(--ink); }
.cc .pl { font-family: var(--f-body); font-size: 12.5px; font-weight: 600; fill: var(--ink-2); paint-order: stroke; stroke: var(--card, var(--surface)); stroke-width: 3.5px; stroke-linejoin: round; }
.cc .pl.g { fill: var(--goal); }
.cc .pl.s { font-weight: 500; }
.cc .pu { font-family: var(--f-body); font-size: 11px; fill: var(--muted, var(--ink-2)); }
.cc .cl { font-family: var(--f-body); font-size: 14px; fill: var(--ink); }
.cc .cf { font-family: var(--f-body); font-size: 13.5px; font-weight: 700; }

/* follows, «Важное», a person's collections (site/feed/feed.js, server/social.mjs) */
.lx-by, .lx-via { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.lx-via { margin: 0 0 6px; }
.lx-who { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--ink); text-decoration: none; }
.lx-who b { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.lx-av { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 11px/1 var(--f-body);
  background: linear-gradient(145deg, hsl(var(--h) 62% 58%), hsl(calc(var(--h) + 40) 58% 42%)); }
.lx-fol { margin-left: auto; flex: 0 0 auto; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.lx-fol.on { background: none; color: var(--ink); border-color: var(--rule); }
.lx-vnote { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid var(--accent, var(--c1)); font-size: 14px; line-height: 1.4; color: var(--ink-2); font-style: italic; overflow-wrap: anywhere; }
.lx-whom { display: flex; flex-direction: column; gap: 10px; margin: 6px 0; }
.lx-imp.on svg[aria-hidden] { fill: currentColor; }
.lx-notecard .fc-t { color: var(--muted); }
.cb-st { font-size: 13px !important; color: var(--muted) !important; }
.cb-steps { margin: 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.cb-step::marker { color: var(--muted); font-size: 13px; }
.cb-row { display: flex; align-items: flex-start; gap: 8px; justify-content: space-between; }
.cb-t { font-size: 14.5px; line-height: 1.35; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.cb-btns { display: flex; gap: 4px; flex: 0 0 auto; }
.cb-note { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; white-space: normal; }
.pf-kinds { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pf-kinds legend { padding: 0; margin-bottom: 4px; font-size: 13px; color: var(--muted); }

/* the bell and the list of notifications (site/feed/feed.js, server/notices.mjs) */
.nt-row { align-items: flex-start; }
.nt-row.nt-new > span:first-child { font-weight: 600; }
.nt-when { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; font-weight: 400; }
.nt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--ink)); margin-right: 6px; vertical-align: middle; }
.nt-row .cb-note { font-weight: 400; }