/* Блог Product Hub — дополнения к ds/blog.css: навигация поста, таблица техник, попапы, форма заявки.
   Только переменные из ds/tokens.css, поэтому тёмная тема работает сама. */

/* ===== Навигация в начале поста ===== */
.ph-nav-panel { padding: 20px; max-width: var(--measure); }
.ph-nav-panel ol { display: flex; flex-direction: column; }
.ph-nav-panel .ph-contents__item { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: baseline; gap: 8px; min-height: var(--tap); padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); transition: color var(--motion-fast) var(--ease-standard); }
.ph-nav-panel li:last-child .ph-contents__item { border-bottom: 0; padding-bottom: 0; }
.ph-nav-panel .ph-contents__item:hover { color: var(--ink); }
.ph-nav-panel .ph-contents__num { font-size: 13px; }
.ph-contents__sub { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
@media (min-width: 900px) { .ph-nav-panel { padding: 24px; } }

/* Оглавление длиннее экрана: прокручивается само, а не уходит за край */
@media (min-width: 1100px) {
  .ph-post__rail { max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
}

/* ===== Принцип: свойство / принцип / следствия ===== */
.ph-facts--principle { max-width: var(--measure); }
.ph-facts--principle .ph-facts__row { grid-template-columns: 96px minmax(0, 1fr); }
.ph-facts--principle dd { font-size: 16px; line-height: 1.55; }
@media (min-width: 640px) { .ph-facts--principle .ph-facts__row { grid-template-columns: 140px minmax(0, 1fr); gap: 20px; } .ph-facts--principle dd { font-size: 17px; } }

/* ===== Таблица «техники × принципы» ===== */
.ph-matrix__hint { font-size: 13px; color: var(--ink-3); }
@media (min-width: 900px) { .ph-matrix__hint { display: none; } }
/* Шапка закреплена при прокрутке. Если таблица шире колонки текста — она листается внутри своей рамки (вбок и вниз), шапка липнет к верху рамки.
   Если помещается — overflow: clip вместо auto: рамка не становится контейнером прокрутки, и шапка липнет к странице под верхней панелью. */
.ph-matrix-host { container: matrix / inline-size; --matrix-col: 44px; --matrix-first: 168px; --matrix-top: 56px; }
@media (min-width: 900px) { .ph-matrix-host { --matrix-first: 270px; --matrix-top: 64px; } }
.ph-matrix { overflow: auto; overscroll-behavior-x: contain; max-height: calc(100svh - var(--matrix-top) - 32px); margin-inline: calc(-1 * var(--gutter)); border-block: 1px solid var(--line); background: var(--surface); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
@media (min-width: 640px) { .ph-matrix { margin-inline: 0; border: 1px solid var(--line); border-radius: var(--radius); } }
.ph-matrix table { border-collapse: separate; border-spacing: 0; width: 100%; }
.ph-matrix th, .ph-matrix td { padding: 0; border-bottom: 1px solid var(--line); background: var(--surface); }
.ph-matrix tbody tr:last-child > * { border-bottom: 0; }
.ph-matrix thead > tr > * { position: sticky; top: 0; z-index: 2; }
@container matrix (min-width: 608px) { .ph-matrix { overflow: clip; max-height: none; } .ph-matrix thead > tr > * { top: var(--matrix-top); } }
@media (min-width: 900px) { @container matrix (max-width: 709.98px) { .ph-matrix { overflow: auto; max-height: calc(100svh - var(--matrix-top) - 32px); } .ph-matrix thead > tr > * { top: 0; } } }
/* Первая колонка закреплена при прокрутке вбок */
.ph-matrix th[scope="row"], .ph-matrix__corner { position: sticky; left: 0; z-index: 1; width: var(--matrix-first); min-width: var(--matrix-first); text-align: left; border-right: 1px solid var(--line); }
.ph-matrix thead > tr > .ph-matrix__corner { z-index: 3; }
.ph-matrix thead th:hover, .ph-matrix thead th:focus-within { z-index: 4; }

/* В шапке только номера принципов, название — во всплывающей подсказке */
.ph-matrix thead a { position: relative; display: flex; justify-content: center; padding: 14px 0 12px; color: var(--accent-deep); }
.ph-matrix__pnum { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ph-matrix thead a:hover .ph-matrix__pnum { color: var(--ink); }
.ph-matrix__tip { position: absolute; top: calc(100% - 2px); left: 50%; z-index: 1; translate: -50% 4px; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: var(--surface); box-shadow: var(--shadow-float); font-size: 13px; line-height: 1.3; font-weight: 500; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--motion-fast) var(--ease-standard), translate var(--motion-fast) var(--ease-standard), visibility 0s linear var(--motion-fast); }
/* Крайние колонки: подсказка прижата к краю, чтобы не уходить под первую колонку и за рамку */
.ph-matrix thead th:nth-child(-n+3) .ph-matrix__tip { left: 0; translate: 0 4px; }
.ph-matrix thead th:nth-last-child(-n+3) .ph-matrix__tip { left: auto; right: 0; translate: 0 4px; }
.ph-matrix thead a:focus-visible .ph-matrix__tip { opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 0s; }
@media (hover: hover) { .ph-matrix thead a:hover .ph-matrix__tip { opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 0s; } }
.ph-matrix thead th:nth-child(-n+3) a:focus-visible .ph-matrix__tip, .ph-matrix thead th:nth-last-child(-n+3) a:focus-visible .ph-matrix__tip { translate: 0; }
@media (hover: hover) { .ph-matrix thead th:nth-child(-n+3) a:hover .ph-matrix__tip, .ph-matrix thead th:nth-last-child(-n+3) a:hover .ph-matrix__tip { translate: 0; } }

.ph-matrix__group th { padding: 14px 14px 6px; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); text-align: left; background: var(--subtle); }
.ph-matrix__group th span { position: sticky; left: 14px; }

.ph-matrix__tech { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: baseline; gap: 6px; width: 100%; min-height: var(--tap); padding: 8px 12px 8px 14px; border: 0; background: none; text-align: left; font-size: 14px; line-height: 1.3; font-weight: 500; color: var(--ink); cursor: pointer; transition: color var(--motion-fast) var(--ease-standard); }
.ph-matrix__tech:hover { color: var(--accent-deep); }
.ph-matrix__tnum { font-size: 12px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .ph-matrix__tech { font-size: 15px; } }

.ph-matrix td, .ph-matrix thead th { min-width: var(--matrix-col); text-align: center; }
.ph-matrix tbody tr:not(.ph-matrix__group):hover > * { background: var(--subtle); }
.ph-matrix__cell { display: block; width: 100%; height: var(--tap); padding: 6px; border: 0; background: none; cursor: pointer; }
.ph-matrix__cell::before { content: ""; display: block; width: 100%; height: 100%; max-width: 40px; margin: 0 auto; border-radius: 8px; background: var(--accent); transition: background-color var(--motion-fast) var(--ease-standard), scale var(--motion-press) ease; }
.ph-matrix__cell:hover::before { background: var(--accent-deep); }
.ph-matrix__cell:active::before { scale: 0.92; }

/* ===== Попап (техника и форма заявки) ===== */
.ph-modal { width: 100%; max-width: 640px; max-height: 92vh; margin: auto auto 0; padding: 0; border: 0; border-radius: 20px 20px 0 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-float); overflow: hidden; }
.ph-modal[open] { display: flex; flex-direction: column; animation: ph-sheet-up var(--motion-base) var(--ease-out); }
.ph-modal::backdrop { background: rgba(11, 11, 12, 0.45); }
@media (min-width: 640px) { .ph-modal { margin: auto; max-height: 86vh; border-radius: var(--radius); } }
.ph-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 4px 20px; }
@media (min-width: 640px) { .ph-modal__head { padding: 14px 14px 4px 28px; } }
.ph-modal__close { width: var(--tap); height: var(--tap); padding: 0; display: grid; place-items: center; border: 0; background: none; color: var(--ink-2); cursor: pointer; border-radius: var(--radius-pill); }
.ph-modal__close:hover { color: var(--ink); background: var(--subtle); }
.ph-modal__close svg { width: 22px; height: 22px; }
.ph-modal__body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px calc(24px + env(safe-area-inset-bottom)); }
@media (min-width: 640px) { .ph-modal__body { padding: 4px 28px 28px; } }
.ph-modal__title { font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.ph-modal__lead { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
html:has(dialog[open]) { overflow: hidden; }

/* ===== Список «Описание техник»: все техники видимым текстом, каждая раскрывается ===== */
.ph-techlist__group { max-width: var(--measure); }
.ph-techlist__items { max-width: var(--measure); border-top: 1px solid var(--line); }
.ph-techlist__item { border-bottom: 1px solid var(--line); scroll-margin-top: 72px; }
.ph-techlist__item > summary { display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; align-items: center; gap: 8px; min-height: var(--tap); padding: 10px 0; list-style: none; cursor: pointer; font-size: 16px; line-height: 1.35; font-weight: 500; color: var(--ink); transition: color var(--motion-fast) var(--ease-standard); }
.ph-techlist__item > summary::-webkit-details-marker { display: none; }
.ph-techlist__item > summary:hover { color: var(--accent-deep); }
.ph-techlist__item > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.ph-techlist__num { font-size: 13px; font-weight: 600; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.ph-techlist__chevron { width: 20px; height: 20px; color: var(--muted); transition: transform var(--motion-base) var(--ease-standard); }
.ph-techlist__item[open] .ph-techlist__chevron { transform: rotate(180deg); }
.ph-techlist__body { padding: 4px 0 28px; }
.ph-techlist__body .ph-tech__title { font-size: 20px; }
@media (min-width: 640px) { .ph-techlist__item > summary { font-size: 17px; } .ph-techlist__body .ph-tech__title { font-size: 22px; } }

/* ===== Техника: в списке и в попапе ===== */
.ph-tech { display: flex; flex-direction: column; gap: 16px; }
.ph-tech__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.ph-tech__num { font-weight: 600; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.ph-tech__title { margin-top: -8px; font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
@media (min-width: 640px) { .ph-tech__title { font-size: 24px; } }
.ph-tech__label { display: block; margin-bottom: 4px; font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.ph-tech p { font-size: 16px; line-height: 1.55; color: var(--ink-2); hyphens: auto; }
.ph-tech p strong { color: var(--ink); font-weight: 600; }
.ph-tech__principles { padding-top: 16px; border-top: 1px solid var(--line); }

.ph-prompt { padding: 16px; border-radius: var(--radius-sm); background: var(--accent-soft); }
.ph-prompt__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ph-prompt__top .ph-tech__label { margin: 0; color: var(--accent-deep); }
.ph-prompt pre { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.55; font-weight: 500; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.ph-copy { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--accent-tint); border-radius: var(--radius-pill); background: var(--surface); color: var(--accent-deep); font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color var(--motion-fast) var(--ease-standard), scale var(--motion-press) ease; }
.ph-copy:hover { border-color: var(--accent); }
.ph-copy:active { scale: 0.98; }
.ph-copy svg { width: 15px; height: 15px; }
.ph-copy[hidden] { display: none; }
.ph-copy__status { display: block; font-size: 13px; color: var(--accent-deep); }
.ph-copy__status:empty { display: none; }
@media (min-width: 640px) { .ph-prompt { padding: 18px 20px; } .ph-prompt pre { font-size: 16px; } }

.ph-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink-2); font-size: 14px; font-weight: 500; transition: border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.ph-chips a span { font-size: 12px; font-weight: 600; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.ph-chips a:hover { color: var(--ink); border-color: var(--line-strong); }

/* ===== Форма заявки ===== */
.ph-form { display: flex; flex-direction: column; gap: 16px; }
.ph-form .ph-modal__lead { margin-top: -8px; }
.ph-field { display: flex; flex-direction: column; gap: 6px; }
.ph-field__label { padding: 0; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.ph-input { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
.ph-input::placeholder { color: var(--ink-3); }
.ph-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ph-input[aria-invalid="true"] { border-color: var(--accent-deep); }
.ph-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.ph-choices legend { margin-bottom: 8px; }
.ph-choices__list { display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.ph-choice { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.35; color: var(--ink-2); cursor: pointer; transition: background-color var(--motion-fast) var(--ease-standard); }
.ph-choice:last-child { border-bottom: 0; }
.ph-choice:hover { background: var(--subtle); }
.ph-choice input { flex-shrink: 0; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.ph-choice:has(input:checked) { background: var(--accent-soft); color: var(--ink); font-weight: 500; }
.ph-choices[aria-invalid="true"] .ph-choices__list { border-color: var(--accent-deep); }
.ph-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ph-form__error { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--ink); font-size: 14px; line-height: 1.45; }
.ph-form__submit { margin-top: 4px; }
.ph-form__submit[disabled] { opacity: 0.6; cursor: progress; }
.ph-form__note { font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.ph-form__done { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 8px 0 4px; }
.ph-form__done .ph-modal__lead { margin-top: -8px; }
.ph-form[hidden], .ph-form__done[hidden], .ph-form__error[hidden] { display: none; }

/* ===== Лента логотипов клиентов во вступлении ===== */
/* Размеры как на producthub.ru: ячейка 160px с полями 24px (150px и 10px на узком экране), разделитель 1×32px, круг за 24 с.
   Края гаснут маской, а не белой накладкой, поэтому лента работает на любом фоне. */
.ph-logos { --logos-fade: 40px; margin-top: 12px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black var(--logos-fade), black calc(100% - var(--logos-fade)), transparent);
          mask-image: linear-gradient(90deg, transparent, black var(--logos-fade), black calc(100% - var(--logos-fade)), transparent); }
.ph-logos__track { display: flex; width: max-content; animation: ph-logos 24s linear infinite; }
.ph-logos__set { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; }
.ph-logos__item { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 150px; padding: 10px; }
.ph-logos__item::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 32px; translate: 0 -50%; background: var(--line); }
.ph-logos__item img { display: block; width: 100%; height: auto; }
@keyframes ph-logos { to { transform: translateX(-50%); } }
@media (hover: hover) { .ph-logos:hover .ph-logos__track { animation-play-state: paused; } }
@media (min-width: 480px) { .ph-logos__item { width: 160px; padding: 24px; } }
@media (min-width: 900px) { .ph-logos { --logos-fade: 160px; margin-top: 20px; } }
/* В тёмной теме цветные логотипы с чёрным текстом пропадают: делаем их светлыми монохромными */
:root[data-theme="dark"] .ph-logos__item img { filter: grayscale(1) invert(1); opacity: 0.8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ph-logos__item img { filter: grayscale(1) invert(1); opacity: 0.8; } }
/* «Уменьшить движение»: лента стоит, её можно пролистать пальцем */
@media (prefers-reduced-motion: reduce) {
  .ph-logos { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .ph-logos__track { animation: none; }
  .ph-logos__set[aria-hidden] { display: none; }
}

@media print {
  .ph-logos { display: none !important; }
  .ph-modal, .ph-matrix__hint { display: none !important; }
  .ph-techlist__chevron { display: none; }
  .ph-matrix { overflow: visible; }
}

/* ===== Вкладки ленты: тип «Заметки» ===== */
.ph-badge--note { background: var(--subtle); color: var(--ink-2); border: 1px solid var(--line); }
/* На телефоне вкладки не переносятся на вторую строку, а листаются вбок (и в ленте, и в компактной шапке) */
@media (max-width: 899px) {
  .ph-tabs { flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .ph-tabs::-webkit-scrollbar { display: none; }
  .ph-tab { flex: none; white-space: nowrap; }
}

/* ===== Заметка о книге: обложка, тезисы списком, шаги ===== */
/* Обложка стоит на мягкой подложке, как книга на столе: тень снизу, блик и тень корешка у левого края.
   Тени и блик — свет на самой книге, от темы не зависят, поэтому заданы rgba, а не токенами. */
.ph-book { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; margin: 0; padding: 32px 20px 20px; border-radius: var(--radius); background: var(--subtle); }
.ph-book__cover { position: relative; display: block; width: 148px; border-radius: 2px 5px 5px 2px; overflow: hidden; box-shadow: 0 1px 2px rgba(11, 11, 12, 0.18), 0 20px 36px -14px rgba(11, 11, 12, 0.5); transition: translate var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out); }
.ph-book__cover img { display: block; width: 100%; height: auto; }
.ph-book__cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0, rgba(255, 255, 255, 0) 2.5%, rgba(0, 0, 0, 0.28) 3.5%, rgba(0, 0, 0, 0) 8%); }
.ph-book__meta { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.ph-book__title { font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.ph-book__author { font-size: 13px; line-height: 1.4; color: var(--ink-3); }
/* В тёмной теме чёрная обложка сливается с фоном: край обозначает тонкая линия */
:root[data-theme="dark"] .ph-book__cover { box-shadow: 0 0 0 1px var(--line-strong), 0 20px 36px -14px rgba(0, 0, 0, 0.7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ph-book__cover { box-shadow: 0 0 0 1px var(--line-strong), 0 20px 36px -14px rgba(0, 0, 0, 0.7); } }

/* В начале поста: на телефоне книга под заголовком, с 900px — справа от него */
.ph-cover__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ph-cover--aside .ph-book { margin-top: 28px; }
@media (min-width: 900px) {
  .ph-cover--aside { flex-direction: row; align-items: flex-start; gap: 48px; }
  .ph-cover--aside .ph-cover__text { flex: 1 1 0; }
  .ph-cover--aside .ph-book { flex: 0 0 236px; margin-top: 8px; padding: 36px 24px 22px; }
  .ph-cover--aside .ph-book__cover { width: 172px; }
}

/* В плитке ленты: обложка сверху, при наведении книга чуть приподнимается */
.ph-card--book .ph-book { padding: 20px 16px; }
.ph-card--book .ph-book__cover { width: 84px; }
a.ph-card--book:hover .ph-book__cover { translate: 0 -3px; }
/* Иллюстрации в плитках ленты: та же панель, что у обложки книги */
.ph-art { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 170px; padding: 20px 16px; border-radius: var(--radius); background: var(--subtle); }
/* Портреты (гайд /ai-guide): три круглых фото внахлёст */
.ph-people__item { display: block; width: 84px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid var(--surface); box-shadow: var(--shadow-float); transition: translate var(--motion-base) var(--ease-out); }
.ph-people__item + .ph-people__item { margin-left: -16px; }
.ph-people__item:nth-child(2) { position: relative; z-index: 1; width: 100px; }
.ph-people__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
a.ph-card--art:hover .ph-people__item { translate: 0 -3px; }
a.ph-card--art:hover .ph-people__item:nth-child(2) { translate: 0 -5px; }
/* Миниатюра таблицы «техники × принципы» (пост /llm-principles): листок с сеткой */
.ph-mart { display: block; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-float); transition: translate var(--motion-base) var(--ease-out); }
.ph-mart svg { display: block; width: 145px; height: auto; }
.ph-mart__on { fill: var(--accent); }
.ph-mart__off { fill: var(--line); }
.ph-mart__label { fill: var(--line-strong); }
.ph-mart__head { fill: var(--ink-3); opacity: 0.45; }
a.ph-card--art:hover .ph-mart { translate: 0 -3px; }
@media (prefers-reduced-motion: reduce) { .ph-people__item, .ph-mart { transition: none; } a.ph-card--art:hover .ph-people__item, a.ph-card--art:hover .ph-mart { translate: none; } }

/* На десктопе иллюстрация под текстом и прижата к низу: бейджи, заголовки и панели стоят на одной линии с соседними плитками */
@media (min-width: 900px) {
  .ph-card--book .ph-book, .ph-card--art .ph-art { order: 1; margin-top: auto; }
  .ph-card--book .ph-card__foot, .ph-card--art .ph-card__foot { order: 2; margin-top: 0; }
}

/* Тезисы: маркированный список с синей точкой */
.ph-ulist { max-width: var(--measure); display: grid; gap: 12px; font-size: 16px; line-height: 1.6; color: var(--ink-2); hyphens: auto; }
.ph-ulist > li { position: relative; padding-left: 22px; }
.ph-ulist > li::before { content: ""; position: absolute; left: 2px; top: calc(0.8em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ph-ulist strong { color: var(--ink); font-weight: 600; }
@media (min-width: 640px) { .ph-ulist { font-size: 17px; gap: 14px; } }

/* Шаги «Что делать»: номер, название шага и пояснение, между шагами линия */
.ph-steps { gap: 0; border-top: 1px solid var(--line); }
.ph-steps > li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.ph-steps > li::before { padding-top: 3px; font-weight: 600; color: var(--accent-deep); }
.ph-steps__title { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 600; }
@media (min-width: 640px) { .ph-steps > li { padding: 20px 0; } }

@media (prefers-reduced-motion: reduce) { .ph-book__cover { transition: none; } a.ph-card--book:hover .ph-book__cover { translate: none; } }
@media print { .ph-card--book .ph-book, .ph-related { display: none !important; } .ph-book__cover { box-shadow: none; } }
/* Латиница внутри русского текста не переносится по русским правилам («Stolen Fo-cus») */
.ph-latin { hyphens: manual; }

/* ===== Тип «Книги» ===== */
/* Мягкий синий бейдж — свободный стиль бывших «Методичек» (ph-badge--guide), отличается от серой «Заметки» */
.ph-badge--book { background: var(--accent-soft); color: var(--accent-deep); }

/* ===== Гайд (/ai-guide): подразделы, код в тексте, примеры файлов, таблица, источники ===== */
.ph-guide__sub { margin-top: 24px; scroll-margin-top: 72px; }
.ph-guide__num { margin-right: 4px; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
@media (min-width: 640px) { .ph-guide__sub { margin-top: 36px; } }
.ph-guide code { padding: 1px 5px; border-radius: 4px; background: var(--subtle); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; overflow-wrap: anywhere; hyphens: none; }
.ph-prompt--code pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; font-weight: 400; }
@media (min-width: 640px) { .ph-prompt--code pre { font-size: 14px; } }
.ph-sources { max-width: var(--measure); font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.ph-sources a { color: var(--ink-2); box-shadow: inset 0 -1px 0 var(--line-strong); transition: color var(--motion-fast) var(--ease-standard); }
.ph-sources a:hover { color: var(--ink); }
.ph-table { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ph-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.ph-table th, .ph-table td { padding: 12px 10px; hyphens: auto; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--ink-2); }
.ph-table thead th { background: var(--subtle); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.ph-table tbody th { font-weight: 600; color: var(--ink); }
.ph-table tbody tr:last-child > * { border-bottom: 0; }

/* ===== Знаки вокруг заголовка поста (гайд /ai-guide) =====
   Телефон: полоса над бейджем. С 900 px: справа от заголовка и над ним. Плашки слегка покачиваются. */
.ph-cover--logos { position: relative; padding-top: 104px; }
.ph-floaters { position: absolute; inset: 0; pointer-events: none; }
.ph-floater {
  --s: 44px; --r: 0deg; --d: 0s;
  position: absolute; display: grid; place-items: center;
  width: var(--s); height: var(--s); padding: calc(var(--s) * 0.18);
  border: 1px solid var(--line); border-radius: calc(var(--s) * 0.28);
  background: var(--surface); box-shadow: var(--shadow-float);
  rotate: var(--r); animation: ph-float 7s var(--ease-standard) var(--d) infinite;
}
.ph-floater img { width: 100%; height: 100%; object-fit: contain; }
.ph-floater--mcp { padding: calc(var(--s) * 0.12); }
@keyframes ph-float { 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .ph-floater { animation: none; } }
/* Чёрный знак OpenAI в тёмной теме — светлый */
:root[data-theme="dark"] .ph-floater--openai img { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ph-floater--openai img { filter: invert(1); } }

.ph-floater--1 { --s: 48px; --r: -10deg; left: 0; top: 18px; }
.ph-floater--2 { --s: 40px; --r: 8deg; --d: -2s; left: 30%; top: 44px; }
.ph-floater--3 { --s: 44px; --r: -6deg; --d: -4s; left: 56%; top: 14px; }
.ph-floater--4 { --s: 40px; --r: 12deg; --d: -5s; left: calc(100% - 52px); top: 42px; }

@media (min-width: 900px) {
  /* Справа полоса под знаки: текст обложки её не заходит */
  .ph-cover--logos { padding-top: 72px; }
  .ph-cover--logos .ph-cover__title, .ph-cover--logos .ph-cover__lead { max-width: min(var(--measure), calc(100% - 184px)); }
  .ph-floater--1 { --s: 76px; left: auto; right: 4px; top: 44px; --r: 10deg; }
  .ph-floater--2 { --s: 54px; left: auto; right: 112px; top: 8px; --r: -8deg; }
  .ph-floater--3 { --s: 58px; left: auto; right: 100px; top: 176px; --r: -6deg; }
  .ph-floater--4 { --s: 52px; left: auto; right: 10px; top: 262px; --r: 12deg; }
}

/* ===== Перевод книги: обзор /<slug> и страницы глав и разделов /<slug>/<адрес> ===== */
/* Иллюстрации в двух вариантах: виден вариант текущей темы. Скрытый с loading=lazy браузер не загружает. */
.ph-img-dark { display: none !important; }
:root[data-theme="dark"] .ph-img-light { display: none !important; }
:root[data-theme="dark"] .ph-img-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .ph-img-light { display: none !important; }
  :root:not([data-theme]) .ph-img-dark { display: block !important; }
}
.ph-bfig { margin: 8px 0; }
.ph-bfig img { display: block; width: 100%; max-width: var(--fig-w, 100%); height: auto; margin-inline: auto; }
.ph-bfig__caption { max-width: var(--measure); margin: 12px auto 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); text-align: center; hyphens: auto; }
.ph-bfig--hero { margin-top: 24px; padding: 28px 20px; border-radius: var(--radius); background: var(--subtle); }
@media (min-width: 900px) { .ph-bfig--hero { padding: 40px 48px; } }

.ph-bquote { max-width: var(--measure); padding: 2px 0 2px 18px; border-left: 3px solid var(--accent-tint); }
.ph-bquote p { font-size: 16px; line-height: 1.6; color: var(--ink); hyphens: auto; }
.ph-bquote p + p { margin-top: 10px; }
.ph-bnote { margin-top: 0; }
.ph-bnote p { font-weight: 400; }
.ph-bnote p + p { margin-top: 10px; }
.ph-bnote strong { font-weight: 600; }
.ph-bbody a:not(.ph-btn), .ph-bnote a { color: var(--accent-deep); box-shadow: inset 0 -1px 0 var(--accent-tint); }
.ph-bbody .ph-olist strong { color: var(--ink); font-weight: 600; }
@media (min-width: 640px) { .ph-bquote { padding-left: 22px; } .ph-bquote p { font-size: 17px; } }

/* Шапка страницы раздела: компактнее обложки поста */
.ph-cover--page { padding: 12px 0 24px; }
.ph-cover--page .ph-cover__eyebrow { line-height: 1.5; }
.ph-cover--page .ph-cover__eyebrow a { color: var(--accent-deep); }
.ph-cover--page .ph-cover__title { margin-top: 12px; max-width: 26ch; font-size: clamp(28px, 3.6vw, 40px); }
.ph-cover--page .ph-cover__date { margin-top: 14px; }
@media (min-width: 900px) { .ph-cover--page { padding: 48px 0 32px; } }
.ph-bchapter-toc { margin-top: 12px; }
.ph-bstart { align-self: flex-start; margin-top: 8px; }

/* Дерево оглавления: боковая панель (с 1100 px) и шторка «Оглавление» */
.ph-post__rail--book { gap: 20px; max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 8px; }
.ph-btoc { display: flex; flex-direction: column; font-size: 14px; line-height: 1.4; }
.ph-btoc__home { padding: 6px 0; font-weight: 600; color: var(--ink); }
.ph-btoc__home:hover { color: var(--accent-deep); }
.ph-btoc__home[aria-current="page"] { color: var(--accent-deep); }
.ph-btoc__part { margin-top: 16px; padding: 4px 0; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.ph-btoc__chapter > summary { display: grid; grid-template-columns: 18px minmax(0, 1fr) 16px; gap: 6px; align-items: baseline; padding: 7px 0; color: var(--ink-2); cursor: pointer; list-style: none; transition: color var(--motion-fast) var(--ease-standard); }
.ph-btoc__chapter > summary::-webkit-details-marker { display: none; }
.ph-btoc__chapter > summary:hover, .ph-btoc__chapter[open] > summary { color: var(--ink); }
.ph-btoc__chapter[open] > summary { font-weight: 600; }
.ph-btoc__num { font-size: 12px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ph-btoc__chevron { width: 16px; height: 16px; align-self: center; color: var(--muted); transition: rotate var(--motion-fast) var(--ease-standard); }
.ph-btoc__chapter[open] .ph-btoc__chevron { rotate: 180deg; }
.ph-btoc__list { margin: 2px 0 8px 6px; border-left: 1px solid var(--line); }
.ph-btoc__link { display: block; margin-left: -1px; padding: 5px 0 5px 16px; border-left: 2px solid transparent; color: var(--ink-3); transition: color var(--motion-fast) var(--ease-standard); }
.ph-btoc__link:hover { color: var(--ink); }
.ph-btoc__link[aria-current="page"] { border-left-color: var(--accent); color: var(--ink); font-weight: 600; }
.ph-sheet--book[open] { display: flex; flex-direction: column; }
.ph-sheet--book .ph-sheet__head { flex-shrink: 0; }
.ph-sheet--book .ph-sheet__body { min-height: 0; overscroll-behavior: contain; }
.ph-sheet--book .ph-btoc { font-size: 15px; }
.ph-sheet--book .ph-btoc__home, .ph-sheet--book .ph-btoc__link { display: flex; align-items: center; min-height: var(--tap); }
.ph-sheet--book .ph-btoc__chapter > summary { min-height: var(--tap); align-items: center; }

/* Листание: назад и далее */
.ph-pager { display: grid; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.ph-pager__link { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color var(--motion-fast) var(--ease-standard); }
.ph-pager__link:hover { border-color: var(--line-strong); }
.ph-pager__link--next { order: -1; }
.ph-pager__dir { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.ph-pager__dir svg { width: 16px; height: 16px; transition: transform var(--motion-fast) var(--ease-standard); }
.ph-pager__link--prev:hover .ph-pager__dir svg { transform: translateX(-2px); }
.ph-pager__link--next:hover .ph-pager__dir svg { transform: translateX(2px); }
.ph-pager__title { font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--ink); text-wrap: balance; }
@media (min-width: 640px) {
  .ph-pager { grid-template-columns: 1fr 1fr; }
  .ph-pager__link--next { order: 0; grid-column: 2; align-items: flex-end; text-align: right; }
}
@media (min-width: 900px) { .ph-pager { margin-top: 72px; } }

/* Оглавление на обзоре книги */
.ph-bpart { display: flex; flex-direction: column; gap: 4px; max-width: var(--measure); scroll-margin-top: 72px; }
.ph-bpart + .ph-bpart { margin-top: 12px; }
.ph-bchapters { display: flex; flex-direction: column; }
.ph-bchapter { padding: 14px 0; border-bottom: 1px solid var(--line); }
.ph-bchapter:last-child { border-bottom: 0; }
.ph-bchapter__link { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--ink); transition: color var(--motion-fast) var(--ease-standard); }
.ph-bchapter__link:hover { color: var(--accent-deep); }
.ph-bchapter__num { font-size: 13px; font-weight: 500; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.ph-bchapter__sections { display: flex; flex-direction: column; margin: 6px 0 0 40px; }
.ph-bchapter__sections a { display: block; padding: 5px 0; font-size: 15px; line-height: 1.4; color: var(--ink-2); transition: color var(--motion-fast) var(--ease-standard); }
.ph-bchapter__sections a:hover { color: var(--ink); }

/* Иллюстрация в плитке ленты */
.ph-bart__img { display: block; width: 100%; max-width: 260px; transition: translate var(--motion-base) var(--ease-out); }
.ph-bart img { display: block; width: 100%; height: auto; }
a.ph-card--art:hover .ph-bart__img { translate: 0 -3px; }

@media (prefers-reduced-motion: reduce) {
  .ph-btoc__chevron, .ph-pager__dir svg, .ph-bart__img { transition: none; }
  a.ph-card--art:hover .ph-bart__img { translate: none; }
}
@media print { .ph-pager, .ph-post__rail--book { display: none !important; } .ph-img-dark { display: none !important; } .ph-img-light { display: block !important; } }

/* ===== Гайд (/ai-guide) с 14.10.2026: главы «Что это / Когда / Зачем / Как / Пример», шаги с вложенным текстом, список источников ===== */
.ph-guide__label { margin-top: 16px; scroll-margin-top: 72px; }
@media (min-width: 640px) { .ph-guide__label { margin-top: 24px; } }
.ph-guide__steps > li > div > * + * { margin-top: 10px; }
.ph-guide__steps p { hyphens: auto; }
.ph-guide__steps strong:not(.ph-steps__title) { color: var(--ink); font-weight: 600; }
.ph-guide__steps .ph-table, .ph-guide__steps .ph-prompt { margin-top: 14px; }
.ph-sources__label { margin-bottom: 6px; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.ph-sources ul { display: grid; gap: 6px; }
.ph-guide .ph-table th code { white-space: nowrap; overflow-wrap: normal; }

/* ===== Опрос на /ai-guide (assets/ai-quiz.js) ===== */
/* Обложка гайда: строка «автор · даты» сразу под названием */
.ph-cover--byline-top .ph-cover__date { margin-top: 12px; }

/* Режимы страницы — класс на <html> ставит скрипт в <head> (quiz_gate в build.py), затем ai-quiz.js.
   Опрос не пройден — главы и навигация по ним скрыты; пройден — только подобранные (is-mine). Без JS классов нет. */
.ph-quiz-gate .ph-guide, .ph-quiz-gate #intro, .ph-quiz-gate #contents,
.ph-quiz-gate .ph-post__rail nav, .ph-quiz-gate .ph-topbar__toc { display: none !important; }
.ph-quiz-personal .ph-guide:not(.is-mine), .ph-quiz-personal #intro,
.ph-quiz-personal #contents li:not(.is-mine), .ph-quiz-personal .ph-post__rail nav li:not(.is-mine),
.ph-quiz-personal .ph-sheet__body li:not(.is-mine) { display: none !important; }

/* Зелёный — только для пройденного опроса. В дизайн-системе зелёного токена нет: оттенок подмешан к токенам поверхности и текста,
   поэтому в тёмной теме он сам становится тёмно-зелёным. */
.ph-quiz {
  --quiz-green: oklch(70% 0.13 155);
  --quiz-done-bg: color-mix(in oklab, var(--quiz-green) 9%, var(--surface));
  --quiz-done-line: color-mix(in oklab, var(--quiz-green) 30%, var(--line));
  --quiz-done-ink: color-mix(in oklab, var(--quiz-green) 70%, var(--ink));
}
.ph-quiz__card { position: relative; max-width: var(--measure); padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: background-color var(--motion-reveal) var(--ease-out), border-color var(--motion-reveal) var(--ease-out); }
@media (min-width: 640px) { .ph-quiz__card { padding: 28px; } }
.ph-quiz [hidden] { display: none !important; }
.ph-quiz__intro, .ph-quiz__stage, .ph-quiz__result { display: flex; flex-direction: column; gap: 16px; }
.ph-quiz__lead { font-size: 17px; line-height: 1.55; font-weight: 500; color: var(--ink); text-wrap: pretty; }
@media (min-width: 640px) { .ph-quiz__lead { font-size: 18px; } }
.ph-quiz__close { position: absolute; top: 8px; right: 8px; width: var(--tap); height: var(--tap); padding: 0; display: grid; place-items: center; border: 0; border-radius: var(--radius-pill); background: none; color: var(--ink-3); cursor: pointer; transition: color var(--motion-fast) var(--ease-standard), background-color var(--motion-fast) var(--ease-standard); }
.ph-quiz__close:hover { color: var(--ink); background: var(--subtle); }
.ph-quiz__close svg { width: 20px; height: 20px; }
.ph-quiz__card:has(.ph-quiz__close:not([hidden])) .ph-quiz__lead,
.ph-quiz__card:has(.ph-quiz__close:not([hidden])) .ph-quiz__top { padding-right: 40px; }
.ph-quiz__note { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--subtle); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.ph-quiz__actions, .ph-quiz__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ph-quiz__nav { justify-content: space-between; padding-top: 4px; }
.ph-quiz__actions .ph-btn:not(.ph-btn--quiet) { flex: 1 1 auto; }
@media (min-width: 640px) { .ph-quiz__actions .ph-btn:not(.ph-btn--quiet) { flex: 0 0 auto; } }
.ph-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ph-btn:disabled:active { scale: 1; }
.ph-quiz__top { display: flex; flex-direction: column; gap: 8px; }
.ph-quiz__step { font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
.ph-quiz__bar { height: 4px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.ph-quiz__bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--motion-base) var(--ease-out); }
.ph-quiz__q { display: flex; flex-direction: column; gap: 12px; }
.ph-quiz__q legend { margin-bottom: 0; padding: 0; }
.ph-quiz__title { display: block; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; outline: none; }
@media (min-width: 640px) { .ph-quiz__title { font-size: 22px; } }
.ph-quiz__text { font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.ph-quiz .ph-choice { align-items: flex-start; padding: 12px 14px; font-size: 15px; line-height: 1.45; }
.ph-quiz .ph-choice input { margin-top: 1px; }
.ph-quiz .ph-choice.ph-quiz__aside { color: var(--ink-3); }
.ph-quiz .ph-choice.ph-quiz__aside:has(input:checked) { color: var(--ink); }

/* Пройденный опрос: зелёная карточка с сильными сторонами */
.ph-quiz--done .ph-quiz__card { background: var(--quiz-done-bg); border-color: var(--quiz-done-line); }
.ph-quiz--done .ph-quiz__step { color: var(--quiz-done-ink); }
.ph-quiz__block { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.ph-quiz--done .ph-quiz__block { border-color: var(--quiz-done-line); }
.ph-quiz__label { font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.ph-quiz__items { display: grid; gap: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.ph-quiz__items > li > strong { display: block; margin-bottom: 2px; font-size: 16px; color: var(--ink); font-weight: 600; }
.ph-quiz__items > li > * + * { margin-top: 6px; }
.ph-quiz__items--plain { gap: 10px; font-size: 16px; }
.ph-quiz__items--plain > li { position: relative; padding-left: 28px; }
.ph-quiz__items--plain > li::before { content: ""; position: absolute; left: 0; top: calc(0.775em - 9px); width: 18px; height: 18px; background: var(--quiz-done-ink); -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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%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.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.ph-quiz__items--plain > li > strong { display: inline; margin: 0; font-size: inherit; }
.ph-quiz__ev { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--subtle); font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.ph-quiz__ev span { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.ph-quiz__reasons { display: grid; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.ph-quiz__reasons strong { color: var(--ink); font-weight: 600; }
.ph-quiz__task { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--ink); }
.ph-quiz__task span { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
.ph-quiz__closed { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ph-quiz__closed .ph-quiz__text { color: var(--ink-2); }

/* Отбивки между вопросами: кольцо доли основных вопросов (b1, b2) и плитки 15 глав (b3), полоса 3 секунд */
.ph-qbreak { position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 0 28px; text-align: center; cursor: pointer; animation: ph-qbreak-in var(--motion-reveal) var(--ease-out) both; }
.ph-qbreak .ph-quiz__text { max-width: 44ch; }
.ph-qbreak__ring { width: 112px; height: 112px; margin-bottom: 8px; }
.ph-qbreak__ring circle { fill: none; stroke-width: 5; }
.ph-qbreak__track { stroke: var(--line); }
.ph-qbreak__arc { stroke: var(--accent); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 32px 32px; stroke-dashoffset: var(--to); animation: ph-qbreak-arc 1100ms var(--ease-out) 150ms both; }
.ph-qbreak__num { fill: var(--ink); font-size: 14px; font-weight: 600; text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; animation: ph-qbreak-pop 500ms var(--ease-out) 1100ms both; }
.ph-qbreak__tiles { display: grid; grid-template-columns: repeat(5, 30px); gap: 6px; margin-bottom: 8px; }
.ph-qbreak__tiles span { display: grid; place-items: center; height: 30px; border-radius: 7px; background: var(--subtle); border: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; animation: ph-qbreak-tile-in 300ms var(--ease-out) calc(var(--i) * 40ms) both, ph-qbreak-tile-dim 500ms var(--ease-standard) 1100ms forwards; }
.ph-qbreak__tiles span.is-lit { animation: ph-qbreak-tile-in 300ms var(--ease-out) calc(var(--i) * 40ms) both, ph-qbreak-tile-lit 500ms var(--ease-out) 1100ms forwards; }
.ph-qbreak__timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; border-radius: var(--radius-pill); background: var(--accent); opacity: 0.35; transform-origin: left center; animation: ph-qbreak-timer var(--ms) linear both; }
@keyframes ph-qbreak-in { from { opacity: 0; translate: 0 var(--reveal-shift); } }
@keyframes ph-qbreak-arc { from { stroke-dashoffset: var(--from); } to { stroke-dashoffset: var(--to); } }
@keyframes ph-qbreak-pop { from { opacity: 0; scale: 0.8; } }
@keyframes ph-qbreak-tile-in { from { opacity: 0; scale: 0.6; } }
@keyframes ph-qbreak-tile-dim { to { opacity: 0.35; } }
@keyframes ph-qbreak-tile-lit { 50% { scale: 1.15; } to { background: var(--accent); border-color: var(--accent); color: var(--on-solid); } }
@keyframes ph-qbreak-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .ph-qbreak, .ph-qbreak__arc, .ph-qbreak__num, .ph-qbreak__tiles span { animation: none; }
  .ph-qbreak__tiles span:not(.is-lit) { opacity: 0.35; }
  .ph-qbreak__tiles span.is-lit { background: var(--accent); border-color: var(--accent); color: var(--on-solid); }
}

/* Попап «Закрыть опрос?» */
.ph-quiz__confirm { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.ph-quiz__confirm .ph-btn { width: 100%; }
@media (min-width: 640px) { .ph-quiz__confirm { flex-direction: row-reverse; justify-content: flex-start; } .ph-quiz__confirm .ph-btn { width: auto; } }
.ph-modal--confirm .ph-modal__lead { margin-top: 10px; }

/* Под карточкой: заголовок подборки и в каждой подобранной главе — почему она вам */
.ph-quiz-for-you .ph-section__title { max-width: 30ch; }
.ph-quiz-why { max-width: var(--measure); display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
@media (min-width: 640px) { .ph-quiz-why { padding: 18px 20px; } }
.ph-quiz-why__label { font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
.ph-quiz-why__risk { display: inline-block; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--accent-soft); font-size: 12px; font-weight: 600; color: var(--accent-deep); vertical-align: 1px; }

@media (prefers-reduced-motion: reduce) { .ph-quiz__bar span, .ph-quiz__card { transition: none; } }
@media print { .ph-quiz, .ph-quiz-why { display: none !important; } }

/* ===== «Обсудить со своим ИИ» — последний элемент обложки поста, над разделителем =====
   <details>: меню открывается и без JS; blog-extras.js закрывает его кликом мимо, Esc и после выбора. */
.ph-ask { position: relative; margin-top: 24px; }
.ph-ask__btn { list-style: none; user-select: none; -webkit-user-select: none; }
.ph-ask__btn::-webkit-details-marker { display: none; }
.ph-ask__chev { transition: rotate var(--motion-fast) var(--ease-standard); }
.ph-ask[open] .ph-ask__btn { color: var(--ink); border-color: var(--line-strong); }
.ph-ask[open] .ph-ask__chev { rotate: 180deg; }
.ph-ask__menu {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0;
  width: 280px; max-width: calc(100vw - 2 * var(--gutter)); padding: 6px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-float);
}
.ph-ask__hint { padding: 8px 12px 6px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
.ph-ask__item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--tap); padding: 0 12px; border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 500; color: var(--ink);
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.ph-ask__item:hover, .ph-ask__item:focus-visible { background: var(--subtle); }
.ph-ask__item svg { width: 16px; height: 16px; color: var(--muted); }
@media (min-width: 900px) { .ph-ask { margin-top: 28px; } }