/* «Атлас сцен», фаза 4: рассказ в шапке — карточка для чтения, сноски и
   источники, пометки слоя «по источникам» (atlas_story*.js, atlas_src.js;
   14-atlas.md §3, §3.1, §3.2, §16.14). Свой файл, тот же слой responsive.

   Вид карточки — тот же, что у «Рассказа ИИ» древа: классы .ts (шапка с ✕,
   колонка текста, межстрочный 1.7, «Свернуть рассказ» внизу) берутся из
   tree_story.css как есть; здесь — только место карточки в атласе и то, чего у
   древа нет. Правила .ts пишутся только внутри .at-story*: древо не задето.
   Колонка текста у атласа — 62ch: замер в WebKit — в среднем 69 знаков в
   строке русского текста (57–77; у 66ch выходило 73–76).
   Три раскладки:
   • уже 600 px — карточка во всю ширину, поля 16 px; список источников свёрнут
     («Источники: 5 — домены»), номер сноски его раскрывает;
   • 600–1023 px — карточка по ширине колонки текста, источники под текстом;
   • от 1024 px — у готового рассказа источники стоят справа от текста
     (.at-story-wide): колонка текста та же, карточка ниже.
   Номер сноски и имя артиста в тексте — строчные элементы (role=button, не
   <button>: текст переносится как текст, номер не отрывается от фразы); видимый
   знак мал, зона нажатия расширена невидимым полем до 44 px по высоте (::after). Источник —
   домен жирно, заголовок, «↗»; длинный адрес и заголовок переносятся.
   «По источникам» (§3.1) — не только цветом: штриховая рамка пометки и города
   в списке, полая точка со штриховым контуром на карте.
   Без container-type и cqw (частые перерисовки, ошибка прокрутки WebKit). */
@layer responsive {
.at-story-box { margin: 0 0 12px; }
.at-story-box:empty { display: none; }
/* Ширина карточки — колонка текста (62ch) + поля 24 px и рамка; размер шрифта задан здесь, чтобы «ch» у
   карточки и текста значил одно и то же. Шапка карточки прилипает под шапкой приложения (--ts-stick). */
.at-story-panel { max-width: calc(62ch + 50px); margin: 0; padding: 0; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--bg-card); font-size: 15px; overflow-wrap: anywhere;
    --ts-stick: var(--topbar-h, 64px); --ts-head: 57px; }
.at-story-panel[hidden] { display: none; }
.at-hero { scroll-margin-top: calc(var(--topbar-h, 64px) + 12px); }
/* Шапка телефона и портретного планшета (.m-header, sticky) — 60 px без выреза. */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
    .at-story-panel { --ts-stick: calc(var(--safe-top, 0px) + 60px); }
    .at-hero { scroll-margin-top: calc(var(--safe-top, 0px) + 72px); }
}
/* Раскрытый рассказ — кнопка «нажата» (и aria-expanded для диктора). */
.at-actions .btn[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text-strong); }

.at-story .ts-body { padding-top: 14px; }
.at-story .ts-text { max-width: 62ch; }
.at-story-p { margin: 0 0 13px; }
.at-story-badge { padding: 0 6px; border: 1px dashed var(--accent-dim); border-radius: 4px; color: var(--accent-text); }
.at-story-state { margin: 4px 0 10px; color: var(--text); font-size: 15px; line-height: 1.55; }
.at-story-wait { padding: 14px 0 6px; }
.at-story-wait .at-story-state { margin: 8px 0 0; }
.at-story-note { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
.at-story-acts { margin: 2px 0 10px; }
.at-story-err { margin: 6px 0 12px; }
.at-story .ts-strip { margin: 0 0 12px; }
.at-story-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.at-story-foot-note { font-size: 13px; line-height: 1.45; }

/* Имя артиста атласа в тексте — нажимается, как ссылка на альбом в рассказе древа. */
.at-story-art { position: relative; border-radius: 3px; color: var(--text-strong); font-weight: 500; text-decoration: underline;
    text-decoration-color: var(--accent-dim); text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer;
    transition: color 0.12s, background-color 0.12s; }
.at-story-art:hover { background: var(--accent-soft); color: var(--accent-strong); text-decoration-color: var(--accent); }
/* Номер сноски: малый знак в строке, строку не раздвигает; между фразой и номером пробела
   нет — он не отрывается от её последнего слова. */
.at-fns { margin-left: 3px; font-size: inherit; line-height: 0; vertical-align: baseline; white-space: nowrap; }
.at-fn { position: relative; margin: 0 1px; padding: 1px 5px; border: 1px solid var(--border-strong); border-radius: 9px;
    background: var(--bg-elev); color: var(--accent-text); font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    line-height: 15px; vertical-align: 2px; cursor: pointer; }
.at-fn:hover { border-color: var(--accent); color: var(--accent-strong); }
/* Зона нажатия шире знака: 44 px по высоте, соседние номера не перекрывает по ширине. */
.at-fn::after, .at-story-art::after { content: ''; position: absolute; inset: -13px -1px; }

/* Источники: «Источники: N — домены», список с номерами сносок. */
.at-srcs { margin: 2px 0 10px; border-top: 1px solid var(--border-soft); }
.at-srcs > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-height: 44px; color: var(--text-mid);
    font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.at-srcs > summary::-webkit-details-marker { display: none; }
.at-srcs > summary::before { content: '▸'; color: var(--text-dim); }
.at-srcs[open] > summary::before { content: '▾'; }
.at-srcs-doms { font-weight: 400; }
.at-src-list { margin: 0 0 8px; padding: 0 0 0 26px; font-size: 13px; line-height: 1.5; }
/* Номер сноски подводит к своему источнику: строка встаёт под прилипшей шапкой карточки и над нижней панелью вкладок. */
.at-src-list > li { padding: 3px 4px 3px 8px; border-radius: 4px; scroll-margin-top: calc(var(--ts-stick) + var(--ts-head) + 12px);
    scroll-margin-bottom: calc(var(--tabbar-h, 0px) + var(--safe-bottom, 0px) + 16px); }
.at-src-list > li::marker { color: var(--accent-text); font-family: var(--font-mono); font-size: 12px; }
.at-src-list > li:focus { outline: none; }
/* Источник, к которому привела сноска, — подсвечен, пока на нём фокус: фон и полоса слева
   (после нажатия мышью рамки фокуса нет, а один слабый фон на тёмной теме не виден). */
.at-src-list > li:focus-within, .at-src-list > li:focus { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.at-src { color: var(--text-mid); text-decoration: none; }
a.at-src { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
a.at-src:hover { color: var(--text-strong); text-decoration-color: var(--accent); }
.at-src-dom { color: var(--text-strong); font-weight: 600; }
.at-src-note, .at-src-common { margin: 0 0 8px; }
.at-story .ts-x { min-width: 40px; }
.at-story a:focus-visible, .at-story button:focus-visible, .at-story summary:focus-visible, .at-story [role="button"]:focus-visible,
.at-card .at-src:focus-visible, .at-map-panel .at-src:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.at-story .at-fn, .at-story .at-story-art, .at-story .at-src, .at-story .at-story-acts .btn {
    scroll-margin-top: calc(var(--ts-stick) + var(--ts-head) + 12px); }

/* ── Слой «по источникам» (§3.1): штрих и полая точка, а не только цвет ── */
.at-mk-src { border-style: dashed; border-color: var(--accent-dim); color: var(--accent-text); font-family: inherit;
    white-space: normal; overflow-wrap: anywhere; }
.at-srcmk[hidden] { display: none; }
.at-row.src .at-why, .at-prow.src .at-why { border-style: dashed; }
.at-city.src { border-style: dashed; border-color: var(--accent-dim); }
.at-map-dot.src { fill: var(--bg-app); stroke: var(--at-c, #cc9a95); stroke-width: 2; stroke-dasharray: 3 2; }
.at-map-dot.src.sel { stroke: var(--text-strong); stroke-width: 3; }
.at-src-arts { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 13px; }
.at-src-arts .at-chip { padding: 2px 12px; border-radius: var(--radius); }
.at-src-quote { color: var(--text-mid); line-height: 1.45; }
/* Ссылка на источник в строке цитаты: зона нажатия шире знака, как у номера сноски. */
.at-src-quote .at-src { position: relative; margin: 0 2px; }
.at-src-quote a.at-src::after { content: ''; position: absolute; inset: -14px -2px; }
.at-map-also { margin: 0 0 6px; }
.at-fact-src .at-mk-src { margin-left: 4px; }

/* Полный вид: у готового рассказа источники — справа от текста. */
@media (min-width: 1024px) {
    .at-story-panel.at-story-wide { max-width: calc(62ch + 58px + 360px); }
    .at-story-wide .ts-body, .at-story-wide .ts-head, .at-story-wide .ts-foot { padding-left: 28px; padding-right: 28px; }
    .at-story-wide .at-story-cols { display: grid; grid-template-columns: minmax(0, 62ch) minmax(0, 1fr); column-gap: 30px; align-items: start; }
    .at-story-wide .at-srcs { margin-top: 0; border-top: 0; }
    .at-story-wide .at-srcs > summary { min-height: 30px; }
}
/* Палец: всё, что нажимается, — не ниже 44 px; номер сноски и имя в тексте — крупнее зоной. */
@media (pointer: coarse) {
    .at-story .btn, .at-story .ts-x { min-height: 44px; }
    .at-story .ts-x { min-width: 44px; }
    .at-story-wide .at-srcs > summary { min-height: 44px; }
    .at-src-list > li > .at-src { display: block; min-height: 44px; padding: 11px 0; }
    /* Номера сносок стоят по два-три подряд: шаг между ними — 44 px, зоны нажатия стыкуются, не перекрываясь. */
    .at-fn { margin: 0 11px; padding: 1px 7px; }
    .at-fn::after { inset: -14px -11px; }
    .at-fns { margin-left: 0; }
    .at-src-arts .at-chip { min-height: 44px; }
    /* Ссылки на источники в цитате слоя «по источникам» — отдельными строками по 44 px. */
    .at-src-quote a.at-src { display: flex; align-items: center; min-height: 44px; margin: 0; }
    .at-src-quote a.at-src::after { content: none; }
}
@media (pointer: fine) {
    .at-src-arts .at-chip { min-height: 28px; }
}
@media (max-width: 599px) {
    .at-story-panel { max-width: none; }
    .at-story-acts .btn { flex: 1 1 100%; }
    .at-story-foot .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .at-story-art { transition: none; }
    .at-story .dossier-spin { animation: none; }
}
} /* ── end @layer responsive ── */