/* ============================================================
   HTLB v2 — editorial minimal skin (dlgrv.com style)
   Same DOM & JS as v1; this file replaces the <style> block
   for pages generated under /v2/ (forge/site/build_pages.py).
   Light: white / ink. Dark: #111 / #d0d0d0. One accent: link hover blue.

   All sizes flow from :root tokens — no ad-hoc px in rules.
   Breakpoints stay literal (custom props do not work in @media).
   ============================================================ */
:root{
  /* color */
  --bg:#ffffff; --ink:#111111; --text:#333333; --mut:#666666; --faint:#767676;
  --line:#e3e3e3; --line-soft:#d5d5d5; --hover:#1a6aa8; --hover-2:#135a8c; --pop-bg:#ffffff;

  /* type — 4 reading steps: ui · body · h3 · h2/h1 */
  --serif:Georgia,"Songti SC","STSong",SimSun,"PingFang SC","Microsoft YaHei","Noto Serif SC","Source Han Serif SC","Times New Roman",serif;
  --sans:var(--serif);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-ui:13px;  /* весь chrome + meta: бейджи, сайдбар, foot, idx, keys */
  --fs-2:17.5px; /* body: human, rows .v, intro */
  --fs-3:21px;   /* h3 карточки */
  --fs-4:26px;   /* h2 раздела */
  --fs-5:38px;   /* h1 страницы */
  --lh-ui:1.5;
  --lh-body:1.7;
  --lh-tight:1.35;
  --fw-ui:400;
  --fw-strong:700;

  /* space scale (4px base) */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-7:32px;
  --sp-8:40px;
  --sp-9:48px;
  --sp-10:64px;
  --sp-11:96px;

  /* layout */
  --nav-h:56px;
  --side-w:328px;                      /* текущая ширина; при collapse → 0; 328 = RU-бренд в 1 строку */
  --side-w-open:328px;                 /* номинал открытого сайдбара */
  --side-pad-x:var(--sp-6);
  --side-pad-y:var(--sp-6);
  --side-pad-bottom:var(--sp-6);       /* как верх; было sp-11=96 */
  --side-dur:.2s;
  --content-rail:calc(var(--sp-9) + var(--sp-2)); /* 56: сайдбар → колонка; держит ось поиска */
  --content-pad-x:var(--sp-9);
  --content-pad-x-sm:var(--sp-5);
  --content-pad-top:var(--sp-7);       /* + nav-h */
  --content-pad-top-sm:var(--sp-4);
  --content-pad-bottom:var(--sp-11);
  --measure:66ch;                      /* Bringhurst sweet spot ~66 cpl */
  --measure-zh:60ch;                   /* CJK denser; ~30–35 fullwidth/line */
  --nav-max:75rem;                     /* 1200px */
  --search-w:min(21.25rem,32vw);       /* 340px */
  --search-h:var(--sp-8);              /* 36px ≈ 40; keep 36 via dedicated */
  --control-h:36px;
  --icon:var(--sp-4);                  /* 16px */
  --icon-btn:var(--sp-7);              /* 32px */
  --radius:var(--sp-2);
  --radius-sm:var(--sp-1);
  --shadow:0 var(--sp-1) var(--sp-4) rgba(0,0,0,.08);
  --hair:1px;
  --chevron:10px;
  --line-w:1px;
  --focus-off:2px;

  /* card / section rhythm */
  --sec-gap:var(--sp-10);              /* между разделами (было 88) */
  --card-pad-y:var(--sp-4) 0; /* симметрия верх/низ; было sp-6 */
  --card-stack:var(--sp-2);            /* единый вертикальный шаг внутри карточки */
  --card-intrinsic:18.75rem;           /* 300px contain-intrinsic */
  --idx-min:2ch;
  --idx-gap:var(--sp-2);               /* было 12+28 мёртвого */
  --sec-h-gap:var(--sp-4);
  --ui-row-pad:var(--sp-2) 0;          /* сайдбар/чипы: было 10 */
  --group-gap:var(--sp-6);

  /* marginalia (wide) */
  --marg-w:11.25rem;                   /* 180px */
  --marg-gap:var(--sp-7);              /* 28≈32 */
  --search-nudge:calc((var(--content-rail) - var(--content-pad-x)) / 2);
}
html.dark{
  --bg:#111111; --ink:#f5f5f5; --text:#d0d0d0; --mut:#a0a0a0; --faint:#7d7d7d;
  --line:#2e2e2e; --line-soft:#3a3a3a; --hover:#5cb1e8; --hover-2:#8cc6ef; --pop-bg:#1b1b1b;
}
html.side-collapsed{--side-w:0px}
:lang(zh){--measure:var(--measure-zh)}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:calc(var(--nav-h) + var(--sp-3))}
body{margin:0;background:var(--bg);color:var(--text);font:var(--fs-2)/var(--lh-body) var(--serif);-webkit-font-smoothing:antialiased}
:lang(en),:lang(ru),:lang(zh){hyphens:none;-webkit-hyphens:none}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,abbr:focus-visible{outline:var(--line-w) solid var(--hover);outline-offset:var(--focus-off)}
::selection{background:var(--ink);color:var(--bg)}

/* ---------- top bar ---------- */
.nav{position:fixed;top:0;left:var(--side-w);right:0;height:var(--nav-h);z-index:30;background:var(--bg);border-bottom:var(--line-w) solid var(--line);transition:left var(--side-dur)}
.nav-in{max-width:var(--nav-max);margin:0 auto;height:100%;display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--side-pad-x);position:relative}
.icon-btn.menu-btn{display:none}
.title{display:flex;align-items:center;gap:var(--sp-2);font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);color:var(--text);white-space:nowrap;padding:var(--sp-2);margin:calc(var(--sp-2) * -1)}
.title:hover{color:var(--ink)}
.title .logo{display:none}
.side-title{display:none} /* v1/mobile: бренд в nav; desktop v2 — в сайдбаре */
@media (min-width:1100px){
  .nav-in{position:static;max-width:none;padding:0 var(--side-pad-x);padding-left:calc((var(--nav-h) - var(--icon-btn)) / 2)}
  .icon-btn.menu-btn{display:grid} /* сворачивание сайдбара */
  .nav-title{display:none}
  .side-title{
    display:flex;align-items:flex-start;gap:var(--sp-2);
    font:var(--fw-strong) var(--fs-2)/var(--lh-tight) var(--serif);color:var(--ink);
    white-space:nowrap;padding:0;margin:0 0 var(--group-gap);
  }
  .side-title:hover{color:var(--ink)}
}
.search{position:relative;flex:1;min-width:0}
.search svg{position:absolute;left:var(--sp-2);top:50%;transform:translateY(-50%);width:var(--icon);height:var(--icon);color:var(--faint);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.search input{width:100%;height:var(--control-h);padding:0 var(--sp-7);border:var(--line-w) solid var(--line);border-radius:var(--radius);background:none;color:var(--ink);font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);transition:border-color .15s,box-shadow .15s}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:0;border-color:var(--ink);box-shadow:0 var(--hair) 0 rgba(0,0,0,.03)}
/* clear: same --icon as loupe; inset --sp-2 mirrors loupe left */
.search input::-webkit-search-cancel-button{
  -webkit-appearance:none!important;appearance:none!important;
  width:var(--icon)!important;height:var(--icon)!important;
  margin:0 var(--sp-2) 0 0;cursor:pointer!important;
  background-color:var(--ink);
  background-image:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.search kbd{display:none}
@media (min-width:1100px){
  /* nav уже сдвинут на --side-w; центр колонки ≈ 50% ширины nav + nudge */
  .search{
    position:absolute;
    left:calc(50% + var(--search-nudge));
    transform:translateX(-50%);
    flex:none;
    width:var(--search-w);
  }
  html.side-collapsed .search{left:50%}
}
.icon-btn{display:grid;place-items:center;gap:0;width:var(--icon-btn);height:var(--icon-btn);border:0;border-radius:0;background:none;color:var(--faint);cursor:pointer;transition:color .15s;flex:none}
.icon-btn:hover{color:var(--ink)}
.icon-btn svg{width:var(--icon);height:var(--icon)}
button,input,kbd,summary{font-family:var(--sans);font-size:var(--fs-ui)}
.nav-r{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto}
.switch{display:none!important}
.theme-btn .sun{display:none}
html.dark .theme-btn .sun{display:block}
html.dark .theme-btn .moon{display:none}
.compact-btn .ico-full{display:none}
html.compact .compact-btn .ico-full{display:block}
html.compact .compact-btn .ico-compact{display:none}

/* ---------- language dropdown ---------- */
.lang-dd{position:relative}
.lang-dd>summary{list-style:none;cursor:pointer;display:grid;place-items:center;height:var(--icon-btn);width:auto;min-width:var(--icon-btn);border:0;background:none;color:var(--faint);grid-auto-flow:column;grid-template-columns:auto auto;column-gap:var(--sp-1);padding:0 var(--sp-1);transition:color .15s}
.lang-dd>summary::-webkit-details-marker{display:none}
.lang-dd>summary:hover{color:var(--ink)}
.lang-dd>summary svg{width:var(--chevron);height:var(--chevron);color:var(--faint);fill:none;stroke:currentColor;stroke-width:2}
#lang-label{font:var(--fw-ui) var(--fs-ui)/1 var(--sans);letter-spacing:.08em}
.lang-menu{position:absolute;right:0;top:calc(100% + var(--sp-1));background:var(--pop-bg);border:var(--line-w) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--sp-1);min-width:7.5rem;z-index:40}
.lang-menu button{display:block;width:100%;text-align:left;padding:var(--sp-2) var(--sp-3);border:0;border-radius:var(--radius-sm);background:none;color:var(--mut);font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);cursor:pointer;transition:color .15s,background .15s}
.lang-menu button:hover{color:var(--ink);background:var(--line)}

.account-dd{position:relative}
.account-dd>summary.icon-btn{list-style:none}
.account-dd>summary.icon-btn::-webkit-details-marker{display:none}
.account-menu{min-width:12rem}
.account-menu .account-sep{height:1px;background:var(--line);margin:var(--sp-1) 0}
.account-menu .account-note{
  display:block;padding:var(--sp-1) var(--sp-3);
  font:var(--fw-ui) var(--fs-caption,11px)/1.35 var(--sans);color:var(--faint);
  overflow-wrap:anywhere;max-width:16rem;
}
/* No ink/brand glow when signed in — same muted icon as the rest of the topbar. */

/* Card chrome: Expand / Sources / Useful — type only; vertical rhythm = .card gap */
.htlb-actions{
  display:block;margin:0;
  font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);color:var(--faint);
}
.src summary,
.htlb-useful,
.card-expand{
  display:block;cursor:pointer;
  font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);color:var(--faint);
  padding:0;margin:0;
  transition:color .15s;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
.src summary{list-style:none}
.src summary::-webkit-details-marker{display:none}
.src summary:hover,
.htlb-useful:hover,
.card-expand:hover{color:var(--ink)}
.htlb-useful,
.card-expand{appearance:none;border:0;background:none}
.htlb-useful{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit;
}
.htlb-useful-n{
  font-variant-numeric:tabular-nums;
}
.htlb-useful-n::before{content:"–";margin-inline-end:var(--sp-2)}
.htlb-useful[aria-pressed="true"]{color:var(--ink)}
.htlb-useful:disabled{opacity:.55;cursor:wait}
.htlb-useful:focus-visible,
.card-expand:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.card-expand{display:none}
html.compact .card-expand{display:block}

/* Guest Useful → brief bottom-right toast */
.htlb-signin-toast{
  position:fixed;right:var(--sp-6);bottom:var(--sp-6);z-index:100;
  max-width:min(20rem,calc(100vw - var(--sp-8)));
  padding:var(--sp-3) var(--sp-4);
  background:var(--pop-bg);color:var(--ink);
  border:var(--line-w) solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
  font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);
  pointer-events:none;
  animation:htlb-toast-in .2s ease-out,htlb-toast-out .25s ease-in 2.6s forwards;
}
@keyframes htlb-toast-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes htlb-toast-out{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(6px)}
}

/* ---------- login page (/login/) ---------- */
body.login-page{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  display:flex;flex-direction:column;
  overflow-x:clip;
  background:var(--bg);
}
body.login-page::before,
body.login-page::after{
  content:"";
  position:fixed;
  left:0;right:0;top:0;
  height:28vh;
  pointer-events:none;
  z-index:0;
  transform-origin:50% 0%;
  will-change:transform,opacity;
}
/* Soft wash — ellipse center sits above the viewport edge */
body.login-page::before{
  background:radial-gradient(ellipse 58% 140% at 50% -45%, var(--line-soft) 0%, transparent 62%);
  opacity:.78;
  animation:login-glow-a 16s ease-in-out infinite;
}
/* Narrower highlight along the rim, also centered above the edge */
body.login-page::after{
  height:14vh;
  background:radial-gradient(ellipse 32% 160% at 50% -70%, color-mix(in srgb, var(--hover) 32%, transparent) 0%, transparent 58%);
  opacity:.5;
  animation:login-glow-b 20s ease-in-out infinite;
}
html.dark body.login-page::before{opacity:.7}
html.dark body.login-page::after{opacity:.42}
body.login-page > *{position:relative;z-index:1}
@keyframes login-glow-a{
  0%,100%{transform:scaleX(1) scaleY(1);opacity:.62}
  50%{transform:scaleX(1.08) scaleY(1.12);opacity:.88}
}
@keyframes login-glow-b{
  0%,100%{transform:translateX(0) scaleX(1);opacity:.36}
  40%{transform:translateX(8%) scaleX(1.15);opacity:.58}
  70%{transform:translateX(-7%) scaleX(.95);opacity:.44}
}
@media (prefers-reduced-motion:reduce){
  body.login-page::before,
  body.login-page::after{animation:none}
}
.login-main{
  width:min(22.5rem,100%);
  margin:auto;
  padding:var(--sp-9) var(--sp-5) var(--sp-11);
  display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-4);
}
.login-main h1{
  margin:0;
  font:var(--fw-strong) var(--fs-4)/var(--lh-tight) var(--serif);
  color:var(--ink);
  text-align:center;
}
.login-hint{
  margin:calc(var(--sp-2) * -1) 0 var(--sp-2);
  font:var(--fw-ui) var(--fs-ui)/var(--lh-body) var(--sans);
  color:var(--mut);
  text-align:center;
  text-wrap:pretty;
}
.login-actions{display:flex;flex-direction:column;gap:var(--sp-3)}
.login-provider{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-3);
  width:100%;min-height:calc(var(--control-h) + var(--sp-2));
  padding:var(--sp-2) var(--sp-4);
  border:var(--line-w) solid var(--line);
  border-radius:var(--radius);
  background:var(--pop-bg);
  color:var(--ink);
  font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:border-color .15s,background .15s,color .15s;
}
.login-provider:hover{border-color:var(--line-soft);background:var(--line)}
.login-provider:focus-visible{outline:var(--focus-off) solid var(--hover);outline-offset:var(--focus-off)}
.login-provider-icon{
  display:grid;place-items:center;
  width:var(--sp-5);height:var(--sp-5);flex:0 0 var(--sp-5);
}
.login-provider-icon svg{display:block;width:var(--sp-5);height:var(--sp-5)}
.login-provider-label{flex:0 1 auto}
.login-status{
  margin:0;
  min-height:1.4em;
  font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);
  color:var(--mut);
  text-align:center;
  text-wrap:pretty;
}
.login-status[data-tone="error"]{color:var(--ink)}
.login-status[hidden]{display:none}
.login-provider[disabled]{opacity:.55;cursor:wait}
.login-back{
  display:block;
  align-self:center;
  margin-top:var(--sp-2);
  text-align:center;
  font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);
  color:var(--faint);
}
.login-back:hover{color:var(--hover)}

/* ---------- my useful page (/useful/) ---------- */
body.useful-page .useful-main{max-width:28rem}
.useful-status{
  margin:0 0 var(--sp-3);
  font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);
  color:var(--faint);text-align:center;
}
.useful-status:empty{display:none}
.useful-empty{
  margin:0 0 var(--sp-5);
  font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);
  color:var(--mut);text-align:center;text-wrap:pretty;
}
.useful-empty[hidden]{display:none}
.useful-list{
  list-style:none;margin:0 0 var(--sp-5);padding:0;
  width:100%;text-align:start;
}
.useful-list[hidden]{display:none}
.useful-list li{margin:0;border-bottom:var(--line-w) solid var(--line)}
.useful-list li:first-child{border-top:var(--line-w) solid var(--line)}
.useful-list a{
  display:block;padding:var(--sp-3) 0;
  font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);
  color:var(--ink);text-decoration:none;
}
.useful-list a:hover{color:var(--hover)}

/* ---------- tooltip popup ---------- */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.32);opacity:0;pointer-events:none;transition:opacity .2s;z-index:15}
.backdrop.on{opacity:1;pointer-events:auto}
.pop{position:absolute;z-index:40;max-width:20rem;background:var(--pop-bg);border:var(--line-w) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--sp-2) var(--sp-3);font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--serif);color:var(--mut)}
.pop b{display:block;color:var(--ink);font-weight:var(--fw-strong);margin-bottom:var(--hair)}

/* ---------- sidebar (filters) ----------
   Active state = color only (no weight toggle): Georgia faux-bold reflows lines.
   Desktop: full-height column under the brand; collapse via html.side-collapsed. */
.sidebar{
  position:fixed;top:0;bottom:0;left:0;width:var(--side-w);
  background:var(--bg);border-right:var(--line-w) solid var(--line);
  padding:var(--side-pad-y) var(--side-pad-x) var(--side-pad-bottom);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;z-index:25;
  font-family:var(--sans);
  transition:width var(--side-dur),padding var(--side-dur),border-color var(--side-dur);
}
html.side-collapsed .sidebar{
  padding-left:0;padding-right:0;border-right-color:transparent;pointer-events:none;
}
html.side-collapsed .sidebar > *{opacity:0;visibility:hidden}
/* Desktop: fixed open width + slide — text layout stays stable while collapsing */
@media (min-width:1100px){
  .sidebar{
    width:var(--side-w-open);
    transform:translateX(calc(var(--side-w) - var(--side-w-open)));
    transition:transform var(--side-dur),border-color var(--side-dur);
  }
  html.side-collapsed .sidebar{
    padding-left:var(--side-pad-x);padding-right:var(--side-pad-x);
    border-right-color:transparent;pointer-events:none;
  }
}
.group{margin-bottom:var(--group-gap)}
.gt{font:var(--fw-strong) var(--fs-ui)/var(--lh-ui) var(--sans);color:var(--ink);margin-bottom:var(--sp-2)}
.gt small{display:block;font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);letter-spacing:0;text-transform:none;color:var(--mut);margin-top:var(--hair)}
.sec-links{display:flex;flex-direction:column;align-items:stretch;gap:0}
.sec-link{display:flex;align-items:baseline;gap:var(--sp-2);width:100%;text-align:left;padding:var(--ui-row-pad);border:0;background:none;color:var(--mut);font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);font-synthesis:none;cursor:pointer;transition:color .15s}
.sec-link:hover{color:var(--ink)}
.sec-link[aria-pressed="true"],
.sec-link.spy-on{color:var(--ink)}
.sec-link i{margin-left:auto;font:var(--fw-ui) var(--fs-ui)/1 var(--sans);font-style:normal;font-variant-numeric:tabular-nums;color:var(--faint)}
.chips{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.chip{border:0;background:none;color:var(--mut);font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);font-synthesis:none;padding:var(--ui-row-pad);cursor:pointer;transition:color .15s;text-align:left}
.chip:hover{color:var(--ink)}
.chip[aria-pressed="true"]{color:var(--ink)}
.toggle{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) 0;color:var(--mut);font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);cursor:pointer}
.toggle:hover{color:var(--ink)}
.toggle input{
  -webkit-appearance:none;appearance:none;
  width:var(--sp-4);height:var(--sp-4);margin:0;flex:none;box-sizing:border-box;
  border:var(--line-w) solid var(--line-soft);border-radius:var(--radius-sm);
  background:transparent;cursor:pointer;
  transition:border-color .15s,background-color .15s;
}
.toggle:hover input{border-color:var(--mut)}
.toggle input:checked{
  border-color:var(--ink);background-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:12px 12px;background-position:center;background-repeat:no-repeat;
}
html.dark .toggle input:checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.reset{display:inline-block;margin-top:0;padding:var(--ui-row-pad);border:0;background:none;color:var(--mut);font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);cursor:pointer;transition:color .15s}
.reset:hover{color:var(--ink)}
.hint{margin-top:var(--group-gap)}
.hint p{margin:0 0 var(--sp-2);font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);color:var(--faint)}
.hint a{color:var(--hover)}
.hint a:hover{color:var(--hover)}

/* ---------- content ---------- */
.content{padding:calc(var(--nav-h) + var(--content-pad-top)) var(--content-pad-x) var(--content-pad-bottom) calc(var(--side-w) + var(--content-rail));transition:padding-left var(--side-dur)}
html.side-collapsed .content{padding-left:var(--content-pad-x)}
.sec-block{max-width:var(--measure);margin:0 auto var(--sec-gap)}
.sec-h{display:flex;align-items:baseline;gap:var(--sec-h-gap);padding-top:var(--sp-4);margin-bottom:var(--sp-2)}
.sec-h h2{margin:0;flex:1;min-width:0;font:var(--fw-strong) var(--fs-4)/var(--lh-tight) var(--serif);letter-spacing:-.01em;color:var(--ink);overflow-wrap:break-word}
.intro{margin:var(--sp-3) 0 var(--sp-6);font:var(--fs-2)/var(--lh-body) var(--serif);color:var(--text)}

/* ---------- loading skeletons ---------- */
.skel{max-width:var(--measure);margin:0 auto}
.skel-sec{margin:0 0 var(--sec-gap)}
.skel-h{display:flex;align-items:center;gap:var(--sec-h-gap);padding-top:var(--sp-4);margin-bottom:var(--sp-2)}
.skel-h .skel-bar{height:1.15em;flex:none}
.skel-h .skel-bar:first-child{flex:1;max-width:18rem}
.skel-h .skel-bar-sm{margin-left:auto}
.skel-card{padding:var(--card-pad-y);display:flex;flex-direction:column;gap:var(--sp-2)}
.skel-bar{
  display:block;height:1.05em;max-width:100%;border-radius:2px;
  background:color-mix(in srgb, var(--faint) 22%, var(--bg));
  animation:skel-pulse 1.2s ease-in-out infinite;
}
.skel-bar-body{height:.85em}
.skel-bar-sm{height:.7em}
.skel-card > .skel-bar:first-child{height:1.15em;margin-bottom:var(--sp-1)}
.skel-stat{display:inline-block;width:2.4em;height:.75em;vertical-align:-0.05em;margin:0 .12em}
.stat-fallback{display:none}
.skel-nav{display:flex;flex-direction:column;align-items:stretch}
.skel-nav-row{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--ui-row-pad);
}
.skel-nav-row .skel-bar{flex:none;height:.75em}
.skel-nav-row .skel-bar:first-child{flex:1}
.skel-nav-row .skel-bar-sm{margin-left:auto;flex:none}
@keyframes skel-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.skel-bar{animation:none}}

.card{
  display:flex;flex-direction:column;align-items:flex-start;
  gap:var(--card-stack);
  padding:var(--card-pad-y);
  content-visibility:auto;contain-intrinsic-size:auto var(--card-intrinsic);
}
/* Compact collapsed: hide body. Expanded uses the same .card gap as collapsed. */
html.compact .card:not(.expanded) .human,
html.compact .card:not(.expanded) .rows,
html.compact .card:not(.expanded) .marg{display:none}
.card-h{display:flex;align-items:baseline;gap:var(--idx-gap);align-self:stretch}
.idx{flex:none;min-width:var(--idx-min);font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--serif);font-variant-numeric:tabular-nums;color:var(--faint)}
.card-h h3{margin:0;flex:1;min-width:0;font:var(--fw-strong) var(--fs-3)/var(--lh-tight) var(--serif);color:var(--ink);overflow-wrap:break-word}
.anchor{flex:none;color:var(--faint);font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--serif);opacity:0;transition:opacity .15s,color .15s}
.card:hover .anchor,.anchor:focus-visible{opacity:1}
.anchor:hover{color:var(--hover)}
.badges{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--card-stack);margin:0;font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);font-synthesis:none}
.badge{color:var(--faint)}
.badge.r3{color:var(--ink)}
.badge.r2{color:var(--mut)}
.badge.r1{color:var(--faint)}
.badge.danger{color:var(--ink)}
.badge.warn{color:var(--mut)}
.human{margin:0;font:var(--fs-2)/var(--lh-body) var(--serif);color:var(--text);min-width:0;overflow-wrap:break-word;align-self:stretch}
.rows{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--card-stack);margin:0;align-self:stretch}
.rows .row{margin:0;font:var(--fs-2)/var(--lh-body) var(--serif);color:var(--text)}
.rows .k{font-weight:var(--fw-strong)}
.rows .k::after{content:". "}
.rows .v{min-width:0;overflow-wrap:break-word}
.src{margin:0;font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);color:var(--faint)}
/* summary + .htlb-useful type rules live with Useful above (shared selectors) */
.src .body{margin-top:var(--card-stack);font:var(--fs-2)/var(--lh-body) var(--serif);color:var(--text);overflow-wrap:break-word}
.src .body ul{margin:var(--sp-2) 0 0;padding-left:var(--sp-5);list-style:disc}
.src .body li{margin:0 0 var(--sp-2);padding-left:var(--sp-1)}
.src .body li:last-child{margin-bottom:0}
.src .body p{margin:0 0 var(--card-stack)}
.src .body p:last-child{margin-bottom:0}
.src .body a{color:var(--hover)}
.src .body a:hover{color:var(--hover)}

/* ---------- scroll-spy, marginalia ---------- */
/* заголовки заполняют ширину; balance давал ранний перенос */
h1,h2,h3{text-wrap:wrap}
/* bp 1530: notes fit beside 66ch column + rail + side */
@media (min-width:1530px){
  .card{position:relative}
  .card .marg{position:absolute;top:var(--hair);left:calc(100% + var(--marg-gap));width:var(--marg-w)}
  .card > .rows .row:has([data-k="note"]){display:none}
}
@media (max-width:1529px){
  .card .marg{display:none}
}
.marg{font:var(--fs-2)/var(--lh-body) var(--serif);color:var(--text);overflow-wrap:break-word}
.marg .k{font-weight:var(--fw-strong)}
.marg .k::after{content:". "}
.marg .mt{font:var(--fs-2)/var(--lh-body) var(--serif);color:var(--text)}
.term{cursor:help;text-decoration:none}
.term:hover,.term:focus-visible{color:var(--ink)}

/* status / empty / foot */
.status{max-width:var(--measure);margin:0 auto var(--sp-2);font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);color:var(--faint)}
.status code{font-family:var(--mono);font-size:var(--fs-ui)}
.empty{max-width:var(--measure);margin:var(--sp-9) auto;text-align:center;font:var(--fs-2)/var(--lh-body) var(--serif);color:var(--text)}
.empty button{margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-4);border:var(--line-w) solid var(--line);border-radius:var(--radius-sm);background:none;color:var(--text);font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);cursor:pointer;transition:border-color .15s,color .15s}
.empty button:hover{border-color:var(--ink);color:var(--ink)}
.foot{max-width:var(--measure);margin:var(--sp-10) auto 0;font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);color:var(--faint)}
.foot a{color:var(--hover)}
.foot a:hover{color:var(--hover)}
.foot-legal{text-align:center;margin:var(--sp-4) auto var(--sp-8);font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);color:var(--faint)}
.foot-legal a{color:var(--faint);text-decoration:none}
.foot-legal a:hover{color:var(--hover)}
body.login-page .foot-legal{margin-top:0;margin-bottom:var(--sp-8);padding:0 var(--sp-5)}
.privacy-main{width:min(36rem,100%);gap:var(--sp-5)}
.privacy-main .login-hint{margin-bottom:var(--sp-1)}
.privacy-section{margin:0;text-align:start}
.privacy-section h2{
  margin:0 0 var(--sp-2);
  font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);
  color:var(--ink);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.privacy-section p{
  margin:0 0 var(--sp-2);
  font:var(--fw-ui) var(--fs-ui)/var(--lh-body) var(--sans);
  color:var(--mut);
  text-wrap:pretty;
}
.privacy-section p:last-child{margin-bottom:0}
.privacy-section a{color:var(--hover)}
.privacy-section a:hover{color:var(--hover-2)}
.privacy-section code{font-family:var(--mono);font-size:var(--fs-ui)}
.meta-line a{color:var(--hover)}
.meta-line a:hover{color:var(--hover)}

/* noscript / doc */
.doc{max-width:var(--measure);margin:0 auto;padding:0 var(--sp-6) var(--sp-10)}
.doc-head h1{margin:0 0 var(--sp-5);font:var(--fw-strong) var(--fs-5)/var(--lh-tight) var(--serif);letter-spacing:-.015em;color:var(--ink)}
.doc-head p{margin:0 0 var(--sp-3);font:var(--fs-2)/var(--lh-body) var(--serif);color:var(--text)}
.doc-head .stat,.meta-line{margin:var(--sp-3) 0;font:var(--fw-ui) var(--fs-ui)/var(--lh-ui) var(--sans);color:var(--faint)}
.meta-line{margin:0 0 var(--sp-3)}
.doc-head .fork-note{margin:var(--sp-3) 0 0}
.doc a{color:var(--hover)}
.src .body a:hover,.hint a:hover,.foot a:hover,.meta-line a:hover,.doc a:hover{color:var(--hover-2)}

/* ---------- mobile (bp 1100 / 560 — literals required) ---------- */
@media (max-width:1099px){
  .nav{left:0;transition:transform .22s ease,left var(--side-dur)}
  html.nav-hidden .nav{transform:translateY(-100%)}
  @media (prefers-reduced-motion:reduce){
    .nav{transition:left var(--side-dur)}
    html.nav-hidden .nav{transform:none}
  }
  .icon-btn.menu-btn{display:grid}
  .nav-title{display:none} /* бренд в drawer (.side-title) и в h1; topbar не дублирует */
  .nav-in{padding:0 calc((var(--nav-h) - var(--icon-btn)) / 2)}
  .side-title{display:flex;margin:0 0 var(--group-gap);font:var(--fw-strong) var(--fs-2)/var(--lh-tight) var(--serif);color:var(--ink);white-space:normal;padding:0}
  .sidebar{
    top:var(--nav-h);width:min(var(--side-w-open),84vw);padding:var(--sp-6) var(--side-pad-x) var(--side-pad-bottom);
    transform:translateX(-100%);transition:transform .2s;box-shadow:none;pointer-events:auto;
  }
  html.side-collapsed .sidebar{padding:var(--sp-6) var(--side-pad-x) var(--side-pad-bottom);border-right-color:var(--line);pointer-events:auto}
  html.side-collapsed .sidebar > *{opacity:1;visibility:visible}
  .sidebar.open{transform:none;box-shadow:var(--shadow)}
  .content{padding:calc(var(--nav-h) + var(--content-pad-top-sm)) var(--content-pad-x-sm) var(--sp-11);transition:none}
  html.side-collapsed .content{padding-left:var(--content-pad-x-sm)}
  .badges,.human,.rows,.src{margin-left:0}
}
@media (max-width:560px){
  /* wider text column on phones: .doc desktop padding stacks with .content's */
  .content{padding-left:var(--sp-4);padding-right:var(--sp-4)}
  .doc{padding-left:0;padding-right:0}
  .nav-in{gap:var(--sp-2)}
  .doc-head h1{font-size:var(--fs-4)}
  .sec-h h2{font-size:var(--fs-3)}
}