/* mobile.css — адаптивные правила для всех экранов.
   Подключается ПОСЛЕДНИМ, после всех concept-*.css, forms.css, reader.css, app.css.

   Брейкпойнты:
     ≤ 980px — планшет / узкий ноутбук  (сетки сужаются, сайдбар → сверху)
     ≤ 640px — телефон                  (всё в одну колонку, модалки на весь экран)
     ≤ 420px — узкий телефон            (последние правки шрифтов и кнопок)
*/

/* ════════════════════════════════════════════════════════════════
   ≤ 980px — TABLET
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {

  /* ─── meta-bar ─── */
  .meta-bar { padding: 10px 18px; gap: 14px; }
  .meta-bar .brand-meta { display: none; }
  .screen-tabs button { padding: 6px 12px; font-size: 12.5px; }

  /* ─── Главная (.d-app) ─── */
  .d-nav { padding: 14px 22px; gap: 14px; flex-wrap: wrap; }
  .d-nav .primary { flex-wrap: wrap; row-gap: 8px; }
  .d-nav .search { flex: 1 1 240px; min-width: 0; }
  .d-main { padding: 22px 24px 80px; }

  /* сайдбар: сверху, сворачиваемый через .d-sidebar-toggle (переформатируется как полоска) */
  .d-body { grid-template-columns: 1fr; }
  .d-filters {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--ink-line-soft);
    padding: 14px 22px 18px;
  }
  .d-filters section + section { margin-top: 16px; }
  /* кнопка-toggle превращается в полноширинную полоску перед main */
  .d-sidebar-toggle {
    position: static;
    width: 100%;
    height: 36px;
    transform: none;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--ink-line-soft);
    background: var(--ink-2);
    color: var(--ink-fg-2);
    font: 500 11px/1 var(--mono);
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  .d-sidebar-toggle::before { content: 'Скрыть фильтры ▴'; }
  .d-app.is-sidebar-collapsed .d-sidebar-toggle {
    position: static;
    width: 100%;
    height: 36px;
    border-radius: 0;
    border-left: 0;
    border-bottom: 1px solid var(--ink-line-soft);
  }
  .d-app.is-sidebar-collapsed .d-sidebar-toggle::before { content: 'Показать фильтры ▾'; }
  .d-app.is-sidebar-collapsed .d-filters { display: none; }
  .d-app.is-sidebar-collapsed .d-body { grid-template-columns: 1fr; }

  /* dashboard-полоса, стол, стопки */
  .d-dash { grid-template-columns: 1fr 1fr; gap: 14px; }
  .d-desk-items { grid-template-columns: repeat(2, 1fr); padding: 20px 22px 22px; }
  body[data-density="compact"] .d-desk-items { grid-template-columns: repeat(2, 1fr); padding: 18px 20px 20px; }
  body[data-density="dense"]   .d-desk-items { grid-template-columns: repeat(3, 1fr); padding: 16px 20px 18px; }
  .c-stack { margin: 28px 24px 0; }

  /* ─── Reader ─── */
  .d-rd-chrome { padding: 14px 22px 0; }
  .d-rd-hero {
    grid-template-columns: 160px 1fr;
    gap: 28px;
    padding: 28px 22px 24px;
  }
  .d-rd-hero .head h1 { font-size: 40px; }
  .d-rd-hero .head h1 .jp { font-size: 22px; }
  .d-rd-progress { grid-template-columns: repeat(3, 1fr); padding: 0 22px; }
  .d-rd-foot { grid-template-columns: 1fr; gap: 28px; padding: 28px 22px 64px; }
  .d-spread { padding: 0 22px; }
  .d-page-l, .d-page-r { padding: 44px 40px 80px; min-height: auto; }
  .d-page-l .folio, .d-page-r .folio { left: 40px; right: 40px; }

  /* ─── Persona ─── */
  .d-pr-chrome { padding: 14px 22px 0; }
  .d-pr-hero { grid-template-columns: 160px 1fr; gap: 32px; padding: 40px 22px 28px; }
  .d-pr-head h1 { font-size: 48px; }
  .d-pr-head h1 .first { font-size: 28px; }
  .d-pr-head h1 .jp { font-size: 20px; }
  .d-pr-stats { grid-template-columns: repeat(3, 1fr); padding: 0 22px; }
  .d-pr-stats > div:nth-child(n+4) { display: none; }
  .d-pr-main { grid-template-columns: 1fr; gap: 32px; padding: 0 22px; }
  .d-pr-works, .d-pr-quotes { padding: 0 22px; }
  .d-pr-work { grid-template-columns: 50px 60px 1fr; gap: 14px; }
  .d-pr-work .meta, .d-pr-work .status { grid-column: 3 / -1; }
  .d-pr-browse-toolbar { padding: 0 22px; }
  .d-pr-browse-grid { padding: 0 22px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

  /* ─── Dashboard ─── */
  .d-dash-chrome { padding: 14px 22px 0; }
  .d-dh-hero { grid-template-columns: 1fr 1fr; padding: 0 22px; gap: 14px; }
  .d-dh-hero .card.big { grid-column: 1 / -1; }
  .d-dh-tops { grid-template-columns: 1fr; padding: 0 22px; }
  .d-dh-row { grid-template-columns: 1fr; padding: 0 22px; }
  .d-dh-heatmap, .d-dh-timeline { margin-left: 22px; margin-right: 22px; }

  /* ─── Quotes ─── */
  .d-qr-head { padding: 28px 22px 0; }
  .d-qr-head .title { font-size: 48px; }
  .d-qr-toolbar { padding: 0 22px; grid-template-columns: 1fr auto; gap: 12px; }
  .d-qr-toolbar .filters { grid-column: 1 / -1; }
  .d-qr-summary { padding: 0 22px; }
  .d-qr-river { padding: 0 22px; column-count: 2; }
  .d-qr-hero { padding: 0 22px; }
  .d-qr-hero .h { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
  .d-qr-hero .h::before { right: -40px; }

  /* ─── Graph ─── */
  .d-gr-toolbar { grid-template-columns: auto 1fr auto; gap: 12px; padding: 12px 20px; }
  .d-gr-toolbar .center { justify-self: start; grid-column: 1 / -1; order: 3; }
  .d-gr-toolbar .layout { display: none; }
  .d-gr-body { grid-template-columns: 1fr 280px; }

  /* ─── Forms ─── */
  .mf-scrim { padding: 20px 12px; }
  .mf-modal { max-width: none; }
  .mf-head { padding: 22px 22px 16px; }
  .mf-form { padding: 20px 22px 0; }
  .mf-foot { padding: 14px 22px; }
}

/* ════════════════════════════════════════════════════════════════
   ≤ 640px — MOBILE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ─── meta-bar: компактно, табы скроллятся горизонтально ─── */
  .meta-bar {
    padding: 8px 12px;
    gap: 8px;
    grid-template-columns: auto 1fr auto auto;
  }
  .meta-bar .brand-name { display: none; }
  .meta-bar .brand-block { gap: 0; }
  .meta-bar .brand-kanji { font-size: 20px; }
  .screen-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding: 3px;
    min-width: 0;
    max-width: 100%;
    justify-self: stretch;
  }
  .screen-tabs::-webkit-scrollbar { display: none; }
  .screen-tabs button {
    padding: 6px 10px;
    font-size: 12px;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .meta-settings { width: 28px; height: 28px; }

  /* main: убираем min-height вычисление с фиксированной шапкой */
  main > section[data-screen].is-active { min-height: calc(100vh - 48px); }

  /* ─── Главная ─── */
  .d-nav {
    padding: 12px 14px 10px;
    gap: 10px;
  }
  .d-nav .primary { font-size: 18px; gap: 16px; flex-wrap: wrap; row-gap: 6px; }
  .d-nav .primary button .cnt { display: none; }
  .d-nav .spacer { display: none; }
  .d-nav .search { flex: 1 1 100%; order: 10; padding: 7px 12px; }
  .d-nav .state { display: none; }
  .d-nav .mode-toggle { order: 5; }

  .d-filters { padding: 12px 16px 18px; }
  .d-main { padding: 16px 14px 60px; }

  .d-dash { grid-template-columns: 1fr; gap: 12px; margin-bottom: 28px; }
  .d-dash .card { padding: 14px 16px; }
  .d-dash .card .v { font-size: 28px; }

  .d-desk { margin-bottom: 28px; border-radius: var(--r-12); }
  .d-desk-head { padding: 16px 18px 0; flex-wrap: wrap; gap: 10px; }
  .d-desk-head h2 { font-size: 22px; }
  .d-desk-head .qotd-pill { font-size: 13px; text-align: left; max-width: none; }
  /* «На столе»: одна колонка для ВСЕХ плотностей (раньше compact/dense слипались) */
  .d-desk-items { grid-template-columns: 1fr; padding: 16px 18px 18px; gap: 14px; }
  body[data-density="comfortable"] .d-desk-items,
  body[data-density="compact"]     .d-desk-items,
  body[data-density="dense"]       .d-desk-items { grid-template-columns: 1fr; }

  .c-strip { grid-auto-columns: 150px; }
  body[data-density="compact"] .c-strip { grid-auto-columns: 140px; }
  body[data-density="dense"]   .c-strip { grid-auto-columns: 120px; }
  .c-stack { margin: 22px 16px 0; }
  .c-stack-head h3 { font-size: 20px !important; }
  .c-strip-arrow { display: none !important; }

  /* density-toggle на мобильном бесполезен — много карточек всё равно не помещается */
  .d-nav .density-toggle { display: none; }

  /* ─── Список (.a-row) — компактный 2-колоночный вид ─── */
  .d-list-wrap { padding: 0 0 20px; }
  .d-list-toolbar { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
  .d-list-toolbar .sort-label { font-size: 9px; }
  .d-list-toolbar .sort-pills { flex-wrap: wrap; }
  .d-list-wrap .a-list-head { display: none; }   /* шапка таблицы скрыта — нет колонок */
  .d-list-wrap .a-year-sep { margin: 14px 14px 6px; padding: 0; }
  .d-list-wrap .a-row {
    margin: 0;
    padding: 12px 14px;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    border-bottom: 1px solid var(--ink-line-soft);
  }
  .d-list-wrap .a-row::before { display: none; }
  .a-cover { width: 44px; height: 62px; }
  .a-row .au { font-size: 10px; line-height: 1.3; grid-column: 2; }
  .a-row .ti { grid-column: 2; font-size: 14.5px; line-height: 1.25; }
  .a-row .ti .sub { font-size: 12px; margin-top: 2px; }
  .a-row .ti .orig { font-size: 12px; }
  /* лишние meta-колонки прячем — для компактности (год показываем в подзаголовке через .meta3 → display: inline) */
  .a-row .meta1, .a-row .meta2, .a-row .meta4 { display: none; }
  .a-row .meta3 {
    grid-column: 2;
    font-size: 10.5px;
    color: var(--ink-fg-3);
    display: flex; flex-wrap: wrap; gap: 4px 10px;
  }
  .a-row .meta3 .pub, .a-row .meta3 .city { display: inline; }
  .a-row .quotes { grid-column: 2; font-size: 10.5px; margin-top: 2px; }

  /* ─── Reader ─── */
  .d-rd-chrome { padding: 14px 14px 0; gap: 10px; flex-wrap: wrap; }
  .d-rd-chrome .more { flex-wrap: wrap; }

  .d-rd-hero {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px 16px 18px;
  }
  .d-rd-hero .cover-stack { max-width: 180px; margin: 0 auto; width: 100%; }
  .d-rd-hero .head h1 { font-size: 28px; }
  .d-rd-hero .head h1 .jp { font-size: 17px; }
  .d-rd-hero .head .au { font-size: 14px; }
  .d-rd-hero .head .sub { font-size: 15px; }
  .d-rd-hero .head .biblio { font-size: 10.5px; gap: 6px 10px; }
  .d-rd-hero .actions { flex-wrap: wrap; gap: 8px; }
  .d-rd-hero .actions button { padding: 8px 14px; font-size: 10.5px; }

  .d-rd-progress { grid-template-columns: repeat(2, 1fr); padding: 0 16px; }
  .d-rd-progress > div { padding: 10px 14px; }
  .d-rd-progress > div .v { font-size: 17px; }

  .d-rd-foot { padding: 24px 16px 60px; gap: 24px; }
  .d-rd-foot .related-grid { grid-template-columns: 1fr; }
  .d-rd-foot .graph svg { height: 200px; }

  /* разворот → одна колонка, правая страница под левой */
  .d-spread { padding: 0 16px; margin-top: 24px; }
  .d-spread .wrap {
    grid-template-columns: 1fr;
    box-shadow: 0 12px 32px -16px rgba(0,0,0,.6);
    border-radius: 4px;
  }
  .d-spread .wrap::before { display: none; }
  .d-page-l, .d-page-r {
    padding: 28px 22px 56px;
    border-radius: 0;
    min-height: auto;
  }
  .d-page-l { border-radius: 4px 4px 0 0; padding-left: 26px; }
  .d-page-r { border-radius: 0 0 4px 4px; }
  .d-page-l::after, .d-page-r::before { display: none; }
  .d-page-l h2 { font-size: 26px; }
  .d-page-l h2 .jp { font-size: 18px; }
  .d-page-l p { font-size: 16px; line-height: 1.6; }
  .d-page-l .lede::first-letter { font-size: 56px; margin-right: 8px; }
  .d-page-l blockquote { font-size: 17px; padding-left: 14px; }
  .d-page-l .pager {
    position: static;
    flex-direction: row;
    justify-content: center;
    margin-top: 18px;
    gap: 8px;
  }
  .d-page-l .folio,
  .d-page-r .folio {
    position: static;
    margin-top: 18px;
    left: auto; right: auto; bottom: auto;
    flex-wrap: wrap; gap: 8px;
  }
  .d-page-r .synced { padding: 22px 22px 14px; }
  .d-page-r .all { padding: 16px 22px 24px; }
  .d-page-r .scroll { max-height: none; }
  .d-page-r .tabs { flex-wrap: wrap; }

  /* ─── Persona ─── */
  .d-pr-chrome { padding: 14px 14px 0; gap: 10px; flex-wrap: wrap; }
  .d-pr-chrome .actions { flex-wrap: wrap; }

  .d-pr-hero {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 28px 16px 18px;
  }
  .d-pr-portrait { max-width: 180px; margin: 0 auto; width: 100%; }
  .d-pr-head h1 { font-size: 34px; }
  .d-pr-head h1 .first { font-size: 22px; }
  .d-pr-head h1 .jp { font-size: 18px; }
  .d-pr-head .dates { font-size: 12px; flex-wrap: wrap; gap: 8px; }

  .d-pr-stats { grid-template-columns: 1fr 1fr; padding: 0 16px; }
  .d-pr-stats > div:nth-child(n+4) { display: none; }
  .d-pr-stats .v { font-size: 22px; }

  .d-pr-main { padding: 0 16px; gap: 28px; margin-top: 28px; }
  .d-pr-section { margin-bottom: 32px; }
  .d-pr-section > h3 { font-size: 20px; flex-wrap: wrap; row-gap: 4px; }
  .d-pr-bio { font-size: 16px; }
  .d-pr-bio p.lede { font-size: 18px; }
  .d-pr-bio p.lede::first-letter { font-size: 48px; margin-right: 8px; }

  .d-pr-works { padding: 0 16px; }
  .d-pr-work {
    grid-template-columns: 50px 1fr;
    gap: 10px;
    padding: 12px 0;
  }
  .d-pr-work .num { display: none; }
  .d-pr-work .yr { font-size: 18px; }
  .d-pr-work .info { grid-column: 1 / -1; }
  .d-pr-work .info .ti { font-size: 16px; }
  .d-pr-work .meta, .d-pr-work .status { grid-column: 1 / -1; padding-top: 0; }

  .d-pr-quotes { padding: 0 16px; }
  .d-pr-quote { padding: 18px 20px 14px; }
  .d-pr-quote .body { font-size: 17px; }

  .d-pr-browse-grid { grid-template-columns: 1fr; padding: 0 16px; }
  .d-pr-browse-toolbar { padding: 0 16px; gap: 14px; }
  .d-pr-sort-pills { margin-left: 0; }
  .d-pr-genealogy { padding: 18px 16px 22px; }
  .d-pr-gen-cont ul li { grid-template-columns: 60px 1fr auto; gap: 8px; }
  .d-pr-gen-actions { gap: 3px; }
  .d-pr-gen-add { font-size: 10px; padding: 4px 9px; }

  /* ─── Dashboard ─── */
  .d-dash-chrome { padding: 14px 14px 0; flex-wrap: wrap; gap: 10px; }
  .d-dash-chrome .year-pills { flex-wrap: wrap; }
  .d-dh-hero { grid-template-columns: 1fr; padding: 0 16px; gap: 12px; }
  .d-dh-hero .card.big {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px 20px;
  }
  .d-dh-hero .card.big .v { font-size: 42px; }
  .d-dh-hero .card.big .sub { font-size: 14px; }

  .d-dh-heatmap, .d-dh-timeline {
    margin-left: 16px; margin-right: 16px;
    padding: 18px 16px 22px;
  }
  .d-dh-heatmap .head, .d-dh-timeline .head { flex-wrap: wrap; gap: 8px; }
  .d-dh-heatmap .head h3, .d-dh-timeline .head h3 { font-size: 19px; }
  .d-dh-heatmap .head .legend { font-size: 9px; }
  .d-dh-heatmap .grid-wrap { overflow-x: auto; }
  .d-dh-heatmap .heat,
  .d-dh-heatmap .month-labels { min-width: 600px; }

  .d-dh-tops { padding: 0 16px; gap: 12px; }
  .d-dh-tops .card { padding: 18px; }
  .d-dh-tops .card h3 { font-size: 18px; flex-wrap: wrap; }
  /* top-bars: имя и зелёная полоска ставим в 2 строки чтобы полоска была видна */
  .d-dh-bar {
    grid-template-columns: 20px 1fr 50px;
    gap: 8px 10px;
    align-items: center;
    padding: 8px 0;
  }
  .d-dh-bar .info {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
  }
  .d-dh-bar .nm {
    min-width: 0;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .d-dh-bar .bar { width: 100%; flex: 0 0 6px; }
  .d-dh-bar .val { font-size: 10.5px; align-self: center; }

  .d-dh-row { padding: 0 16px; gap: 14px; }
  .d-dh-gaps { padding: 18px; }
  .d-dh-gaps .matrix { grid-template-columns: 70px repeat(6, 1fr); }
  .d-dh-gaps .matrix .h,
  .d-dh-gaps .matrix .v,
  .d-dh-gaps .matrix .cell { padding: 6px 4px; font-size: 9px; }

  .d-dh-recent { padding: 18px; }
  .d-dh-recent .item { grid-template-columns: 1fr; gap: 4px; padding: 10px 0; }

  .d-dh-chart .axis { height: 140px; }

  /* ─── Quotes ─── */
  .d-qr-head {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 16px 0;
  }
  .d-qr-head .title { font-size: 36px; }
  .d-qr-head .sub { font-size: 15px; margin-top: 8px; }
  .d-qr-head .nums { text-align: left; }
  .d-qr-head .nums .big { font-size: 36px; }

  .d-qr-toolbar { padding: 0 16px; gap: 10px; margin-top: 20px; grid-template-columns: 1fr; }
  .d-qr-toolbar .search { min-width: 0; }
  .d-qr-toolbar .view { justify-self: start; }
  .d-qr-summary { padding: 0 16px; flex-wrap: wrap; gap: 8px; }
  .d-qr-river { padding: 0 16px; column-count: 1; column-gap: 0; }
  .d-qr-river .q { padding: 18px 18px 14px; margin-bottom: 14px; }
  .d-qr-hero { padding: 0 16px; }
  .d-qr-hero .h {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 20px;
  }
  .d-qr-hero .h::before { right: -20px; top: -30px; font-size: 200px; }
  .d-qr-hero .q { font-size: 22px; line-height: 1.32; }
  .d-qr-hero .actions { flex-direction: row; flex-wrap: wrap; }

  /* ─── Graph ─── */
  .d-graph-page {
    height: auto;
    min-height: calc(100vh - 48px);
    grid-template-rows: auto auto 1fr;
  }
  .d-gr-toolbar { grid-template-columns: 1fr; gap: 10px; padding: 12px 14px; }
  .d-gr-toolbar .title { font-size: 18px; }
  .d-gr-toolbar .center,
  .d-gr-toolbar .search,
  .d-gr-toolbar .layout { justify-self: stretch; grid-column: 1; order: unset; }
  .d-gr-toolbar .search { min-width: 0; }
  .d-gr-body { grid-template-columns: 1fr; }
  .d-gr-canvas { min-height: 50vh; }
  .d-gr-side {
    border-left: 0;
    border-top: 1px solid var(--ink-line-soft);
    max-height: none;
  }
  .d-gr-side .head { padding: 16px 18px 14px; }
  .d-gr-side .head .ti { font-size: 20px; }
  .d-gr-legend, .d-gr-stats {
    position: static;
    margin: 8px 14px;
    width: auto;
    flex-wrap: wrap;
  }

  /* ─── Forms / Modals — на весь экран, фикс скролла ───
     ВАЖНО: убираем overflow:hidden с .mf-modal (это блокировало скролл длинных форм
     на мобиле, потому что modal становилась >100vh и не прокручивалась внутри scrim).
     Скролл идёт через .mf-scrim (у него уже overflow-y:auto). */
  .mf-scrim {
    padding: 0;
    align-items: flex-start;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .mf-modal {
    border-radius: 0;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    overflow: visible;            /* было hidden — блокировало скролл */
    animation: none;
  }
  .mf-head { padding: 16px 18px 12px; }
  .mf-head h2 { font-size: 22px; }
  .mf-form { padding: 16px 18px 0; }
  .mf-section { padding-bottom: 16px; margin-bottom: 12px; }
  .mf-cover {
    grid-template-columns: 1fr;
    gap: 14px;
    justify-items: center;
  }
  .mf-cover-preview { width: 140px; margin: 0 auto; }
  .mf-cover-controls { align-items: center; width: 100%; }
  .mf-crop-hint { text-align: center; max-width: none; }
  .mf-foot {
    flex-wrap: wrap;
    padding: 14px 18px;
    gap: 8px;
  }
  .mf-foot .spacer { flex-basis: 100%; height: 0; }

  /* Настройки */
  .sf-section { padding: 16px 18px; }
  .sf-stats-section { padding: 14px 18px; }
  .sf-stats-row { grid-template-columns: repeat(2, 1fr); }
  .sf-stats-row > div { padding: 10px 8px; }
  .sf-stats-row > div b { font-size: 22px; }
  .sf-row-buttons { gap: 8px; }
  .sf-row-buttons .primary-btn,
  .sf-row-buttons .ghost-btn,
  .sf-row-buttons .danger-btn { font-size: 12px; padding: 9px 14px; }
  .sf-backup-row { grid-template-columns: 1fr auto; gap: 8px; }
  .sf-backup-meta { grid-column: 1 / -1; }
  .sf-rev-row { grid-template-columns: 1fr auto; gap: 8px; }
  .sf-rev-meta { grid-column: 1 / -1; }
  .sf-rev-counts { gap: 8px; font-size: 11px; }

  /* category pills/tag pills */
  .d-pr-cat-pills { gap: 4px; }
  .d-pr-cat-pills button { font-size: 10.5px; padding: 5px 10px; }
  .d-filters .tag-pill { font-size: 10px; padding: 3px 7px; }

  /* картинки-обложки в карточках — нормальный touch target */
  .b-img-cover { -webkit-tap-highlight-color: transparent; }
}

/* ════════════════════════════════════════════════════════════════
   ≤ 420px — SMALL MOBILE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
  .meta-bar { padding: 6px 10px; gap: 6px; }
  .meta-bar .brand-kanji { font-size: 18px; }
  .screen-tabs button { padding: 5px 9px; font-size: 11.5px; }

  .d-rd-hero .head h1 { font-size: 24px; }
  .d-pr-head h1 { font-size: 28px; }
  .d-qr-head .title { font-size: 30px; }
  .d-dh-hero .card.big .v { font-size: 36px; }
  .d-page-l h2 { font-size: 22px; }

  .d-rd-progress { grid-template-columns: 1fr 1fr; }

  /* кнопки в подвале формы — на всю ширину */
  .mf-foot { flex-direction: column; align-items: stretch; }
  .mf-foot .spacer { display: none; }
  .mf-foot button,
  .mf-foot .primary-btn,
  .mf-foot .ghost-btn,
  .mf-foot .danger-btn { width: 100%; justify-content: center; }
}