/* OP-026-local: mobile-only public refinement; the accepted tablet/desktop cascade stays untouched. */
@media (max-width: 560px) {
  /* Language remains in Menu; mobile uses the familiar top-header reading order. */
  .masthead .op022a-language { display: none; }
  .masthead {
    top: max(var(--chrome-gap), env(safe-area-inset-top));
    bottom: auto;
  }
  .masthead__in {
    padding-inline-start: max(var(--chrome-gap), env(safe-area-inset-left));
    padding-inline-end: max(var(--chrome-gap), env(safe-area-inset-right));
  }
  body {
    padding-block-start: calc(var(--chrome-h, 48px) + var(--chrome-gap) * 2 + env(safe-area-inset-top));
    padding-block-end: 0;
  }

  /* Long sheets begin below the header and keep their close control in the reading origin. */
  .sheet__body {
    top: calc(var(--chrome-h, 48px) + var(--chrome-gap) * 2 + env(safe-area-inset-top));
    bottom: max(var(--chrome-gap), env(safe-area-inset-bottom));
  }
  .sheet__head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
  }
  .sheet__pad { padding: var(--s4); }
  .sheet__group + .sheet__group { margin-top: var(--s8); }
  .sheet__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--n200);
    border: 1px solid var(--n200);
  }
  .sheet__list li,
  .sheet__list li:last-child { min-width: 0; border: 0; background: var(--surface); }
  .sheet__link {
    min-block-size: var(--s12);
    padding: var(--s3);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--s1);
    font-size: var(--t-base);
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .sheet__link .mono { flex: none; font-size: var(--t-xs); white-space: normal; }
  .sheet__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s8) var(--s4);
    margin-top: var(--s10);
    padding-top: var(--s8);
  }
  .sheet__cols > :last-child { grid-column: 1 / -1; }
  .sheet__cols .colophon__list { margin-top: var(--s3); }

  /* The language index stays named while using the available width efficiently. */
  .langs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lang {
    min-width: 0;
    min-block-size: var(--s12);
    padding: var(--s3);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s1);
    text-align: start;
  }
  .lang__code { flex: none; }
  .lang__name { overflow-wrap: anywhere; }

  /* Mobile category choices expose the complete set instead of hiding it in a rail. */
  .op022a-categories,
  .op024-category-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .op022a-categories .control,
  .op024-category-links .control { min-width: 0; min-block-size: 44px; justify-content: center; }
  .filters__stack {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: visible;
    background: var(--n200);
    border: 1px solid var(--n200);
  }
  .filters__stack > * + * { margin: 0; }
  .filters__stack .box { min-width: 0; border: 0; padding-inline: var(--s3); }

  .op024-roster-results > .browse__bar { align-items: stretch; }
  .op024-order {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    inline-size: 100%;
  }
  .op024-order .mono { grid-column: 1 / -1; width: auto; }
  .op024-order .control { width: 100%; justify-content: center; }

  /* The sheet enters from the same top edge as its navigation trigger. */
  .sheet[data-motion-state="closed"] .sheet__body { transform: translateY(-12px); }

  @media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: no-preference) {
    .masthead .box {
      transition: background-color var(--d-base) var(--ease-out), color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
    }
    .sheet__link { transition: color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out); }
    .lang { transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out); }
    .control { transition: color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out); }
    .masthead .box:active,
    .sheet__link:active,
    .lang:active,
    .control:active { transform: scale(.98); }
  }
}
