/* Шапка Эээкзамена — одна на приложение и Лекторий (index.html, lektoriy/*). Разметку Лекторию переносит
   scripts/build-lektoriy.mjs прямо из index.html, поведение (аккаунт, меню) — header.js. Здесь — единственный источник стилей шапки. */
.nav { --hd-paper: #fbfaf6; --hd-ink: #2b2b29; --hd-ink2: rgba(43,43,41,.7); --hd-line: #e4e2d9; --hd-line2: rgba(43,43,41,.28);
  --hd-mint: #c8e1dd; --hd-mint2: #a5beba; --hd-mint3: #e7f2f0; --hd-teal: #387478; --hd-wine: #a8412f;
  --hd-serif: "Source Serif 4", Georgia, serif; --hd-sans: "Inter Tight", system-ui, sans-serif;
  position: sticky; top: 0; z-index: 40; background: #fbfaf6; /* сплошной цвет: Safari 26 берёт цвет полосы статуса из непрозрачного закреплённого блока сверху */ box-shadow: 0 1px 0 rgba(43,43,41,.06); font-family: var(--hd-sans); }
:where(.nav) a { text-decoration: none; color: inherit; }
:where(.nav) button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
:where(.nav) img { display: block; max-width: 100%; }
.nav-in { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 32px; height: 76px; display: flex; flex-wrap: nowrap; align-items: center; gap: 36px; }
.ribbon { position: absolute; left: 32px; top: 0; width: 42px; height: 80px; background: var(--hd-mint2); display: grid; place-items: start center; padding-top: 26px; flex-shrink: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); transition: height .25s; }
.ribbon:hover { height: 90px; }
.ribbon img { width: 22px; height: 22px; object-fit: contain; }
.logo { margin-left: 60px; flex: none; display: flex; align-items: center; min-height: 44px; line-height: 0; }
.logo img { height: 25px; width: auto; max-width: none; }
.links { display: flex; flex-wrap: nowrap; gap: 4px; font-size: 15px; line-height: 1.35; white-space: nowrap; min-width: 0; }
.links a, .links button { padding: 8px 12px; border-radius: 99px; color: var(--hd-ink2); transition: color .2s, background .2s; }
.links a:hover, .links button:hover { color: var(--hd-ink); background: rgba(43,43,41,.05); }
.links a.cur { color: var(--hd-ink); background: var(--hd-mint3); text-decoration: none !important; }
.nav-r { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.burger { display: none; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(43,43,41,.2); position: relative; }
.burger i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--hd-ink); transition: transform .3s, top .3s; }
.burger i:first-child { top: 18px; } .burger i:last-child { top: 25px; }
.nav.open .burger i:first-child { top: 21.5px; transform: rotate(45deg); } .nav.open .burger i:last-child { top: 21.5px; transform: rotate(-45deg); }
.mnav { display: none; }

/* Аккаунт: фиксированная ширина слота — пока /api/me не ответил, серый круг того же размера, что аватар (ничего не прыгает). */
#accountSlot { flex: none; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: flex-end; }
.sk-me { display: block; width: 44px; height: 44px; border-radius: 50%; background: #ebe9e1; }
.acc-sl { opacity: .45; margin: 0 6px; }
.pf-me { position: relative; }
.pf-me-b { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; padding: 0; flex: none;
  box-shadow: inset 0 0 0 1px var(--hd-line2); transition: box-shadow .2s; }
.pf-me-b:hover, .pf-me-b[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--hd-ink); }
.pf-me-b .acc-av, .pf-me-av { width: 36px !important; height: 36px !important; border-radius: 50%; object-fit: cover; background: var(--hd-mint); font: 500 13px/1 var(--hd-sans) !important; color: var(--hd-teal); display: inline-grid; place-items: center; }
.pf-me-rank { position: absolute; right: -6px; bottom: -4px; width: 22px; height: 22px; object-fit: contain; pointer-events: none; }
.pf-me-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 248px; padding: 6px; border-radius: 12px;
  background: var(--hd-paper); box-shadow: inset 0 0 0 1px var(--hd-line2); display: grid; font: 400 15px/1.2 var(--hd-sans); }
.pf-me-menu[hidden] { display: none; }
.pf-me-h { display: grid; gap: 3px; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--hd-line); }
.pf-me-h b { font: 400 20px/1.1 var(--hd-serif); letter-spacing: -.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.pf-me-h small { font-size: 12px; color: var(--hd-ink2); }
.pf-me-menu button, .pf-me-menu a { text-align: left; padding: 10px 12px; border-radius: 8px; color: var(--hd-ink); }
.pf-me-menu button:hover, .pf-me-menu button:focus-visible, .pf-me-menu a:hover { background: var(--hd-mint3); outline: none; }
.pf-me-out { color: var(--hd-wine) !important; margin-top: 4px; border-top: 1px solid var(--hd-line) !important; border-radius: 0 0 8px 8px !important; }

/* Кнопка экзамена: гостю — «Попробовать бесплатно», вошедшему — «Тянуть билет» (класс html.authed ставит boot.js до отрисовки). */
.cta-u { display: none; }
html.authed .cta-g { display: none; } html.authed .cta-u { display: inline; }
.hd-cta { white-space: nowrap; }
/* Гостю — «Войти» тихой ссылкой рядом с главной кнопкой. */
.hd-login { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 99px; font-size: 15px; font-weight: 500; color: var(--hd-ink); white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(43,43,41,.35); transition: box-shadow .2s, background .2s; }
.hd-login:hover { box-shadow: inset 0 0 0 1px var(--hd-ink); background: rgba(43,43,41,.04); }

@media (max-width: 1180px) {
  .links { display: none; }
  .burger { display: block; }
}
.lk-sub { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--hd-teal); margin-left: 2px; }

/* ===== «Оглавление» — меню на весь экран: бумажный лист проявляется из пикселей, строки всплывают по очереди ===== */
.toc { --hd-paper: #fbfaf6; --hd-ink: #2b2b29; --hd-ink2: rgba(43,43,41,.66); --hd-line: #e4e2d9; --hd-mint: #c8e1dd; --hd-mint2: #a5beba; --hd-mint3: #e7f2f0; --hd-teal: #387478; --hd-wine: #a8412f;
  --hd-serif: "Source Serif 4", Georgia, serif; --hd-sans: "Inter Tight", system-ui, sans-serif;
  position: fixed; inset: 0; z-index: 100; font-family: var(--hd-sans); color: var(--hd-ink); }
.toc[hidden] { display: none; }
.toc a { color: inherit; text-decoration: none; }
.toc button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
.toc-px { position: absolute; inset: 0; pointer-events: none; }
.toc-sheet { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; outline: none; opacity: 0;
  background: var(--hd-paper) radial-gradient(rgba(43,43,41,.09) 1px, transparent 1.2px) 0 0 / 22px 22px; }
.toc.on .toc-sheet { opacity: 1; }
.toc.closing .toc-sheet { opacity: 0; transition: opacity .14s; }
/* верхняя строка — как шапка сайта */
.toc-top { flex: none; position: relative; display: flex; align-items: center; gap: 8px; max-width: 1200px; width: 100%; margin: 0 auto;
  padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); min-height: calc(64px + env(safe-area-inset-top)); }
.toc-logo { display: flex; align-items: center; min-height: 44px; padding-left: 50px; margin-right: auto; min-width: 0; }
.toc-rib { position: absolute; left: max(16px, env(safe-area-inset-left)); top: env(safe-area-inset-top); width: 38px; height: 78px; background: var(--hd-mint2); display: grid; place-items: start center; padding-top: 26px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); }
.toc-rib img { width: 20px; height: 20px; object-fit: contain; }
.toc-word { height: 21px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.toc-me { flex: none; display: flex; align-items: center; min-width: 0; }
.toc .pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 99px; background: var(--hd-ink); color: var(--hd-paper); font-size: 15px; font-weight: 500; white-space: nowrap; }
.toc .pill.ghost, .hd-login { background: transparent; color: var(--hd-ink); box-shadow: inset 0 0 0 1px rgba(43,43,41,.35); }
.toc-chip { display: flex; align-items: center; gap: 8px; max-width: min(210px, 52vw); min-height: 44px; padding: 3px 12px 3px 3px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--hd-line); text-align: left; }
.toc-chip .acc-av, .toc-chip img { flex: none; width: 38px !important; height: 38px !important; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; background: var(--hd-mint); color: var(--hd-teal); font: 500 13px/1 var(--hd-sans) !important; }
.toc-chip span { display: grid; min-width: 0; }
.toc-chip b { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-chip small { font-size: 11.5px; color: var(--hd-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-x { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(43,43,41,.25); background: var(--hd-paper) !important; }
.toc-x i { position: absolute; left: 13px; right: 13px; top: 21.5px; height: 1.5px; background: var(--hd-ink); transform: rotate(45deg); }
.toc-x i + i { transform: rotate(-45deg); }
/* основное */
.toc-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; width: 100%; max-width: 760px; margin: 0 auto; padding: 8px max(20px, env(safe-area-inset-right)) 18px max(20px, env(safe-area-inset-left)); }
.toc-k { display: block; margin: 18px 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--hd-teal); }
.toc-nav a { display: grid; grid-template-columns: 34px minmax(0, 1fr) 56px; gap: 4px 12px; align-items: center; min-height: 84px; padding: 12px 0; border-bottom: 1px solid var(--hd-line); }
.toc-nav a:first-child { border-top: 1px solid var(--hd-line); }
.toc-nav i { align-self: start; padding-top: 8px; font: italic 400 16px/1 var(--hd-serif); color: var(--hd-teal); }
.toc-nav b { display: block; font: 400 clamp(28px, 7.4vw, 32px)/1.08 var(--hd-serif); letter-spacing: -.035em; }
.toc-nav b em { font-style: normal; font-size: .62em; letter-spacing: -.01em; color: var(--hd-ink2); white-space: nowrap; }
.toc-nav small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.35; color: var(--hd-ink2); }
.toc-nav img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--hd-mint); box-shadow: 0 0 0 3px var(--hd-paper), 0 0 0 4px var(--hd-line); }
.toc-nav a.cur b { color: var(--hd-teal); }
.toc-nav a.cur i::after { content: " ·"; }
.toc-nav a.cur img { box-shadow: 0 0 0 3px var(--hd-paper), 0 0 0 5px var(--hd-teal); }
.toc-nav a:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
/* плитки кабинета */
.toc-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.toc-tile { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; min-height: 64px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--hd-line); text-align: left; }
.toc-tile svg { width: 22px; height: 22px; fill: none; stroke: var(--hd-teal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.toc-tile span { display: grid; gap: 2px; min-width: 0; }
.toc-tile b { font-weight: 600; font-size: 14.5px; line-height: 1.2; }
.toc-tile small { font-size: 12px; line-height: 1.25; color: var(--hd-ink2); }
.toc-tile:hover { box-shadow: inset 0 0 0 1px var(--hd-teal); }
.toc-out { display: none; margin: 22px auto 4px; min-height: 44px; padding: 0 14px; color: var(--hd-ink2) !important; text-decoration: underline; text-underline-offset: 4px; font-size: 14.5px !important; }
html.authed .toc-out { display: block; }
/* низ листа — главная кнопка и строка ссылок, не перекрывается «чёлкой» */
.toc-foot { flex: none; display: grid; justify-items: center; gap: 10px; width: 100%; padding: 12px max(20px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: linear-gradient(rgba(251,250,246,0), var(--hd-paper) 22%); }
.toc-foot .cta-wrap { display: grid; width: 100%; max-width: 420px; }
.toc-foot .pill { width: 100%; min-height: 54px; font-size: 16.5px; white-space: normal; text-align: center; line-height: 1.2; padding: 8px 20px; }
.toc-meta { font-size: 12.5px; color: var(--hd-ink2); }
.toc-meta a { display: inline-block; padding: 14px 4px; text-decoration: underline; text-underline-offset: 3px; }
/* движение: строки всплывают по очереди после проявления листа */
.toc-body > *, .toc-nav a, .toc-tile, .toc-foot > * { opacity: 0; transform: translateY(10px); }
.toc.on .toc-body > *, .toc.on .toc-nav a, .toc.on .toc-tile, .toc.on .toc-foot > * { opacity: 1; transform: none; transition: opacity .32s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.toc.on .toc-tile:nth-child(2) { transition-delay: .02s; } .toc.on .toc-tile:nth-child(3) { transition-delay: .04s; } .toc.on .toc-tile:nth-child(4) { transition-delay: .06s; }
.toc.on .toc-tile:nth-child(5) { transition-delay: .08s; } .toc.on .toc-tile:nth-child(6) { transition-delay: .1s; } .toc.on .toc-tile:nth-child(7) { transition-delay: .12s; }
.toc.on .toc-nav a:nth-child(1) { transition-delay: .05s; } .toc.on .toc-nav a:nth-child(2) { transition-delay: .1s; } .toc.on .toc-nav a:nth-child(3) { transition-delay: .15s; } .toc.on .toc-nav a:nth-child(4) { transition-delay: .2s; }
.toc.on .toc-foot > * { transition-delay: .22s; }
@media (prefers-reduced-motion: reduce) {
  .toc-body > *, .toc-nav a, .toc-tile, .toc-foot > * { transform: none; }
  .toc-sheet { transition: opacity .2s; }
  .toc.on .toc-body > *, .toc.on .toc-nav a, .toc.on .toc-tile, .toc.on .toc-foot > * { transition: opacity .2s; transition-delay: 0s !important; }
}
@media (min-width: 900px) { .toc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .toc-body { padding-top: 24px; } }
html.drw-lock, html.drw-lock body { overflow: hidden; }
html.drw-lock body { padding-right: calc(var(--drw-gap, 0px) + env(safe-area-inset-right)); }
/* Фон страницы — бумага (в том числе «резинка» при прокрутке на iPhone). */
html { background: #fbfaf6; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

@media (max-width: 640px) {
  .nav-in { padding: 0 16px; gap: 8px; height: 64px; }
  .nav-r { gap: 4px; }
  .ribbon { left: 16px; width: 38px; height: 78px; padding-top: 26px; }
  .logo { margin-left: 50px; min-width: 0; flex: 0 1 auto; }
  .logo img { height: 21px; max-width: 100%; object-fit: contain; object-position: left center; }
  .hd-login { padding: 0 14px; }
  /* Аккаунт на телефоне — шторка снизу. */
  .pf-me-menu { position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 90; min-width: 0; max-height: 86vh; overflow-y: auto; padding: 22px 12px calc(14px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0;
    box-shadow: 0 0 0 100vmax rgba(30,32,30,.42); animation: hdSheet .28s cubic-bezier(.2,.8,.2,1); }
  .pf-me-menu::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(43,43,41,.2); }
  .pf-me-menu button, .pf-me-menu a { min-height: 48px; display: flex; align-items: center; font-size: 17px; }
  .pf-me-h b { max-width: none; font-size: 24px; }
}
@keyframes hdSheet { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pf-me-menu { animation: none; } }

/* До 900px главная кнопка не помещается в шапку рядом с логотипом и меню — она переезжает в липкую кнопку внизу. */
@media (max-width: 900px) { .nav-r > .hd-cta { display: none !important; } }
/* Липкая кнопка экзамена внизу экрана на телефоне и планшете (на страницах, где её показывает скрипт). */
.m-cta { display: none; }
@media (max-width: 900px) {
  .m-cta:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: grid; justify-items: center; padding: 0 max(16px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); pointer-events: none; font-family: "Inter Tight", system-ui, sans-serif; }
  .m-cta .pill { pointer-events: auto; width: 100%; max-width: 420px; height: auto; min-height: 52px; padding: 8px 20px; white-space: normal; text-align: center; line-height: 1.2; font-size: 16px; box-shadow: 0 6px 18px -8px rgba(30,32,30,.45), 0 1px 2px rgba(30,32,30,.12); }
  body.has-mcta { padding-bottom: 96px; }
  html.authed body.has-mcta { padding-bottom: 80px; }
}

/* Скелет первой отрисовки для прямых ссылок на экраны приложения */
.boot-skel { display: none; }
html.boot-route #home { display: none !important; }
html.boot-route .boot-skel { display: grid; gap: 14px; max-width: 1040px; margin: 0 auto; padding: 40px 32px 120px; }
.boot-skel .sk-block { height: 520px; margin-top: 16px; }
@media (max-width: 640px) { html.boot-route .boot-skel { padding: 24px 16px 80px; } }
/* Подвал всегда ниже первого экрана: пока экран догружается (кабинет, доска, дуэль, страница студента),
   рост содержимого не двигает видимую часть страницы (CLS). */
main.wrap { display: flow-root; } main.wrap:has(> .screen.on, > [data-skel]) { min-height: calc(100vh - 76px); } /* flow-root: отступы экранов не «проваливаются» сквозь main */
@media (max-width: 640px) { main.wrap:has(> .screen.on, > [data-skel]) { min-height: calc(100vh - 64px); } }

/* Пункты аккаунта в выпадающем меню и шторке: название + пояснение второй строкой. */
.pf-me-menu .mi { display: grid !important; align-content: center; gap: 1px; }
.pf-me-menu .mi b { font-weight: 400; font-size: inherit; }
/* Вошедшему на узком экране: рядом с плашкой аватара словесный логотип не помещается — остаётся закладка. */
@media (max-width: 480px) { .toc-top:has(.toc-chip) .toc-word { display: none; } .toc-top:has(.toc-chip) .toc-logo { min-width: 44px; } .toc-chip { max-width: none; flex: 1; } .toc-me:has(.toc-chip) { flex: 1; } }
.toc-tile { white-space: normal; overflow-wrap: break-word; align-content: start; }
html, body { background-color: #fbfaf6; }

/* Фокус: кольцо — только с клавиатуры (:focus-visible); нажатие пальцем или мышью рамку не рисует.
   iOS: без серо-синей вспышки при касании. Файл подключён везде (приложение, Лекторий, документы). */
html { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }
dialog:focus, [tabindex="-1"]:focus { outline: none; }
:where(a, button, summary, [role="button"], [tabindex]):focus-visible { outline: 2px solid #387478; outline-offset: 2px; }

/* «Оглавление» (06.10): пояснения под пунктами кабинета — тихие, как статус под именем. */
.toc-tile b { font-weight: 600; }
.toc-tile small, .mi small { font: 400 12px/1.3 var(--hd-sans, "Inter Tight", system-ui, sans-serif); color: rgba(43,43,41,.5); }
/* Попытки и пропуск — строка-ссылка под шапкой меню и в выпадающем списке аккаунта. */
/* Гостю — тихая подпись рядом с «Попробовать бесплатно» (не внутри кнопки). */
.hd-note { display: none; font-size: 12px; line-height: 1.25; color: rgba(43,43,41,.55); text-align: right; max-width: 130px; }
@media (min-width: 1280px) { html:not(.authed) .hd-note { display: block; } }
.cta-note { font-size: 13px; color: rgba(43,43,41,.55); text-align: center; }
html.authed .cta-note.g, html:not(.authed) .cta-note.u { display: none; }

/* ===== Карточка доступа (06.10): счётчик попыток или срок пропуска + кнопка; меню, список аккаунта, учебная часть ===== */
.acard { --ac-teal: #387478; --ac-ink: #2b2b29; --ac-ink2: rgba(43,43,41,.62); --ac-line: #e4e2d9;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 14px 14px 14px 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--ac-line); font-family: "Inter Tight", system-ui, sans-serif; color: var(--ac-ink); text-align: left; }
.acard-l { display: grid; gap: 6px; flex: 1 1 150px; min-width: 0; }
.acard-h { font: 600 16px/1.2 "Inter Tight", system-ui, sans-serif; }
.acard small { font-size: 13px; line-height: 1.3; color: var(--ac-ink2); }
.acard-n { font-size: 15px; line-height: 1.25; color: var(--ac-ink2); }
.acard-n b { font: 400 28px/1 "Source Serif 4", Georgia, serif; letter-spacing: -.03em; color: var(--ac-ink); margin-right: 2px; vertical-align: -2px; }
.acard-tix { display: flex; gap: 6px; }
.acard-tix i { display: block; width: 28px; height: 20px; color: var(--ac-teal); }
.acard-tix svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.acard-tix i.on svg { fill: #c8e1dd; }
.acard-tix i:not(.on) { opacity: .4; }
.acard-bar { display: block; height: 6px; border-radius: 99px; background: #ebe9e1; overflow: hidden; max-width: 220px; }
.acard-bar i { display: block; height: 100%; border-radius: inherit; background: var(--ac-teal); }
.acard .acard-go { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; height: auto; padding: 0 18px; border-radius: 99px; background: var(--ac-ink); color: #fbfaf6; font: 500 15px/1.15 "Inter Tight", system-ui, sans-serif; white-space: nowrap; text-decoration: none; text-align: center; }
.acard .acard-go.ghost { background: transparent; color: var(--ac-ink); box-shadow: inset 0 0 0 1px rgba(43,43,41,.3); }
.acard-empty { background: #fbf0e3; box-shadow: inset 0 0 0 1px #efd3b4; }
.acard-empty .acard-h { color: #9a4a1c; }
.acard-toc { margin: 4px 0 6px; }
.acard-menu { margin: 10px 0 2px; padding: 12px; gap: 10px; }
.acard-menu .acard-go { min-height: 40px; padding: 0 14px; font-size: 14px; }
.pf-me-menu .acard { display: flex !important; white-space: normal; }
.pf-me-menu .acard-go { display: inline-flex !important; color: #fbfaf6 !important; }
.pf-me-menu .acard-go.ghost { color: var(--ac-ink) !important; }
@media (max-width: 390px) { .acard .acard-go { flex: 1 1 100%; } }
.pf-me-menu .acard .acard-go { background: #2b2b29 !important; color: #fbfaf6 !important; border-radius: 99px !important; padding: 0 14px !important; justify-content: center; text-align: center; flex: 1 1 100%; }
.pf-me-menu .acard .acard-go.ghost { background: transparent !important; color: #2b2b29 !important; box-shadow: inset 0 0 0 1px rgba(43,43,41,.3) !important; }
.pf-me-menu .acard .acard-go:hover { background: #387478 !important; }
.pf-me-menu .acard .acard-go.ghost:hover { background: #e7f2f0 !important; }

/* body::after-полоса убрана: псевдоэлемент body Safari 26 считает самим body и не доходит до шапки. */
html, body { background: #fbfaf6; }
/* Safari 26 красит строку состояния, только если верхний край закреплённой шапки ОДНОГО цвета (проверяет точки вдоль края).
   Мятная закладка у края давала два цвета → Safari включал размытие с контентом под часами. Бумажная кромка поверх закладки. */
.nav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: #fbfaf6; z-index: 3; }
.ribbon { top: 6px; } /* Safari пробует цвет в 4 px от верха — там должна быть сама шапка, а не закладка */
/* Открытое «Оглавление»: верх листа — сплошная бумага на всю ширину (без точечной сетки). */
.toc-top { background: #fbfaf6; box-shadow: 0 0 0 100vmax #fbfaf6; clip-path: inset(0 -100vmax); }