/* Aroken — страница курса «JavaScript с нуля» (css/javascript-course.css). Подключается только на javascript.html после course-blocks.css.
   Два блока: программа как код — окно редактора program.js, где каждый блок курса свёрнут в строку объекта (<details>), — и «Кому подойдёт»
   мозаикой из бумажных карточек с выпускниками: слова из истории, голосовое и фото до края. Токены — из main.css; подсветка кода — .c-k/.c-f/.c-s/.c-n/.c-c
   из course-blocks.css; плеер голосового — .player из main.css (включает js/javascript-course.js). Акцент страницы — жёлтый (--accent-rgb в main.css). */

/* ================================================================
   Программа: окно редактора program.js
   Строки — .jsp__ln (номер строки рисует CSS-счётчик), блок курса — <details class="jsp__block">: summary — строка объекта
   { block: 1, title: '…', lessons: 10 }, внутри — practice: () => { … } с примером кода и пояснение обычным текстом справа (маргиналия).
   Свёрнутый блок прибавляет к счётчику свои скрытые строки (--fold в разметке) — номера перескакивают, как при фолдинге в редакторе.
   «N уроков» стоит сразу после кода, как inlay hint. Без JS открыт только блок с [open]; кнопка «Развернуть все» появляется из js/javascript-course.js.
   ================================================================ */
.jsp { margin-top: 64px; position: relative; overflow: hidden; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .1); background: #15161B; color: #E6E8EC; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .7); }

/* хром окна: точки + вкладка файла + одна кнопка */
.jsp__bar { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 12px 0 18px; background: #1E2026; border-bottom: 1px solid rgba(0, 0, 0, .45); }
.jsp__dots { flex: none; display: flex; gap: 7px; }
.jsp__dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.jsp__tab { position: relative; display: flex; align-items: center; gap: 9px; align-self: stretch; margin: 0 0 -1px; padding: 0 16px; font: 500 13px/1 var(--mono); color: #fff; background: #15161B; border-right: 1px solid rgba(0, 0, 0, .4); }
.jsp__tab::before { content: "JS"; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; background: rgb(var(--accent-rgb)); color: var(--ink); font: 700 8.5px/1 var(--font); letter-spacing: -.02em; }
.jsp__all { margin-left: auto; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: rgba(255, 255, 255, .78); font: 500 13px/1 var(--font); letter-spacing: -.005em; cursor: pointer; transition: background .2s, color .2s; }
.jsp__all:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.jsp__all:focus-visible { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: 2px; }

/* тело: строки кода с номерами */
.jsp__code { counter-reset: ln; padding: 18px 0 20px; font: 400 13.5px/24px var(--mono); tab-size: 2; }
.jsp__ln { display: grid; grid-template-columns: 56px 20px minmax(0, 1fr); align-items: start; min-height: 24px; margin: 0; padding-right: 24px; white-space: pre; }
.jsp__ln::before { counter-increment: ln; content: counter(ln); grid-column: 1; padding-right: 14px; text-align: right; color: rgba(255, 255, 255, .26); font-variant-numeric: tabular-nums; user-select: none; transition: color .2s; }
.jsp__src { grid-column: 3; min-width: 0; }

/* блок курса: строка объекта как заголовок <summary>; «N уроков» — подсказка сразу после кода, как inlay hint редактора, а не колонка у правого края */
.jsp__block { interpolate-size: allow-keywords; }
.jsp__sum { grid-template-columns: 56px 20px auto minmax(0, 1fr); cursor: pointer; list-style: none; transition: background .2s; }
.jsp__sum::-webkit-details-marker { display: none; }
.jsp__sum::marker { content: ""; }
.jsp__sum:hover { background: rgba(255, 255, 255, .035); }
.jsp__sum:focus-visible { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: -2px; border-radius: 4px; }
.jsp__cnt { grid-column: 4; justify-self: start; margin: 2px 0 0 16px; padding: 0 7px; border-radius: 5px; background: rgba(255, 255, 255, .06); font-size: 12px; line-height: 20px; color: rgba(255, 255, 255, .45); white-space: nowrap; transition: color .2s, background .2s; }
.jsp__chev { grid-column: 2; display: grid; place-items: center; width: 20px; height: 24px; color: rgba(255, 255, 255, .38); transition: transform .3s var(--spring), color .2s; }
.jsp__chev svg { width: 10px; height: 10px; }
.jsp__sum:hover .jsp__chev { color: #fff; }
.jsp__fold { color: rgba(255, 255, 255, .38); }
/* свёрнутый блок: после заголовка счётчик перескакивает на число скрытых строк (--fold из разметки) — как фолдинг в редакторе */
.jsp__block:not([open]) > .jsp__sum::after { content: ""; position: absolute; width: 0; height: 0; counter-increment: ln var(--fold, 0); }
.jsp__block[open] > .jsp__sum { background: rgba(var(--accent-rgb), .06); }
.jsp__block[open] > .jsp__sum::before { color: rgb(var(--accent-rgb)); }
.jsp__block[open] > .jsp__sum .jsp__chev { transform: rotate(90deg); color: rgb(var(--accent-rgb)); }
.jsp__block[open] > .jsp__sum .jsp__fold { display: none; }
.jsp__block[open] > .jsp__sum .jsp__cnt { color: rgba(255, 255, 255, .8); background: rgba(var(--accent-rgb), .14); }

/* раскрытый блок: слева строки practice, справа — пояснение обычным текстом, как заметка на полях */
.jsp__panel { display: grid; grid-template-columns: minmax(0, 620px) minmax(280px, 1fr); gap: 0 28px; align-items: start; padding-right: 24px; }
.jsp__lines { min-width: 0; }
.jsp__lines .jsp__ln { padding-right: 0; }
.jsp__doc { max-width: 560px; margin: 4px 0 12px; padding: 2px 0 2px 18px; border-left: 2px solid rgba(var(--accent-rgb), .55); font: 400 15px/22px var(--font); color: rgba(255, 255, 255, .8); white-space: normal; text-wrap: pretty; }
.jsp__doc b { font: 500 13.5px/1 var(--mono); color: rgb(var(--accent-rgb)); }

/* финальная строка — дипломный проект, подсвечена как текущая строка редактора */
.jsp__ln--final { margin-top: 2px; background: linear-gradient(90deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), 0) 72%); }
.jsp__ln--final .jsp__src { color: rgba(255, 255, 255, .9); white-space: pre-wrap; }
.jsp__ln--final .jsp__src::before { content: "// "; color: rgb(var(--accent-rgb)); }

/* плавное раскрытие, где браузер умеет анимировать ::details-content */
@supports (interpolate-size: allow-keywords) {
  .jsp__block::details-content { height: 0; overflow: clip; transition: height .35s var(--ease), content-visibility .35s allow-discrete; }
  .jsp__block[open]::details-content { height: auto; }
}

/* ================================================================
   «Кому подойдёт»: мозаика — три бумажные карточки-ситуации (типаж → реплика → что даст курс → слова выпускника из его истории
   и голосовое, где есть) с фото выпускника до края и графитовая «не подойдёт, если» с маршрутом во флагман; под мозаикой — графитовая
   полоса с заявкой. Сетка 12 колонок: 8+4 / 5+7 на десктопе. Пузырь цитаты, плеер и пилюля «было → стало» — как у персонажей флагмана (.fitp).
   ================================================================ */
.jsf { margin-top: 64px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; list-style: none; padding: 0; }
.jsf__card { position: relative; min-width: 0; min-height: 400px; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; }
.jsf__card--a { grid-column: span 8; }
.jsf__card--b { grid-column: span 4; }
.jsf__card--c { grid-column: span 5; }
.jsf__card--d { grid-column: span 7; }

/* бумажная карточка: текст слева, фото выпускника — панелью до края (ширина панели — --pw) */
.jsf__card--paper { --pw: 40%; display: grid; grid-template-columns: minmax(0, 1fr) var(--pw); color: var(--ink); background: linear-gradient(112deg, var(--paper-1) 2%, var(--paper-2) 55%, var(--paper-3) 96%); box-shadow: var(--shadow-tile); }
.jsf__card--flip { grid-template-columns: var(--pw) minmax(0, 1fr); }
/* широкая карточка (8 колонок): фото шире, чтобы текст не растекался по пустой середине */
.jsf__card--a { --pw: 46%; }
.jsf__copy { display: flex; flex-direction: column; min-width: 0; padding: 28px; }
.jsf__card--flip .jsf__copy { grid-column: 2; }
.jsf__title { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -.018em; text-wrap: balance; }
.jsf__pain { position: relative; margin-top: 14px; padding-left: 26px; font-size: 15px; line-height: 22px; color: rgba(23, 24, 28, .62); text-wrap: pretty; }
.jsf__pain::before { content: "«"; position: absolute; left: 0; top: -6px; font-size: 30px; line-height: 1; font-weight: 700; color: rgba(23, 24, 28, .22); }
.jsf__gain { position: relative; margin-top: 16px; padding-left: 30px; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.jsf__gain::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--graphite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3 8.6 13.3 14.5 7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .55); }

/* слова выпускника из его истории (js/story-details.js): графитовый пузырь с хвостиком в сторону фото; под ним — голосовое, где оно есть */
.jsf__voice { margin-top: auto; padding-top: 22px; }
.jsf__say { position: relative; margin: 0; padding: 16px 18px; border-radius: 18px 18px 6px 18px; background: var(--graphite); color: #fff; box-shadow: 0 14px 26px -16px rgba(23, 24, 28, .8); }
.jsf__say::after { content: ""; position: absolute; right: 14px; bottom: -9px; width: 16px; height: 10px; background: var(--graphite); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.jsf__card--flip .jsf__say { border-radius: 18px 18px 18px 6px; }
.jsf__card--flip .jsf__say::after { right: auto; left: 14px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.jsf__say p { margin: 0; font-size: 15.5px; line-height: 23px; font-weight: 500; text-wrap: pretty; }
.jsf__hl { font-weight: inherit; color: rgb(var(--accent-rgb)); }
/* плеер голосового на бумаге: тот же .player из main.css, что в слайдере историй, — графитовая кнопка, тонкие полосы на всю ширину */
.jsf__card .player { margin: 12px 0 0; height: 46px; padding: 3px; gap: 8px; border-color: rgba(23, 24, 28, .12); background: rgba(23, 24, 28, .05); -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink); }
.jsf__card .player__btn { width: 40px; height: 40px; background: var(--graphite); color: #fff; }
.jsf__card .player__btn svg { width: 18px; height: 18px; }
.jsf__card .player__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.jsf__card .player__wave { gap: 0; justify-content: space-between; }
.jsf__card .player__bar { width: 3px; background: rgba(23, 24, 28, .26); }
.jsf__card .player__bar.is-played { background: var(--ink); }
.jsf__card .player__time { margin: 0 14px 0 4px; font-family: var(--mono); font-size: 13px; color: rgba(23, 24, 28, .7); }

/* панель выпускника: фото заполняет верх до краёв, под ним графитовая подпись; вся панель — ссылка на историю */
/* панель стоит абсолютом: высоту карточки задаёт текст (и min-height), а не снимок — иначе фото растягивает ряд до своих 432 px */
.jsf__proof { position: absolute; top: 0; right: 0; bottom: 0; width: var(--pw); display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; overflow: hidden; color: #fff; text-decoration: none; background: var(--graphite); }
.jsf__card--flip .jsf__proof { right: auto; left: 0; }
.jsf__photo { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 22%; transition: transform .6s var(--ease); }
.jsf__photo--mid { object-position: 50% 45%; }
.jsf__proof:hover .jsf__photo { transform: scale(1.03); }
.jsf__proof:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.jsf__cap { position: relative; z-index: 1; display: grid; gap: 6px; justify-items: start; padding: 14px 18px 16px; background: var(--graphite); }
/* «было → стало» из js/stories.js — та же пилюля, что у персонажей флагмана (.fitp-card__delta) */
.jsf__delta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 5px 10px; border-radius: 12px; background: rgba(255, 255, 255, .1); font: 500 12.5px/16px var(--mono); font-variant-numeric: tabular-nums; color: #fff; }
.jsf__was { color: rgba(255, 255, 255, .55); }
.jsf__arrow { color: rgb(var(--accent-rgb)); }
.jsf__delta b { font-weight: 500; }
.jsf__delta b, .jsf__was { white-space: nowrap; }
.jsf__name { font-size: 13px; line-height: 17px; font-weight: 600; color: rgba(255, 255, 255, .66); text-wrap: pretty; }
.jsf__read { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: -.007em; color: #fff; }
.jsf__read i { font-style: normal; transition: transform .3s var(--spring); }
.jsf__proof:hover .jsf__read { text-decoration: underline; }
.jsf__proof:hover .jsf__read i { transform: translateX(3px); }

/* графитовая карточка «не подойдёт, если»: честный маршрут во флагман — текстом, ссылкой и билетом выпускника, который начал флагман с нуля */
.jsf__card--ink { padding: 28px; color: #fff; border: 1px solid rgba(255, 255, 255, .1); background: radial-gradient(80% 70% at 100% 0%, rgba(var(--accent-rgb), .09), rgba(var(--accent-rgb), 0) 66%), var(--graphite); }
.jsf__card--ink .jsf__title { color: #fff; }
.jsf__ink-body { display: flex; flex-direction: column; align-items: flex-start; }
.jsf__text { margin-top: 14px; font-size: 15px; line-height: 22px; color: var(--muted-2); text-wrap: pretty; }
.jsf__ticket { margin-top: auto; padding: 10px 12px 10px 10px; display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 12px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; transition: background .2s; }
.jsf__ink-body + .jsf__ticket { margin-top: 24px; }
.jsf__card--ink .jsf__ink-body { margin-bottom: auto; }
.jsf__ticket:hover { background: rgba(255, 255, 255, .1); }
.jsf__ticket:focus-visible { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: 3px; }
.jsf__ticket-photo { display: block; width: 84px; height: 104px; border-radius: 12px; object-fit: cover; object-position: 50% 20%; }
.jsf__ticket .jsf__cap { gap: 4px; padding: 0; background: none; }
.jsf__ticket:hover .jsf__read { text-decoration: underline; }
.jsf__ticket:hover .jsf__read i { transform: translateX(3px); }
.jsf__link { margin-top: 18px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.007em; color: rgb(var(--accent-rgb)); text-decoration: none; }
.jsf__link:hover { text-decoration: underline; }
.jsf__link i { font-style: normal; transition: transform .3s var(--spring); }
.jsf__link:hover i { transform: translateX(3px); }
.jsf__link:focus-visible { outline: 2px solid rgb(var(--accent-rgb)); outline-offset: 3px; }

/* полоса под мозаикой: откуда истории + заявка (единственная кнопка блока) */
.jsf__foot { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 22px 28px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .08); background: var(--graphite); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .8); }
.jsf__foot-text { flex: 1 1 380px; font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, .84); text-wrap: pretty; }
.jsf__foot-text b { font-weight: 600; color: #fff; }

/* ---------- Широкий экран ---------- */
@media (min-width: 1800px) {
  .jsf__card { min-height: 420px; }
  .jsf__copy, .jsf__card--ink { padding: 32px; }
  .jsf__title { font-size: 26px; line-height: 32px; }
  .jsf__pain, .jsf__gain, .jsf__text { font-size: 16px; line-height: 24px; }
  .jsf__pain::before { top: -5px; }
  .jsf__gain::before { top: 2px; }
  .jsf__say p { font-size: 16.5px; line-height: 25px; }
  .jsf__cap { padding: 16px 20px 18px; }
  .jsp__code { font-size: 14px; line-height: 25px; }
  .jsp__ln, .jsp__chev { min-height: 25px; }
}

/* ---------- Ноутбук 1280–1439: нижний ряд 6+6 — в пяти колонках пузырю, плееру и пилюле тесно ---------- */
@media (max-width: 1439px) {
  .jsf__card--c, .jsf__card--d { grid-column: span 6; }
  .jsf__say p { font-size: 15px; line-height: 22px; }
  .jsf__cap { padding: 14px 14px 16px; }
  .jsf__delta { padding: 4px 8px; font-size: 11.5px; }
}

/* ---------- Планшет альбомный: 1024–1279 — четыре карточки во всю ширину, фото у всех справа ---------- */
@media (max-width: 1279px) {
  .jsf__card--a, .jsf__card--b, .jsf__card--c, .jsf__card--d { --pw: 40%; grid-column: span 12; }
  .jsf__card { min-height: 380px; }
  .jsf__card--flip { grid-template-columns: minmax(0, 1fr) var(--pw); }
  .jsf__card--flip .jsf__copy { grid-column: 1; }
  .jsf__card--flip .jsf__proof { right: 0; left: auto; }
  .jsf__card--flip .jsf__say { border-radius: 18px 18px 6px 18px; }
  .jsf__card--flip .jsf__say::after { left: auto; right: 14px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
  .jsf__card--b { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); align-items: center; gap: 20px 40px; }
  .jsf__ink-body + .jsf__ticket { margin-top: 0; }
  .jsp__panel { grid-template-columns: minmax(0, 540px) minmax(280px, 1fr); }
}

/* ---------- Планшет: до 1023 ---------- */
@media (max-width: 1023px) {
  .jsf__card { min-height: 360px; }
  .jsp__panel { grid-template-columns: minmax(0, 1fr); gap: 0; padding-right: 0; }
  .jsp__doc { margin: 8px 24px 12px 76px; }
}

/* ---------- Телефон ---------- */
@media (max-width: 767px) {
  .jsp { margin-top: 32px; border-radius: 20px; }
  .jsp__bar { height: 44px; gap: 10px; padding: 0 10px 0 14px; }
  .jsp__dots { gap: 5px; }
  .jsp__dots i { width: 9px; height: 9px; }
  .jsp__tab { padding: 0 12px; font-size: 12px; }
  .jsp__all { height: 30px; padding: 0 10px; font-size: 12.5px; }
  .jsp__code { padding: 12px 0 14px; font-size: 12.5px; line-height: 22px; }
  .jsp__ln, .jsp__sum { grid-template-columns: 40px 16px minmax(0, 1fr); min-height: 22px; padding-right: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
  .jsp__ln::before { padding-right: 10px; }
  .jsp__chev { width: 16px; height: 22px; }
  /* длинная строка переносится с висячим отступом, как wrappingIndent в редакторе: продолжение уходит под код, а не к номеру строки */
  .jsp__src { padding-left: 2ch; text-indent: -2ch; }
  .jsp__sum .jsp__src { padding-left: 4ch; text-indent: -4ch; }
  .jsp__lines .jsp__src { padding-left: 8ch; text-indent: -8ch; }
  .jsp__cnt { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .jsp__doc { margin: 6px 14px 10px 56px; font-size: 14px; line-height: 21px; }
  .jsp__doc b { font-size: 12.5px; }

  .jsf { margin-top: 32px; gap: 12px; }
  .jsf__card, .jsf__card--a, .jsf__card--d { min-height: 0; border-radius: 20px; }
  .jsf__card--paper, .jsf__card--flip, .jsf__card--a, .jsf__card--c { grid-template-columns: minmax(0, 1fr); }
  .jsf__card--b { display: flex; }
  .jsf__copy, .jsf__card--flip .jsf__copy { grid-column: 1; padding: 22px 20px 0; }
  .jsf__title { font-size: 21px; line-height: 27px; }
  .jsf__pain { margin-top: 10px; font-size: 14px; line-height: 21px; }
  .jsf__gain { margin-top: 14px; font-size: 14px; line-height: 21px; }
  .jsf__gain::before { top: 0; }
  .jsf__voice { padding-top: 18px; }
  .jsf__say, .jsf__card--flip .jsf__say { padding: 14px 16px; border-radius: 16px 16px 16px 5px; }
  .jsf__say::after, .jsf__card--flip .jsf__say::after { right: auto; left: 12px; clip-path: polygon(0 0, 100% 0, 0 100%); }
  .jsf__say p { font-size: 15px; line-height: 22px; }
  .jsf__card .player { margin-top: 10px; height: 44px; }
  .jsf__card .player__btn { width: 38px; height: 38px; }
  .jsf__card .player__bar { width: 2.6px; }
  /* фото становится билетом выпускника: снимок + пилюля, имя и «Читать историю» */
  .jsf__proof, .jsf__card--flip .jsf__proof { position: static; width: auto; grid-column: 1; grid-row: auto; grid-template-rows: none; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 12px; margin: 16px 14px 14px; padding: 10px 12px 10px 10px; border-radius: 16px; }
  .jsf__photo { width: 84px; height: 104px; border-radius: 12px; object-position: 50% 20%; }
  .jsf__proof:hover .jsf__photo { transform: none; }
  .jsf__cap { gap: 4px; padding: 0; background: none; }
  .jsf__delta { padding: 4px 8px; font-size: 11.5px; line-height: 15px; }
  .jsf__name { font-size: 12.5px; line-height: 16px; }
  .jsf__read { font-size: 13.5px; line-height: 17px; }
  .jsf__card--ink { padding: 22px 20px 14px; }
  .jsf__text { font-size: 14px; line-height: 21px; }
  .jsf__link { margin-top: 16px; }
  .jsf__ink-body + .jsf__ticket { margin-top: 18px; }
  .jsf__foot { padding: 18px 20px 20px; border-radius: 20px; gap: 14px; }
  .jsf__foot-text { flex-basis: 100%; font-size: 15px; line-height: 22px; }
  .jsf__foot .who-btn { width: 100%; justify-content: space-between; }
}

@media (max-width: 400px) {
  .jsp__ln, .jsp__sum { grid-template-columns: 34px 16px minmax(0, 1fr); padding-right: 10px; }
  .jsp__doc { margin-left: 50px; }
}

/* ---------- Без анимаций ---------- */
@media (prefers-reduced-motion: reduce) {
  .jsp__block::details-content { transition: none; }
  .jsp__chev, .jsp__cnt, .jsf__photo, .jsf__read i, .jsf__link i { transition: none; }
  .jsf__proof:hover .jsf__photo, .jsf__proof:hover .jsf__read i, .jsf__link:hover i { transform: none; }
}