/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — tablet + mobile overrides
   Loaded last so it wins cascade ties. Touches the major layouts
   from every view: shell, masthead, tabs, scrolls, sections,
   techniques (ryuha), weapons glossary, buki waza accordion,
   dictionary, kyūshō, flashcards, drawer, tweaks, footer.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 960px) ────────────────────────────────────────── */
@media (max-width: 960px) {
  .app { padding: 28px 24px 80px; }

  /* Masthead: stack seal + title, full-width search */
  .mast {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "seal title"
      "search search"
      "pdf pdf";
    gap: 16px 18px;
    padding-bottom: 18px;
    margin-bottom: 24px;
  }
  .mast__logo { grid-area: seal; }
  .mast__title { grid-area: title; }
  .mast__actions {
    grid-area: search;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .mast__search {
    min-width: 0;
    width: 100%;
  }
  .mast__pdf {
    grid-area: pdf;
    justify-self: start;
  }
  .mast__name { font-size: 24px; }
  .mast__sub { font-size: 11px; letter-spacing: 0.14em; }

  /* View tabs — horizontal scroll strip */
  .view-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .view-tabs::-webkit-scrollbar { display: none; }
  .view-tabs button {
    padding: 12px 16px;
    font-size: 14px;
    flex-shrink: 0;
  }

  /* Scrolls grid → one column when tight */
  .scrolls { grid-template-columns: repeat(2, 1fr); }

  /* Scroll body: stack intro + sections */
  .scroll-body {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Section items grid */
  .section__body { padding: 0 16px 18px 16px; }
  .section__items {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  }

  /* Dictionary: list + detail stack */
  .dict__layout { grid-template-columns: 1fr !important; }
  .dict__detail { position: static; }

  /* Kyūshō chart: full-width frame, stacked tools */
  .kyusho__head { grid-template-columns: 1fr !important; gap: 18px; }
  .kyusho__tools { flex-wrap: wrap; gap: 10px; }
  .kyusho__workspace { grid-template-columns: 1fr; }
  .kyusho__study { position: static; min-height: 0; }

  /* Techniques (ryuha) */
  .tech__head { grid-template-columns: 1fr !important; gap: 14px; }
  .tech__tools { flex-wrap: wrap; }
  .ryuha__body { margin-left: 16px !important; padding: 18px 16px !important; }

  /* Weapons glossary */
  .wp { padding: 0 24px; }
  .wp__toolbar { gap: 10px; }
  .wp__search { min-width: 0; flex: 1 1 200px; }
  .wp__grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

  /* Weapon detail drawer: fuller width */
  .wp-detail { width: min(480px, 100vw); padding: 28px 24px 32px; }

  /* Buki Waza accordion */
  .bw-card__head {
    grid-template-columns: 32px 1fr auto 18px !important;
    gap: 14px;
    padding: 16px 18px;
  }
  .bw-card__kanji { font-size: 30px; }
  .bw-card__name { font-size: 17px; }
  .bw-card__body { padding: 18px 18px 22px; }
  .bw-card__groups { gap: 22px; }

  /* Techniques lore: stack */
  .ryuha__lore {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .ryuha__lore-side {
    padding-left: 0 !important;
    padding-top: 16px !important;
    border-left: none !important;
    border-top: 1px solid var(--paper-edge);
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 16px 28px !important;
  }

  /* Drawer (technique detail) */
  .drawer {
    width: min(480px, 100vw);
  }
  .drawer__head { padding: 22px 22px 16px; }
  .drawer__body { padding: 22px 22px 32px; }
  .drawer__name { font-size: 24px; }

  /* Tweaks panel */
  .tweaks {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
    width: auto;
  }
}

/* ── Mobile (≤ 640px) ────────────────────────────────────────── */
@media (max-width: 640px) {
  .app { padding: 20px 14px 72px; }

  /* Masthead: more compact, seal smaller */
  .mast {
    gap: 12px 14px;
    margin-bottom: 20px;
  }
  .mast__logo { width: 58px; height: 58px; }
  .mast__name { font-size: 20px; letter-spacing: 0; }
  .mast__kanji { font-size: 12px; letter-spacing: 5px; }
  .mast__sub {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-wrap: balance;
  }
  .mast__search { padding: 9px 12px; }
  .mast__search input { font-size: 16px; /* prevents iOS zoom */ }
  .mast__pdf { font-size: 11px; padding: 7px 12px; }
  .mast__pdf span { font-size: 11px; }

  /* Primary navigation: tabs become an off-canvas menu */
  .view-tabs { display: none; }

  .mobile-view-nav {
    display: block;
    margin-bottom: 26px;
  }

  .mobile-view-nav__trigger {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 10px 14px 10px 16px;
    border: 1px solid var(--paper-edge);
    border-radius: 2px;
    background: rgba(255,255,255,0.32);
    text-align: left;
    cursor: pointer;
  }

  .mobile-view-nav__trigger:active { background: rgba(178,53,28,0.08); }

  .mobile-view-nav__trigger-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mobile-view-nav__eyebrow {
    color: var(--vermillion);
    font-family: var(--ff-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.18em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .mobile-view-nav__current {
    overflow: hidden;
    color: var(--ink);
    font-family: var(--ff-serif);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-view-nav__menu-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 0 9px;
    border-radius: 50%;
    background: var(--ink);
  }

  .mobile-view-nav__menu-icon span {
    display: block;
    height: 1px;
    background: var(--paper);
  }

  .mobile-nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(20,17,13,0.56);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mobile-nav-scrim.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-nav-drawer {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1201;
    width: min(88vw, 360px);
    flex-direction: column;
    background-color: var(--paper);
    background-image: var(--paper-tex);
    box-shadow: -18px 0 46px rgba(20,17,13,0.24);
    transform: translateX(102%);
    visibility: hidden;
    transition:
      transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s linear 220ms;
  }

  .mobile-nav-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    transition:
      transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0s;
  }

  .mobile-nav-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: max(22px, env(safe-area-inset-top)) 18px 18px;
    border-bottom: 1px solid var(--paper-edge);
  }

  .mobile-nav-drawer__kicker {
    margin-bottom: 3px;
    color: var(--vermillion);
    font-family: var(--ff-kanji);
    font-size: 11px;
    letter-spacing: 0.32em;
  }

  .mobile-nav-drawer__head h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--ff-serif);
    font-size: 25px;
    font-weight: 500;
    line-height: 1;
  }

  .mobile-nav-drawer__close {
    width: 44px;
    height: 44px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--paper-edge);
    border-radius: 50%;
    background: rgba(255,255,255,0.28);
    color: var(--ink-mute);
    cursor: pointer;
  }

  .mobile-nav-drawer__close:active { background: rgba(178,53,28,0.08); }

  .mobile-nav-drawer__links {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 12px;
  }

  .mobile-nav-drawer__links button {
    width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid rgba(107,95,78,0.2);
    background: transparent;
    color: var(--ink-mute);
    text-align: left;
    cursor: pointer;
  }

  .mobile-nav-drawer__links button:last-child { border-bottom: 0; }
  .mobile-nav-drawer__links button:active { background: rgba(255,255,255,0.38); }
  .mobile-nav-drawer__links button.on {
    border-radius: 2px;
    background: rgba(178,53,28,0.09);
    color: var(--ink);
  }

  .mobile-nav-drawer__index {
    color: var(--ink-faint);
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .mobile-nav-drawer__label {
    min-width: 0;
    font-family: var(--ff-serif);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.2;
  }

  .mobile-nav-drawer__kanji {
    color: var(--ink-faint);
    font-family: var(--ff-kanji);
    font-size: 21px;
    line-height: 1;
  }

  .mobile-nav-drawer__links button.on .mobile-nav-drawer__index,
  .mobile-nav-drawer__links button.on .mobile-nav-drawer__kanji { color: var(--vermillion); }

  .mobile-nav-drawer__foot {
    padding: 15px 18px max(18px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--paper-edge);
    color: var(--ink-faint);
    font-family: var(--ff-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* Scrolls: single column cards */
  .scrolls { grid-template-columns: 1fr !important; gap: 14px; }
  .scroll-card { padding: 18px 16px; }

  /* Section headers */
  .section__head { padding: 12px 14px !important; }
  .section__body { padding: 14px 14px 16px !important; }
  .section__items { grid-template-columns: 1fr !important; gap: 6px; }

  /* Kyūshō */
  .kyusho__title { font-size: 24px; }
  .kyusho__lede { font-size: 14px; }
  .kyusho__tools .seg button { padding: 7px 10px; font-size: 11px; }
  .kyusho__controls { padding: 10px; gap: 8px; }
  .kyusho__search { flex-basis: 100%; min-width: 100%; }
  .kyusho__filter { flex: 1 1 auto; }
  .kyusho__filter button { flex: 1 1 auto; }
  .kyusho__result-count { margin-left: auto; }
  .kyusho__frame { max-height: 66vh; }
  .kyusho__detail, .kyusho__empty { padding: 18px 16px; }

  /* Techniques */
  .tech__head { padding: 16px 14px; }
  .ryuha__head {
    grid-template-columns: auto 1fr !important;
    padding: 14px !important;
    gap: 12px !important;
  }
  .ryuha__kanji { font-size: 36px !important; }
  .ryuha__head-right {
    grid-column: 1 / -1 !important;
    justify-content: flex-start !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .ryuha__body { margin-left: 10px !important; padding: 16px 12px !important; }
  .ryuha__lore-side {
    flex-direction: column !important;
    gap: 14px !important;
  }
  .ryuha__lore-text { font-size: 14.5px; }

  /* Level + item */
  .level__head { padding: 10px 4px; gap: 8px; }
  .item { padding: 10px 12px; }
  .item__name { font-size: 14.5px; }

  /* Dictionary */
  .dict__head { padding: 16px 14px; }
  .dict__title { font-size: 24px; }
  .dict__list { padding: 0; }
  .dict__row { padding: 12px 10px; }

  /* Q&A / Flashcards */
  .qna { padding: 0 4px; }
  .qna__head { padding: 18px 16px; }
  .qna__title { font-size: 22px; }
  .qna__modules { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
  .qna__module { padding: 10px 8px; font-size: 12px; }
  .qna__stage {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    gap: 10px;
  }
  .qna__stage .nav { display: none !important; }
  .flip { min-height: 360px; }
  .flip__q { font-size: 20px !important; }
  .flip__a { font-size: 14.5px !important; }
  .flip__qmark, .flip__amark { font-size: 160px !important; right: 14px !important; }
  .flip__idx { font-size: 11px; }

  /* Weapons glossary */
  .wp { padding: 0 14px; margin: 20px auto 48px; }
  .wp__title { font-size: 22px; }
  .wp__lede { font-size: 14px; }
  .wp__toolbar { flex-direction: column; align-items: stretch; }
  .wp__class-toggle { align-self: flex-start; }
  .wp__chips { gap: 6px; }
  .wp__chip { font-size: 12px; padding: 7px 10px; }
  .wp__cat-head {
    grid-template-columns: auto 1fr !important;
    gap: 12px;
  }
  .wp__cat-kanji { font-size: 32px; }
  .wp__cat-name { font-size: 18px; }
  .wp__cat-count { grid-column: 2 / -1; justify-self: end; }
  .wp__grid { grid-template-columns: 1fr; }
  .wp-card { gap: 10px; padding: 12px; }
  .wp-card__icon { width: 100%; height: 160px; }
  .wp-card__icon svg { width: 88px; height: 88px; }
  .wp-card__name { font-size: 15px; }
  .wp-card__desc { font-size: 13px; }

  /* Weapon detail as bottom sheet */
  .wp-detail {
    width: 100vw;
    padding: 24px 18px 30px;
  }
  .wp-detail__hero { grid-template-columns: 68px 1fr; gap: 14px; }
  .wp-detail__icon { width: 68px; height: 68px; }
  .wp-detail__icon svg { width: 52px; height: 52px; }
  .wp-detail__name { font-size: 20px; }

  /* Buki Waza */
  .bw { padding: 0; }
  .bw__head {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 18px 0 14px;
  }
  .bw__head-count { text-align: left; }
  .bw__title { font-size: 24px; }
  .bw__lede { font-size: 13.5px; }
  .bw__toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .bw__toolbar-status { margin-left: 0; flex-basis: 100%; }
  .bw-card__head {
    grid-template-columns: auto 1fr auto !important;
    gap: 12px !important;
    padding: 14px 14px !important;
  }
  .bw-card__num { display: none !important; }
  .bw-card__kanji { font-size: 28px !important; }
  .bw-card__name { font-size: 16px !important; }
  .bw-card__weapon { font-size: 9.5px; letter-spacing: 0.1em; }
  .bw-card__stats { display: none !important; }
  .bw-card__body { padding: 16px 14px 20px !important; }
  .bw-card__groups { grid-template-columns: 1fr !important; gap: 18px; }

  /* Technique drawer full-screen on phone */
  .drawer {
    width: 100vw !important;
  }
  .drawer__head { padding: 20px 16px 14px; }
  .drawer__body { padding: 20px 16px 28px; }
  .drawer__name { font-size: 20px; }
  .drawer__nav { grid-template-columns: 1fr; gap: 8px; }
  .drawer__nav .next { text-align: left; }

  /* Footer */
  .foot {
    margin-top: 48px;
    gap: 10px 14px;
    justify-content: center;
    text-align: center;
  }
  .foot > span:not(.foot__credit):not(.foot__disclaimer) {
    flex-basis: 100%;
    text-align: center;
  }
  .foot__disclaimer {
    font-size: 12px;
    padding-top: 12px;
    margin-top: 10px;
  }

  /* Tweaks panel */
  .tweaks {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 14px;
    max-height: 65vh;
    overflow-y: auto;
  }

  /* Prevent accidental horizontal overflow */
  html, body { overflow-x: hidden; }
  img, svg { max-width: 100%; }
}

/* ── Small mobile (≤ 380px) ──────────────────────────────────── */
@media (max-width: 380px) {
  .app { padding: 16px 10px 64px; }
  .mast__name { font-size: 18px; }
  .mast__logo { width: 52px; height: 52px; }
  .mobile-nav-drawer { width: min(92vw, 340px); }
  .wp-card__icon { width: 100%; height: 160px; }
  .bw-card__kanji { font-size: 24px !important; }
}

/* ── Touch tweaks ────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Ensure hit targets are comfortable on touch */
  .item,
  .level__head,
  .section__head,
  .wp-card,
  .bw-card__head,
  .view-tabs button,
  .mobile-view-nav__trigger,
  .mobile-nav-drawer__links button,
  .dict__row {
    min-height: 44px;
  }
  /* Kill hover-dependent backgrounds that stick on touch */
  .wp-card:hover,
  .bw-card:hover,
  .scroll-card:hover {
    background: var(--paper);
  }
}

/* Shared keyboard and motion accessibility safeguards, kept last in cascade. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--vermillion) !important;
  outline-offset: 3px;
}

:where(.scroll-card__count, .section__idx, .section__count, .item__idx,
  .tech__stats, .ryuha__count, .ryuha__levels-ct, .qna__stats,
  .qna__counter, .flip__idx, .bw-card__num, .bw-card__stats, .bw-group__num) {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Buki Waza editorial chart on phones */
@media (max-width: 640px) {
  .bw-card__body { padding: 0 16px 22px !important; }
  .bw-card__masthead {
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 20px 0 16px;
  }
  .bw-card__edition { gap: 10px; }
  .bw-card__edition-num { font-size: 10px; }
  .bw-card__edition-rule { height: 32px; }
  .bw-card__edition-kanji { font-size: 34px; }
  .bw-card__masthead-name { font-size: 22px; }
  .bw-card__masthead-label { font-size: 9px; margin-top: 5px; }
  .bw-card__masthead-count { display: block; }
  .bw-card__masthead-count b { font-size: 26px; }
  .bw-card__feature {
    grid-template-columns: 1fr !important;
    gap: 8px;
    min-height: 0;
    padding: 16px 0 14px;
  }
  .bw-card__lede { font-size: 15px; max-width: 42ch; }
  .bw-card__source { margin-top: 12px; font-size: 8px; }
  .bw-card__art { height: 118px; justify-content: center; }
  .bw-card__art img { height: 108px; object-position: center; }
  .bw-card__enso { right: 30%; width: 132px; height: 132px; border-width: 8px; }
  .bw-card__mountains { right: 8%; bottom: 14px; width: 70%; }
  .bw-card__groups { grid-template-columns: 1fr !important; gap: 18px; padding-top: 18px; }
  .bw-group,
  .bw-group:nth-child(even),
  .bw-group:nth-child(odd) {
    padding: 0;
    border-left: 0;
  }
  .bw-group__label { font-size: 17px; }
  .bw-group__name { font-size: 15px; }
}

/* Weapon detail modal: keep the two-column reading order on tablets */
@media (max-width: 960px) {
  .wp-detail {
    width: min(760px, calc(100vw - 32px));
    padding: 30px 28px 34px;
  }
  .wp-detail__columns {
    grid-template-columns: minmax(240px, 40%) minmax(0, 1fr);
    gap: 28px;
  }
  .wp-detail__visual .wp-detail__icon { height: 300px; }
}

@media (max-width: 640px) {
  .wp-detail {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw !important;
    max-height: none;
    transform: none;
    padding: 26px 18px 30px !important;
    border-right: 0;
  }
  .wp-detail__columns {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .wp-detail__visual { position: static; }
  .wp-detail__visual .wp-detail__icon { height: 230px; }
  .wp-detail__visual .wp-detail__icon img { padding: 16px; }
  .wp-detail__content .wp-detail__head-text { padding-right: 30px; }
  .wp-detail__content .wp-detail__name { font-size: 26px; }
  .wp-detail__content .wp-detail__desc { font-size: 16px; }
}