@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ---------- токены ---------- */
/* Цвета — только здесь (правило 2.5 ТЗ_DESIGN). Проверка контраста: tests/contrast.py */
:root{
  /* пространство: имя = множитель 4 px (space-6 = 24 px) */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;
  --space-10:40px;--space-12:48px;--space-16:64px;

  --radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-pill:99px;

  /* типографика: один шрифт, размеры и высоты строк по ТЗ 3.2 */
  --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-h1:2.125rem;--lh-h1:1.2;
  --fs-h2:1.5625rem;--lh-h2:1.3;
  --fs-h3:1.1875rem;--lh-h3:1.35;
  --fs-body:1rem;--lh-body:1.6;
  --fs-lead:1.09375rem;--lh-lead:1.5;
  --fs-card:0.96875rem;--lh-card:1.35;
  --fs-small:0.84375rem;--lh-small:1.45;
  --fs-badge:0.78125rem;--lh-badge:1.3;
  --measure-article:72ch;

  /* каркас */
  --header-h:60px;--width-site:1380px;--width-sidebar:232px;--width-aside:264px;

  --dur-fast:140ms;--dur-base:200ms;
}
/* на узком экране шрифты чуть меньше (ТЗ 3.2) */
@media (max-width:767px){:root{
  --fs-h1:1.75rem;--fs-h2:1.375rem;--fs-h3:1.125rem;--fs-lead:1.03125rem;
}}

/* тёмная тема — по умолчанию */
:root[data-theme="dark"],:root:not([data-theme="light"]){
  --color-canvas:#121812;--color-surface:#1B241D;--color-raised:#273027;
  --color-text:#F1F4EA;--color-text-secondary:#B9C8B9;--color-text-muted:#91A292;
  --color-accent:#A8D98A;--color-on-accent:#121812;--color-link:#BCE8AC;
  --color-accent-warm:#E7C278;
  --color-border-decorative:#435343;--color-border-control:#6F826F;--color-focus-ring:#A8D98A;
  --color-success:#8FD49A;--color-warning:#E7C278;--color-danger:#F4A49A;--color-info:#9CCBEB;
  --color-code:#222C24;
  --color-hover:#2B362C;--color-selected:#32412E;--color-disabled-text:#6F7E71;
  /* редкости: --rarity-* — официальные цвета клиента (маркер, фон, рамка); --rarity-*-text — цвет текста, проверен на контраст */
  --rarity-common:#FFFFFF;--rarity-uncommon:#55FF55;--rarity-rare:#5555FF;
  --rarity-epic:#FF55FF;--rarity-legendary:#FFAA00;--rarity-unique:#FF5555;--rarity-crafted:#5FD6D6;
  --rarity-common-text:#FFFFFF;--rarity-uncommon-text:#55FF55;--rarity-rare-text:#9A9AFF;
  --rarity-epic-text:#FF55FF;--rarity-legendary-text:#FFAA00;--rarity-unique-text:#FF8A82;--rarity-crafted-text:#5FD6D6;
  --shadow-overlay:0 8px 24px rgba(0,0,0,.4);
}

/* светлая тема — явный выбор */
:root[data-theme="light"]{
  --color-canvas:#F3F0E7;--color-surface:#FFFDF6;--color-raised:#E9EDE3;
  --color-text:#202B23;--color-text-secondary:#4A5A50;--color-text-muted:#4A5A50;
  --color-accent:#285C38;--color-on-accent:#FFFDF6;--color-link:#285C38;
  --color-accent-warm:#865F21;
  --color-border-decorative:#BAC6B7;--color-border-control:#6F7E72;--color-focus-ring:#285C38;
  --color-success:#2E6A3A;--color-warning:#7A5410;--color-danger:#A3382C;--color-info:#2A5C8A;
  --color-code:#ECE8DC;
  --color-hover:#E8ECDF;--color-selected:#E1E6DB;--color-disabled-text:#8A958B;
  --rarity-common:#FFFFFF;--rarity-uncommon:#55FF55;--rarity-rare:#5555FF;
  --rarity-epic:#FF55FF;--rarity-legendary:#FFAA00;--rarity-unique:#FF5555;--rarity-crafted:#5FD6D6;
  --rarity-common-text:#5E5E5E;--rarity-uncommon-text:#24702F;--rarity-rare-text:#2A62AE;
  --rarity-epic-text:#7F3AB8;--rarity-legendary-text:#8A5300;--rarity-unique-text:#AE2A26;--rarity-crafted-text:#0F6767;
  --shadow-overlay:0 8px 24px rgba(32,43,35,.14);
}
/* светлая тема по системе — значения совпадают с [data-theme="light"] (проверяет tests/contrast.py) */
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --color-canvas:#F3F0E7;--color-surface:#FFFDF6;--color-raised:#E9EDE3;
  --color-text:#202B23;--color-text-secondary:#4A5A50;--color-text-muted:#4A5A50;
  --color-accent:#285C38;--color-on-accent:#FFFDF6;--color-link:#285C38;
  --color-accent-warm:#865F21;
  --color-border-decorative:#BAC6B7;--color-border-control:#6F7E72;--color-focus-ring:#285C38;
  --color-success:#2E6A3A;--color-warning:#7A5410;--color-danger:#A3382C;--color-info:#2A5C8A;
  --color-code:#ECE8DC;
  --color-hover:#E8ECDF;--color-selected:#E1E6DB;--color-disabled-text:#8A958B;
  --rarity-common:#FFFFFF;--rarity-uncommon:#55FF55;--rarity-rare:#5555FF;
  --rarity-epic:#FF55FF;--rarity-legendary:#FFAA00;--rarity-unique:#FF5555;--rarity-crafted:#5FD6D6;
  --rarity-common-text:#5E5E5E;--rarity-uncommon-text:#24702F;--rarity-rare-text:#2A62AE;
  --rarity-epic-text:#7F3AB8;--rarity-legendary-text:#8A5300;--rarity-unique-text:#AE2A26;--rarity-crafted-text:#0F6767;
  --shadow-overlay:0 8px 24px rgba(32,43,35,.14);}}

/* ---------- base.css ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
/* ровный фон без свечений и фиксированного фона (ТЗ D2) */
body{margin:0;color:var(--color-text);background:var(--color-canvas);font:var(--fs-body)/var(--lh-body) var(--font-ui);-webkit-font-smoothing:antialiased}
a{color:var(--color-link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
::selection{background:var(--color-selected)}
/* фокус виден на всех контролах, 2 px и отступ от края */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* страница никогда не уходит в горизонтальную прокрутку: широкое содержимое прокручивается внутри своих блоков */
body{overflow-x:clip}
img,svg,video{max-width:100%}
/* скроллбары всех прокручиваемых областей (меню, оглавление, таблицы, поиск, блоки кода) — тонкие, в цвет темы.
   Только токены: трек прозрачный, ползунок — граница, при наведении — граница контрола (светлее). Светлая тема — те же токены. */
:root,*{scrollbar-width:thin;scrollbar-color:var(--color-border-decorative) transparent}
::-webkit-scrollbar{width:8px;height:8px;background:transparent}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:var(--color-border-decorative);border:2px solid transparent;border-radius:var(--radius-pill);background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--color-border-control);background-clip:padding-box}

/* ---------- layout.css ---------- */
/* ---------- шапка ---------- */
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--space-3);height:var(--header-h);padding:0 var(--space-6);
  background:var(--color-surface);border-bottom:1px solid var(--color-border-decorative)}
.brand{display:flex;align-items:center;gap:var(--space-3);color:var(--color-text);text-decoration:none!important}
.brand span:last-child{display:flex;flex-direction:column;line-height:1.1}
.brand b{font:700 17px/1.2 var(--font-ui)}
.brand small{color:var(--color-text-muted);font-size:var(--fs-small);margin-top:2px}
.logo{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-md);color:var(--color-on-accent);font:700 13px/1 var(--font-ui);
  background:var(--color-accent-warm)}
/* ---------- каркас ---------- */
.layout{display:grid;grid-template-columns:var(--width-sidebar) minmax(0,1fr) var(--width-aside);column-gap:var(--space-8);max-width:var(--width-site);margin:0 auto}
.content{padding:var(--space-8) var(--space-6) var(--space-16);min-width:0}
/* страница без оглавления (меньше трёх пунктов): правой колонки нет */
.layout.no-toc{grid-template-columns:var(--width-sidebar) minmax(0,1fr)}
/* низ страницы */
.pn{display:flex;gap:var(--space-3);margin-top:var(--space-12)}
.pn a{flex:1;padding:var(--space-4) var(--space-6);border:1px solid var(--color-border-decorative);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);text-decoration:none!important;font-weight:600;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.pn a:hover{border-color:var(--color-border-control);background:var(--color-hover)}
.pn small{display:block;color:var(--color-text-muted);font-size:var(--fs-small);text-transform:uppercase;letter-spacing:.08em;font-weight:600}.pn .next{text-align:right}
.foot{margin-top:var(--space-8);color:var(--color-text-muted);font-size:var(--fs-small)}

@media (max-width:1180px){.layout{grid-template-columns:var(--width-sidebar) minmax(0,1fr)}}
@media (max-width:800px){.brand b,.brand small{display:none}.top{padding:0 var(--space-3);gap:var(--space-2)}.layout{display:block}.content{padding:var(--space-6) var(--space-4) var(--space-12)}.pn{flex-direction:column}}

/* ---------- nav.css ---------- */
/* ---------- левая навигация: группы, пункты, активный ---------- */
.side{position:sticky;top:var(--header-h);align-self:start;height:calc(100vh - var(--header-h));overflow:auto;scrollbar-gutter:stable;padding:var(--space-6) var(--space-3) var(--space-12) var(--space-4)}
.nav-group{margin-bottom:var(--space-6)}
/* группа — details: заголовок-summary со стрелкой справа; раскрытие без анимации */
.nav-group>summary.nav-title{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin:0;list-style:none;cursor:pointer;border-radius:var(--radius-sm)}
.nav-group>summary.nav-title::-webkit-details-marker{display:none}
.nav-group>summary.nav-title::after{content:"▾";flex:none;font-size:12px;line-height:1;letter-spacing:0;text-transform:none}
.nav-group:not([open])>summary.nav-title::after{content:"▸"}
.nav-group>summary.nav-title:hover{color:var(--color-text)}
.nav-group>summary.nav-title:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:3px}
/* «Главная»: отдельный верхний пункт, отделён линией от групп */
.nav-top{margin:0 0 var(--space-6);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border-decorative)}
.nav-top a{font-weight:600}
.nav-title{font-size:var(--fs-small);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);padding:0 var(--space-3) var(--space-2)}
.side a{position:relative;display:block;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--color-text);font-size:14.5px;text-decoration:none;transition:background-color var(--dur-fast)}
.side a:hover{background:var(--color-hover)}
/* активный пункт: подложка + полоса + жирность (правило 2.6) */
.side a.active{background:var(--color-selected);font-weight:600}
/* раздел страницы сущности: фон и жирность, без полосы (полоса — только у открытой страницы) */
.side a.active-parent{background:var(--color-selected);font-weight:600}
.side a.active::before{content:"";position:absolute;left:-8px;top:var(--space-2);bottom:var(--space-2);width:3px;border-radius:3px;background:var(--color-accent)}
/* хлебные крошки: Главная / Группа / Страница */
.crumbs{font-size:var(--fs-small);color:var(--color-text-muted);margin-bottom:var(--space-4)}
.crumbs a{color:var(--color-text-secondary)}
/* ---------- строка статьи: тип, проверка, статус (T2) ---------- */
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-4);margin:-4px 0 var(--space-6);color:var(--color-text-muted);font-size:var(--fs-small)}
.meta span+span::before{content:"·";margin-right:var(--space-4);opacity:.6}
.status-review{padding:1px var(--space-2);border-radius:var(--radius-sm);border:1px solid var(--color-border-control);color:var(--color-text-muted)}
.status-outdated{margin:0 0 var(--space-6);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-warning);background:var(--color-surface);color:var(--color-text);font-size:14px}
/* оглавление статьи: sticky только на широком экране */
.toc{align-self:start;padding:var(--space-8) var(--space-4);font-size:var(--fs-small)}
.toc-title{font-size:var(--fs-small);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);margin-bottom:var(--space-2)}
.toc ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--color-border-decorative)}.toc ul ul{padding-left:var(--space-3);border:0}
.toc a{display:block;padding:var(--space-1) 0 var(--space-1) var(--space-3);margin-left:-1px;border-left:2px solid transparent;color:var(--color-text-muted);line-height:1.4}
.toc a:hover{color:var(--color-text);text-decoration:none}
.toc a.on{color:var(--color-text);border-left-color:var(--color-accent);font-weight:600}

/* оглавление в статье (≤ 1180 px, где нет правой колонки); рамку и summary даёт .doc details */
.toc-inline{font-size:var(--fs-small);max-width:var(--measure-article)}
.toc-inline ul{list-style:none;margin:0;padding:0}.toc-inline>div>ul{max-height:50vh;overflow:auto}.toc-inline ul ul{padding-left:var(--space-4)}
.toc-inline li{margin:0;max-width:none}
.toc-inline a{display:block;padding:var(--space-1) 0;color:var(--color-link)}
@media (max-width:767px){.toc-inline a{min-height:44px;display:flex;align-items:center}}
@media (min-width:1181px){.toc-inline{display:none}}
/* одна прокручиваемая область: sticky и max-height — у внешнего aside.toc; внутренний div.toc (тот же класс из gen) не скроллится и без своих отступов */
@media (min-width:1181px){.toc{position:sticky;top:var(--header-h);max-height:calc(100vh - var(--header-h));overflow:auto}.toc .toc{position:static;max-height:none;overflow:visible;padding:0}}
@media (max-width:1180px){.toc{display:none}}
/* кнопка закрытия меню только на телефоне: на широком экране меню постоянное */
.side .nav-close{display:none}
@media (max-width:800px){
  body.nav-open{overflow:hidden}
  .side .nav-close{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:0 0 var(--space-2) auto;font-size:24px;line-height:1}
  .nav-backdrop{display:none}
  body.nav-open .nav-backdrop{display:block;position:fixed;left:0;right:0;bottom:0;top:var(--header-h);z-index:24;background:color-mix(in srgb,var(--color-canvas) 85%,transparent)}
  .side{position:fixed;left:0;top:var(--header-h);width:min(300px,85vw);height:calc(100vh - var(--header-h));z-index:25;background:var(--color-surface);border-right:1px solid var(--color-border-decorative);transform:translateX(-102%);visibility:hidden;transition:transform var(--dur-base),visibility 0s linear var(--dur-base);box-shadow:var(--shadow-overlay)}
  body.nav-open .side{transform:none;visibility:visible;transition:transform var(--dur-base),visibility 0s}
  .crumbs [aria-current]{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
}
@media (max-width:767px){
  .side a,.nav-group>summary.nav-title{min-height:44px;display:flex;align-items:center}
}
.nav-group>summary.nav-title:hover{background:var(--color-hover)}

/* ---------- search.css ---------- */
/* ---------- поиск в шапке (D6, T7) ---------- */
.search{--ico-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  position:relative;flex:1;max-width:440px;margin-left:auto}
/* лупа — маска, чтобы цвет шёл из токена; в mask важна только альфа */
.search::before{content:"";position:absolute;left:var(--space-3);top:50%;width:16px;height:16px;margin-top:-8px;pointer-events:none;
  background:var(--color-text-muted);-webkit-mask:var(--ico-search) center/contain no-repeat;mask:var(--ico-search) center/contain no-repeat}
.search input{width:100%;height:40px;padding:0 40px 0 38px;border:1px solid var(--color-border-control);border-radius:var(--radius-md);
  background:var(--color-surface);color:var(--color-text);font:var(--fs-body)/1.2 var(--font-ui);transition:border-color var(--dur-fast)}
.search input::placeholder{color:var(--color-text-muted);opacity:1}
.search input:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:3px;border-color:var(--color-focus-ring)}
/* подсказка «/»: прячется при вводе (класс typing ставит JS) и на узком экране */
.search kbd{position:absolute;right:var(--space-3);top:9px;height:22px;padding:0 var(--space-2);border:1px solid var(--color-border-decorative);border-radius:var(--radius-sm);
  background:var(--color-raised);color:var(--color-text-muted);font:600 var(--fs-badge)/20px var(--font-ui)}
.search.typing kbd{display:none}
/* кнопка закрытия поиска: видна только на телефоне, когда поиск открыт поверх шапки */
.search .search-close{display:none}
/* кнопка открытия поиска: только на телефоне (на широком экране поле и так в шапке) */
.search-btn{display:none;margin-left:auto}
.search-btn svg{display:block;margin:auto}

/* список результатов; hidden — закрыт */
@keyframes res-in{from{opacity:0}to{opacity:1}}
.results{position:absolute;top:48px;left:0;right:0;z-index:40;max-height:70vh;overflow:auto;padding:var(--space-2);
  background:var(--color-surface);border:1px solid var(--color-border-decorative);border-radius:var(--radius-md);box-shadow:var(--shadow-overlay);
  animation:res-in var(--dur-fast) ease-out}
.results a{position:relative;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--color-text);text-decoration:none}
.results a:hover{background:var(--color-hover)}
/* выбор стрелками: своя подложка и полоса слева, отличается от hover */
.results a.sel{background:var(--color-selected)}
.results a.sel::before{content:"";position:absolute;left:0;top:var(--space-2);bottom:var(--space-2);width:3px;border-radius:2px;background:var(--color-accent)}
/* иконка предмета: та же, что на страницах; у статей и разделов места нет, колонка выравнивается */
.results .sr-ico{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.results .sr-ico img{display:block;width:32px;height:32px}
.results .sr-main{flex:1;min-width:0;display:block}
.results .row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.results b{font-size:var(--fs-card);font-weight:600;line-height:1.35}
.results i{flex:none;padding:0 var(--space-2);border:1px solid var(--color-border-decorative);border-radius:var(--radius-sm);font-style:normal;font-size:var(--fs-badge);line-height:1.6;color:var(--color-text-muted);white-space:nowrap}
.results small{display:block;color:var(--color-text-muted);font-size:var(--fs-small);line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* совпадение: жирность и подчёркивание, без заливки строки */
.results mark{background:none;color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:.18em}
/* заголовки групп по типу (при больше чем 6 результатах) и примечание об исправленном запросе */
.results .grp{padding:var(--space-3) var(--space-3) var(--space-1);color:var(--color-text-muted);font-size:var(--fs-badge);font-weight:600}
.results .note{padding:var(--space-1) var(--space-3) var(--space-2);color:var(--color-text-secondary);font-size:var(--fs-small)}
.results .none{padding:var(--space-3);color:var(--color-text-secondary)}
.results[data-state="error"] .none{color:var(--color-danger)}
.results .try{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:0 var(--space-3) var(--space-3)}
.results .try span{color:var(--color-text-muted);font-size:var(--fs-small)}
.results .try a{display:inline-block;padding:var(--space-1) var(--space-2);border:1px solid var(--color-border-control);border-radius:var(--radius-md);
  color:var(--color-link);font-size:var(--fs-small);text-decoration:underline;text-underline-offset:.18em}

@media (prefers-reduced-motion:reduce){.results{animation:none}}
@media (max-width:767px){
  .search-btn{display:inline-flex;align-items:center;justify-content:center}
  /* поле скрыто, пока пользователь не нажал лупу; открытое поле закрывает шапку целиком */
  .search{display:none}
  body.search-open .search{display:block;position:fixed;top:0;left:0;right:0;height:var(--header-h);max-width:none;margin:0;
    padding:var(--space-2) var(--space-3);box-sizing:border-box;background:var(--color-surface);z-index:60}
  body.search-open .search::before{left:calc(var(--space-3) + var(--space-3))}
  body.search-open .search input{height:44px;padding-right:52px}
  body.search-open .search kbd{display:none}
  body.search-open .search input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
  body.search-open .search .search-close{display:flex;align-items:center;justify-content:center;position:absolute;right:calc(var(--space-3) + 2px);top:calc(50% - 22px);
    width:44px;height:44px;border:0;background:none;color:var(--color-text);font-size:24px;line-height:1;cursor:pointer;border-radius:var(--radius-md)}
  body.search-open .search .search-close:hover{background:var(--color-hover)}
  .search input{height:44px}
  /* на телефоне список на всю ширину под шапкой */
  .results{position:fixed;top:var(--header-h);left:0;right:0;border-radius:0 0 var(--radius-md) var(--radius-md)}
  .results a{min-height:44px}
}

/* ---------- controls.css ---------- */
/* кнопки: без подъёма и тени; состояния — фон и граница */
.icon-btn{width:40px;height:40px;border:1px solid var(--color-border-control);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:17px;cursor:pointer;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.icon-btn:hover{background:var(--color-hover)}.icon-btn:active{background:var(--color-raised)}.menu-btn{display:none}
.btns{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-8)}
.btn{display:inline-flex;align-items:center;gap:var(--space-2);height:40px;padding:0 var(--space-4);border-radius:var(--radius-md);font-weight:600;font-size:var(--fs-card);line-height:1.2;text-decoration:none!important;border:1px solid var(--color-border-control);color:var(--color-text);background:var(--color-surface);cursor:pointer;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.btn:hover{background:var(--color-hover)}.btn:active{background:var(--color-raised)}
/* основное действие — сплошная заливка акцентом */
.btn.primary{background:var(--color-accent);color:var(--color-on-accent);border-color:var(--color-accent)}
.btn.primary:hover{background:color-mix(in srgb,var(--color-accent) 88%,var(--color-text));border-color:color-mix(in srgb,var(--color-accent) 88%,var(--color-text))}
/* недоступно: текст muted, курсор запрета, без реакции на hover */
.btn[disabled],.btn[aria-disabled="true"],.icon-btn[disabled],.icon-btn[aria-disabled="true"]{color:var(--color-disabled-text);background:var(--color-surface);border-color:var(--color-border-decorative);cursor:not-allowed}
.btn.primary[disabled],.btn.primary[aria-disabled="true"]{background:var(--color-raised);color:var(--color-disabled-text)}
/* кнопка «наверх»: появление только через opacity */
#top-btn{position:fixed;right:var(--space-6);bottom:var(--space-6);width:44px;height:44px;border:1px solid var(--color-border-control);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-size:18px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity var(--dur-fast),background-color var(--dur-fast);z-index:25}
#top-btn:hover{background:var(--color-hover)}
#top-btn.show{opacity:1;pointer-events:auto}

@media (max-width:800px){.menu-btn{display:block}}
@media (max-width:767px){
  .icon-btn{width:44px;height:44px}
  .btn{height:44px}
}

/* ---------- prose.css ---------- */
/* ---------- текст статьи (ТЗ D2, шкала 3.2) ---------- */
.doc h1{font:700 var(--fs-h1)/var(--lh-h1) var(--font-ui);margin:0 0 var(--space-4);color:var(--color-text)}
.doc>p:first-of-type,.doc .lead{font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:450;color:var(--color-text-secondary);max-width:var(--measure-article)}
.doc h2{font:650 var(--fs-h2)/var(--lh-h2) var(--font-ui);margin:var(--space-10) 0 var(--space-3);color:var(--color-text)}
.doc h3{font:600 var(--fs-h3)/var(--lh-h3) var(--font-ui);margin:var(--space-8) 0 var(--space-3);color:var(--color-text)}
.doc h4{font:600 var(--fs-card)/var(--lh-card) var(--font-ui);margin:var(--space-6) 0 var(--space-2);color:var(--color-text)}
.doc .headerlink{opacity:0;margin-left:var(--space-2);font:400 var(--fs-small) var(--font-ui);color:var(--color-text-muted);text-decoration:none}
.doc :is(h2,h3):is(:hover,:focus-within) .headerlink,.doc .headerlink:focus-visible{opacity:1}
.doc p,.doc li,.doc blockquote{max-width:var(--measure-article)}
.doc li{margin:.4em 0}
.doc ul,.doc ol{padding-left:1.3em;margin:var(--space-3) 0}
.doc p{margin:0 0 var(--space-4)}
.doc li::marker{color:var(--color-text-muted)}
.doc strong{font-weight:600}

/* ссылки в статье подчёркнуты: цвет не единственный признак (ТЗ 3.2, 8.5) */
.doc a:not(.btn,.card,.headerlink){text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.doc a:not(.btn,.card,.headerlink):hover{text-decoration-thickness:2px}

/* код: поверхность code и тонкая граница, без тени */
.doc code{background:var(--color-code);padding:.14em .42em;border-radius:var(--radius-sm);font-size:.87em;border:1px solid var(--color-border-decorative)}
.doc pre{background:var(--color-code);padding:var(--space-4);border-radius:var(--radius-md);overflow:auto;border:1px solid var(--color-border-decorative)}
.doc pre code{background:none;border:0;padding:0}
.doc hr{border:0;border-top:1px solid var(--color-border-decorative);margin:var(--space-10) 0}

/* выноски (ТЗ 17.1): поверхность, тонкая граница, левая полоса цвета варианта; без тени */
.doc blockquote{--vc:var(--color-info);margin:var(--space-6) 0;padding:var(--space-4) var(--space-6);background:var(--color-surface);border:1px solid var(--color-border-decorative);border-left:3px solid var(--vc);border-radius:var(--radius-md)}
.doc blockquote p{margin:var(--space-2) 0;max-width:none}
.doc blockquote.note{--vc:var(--color-info)}
.doc blockquote.warn{--vc:var(--color-warning)}
.doc blockquote.danger{--vc:var(--color-danger)}
.doc blockquote.ok{--vc:var(--color-success)}
.doc blockquote:is(.warn,.note,.danger,.ok)::before{display:block;font:600 var(--fs-small)/var(--lh-small) var(--font-ui);color:var(--vc);margin-bottom:var(--space-1)}
.doc blockquote.warn::before{content:"Нужно уточнить"}
.doc blockquote.note::before{content:"Примечание"}
.doc blockquote.danger::before{content:"Внимание"}
.doc blockquote.ok::before{content:"Подтверждено"}

/* спойлер и аккордеон: summary — видимый признак, цель ≥ 44 px, без скрытой ключевой информации */
.doc details{margin:var(--space-6) 0;background:var(--color-surface);border:1px solid var(--color-border-decorative);border-radius:var(--radius-md)}
.doc details>summary{display:flex;align-items:center;gap:var(--space-2);min-height:44px;padding:var(--space-2) var(--space-4);font:600 var(--fs-card)/var(--lh-card) var(--font-ui);color:var(--color-text);cursor:pointer;list-style:none}
.doc details>summary::-webkit-details-marker{display:none}
.doc details>summary::after{content:"▸";margin-left:auto;font-size:var(--fs-small);color:var(--color-text-muted)}
.doc details[open]>summary::after{content:"▾"}
.doc details.spoiler>summary::after{content:"Показать спойлер ▸";font:600 var(--fs-small)/var(--lh-small) var(--font-ui)}
.doc details.spoiler[open]>summary::after{content:"Показать спойлер ▾"}
.doc details[open]{padding-bottom:var(--space-4)}
.doc details>:not(summary){margin-inline:var(--space-4)}

/* пустое состояние: вместо пустой таблицы или списка (gen/fmt.py empty_state) */
.doc .empty{margin:var(--space-6) 0;padding:var(--space-4) var(--space-6);background:var(--color-surface);border:1px dashed var(--color-border-control);border-radius:var(--radius-md);max-width:var(--measure-article)}
.doc .empty-title{margin:0 0 var(--space-1);font:600 var(--fs-body)/var(--lh-body) var(--font-ui);color:var(--color-text)}
.doc .empty-text{margin:0;font:400 var(--fs-small)/var(--lh-small) var(--font-ui);color:var(--color-text-secondary)}

/* «Кратко» / «Памятка игроку»: ответ в начале статьи — поверхность второго уровня, заголовок и содержимое без рамок-обрамления */
.doc .quick{margin:var(--space-6) 0 var(--space-8);padding:var(--space-4) var(--space-6);background:var(--color-surface);border:1px solid var(--color-border-decorative);border-left:3px solid var(--color-accent);border-radius:var(--radius-md);max-width:var(--measure-article)}
.doc .quick-title,.doc .quick>p:first-child>strong:only-child{display:block;margin:0 0 var(--space-2);font:600 var(--fs-small)/var(--lh-small) var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--color-accent)}
.doc .quick p{margin:var(--space-2) 0;max-width:none}
.doc .quick ul,.doc .quick ol{margin:var(--space-2) 0;padding-left:1.2em;max-width:none}
.doc .quick li{margin:.4em 0;max-width:none}
.doc .quick .tbl{margin:var(--space-3) 0 0;background:transparent}
.doc .quick .tbl th{background:var(--color-raised)}
.doc .quick>:last-child{margin-bottom:0}
/* таблица «Кратко» короткая: на телефоне умещается без горизонтальной прокрутки */
.doc .quick .tbl{overflow-x:auto}
.doc .quick table{font-size:14px}
.doc .quick th,.doc .quick td{padding:8px 8px}
.doc .quick :is(.tbl,table) :is(th,td):first-child{position:static;border-right:0}
@media (max-width:600px){.doc .quick{padding:var(--space-4)}}
.doc .quick table{width:100%;display:table;overflow-wrap:normal}
/* наведение на summary аккордеонов и оглавления: подложка hover, цвет текста не меняется (U12) */
.doc details>summary{border-radius:calc(var(--radius-md) - 1px);transition:background-color var(--dur-fast)}
.doc details>summary:hover{background:var(--color-hover)}

/* ---------- tables.css ---------- */
/* таблицы */
.tbl{overflow-x:auto;margin:1.2em 0;border:1px solid var(--color-border-decorative);border-radius:var(--radius-md);background:var(--color-surface)}
.doc table{width:100%;border-collapse:collapse;font-size:14.5px;font-variant-numeric:tabular-nums}
.doc th,.doc td{padding:10px 11px;text-align:left;border-bottom:1px solid var(--color-border-decorative);vertical-align:top}
.doc th{background:var(--color-raised);font:600 var(--fs-small)/var(--lh-small) var(--font-ui);color:var(--color-text-muted);vertical-align:bottom;position:sticky;top:0;overflow-wrap:break-word}
.doc td:first-child{font-weight:600}
.doc tbody tr:hover td{background:var(--color-hover)}
.doc tr:last-child td{border-bottom:0}
.doc table:not(.tbl table){display:block;overflow-x:auto;border:1px solid var(--color-border-decorative);border-radius:var(--radius-md);background:var(--color-surface)}
/* прокрутка таблицы: JS ставит .scroll-r / .scroll-l, когда есть что листать — край гаснет градиентом */
.tbl.scroll-r,.doc table:not(.tbl table).scroll-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}
.tbl.scroll-l,.doc table:not(.tbl table).scroll-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 32px),transparent)}
.tbl.scroll-l.scroll-r,.doc table:not(.tbl table).scroll-l.scroll-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
/* первая колонка липкая: непрозрачный фон, иначе данные прокрутки просвечивают */
.doc :is(.tbl,table:not(.tbl table)):is(.scroll-l,.scroll-r) :is(th,td):first-child{position:sticky;left:0;z-index:1;background:var(--color-surface);border-right:1px solid var(--color-border-decorative)}
.doc :is(.tbl,table:not(.tbl table)):is(.scroll-l,.scroll-r) th:first-child{background:var(--color-raised);z-index:3}
.doc :is(.tbl,table:not(.tbl table)):is(.scroll-l,.scroll-r) tbody tr:hover td:first-child{background:var(--color-hover)}
/* пустые значения (ТЗ 3.5): «—», «неизвестно», «не применимо» */
.na{color:var(--color-text-muted)}
.na-unknown{font-style:italic}
/* квадратик цвета в палитре телеграфов: цвет задаёт inline-style, рамка — граница контрола, чтобы белый не пропадал на светлом фоне */
.swatch{display:inline-block;width:22px;height:22px;box-sizing:border-box;vertical-align:middle;border:1px solid var(--color-border-control);border-radius:var(--radius-sm)}
/* рецепты */
.craft{display:inline-grid;gap:3px}
.craft>span{display:flex;gap:3px}
/* иконка предмета: пиксельная, рядом с названием */
.sprite{display:inline-block;vertical-align:middle;margin:-4px var(--space-2) -4px 0;image-rendering:pixelated;object-fit:contain}
.craft i .sprite{display:block;margin:0}
/* тёмная тема: подложка под спрайт, иначе тёмные пиксели (незерит, уголь, порох) сливаются с поверхностью; в светлой фона нет */
html[data-theme="dark"] .sprite{background:var(--color-raised)}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .sprite{background:var(--color-raised)}}
.craft i{display:grid;place-items:center;align-content:center;gap:2px;width:76px;min-height:62px;padding:3px;border:1px solid var(--color-border-decorative);border-radius:var(--radius-sm);background:var(--color-raised);font-style:normal;font-size:12px;line-height:1.15;text-align:center}
/* пустая ячейка рецепта — пунктир, без прозрачности */
.craft i.e{border-style:dashed;background:transparent}
/* первая колонка с иконкой и бейджем редкости не переносится на вторую строку */
.tbl td:first-child:has(.sprite){white-space:nowrap}
.mob-face{margin-right:var(--space-3)}
/* морда из полной картинки моба: квадрат сверху — голова, а не сжатая фигура */
.sprite.mob-face-head{object-fit:cover;object-position:top center}
/* иконка предмета в тексте и таблицах: чуть меньше обычной, по линии строки */
.sprite.ico{width:20px;height:20px;margin:-3px 6px -3px 0;vertical-align:-0.2em}

/* три вида широких таблиц (U1): matrix — колонки на выбор, cards — строка-карточка, fit — по ширине содержимого */
.tbl.fit{width:max-content;max-width:100%}
.doc .tbl.fit table{width:auto}
.tbl.matrix .ch{display:none}
.doc details.col-pick{margin:var(--space-3) 0 0}
.col-pick-list{display:flex;flex-wrap:wrap;gap:0 var(--space-4)}
.col-pick-list label{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;font-size:var(--fs-small);cursor:pointer}
.col-pick-list input{width:18px;height:18px;margin:0;accent-color:var(--color-accent)}
@media (min-width:768px){.doc details.col-pick{display:none}}
@media (max-width:767px){
  .tbl.cards-on{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .tbl.cards-on :is(table,tbody,tr,td){display:block;width:100%}
  .tbl.cards-on thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tbl.cards-on tr{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border-decorative)}
  .tbl.cards-on tr:last-child{border-bottom:0}
  .doc .tbl.cards-on td{padding:var(--space-1) 0;border:0;text-align:left!important;white-space:normal!important;position:static}
  .tbl.cards-on td:first-child{padding-bottom:var(--space-2)}
  .tbl.cards-on td:empty{display:none}
  .tbl.cards-on td[data-label]:not(:first-child)::before{content:attr(data-label) ": ";font-size:var(--fs-small);font-weight:600;color:var(--color-text-muted)}
  .tbl.cards-on td[data-label=""]::before{content:none!important}
}
/* короткий код (команда) и числовые ячейки не рвём посередине (U10); класс nw ставит tables.js */
.doc code.nw{white-space:nowrap}
.doc td[style*="text-align: right"]{white-space:nowrap}

/* ---------- rarity.css ---------- */
/* редкости: цвет + текст, без свечения (ТЗ 3.1). --c — официальный цвет (фон и рамка), --c-text — текст (контраст проверен) */
.r{display:inline-block;padding:2px 10px;border-radius:99px;font:600 var(--fs-badge)/var(--lh-badge) var(--font-ui);letter-spacing:.01em;white-space:nowrap;color:var(--c-text);
  background:color-mix(in srgb,var(--c) 12%,transparent);border:1px solid color-mix(in srgb,var(--c-text) 45%,transparent)}
.r-common{--c:var(--rarity-common);--c-text:var(--rarity-common-text)}.r-uncommon{--c:var(--rarity-uncommon);--c-text:var(--rarity-uncommon-text)}
.r-rare{--c:var(--rarity-rare);--c-text:var(--rarity-rare-text)}.r-epic{--c:var(--rarity-epic);--c-text:var(--rarity-epic-text)}
.r-legendary{--c:var(--rarity-legendary);--c-text:var(--rarity-legendary-text)}.r-unique{--c:var(--rarity-unique);--c-text:var(--rarity-unique-text)}
.r-crafted{--c:var(--rarity-crafted);--c-text:var(--rarity-crafted-text)}

/* ---------- home.css ---------- */
/* главная (UX-11, UX-12): название, входы по задаче, популярные вопросы, каталог разделов */
body[data-slug="index"] .layout{grid-template-columns:var(--width-sidebar) minmax(0,1fr)}
.home-head{margin:0 0 var(--space-8);padding:var(--space-8);border:1px solid var(--color-border-decorative);border-radius:var(--radius-lg);background:var(--color-surface)}
.home-head .kicker{display:block;margin-bottom:var(--space-3);font-size:var(--fs-small);line-height:var(--lh-small);color:var(--color-text-muted)}
.home-head h1{margin:0 0 var(--space-3);max-width:none}
.home-head h1 em{font-style:normal}
.home-head .lead{max-width:60ch;margin:0;font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--color-text-secondary)}
/* входы по задаче: четыре крупные плитки с иконкой предмета */
.entries{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);margin:0 0 var(--space-10)}
.entry{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);min-height:132px;text-align:left;padding:var(--space-4);
  border:1px solid var(--color-border-decorative);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);
  text-decoration:none!important;cursor:pointer;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.entry:hover{background:var(--color-hover);border-color:var(--color-border-control)}
.entry-ico{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:var(--space-1);border-radius:var(--radius-sm);background:var(--color-raised)}
.entry-ico img{display:block;width:32px;height:32px;image-rendering:pixelated}
.entry-ico svg{width:24px;height:24px;color:var(--color-text)}
.entry b{font:600 var(--fs-card)/var(--lh-card) var(--font-ui);color:var(--color-text)}
.entry>span:last-child{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--color-text-muted)}
/* популярные задачи: ссылки-кнопки в две колонки */
/* полный каталог: свёрнут по умолчанию */
.catalog-all{margin-top:var(--space-6);border-top:1px solid var(--color-border-decorative);padding-top:var(--space-4)}
.catalog-all>summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:600;color:var(--color-text);border-radius:var(--radius-sm)}
.catalog-all>summary:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:3px}
.catalog-all .cat-grid{margin-top:var(--space-4)}
.popular{margin:0 0 var(--space-10)}
.popular h2{margin-bottom:var(--space-3)}
.popular ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);list-style:none;margin:0;padding:0}
.popular a{display:flex;align-items:center;min-height:44px;padding:var(--space-2) var(--space-4);border:1px solid var(--color-border-decorative);border-radius:var(--radius-md);
  background:var(--color-surface);color:var(--color-text);font-weight:600;text-decoration:none!important;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.popular a::after{content:"→";margin-left:auto;padding-left:var(--space-2);color:var(--color-text-muted)}
.popular a:hover{background:var(--color-hover);border-color:var(--color-border-control)}
/* каталог: группы колонками, у каждой раздела — название и короткое описание */
.catalog{margin:0 0 var(--space-8)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-6) var(--space-8)}
.cat-group h3{margin:0 0 var(--space-2);font-size:var(--fs-small);font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted)}
.cat-group ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-border-decorative)}
.cat-group li{padding:var(--space-2) 0;border-bottom:1px solid var(--color-border-decorative)}
.cat-group li a{font-weight:600}
.cat-group li span{display:block;margin-top:2px;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--color-text-muted)}
.report{margin:var(--space-8) 0 0;font-size:var(--fs-small);color:var(--color-text-secondary)}

@media (max-width:1180px){.cat-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}
@media (max-width:800px){
  .home-head{padding:var(--space-6) var(--space-4)}
  .entries{grid-template-columns:repeat(2,minmax(0,1fr))}
  .entry{min-height:120px}
  .popular ul{grid-template-columns:minmax(0,1fr)}
  .cat-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
}
@media (max-width:767px){
  .entries{gap:var(--space-2)}
  .entry{padding:var(--space-3)}
}
/* телефон: входы — компактные строки с иконкой слева (иконка занимает два ряда сетки) */
@media (max-width:420px){
  .entries{grid-template-columns:minmax(0,1fr)}
  .entry{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;column-gap:var(--space-3);row-gap:2px;min-height:72px;padding:var(--space-3) var(--space-4)}
  .entry-ico{grid-row:1 / span 2;width:40px;height:40px;margin:0}
}
.catalog-all>summary:hover{background:var(--color-hover)}

/* ---------- cards.css ---------- */
/* карточки: три типа — навигационная, сущность, выноска (выноска — в prose.css) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-3);margin:1.4em 0}
/* навигационная карточка: поверхность и тонкая граница, без тени и подъёма */
.card,.card-entity{display:flex;flex-direction:column;gap:var(--space-1);padding:16px 20px;background:var(--color-surface);border:1px solid var(--color-border-decorative);border-radius:var(--radius-md);color:var(--color-text);text-decoration:none!important;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.card{position:relative;padding-right:44px}
.card::after{content:"→";position:absolute;right:var(--space-4);top:16px;color:var(--color-text-muted)}
.card:hover,.card-entity:hover{background:var(--color-hover);border-color:var(--color-border-control)}
.card b{font:600 var(--fs-card)/var(--lh-card) var(--font-ui);color:var(--color-text)}
.card span{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--color-text-muted)}
/* карточка-сущность: слот иконки слева, название, «Тип · Редкость», до 3 пар параметр — значение */
.card-entity{flex-direction:row;align-items:flex-start;gap:var(--space-3)}
.card-entity .sprite{width:48px;height:48px;flex:none}
.card-entity .ce-body{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.card-entity b{font:600 var(--fs-card)/var(--lh-card) var(--font-ui);color:var(--color-text);overflow-wrap:anywhere}
.card-entity .ce-meta{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--color-text-muted)}
.card-entity .kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px var(--space-3);margin:var(--space-1) 0 0;font-size:var(--fs-small);line-height:var(--lh-small)}
.card-entity .kv dt{color:var(--color-text-muted)}
.card-entity .kv dd{margin:0;color:var(--color-text);text-align:right;font-variant-numeric:tabular-nums}
/* порталы рейда: плоскость 2×3 блока из текстуры ресурс-пака (один кадр анимации) */
.portals{display:flex;flex-wrap:wrap;gap:var(--space-6);margin:1.4em 0}
.portal{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);width:176px;text-align:center}
.portal-pane{display:grid;grid-template-columns:repeat(2,64px);grid-auto-rows:64px;padding:var(--space-2);background:var(--color-raised);border:1px solid var(--color-border-control);border-radius:var(--radius-md)}
.portal-pane i{display:block;background-size:64px 64px;image-rendering:pixelated}
.portal-boss i{background-image:url(img/portal_boss.png)}
.portal-exit i{background-image:url(img/portal_exit.png)}
.portal figcaption{display:flex;flex-direction:column;gap:2px}
.portal figcaption b{font:600 var(--fs-card)/var(--lh-card) var(--font-ui);color:var(--color-text)}
.portal figcaption span{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--color-text-muted)}
/* «как выглядит»: плитка с иконкой блока или предмета из ресурс-пака, подпись и пояснение */
.looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--space-3);margin:1.4em 0}
.look{margin:0;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border-decorative);border-radius:var(--radius-md)}
.look-pane{display:flex;align-items:center;justify-content:center;height:88px;background:var(--color-raised);border:1px solid var(--color-border-control);border-radius:var(--radius-md)}
.look-pane img{width:64px;height:64px;image-rendering:pixelated;object-fit:contain}
.look-pane img.look-render{width:72px;height:72px;image-rendering:auto}
.look figcaption{display:flex;flex-direction:column;gap:2px}
.look figcaption b{font:600 var(--fs-card)/var(--lh-card) var(--font-ui);color:var(--color-text)}
.look figcaption span{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--color-text-muted)}
.card>.sprite{margin:0 0 var(--space-1);align-self:flex-start}
/* телефон: карточка-ссылка компактной строкой; иконка слева, если есть, занимает два ряда */
@media (max-width:420px){
  .card{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--space-3);row-gap:2px;min-height:72px;padding:var(--space-3) 44px var(--space-3) var(--space-4)}
  .card:has(>.sprite){grid-template-columns:40px minmax(0,1fr)}
  .card>.sprite{grid-row:1 / span 2;width:40px;height:40px;margin:0}
  .card::after{top:50%;margin-top:-10px}
}

/* ---------- entity.css ---------- */
/* карточки и блоки сущностей — D8 */

/* страница сущности: профиль в начале статьи (иконка, название, сводка, плитки параметров) — без float */
.ent-sub{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin:0 0 var(--space-4);color:var(--color-text-muted)}
.profile,.profile *{min-width:0}
.profile{margin:0 0 var(--space-6);padding:var(--space-6);background:var(--color-surface);border:1px solid var(--color-border-decorative);border-radius:var(--radius-lg)}
.profile-top{display:flex;align-items:flex-start;gap:var(--space-4)}
.profile-title{min-width:0;flex:1}
.doc .profile h1{margin:0 0 var(--space-2);font-size:var(--fs-h2);line-height:1.2}
.profile .ent-sub{margin:0 0 var(--space-2)}
.profile .ib-icon:not(:empty){flex:none;width:64px;height:64px}
.profile .ib-icon .sprite{width:64px;height:64px;margin:0}
.profile .ib-icon .mob-pic{display:block;width:64px;height:64px;object-fit:contain;image-rendering:pixelated}
.profile-summary{margin:0;color:var(--color-text-secondary)}
.profile-summary .ref{white-space:nowrap}
.profile-actions{margin:var(--space-4) 0 0}
.profile-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr));gap:var(--space-3);margin:var(--space-6) 0 0}
.profile-stats .ps{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;padding:var(--space-3);background:var(--color-raised);border-radius:var(--radius-md)}
.profile-stats dt{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--color-text-muted)}
.profile-stats dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ps dd{overflow-wrap:anywhere}
.profile h1{overflow-wrap:anywhere}
.profile .ib-note{margin:var(--space-4) 0 0;font-size:var(--fs-small);color:var(--color-text-muted)}
@media (max-width:599px){
  .profile{padding:var(--space-4)}
  .profile-top{flex-direction:column;align-items:flex-start;gap:var(--space-3)}
  .profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* блоки «Как получить» и «Где используется»: подзаголовок группы и воздух между пунктами */
.acq-title{margin:var(--space-4) 0 var(--space-2);font-weight:600;color:var(--color-text)}
.doc:has(.profile) li{margin:.6em 0}

/* «Как получить»: категории выпадения (моб / босс / сундук) — раскрываются, как .doc details; таблица шансов внутри */
details.acq{margin:var(--space-3) 0}
.acq>summary{display:flex;align-items:center;gap:var(--space-2);min-height:44px;padding:var(--space-2) var(--space-4);font:600 var(--fs-card)/var(--lh-card) var(--font-ui);color:var(--color-text);cursor:pointer;list-style:none}
.acq>summary::-webkit-details-marker{display:none}
.acq>summary::after{content:"▸";margin-left:auto;font-size:var(--fs-small);color:var(--color-text-muted)}
.acq[open]>summary::after{content:"▾"}
.acq-body{margin:0 var(--space-4);padding-bottom:var(--space-3);min-width:0}
.acq-note{margin:0 0 var(--space-3);font-size:var(--fs-small);color:var(--color-text-muted)}
.acq-list{margin:0 0 var(--space-2);padding-left:var(--space-4)}
.acq-list>li{margin:var(--space-2) 0}
.acq .tbl{margin:var(--space-2) 0 0;max-width:100%}
.acq .tbl table{font-size:var(--fs-small)}
.acq-caption{margin:var(--space-2) 0 0;font-size:var(--fs-small);color:var(--color-text-muted)}

.ent-notes{margin:var(--space-1) 0 var(--space-2);font-size:var(--fs-small);color:var(--color-text-muted)}
details.ent-notes summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
/* техническая часть свёрнута */
.tech{margin:var(--space-6) 0 0;font-size:var(--fs-small);color:var(--color-text-muted)}
.tech summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.tech dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-1) var(--space-3);margin:0}
.tech dd{margin:0;overflow-wrap:anywhere}
/* таблицы шансов «Как получить»: узкие «Уровень» и «Попыток», числа по правому краю */
.acq .chance table{width:auto;min-width:100%}
.acq .chance th:first-child,.acq .chance td:first-child{white-space:nowrap}
.acq .chance :is(th,td):nth-child(n+2){text-align:right;white-space:nowrap}
.acq .chance tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--color-raised) 35%,transparent)}

/* ячейка шанса с двумя режимами: PvE и PvP строками, шанс пула целиком — мелко под ними */
.acq .chance td small.pool{display:block;margin-top:2px;font-size:.78em;line-height:1.3;color:var(--color-text-muted)}
.acq .chance td{line-height:1.35}

/* ---------- profile.css ---------- */
/* профиль сущности: переключатель редкости, подсказки «?», подсказка прокрутки таблиц */

/* только для чтения экраном: озвучивается, но не видно */
.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}

/* скрытые плитки и заметки профиля: атрибут hidden важнее display из entity.css */
.profile-stats .ps[hidden],.profile .ib-note[hidden]{display:none}

/* переключатель редкости: кнопки на широком экране, select на телефоне */
.rarity-switch{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);min-width:0;margin:0 0 var(--space-4)}
.rarity-switch>*{min-width:0}
.rarity-label{font:600 var(--fs-small)/var(--lh-small) var(--font-ui);color:var(--color-text-muted)}
.rs-buttons{display:flex;flex-wrap:wrap;gap:var(--space-1);min-width:0;max-width:100%}
.rs-btn{display:inline-flex;align-items:center;min-height:36px;max-width:100%;padding:var(--space-1) var(--space-3);border:1px solid var(--color-border-decorative);border-radius:var(--radius-md);background:transparent;color:var(--color-text);font:500 var(--fs-small)/var(--lh-small) var(--font-ui);overflow-wrap:anywhere;text-align:left;cursor:pointer;transition:background-color var(--dur-fast),border-color var(--dur-fast)}
.rs-btn:hover{background:var(--color-hover)}
.rs-btn[aria-pressed="true"]{background:var(--color-selected);font-weight:600}
.rs-select{display:none;width:100%;height:44px;padding:0 var(--space-3);border:1px solid var(--color-border-control);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font:inherit}
@media (max-width:560px){
  .rs-buttons{display:none}
  .rs-select{display:block}
}
@media (max-width:767px){
  .rs-btn{min-height:44px}
}

/* подсказка «?»: без JS скрыта, поэтому текст не мешает читателю без скриптов */
.hint{display:none;position:relative;align-items:center;justify-content:center;flex:none;width:20px;height:20px;margin:0 0 0 var(--space-1);padding:0;vertical-align:middle;border:1px solid var(--color-border-control);border-radius:50%;background:transparent;color:var(--color-text-secondary);font:600 12px/1 var(--font-ui);cursor:pointer;transition:background-color var(--dur-fast)}
.has-js .hint{display:inline-flex}
.hint:hover{background:var(--color-hover)}
/* на телефоне зона нажатия 44x44, сама кнопка остаётся 20x20 */
@media (max-width:767px){
  .hint::before{content:"";position:absolute;inset:-12px}
}

/* всплывающая подсказка: один элемент на страницу, позиция задаёт profile.js */
.hint-pop{position:fixed;z-index:30;box-sizing:border-box;width:max-content;max-width:min(320px,calc(100vw - 16px));padding:var(--space-3) var(--space-4);background:var(--color-raised);border:1px solid var(--color-border-decorative);border-radius:var(--radius-md);box-shadow:var(--shadow-overlay);color:var(--color-text);font:400 14px/1.45 var(--font-ui);overflow-wrap:break-word}
.hint-pop[hidden],.hint-pop [hidden]{display:none}
.hint-pop p{margin:0}
.hint-pop .hint-link{display:inline-flex;align-items:center;min-height:36px;margin-top:var(--space-2);color:var(--color-link);text-decoration:underline;text-underline-offset:.18em}

/* подсказка прокрутки таблицы: показывает profile.js только когда таблица реально шире блока */
p.scroll-hint{margin:1.2em 0 var(--space-1);font-size:13px;line-height:1.4;color:var(--color-text-muted)}
p.scroll-hint[hidden]{display:none}
p.scroll-hint:not([hidden])+.tbl{margin-top:var(--space-1)}

/* ---------- catalog.css ---------- */
/* каталог и фильтры — D9 */

/* каталог снаряжения (T10): панель фильтров, сортировка колонок, состояние строк */
.cat-filters{margin:var(--space-4) 0;padding:0 var(--space-4);border:1px solid var(--color-border-decorative);border-radius:var(--radius-md);background:var(--color-surface)}
.doc details.cat-filters>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:600 var(--fs-small)/var(--lh-small) var(--font-ui);color:var(--color-text)}
.cat-form{display:grid;gap:var(--space-3);padding:0 0 var(--space-4)}
.cat-q{display:grid;gap:var(--space-1)}
.cat-q>span,.cat-group legend{font:600 var(--fs-small)/var(--lh-small) var(--font-ui);color:var(--color-text-muted)}
.cat-q input{min-height:44px;padding:var(--space-2) var(--space-3);color:var(--color-text);background:var(--color-raised);border:1px solid var(--color-border-control);border-radius:var(--radius-sm)}
.cat-group{margin:0;padding:0;border:0;min-width:0}
.cat-group legend{padding:0;margin-bottom:var(--space-1)}
.cat-opts{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-2)}
.cat-opt{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-3);border:1px solid var(--color-border-decorative);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-small)}
.cat-opt:hover{background:var(--color-hover)}
.cat-opt input{width:18px;height:18px;margin:0;accent-color:var(--color-accent)}
.cat-reset{justify-self:start;min-height:40px;padding:0 var(--space-4);color:var(--color-text);background:var(--color-raised);border:1px solid var(--color-border-control);border-radius:var(--radius-md);cursor:pointer;font:600 var(--fs-small)/var(--lh-small) var(--font-ui)}
.cat-status{margin:var(--space-2) 0;color:var(--color-text-muted);font-size:var(--fs-small)}
.catalog-table tr[hidden]{display:none}
.catalog-table .cat-name{display:inline-flex;align-items:center;gap:var(--space-2)}
.catalog-table .cat-name .sprite{margin:0}
.catalog-table .cat-name > a:first-child:has(.sprite){display:inline-flex;flex:none}
.catalog-table th button{display:inline-flex;align-items:center;gap:var(--space-1);padding:0;color:inherit;background:none;border:0;cursor:pointer;font:inherit;text-align:left}
.catalog-table th button:hover{background:var(--color-hover)}
.catalog-table th[aria-sort=none] button::after{content:"↕";font-size:10px;color:var(--color-text-muted)}
.catalog-table th[aria-sort=ascending] button::after{content:"▲";font-size:10px}
.catalog-table th[aria-sort=descending] button::after{content:"▼";font-size:10px}
@media (max-width:767px){.catalog-table th button{min-height:44px}}
@media (min-width:768px){.cat-form{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}.cat-form .cat-reset{grid-column:1/-1}}

/* спойлеры (T13): предупреждение под заголовком; маркер раскрытия — стрелка, подпись только в summary */
.doc details.spoiler>summary::after{content:"▸"}
.doc details.spoiler[open]>summary::after{content:"▾"}
.spoiler-warn{margin:var(--space-3) 0;padding:var(--space-2) var(--space-3);font-size:var(--fs-small);color:var(--color-text-muted);background:var(--color-raised);border:1px solid var(--color-border-decorative);border-radius:var(--radius-sm)}

/* «Нашли ошибку в данных?» (T12): блок внизу статьи и ссылка в infobox сущности */
.report-box{margin:var(--space-8) 0 0;padding:var(--space-4) var(--space-6);border:1px solid var(--color-border-decorative);border-radius:var(--radius-md);background:var(--color-surface)}
.report-box p{margin:var(--space-2) 0 0;font-size:var(--fs-small);color:var(--color-text-muted)}
.report-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-sm);background:var(--color-accent-warm);color:var(--color-on-accent);font-weight:600;text-decoration:none!important}
.report-btn:hover{text-decoration:underline!important;text-underline-offset:3px}
.infobox .report-link{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--space-2);font-size:var(--fs-small)}

/* сравнение предметов (T14): чекбоксы в каталоге и панель выбора */
.cmp-pick{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);min-width:44px;min-height:44px;font-size:var(--fs-small);white-space:nowrap;cursor:pointer}
.cmp-pick input{width:18px;height:18px;margin:0;accent-color:var(--color-accent)}
.cmp-pick input:disabled{cursor:not-allowed;opacity:.5}
.cmp-bar{position:sticky;bottom:var(--space-2);z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin:var(--space-4) 0;padding:var(--space-3) var(--space-4);background:var(--color-raised);border:1px solid var(--color-border-control);border-radius:var(--radius-md)}
.cmp-bar[hidden]{display:none}
.cmp-bar .cmp-msg{margin:0;flex:1 1 200px;font-size:var(--fs-small)}
.cmp-bar .cmp-go{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--space-4);border-radius:var(--radius-md);background:var(--color-accent);color:var(--color-on-accent);font:600 var(--fs-small)/var(--lh-small) var(--font-ui);text-decoration:none}
.cmp-bar .cmp-go[hidden]{display:none}
.cmp-bar .cmp-go:hover{text-decoration:underline;text-underline-offset:3px}

/* страница сравнения (compare.html): управление, таблица, пометка «лучше» */
.compare-app{margin:var(--space-4) 0}
.doc .cmp-nojs{padding:var(--space-3) var(--space-4);border:1px solid var(--color-border-decorative);border-radius:var(--radius-md);background:var(--color-surface)}
.cmp-controls{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);align-items:center;margin:var(--space-3) 0 var(--space-4)}
.cmp-controls label{display:inline-flex;align-items:center;gap:var(--space-2);font:600 var(--fs-small)/var(--lh-small) var(--font-ui)}
.cmp-controls select{min-height:44px;padding:0 var(--space-3);color:var(--color-text);background:var(--color-raised);border:1px solid var(--color-border-control);border-radius:var(--radius-sm);font:inherit}
.cmp-tbl{overflow-x:auto}
.cmp-table{min-width:100%}
.cmp-table caption{text-align:left;font:600 var(--fs-small)/var(--lh-small) var(--font-ui);color:var(--color-text-muted);padding:0 0 var(--space-2)}
.cmp-table th,.cmp-table td{vertical-align:top;min-width:9rem}
.cmp-table thead th a{font-weight:600}
.cmp-table .cmp-sub{display:block;font-size:var(--fs-small);font-weight:400;color:var(--color-text-muted)}
.cmp-table th:first-child,.cmp-table td:first-child{position:sticky;left:0;z-index:1;background:var(--color-surface)}
.cmp-table tr.cmp-sec th{background:var(--color-raised);text-align:left;font-weight:600}
.cmp-table td.is-best{background:var(--color-selected);color:var(--color-success);font-weight:600}
.cmp-table .cmp-na{color:var(--color-text-muted)}
.cmp-mark{display:inline-block;margin-right:var(--space-1);font-weight:700;font-size:var(--fs-small)}
.cmp-legend{margin:var(--space-3) 0;font-size:var(--fs-small);color:var(--color-text-muted)}
.cmp-note,.cmp-msg-big{margin:var(--space-3) 0;font-size:var(--fs-small)}
@media (max-width:767px){.cmp-bar .cmp-go,.cat-reset{min-height:44px}.cmp-pick{min-height:44px}.cmp-controls select{min-width:44px}}

/* калькулятор защиты комплекта (armor.html, T15): четыре части, итог и пошаговый расчёт; без JS блок скрыт */
.armor-app{margin:var(--space-4) 0}
.doc .armor-nojs{padding:var(--space-3) var(--space-4);border:1px solid var(--color-border-decorative);border-radius:var(--radius-md);background:var(--color-surface)}
.armor-calc{margin:var(--space-4) 0;padding:var(--space-4);border:1px solid var(--color-border-decorative);border-radius:var(--radius-md);background:var(--color-surface)}
.armor-calc .armor-intro{margin:0 0 var(--space-4);font-size:var(--fs-small);color:var(--color-text-muted)}
.armor-slots{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3)}
.armor-slot{margin:0;padding:var(--space-3);min-width:0;border:1px solid var(--color-border-decorative);border-radius:var(--radius-sm);background:var(--color-raised)}
.armor-slot legend{padding:0 var(--space-1);font:600 var(--fs-small)/var(--lh-small) var(--font-ui);color:var(--color-text)}
.armor-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-2)}
.armor-slot label{display:grid;gap:var(--space-1);font-size:var(--fs-small);color:var(--color-text-muted);min-width:0}
.armor-slot select{min-height:44px;width:100%;padding:0 var(--space-2);color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border-control);border-radius:var(--radius-sm);font:inherit;font-size:var(--fs-small)}
.armor-slot .armor-val{margin:var(--space-2) 0 0;font-size:var(--fs-small);color:var(--color-text)}
.armor-result{margin:var(--space-4) 0 0;padding-top:var(--space-4);border-top:1px solid var(--color-border-decorative)}
.armor-result .armor-total{margin:0;font:700 var(--fs-h3)/var(--lh-h3) var(--font-ui);color:var(--color-text)}
.armor-result .armor-sub{margin:var(--space-1) 0 0;font-size:var(--fs-small);color:var(--color-text-secondary)}
.armor-result .armor-steps{margin:var(--space-2) 0 0;padding-left:var(--space-6);font-size:var(--fs-small);color:var(--color-text-secondary)}
.armor-calc .armor-formula{margin:var(--space-4) 0 0;font-size:var(--fs-small);color:var(--color-text-muted)}
@media (min-width:768px){.armor-slots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.armor-slot select{min-height:44px}}

/* «Коротко» — ответ вверху статьи (класс ставит polish() в gen/pages.py); «Внимание» — стиль danger из prose.css */
.doc blockquote.short{--vc:var(--color-accent)}
.doc blockquote.short::before{display:block;content:"Коротко";font:600 var(--fs-small)/var(--lh-small) var(--font-ui);color:var(--vc);margin-bottom:var(--space-1)}
/* «что даёт» под названием кольца: вторая строка первой колонки, без жирного */
.ring-effect{display:block;max-width:15rem;margin-top:var(--space-1);font-weight:400;font-size:var(--fs-small);line-height:var(--lh-small);white-space:normal;color:var(--color-text-muted)}