/* Mobile layout for the site (iPhone widths), on top of base.css.
   Each method is a card; filters open as a bottom sheet; picks collect in a bar
   at the bottom (from option A). Details push in full-screen and compare is a
   three-column grid (from option B). */
@media (max-width: 640px) {
  .topbar { position: static; }
  .compare-group { display: none; }

  /* Sticky toolbar under the title */
  .ma-toolbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; margin: 0 -16px 4px; padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .ma-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: 700 var(--fs-small)/1 var(--body); }
  .ma-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--lamp); color: var(--lamp-ink); display: inline-grid; place-items: center; font-size: var(--fs-label); }
  .ma-sort select { height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: 700 var(--fs-small) var(--body); max-width: 170px; }
  .ma-count { margin-left: auto; color: var(--text-3); font-size: var(--fs-small); white-space: nowrap; }
  .main-head .count { display: none; }

  /* Table → cards */
  .grid-wrap { border: 0; background: transparent; border-radius: 0; overflow: visible; }
  .grid { min-width: 0; display: block; }
  .grid colgroup, .grid thead { display: none; }
  .grid tbody { display: block; }
  .grid tbody tr {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) 36px; column-gap: 12px; row-gap: 10px;
    grid-template-areas: 'rank name name sel' '. start results results' '. cry ev ev' '. sum sum sum';
    padding: 16px 0; border-bottom: 1px solid var(--line-soft);
  }
  .grid tbody tr > * { padding: 0 !important; border: 0 !important; background: transparent !important; text-align: left !important; }
  .grid tbody tr:hover > * { background: transparent; }
  .grid tbody tr.is-open { background: var(--lamp-soft); }
  .grid tbody tr:has(.cmp-check:checked) { box-shadow: inset 3px 0 0 var(--lamp); margin-left: -16px; padding-left: 16px; }
  .grid tbody tr:has(.cmp-check:checked) > .c-sel { box-shadow: none; }
  .c-rank { grid-area: rank; padding-top: 3px !important; }
  .c-name { grid-area: name; }
  .c-name a { font-size: var(--fs-read); }
  .c-sel { grid-area: sel; justify-self: end; }
  .c-sel input { margin-top: 2px; }
  .c-start { grid-area: start; }
  .c-results { grid-area: results; }
  .c-start::before, .c-results::before { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
  .c-start::before { content: 'Starts'; }
  .c-results::before { content: 'Results in'; }
  .c-cry { grid-area: cry; }
  .c-ev { grid-area: ev; }
  .c-sum { grid-area: sum; }
  .clamp { -webkit-line-clamp: 3; }
  /* No hover on touch: show the labels beside the icons. */
  .hint { margin: 0; padding: 0; gap: 8px; color: var(--text-2); font-size: var(--fs-small); }
  .hint::after { display: none; }
  .hint { align-items: flex-start; }
  .hint .meter, .hint .dots { margin-top: 3px; }
  .hint .sr-only { position: static; width: auto; height: auto; clip: auto; white-space: normal; }

  /* Filters as a bottom sheet */
  .rail { display: block; position: fixed; inset: auto 0 0 0; z-index: 75; max-height: 85vh; border: 0; border-radius: 18px 18px 0 0; background: var(--raised); box-shadow: 0 -12px 40px rgb(0 0 0 / 0.35); transform: translateY(105%); visibility: hidden; transition: transform 0.25s ease, visibility 0.25s; }
  .rail.is-open { transform: none; visibility: visible; }
  .rail-inner { position: static; max-height: calc(85vh - 20px); padding: 4px 20px 0; gap: 20px; }
  .ma-grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 8px auto 6px; }
  .rail-head { margin: 0; font-size: var(--fs-m); }
  .opt { min-height: 44px; font-size: var(--fs-ui); }
  .ma-sheet-foot { position: sticky; bottom: 0; margin: 4px -20px 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--raised); border-top: 1px solid var(--line); }
  .ma-show { width: 100%; height: 48px; border: 0; border-radius: 12px; background: var(--lamp); color: var(--lamp-ink); font: 700 var(--fs-ui)/1 var(--body); }
  body.ma-locked { overflow: hidden; }

  .ma-scrim { display: none; position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / 0.5); }
  .ma-rail-scrim { z-index: 74; }
  .rail.is-open + .ma-scrim { display: block; }

  /* Compare bar */
  .ma-cbar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--raised); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgb(0 0 0 / 0.3); }
  .ma-cbar-text { min-width: 0; flex: 1; display: grid; }
  .ma-cbar-text strong { font-size: var(--fs-small); }
  .ma-cbar-text span { color: var(--text-3); font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ma-cbar-clear { border: 0; background: transparent; color: var(--text-2); font: 400 var(--fs-small) var(--body); height: 44px; padding: 0 4px; }
  .ma-cbar-go { height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--lamp); color: var(--lamp-ink); font: 700 var(--fs-small)/1 var(--body); }
  .ma-cbar-go:disabled { background: var(--line); color: var(--text-3); }
  body.ma-has-bar .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

  /* Method page = the Detail view: same header (back, up/down, position) and surface,
     so landing from search looks exactly like opening a card. */
  body.page-method { background: var(--raised); }
  .page-method .topbar { position: sticky; top: 0; z-index: 40; flex-wrap: nowrap; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; background: var(--raised); border-bottom: 1px solid var(--line); }
  .page-method .brand, .page-method .topbar-actions { display: none; }
  .page-method .topbar-back { order: 0; flex: 0 0 auto; padding: 0 8px 0 2px; font-size: 0; color: var(--lamp); text-decoration: none; }
  .page-method .topbar-back::before { content: '‹  Methods'; font: 700 var(--fs-ui)/1 var(--body); white-space: pre; }
  .page-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
  .page-nav .icon-btn { color: var(--text-2); text-decoration: none; }
  .page-nav span.icon-btn { opacity: 0.35; }
  .page-method .main-detail { padding: 20px 16px 0; }
  .page-method .main-detail .detail h1 { font-size: var(--fs-l); }

  /* Details push in from the right, full screen, with a back button. */
  .drawer { inset: 0; width: 100%; z-index: 85; box-shadow: none; transform: translateX(0); transition: transform 0.25s ease; }
  .drawer.is-closing { transform: translateX(100%); }
  .drawer-head { padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; gap: 8px; }
  #drawer-close { order: -1; display: inline-flex; align-items: center; width: auto; height: 40px; border: 0; padding: 0 8px 0 2px; font-size: 0; color: var(--lamp); }
  #drawer-close::before { content: '‹  Methods'; font: 700 var(--fs-ui)/1 var(--body); white-space: pre; }
  .drawer-nav { margin-left: auto; }
  .drawer-full { display: none; } /* details already fill the screen and own the URL */

  /* Three-column compare */
  .mb-cmp { display: grid; }
  .mb-head, .mb-cells { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; }
  .mb-head { position: sticky; top: 0; z-index: 2; padding: 12px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
  .mb-col { display: grid; gap: 6px; align-content: start; }
  .mb-col a { color: var(--text); text-decoration: none; font: 400 var(--fs-ui)/1.2 var(--display); }
  .mb-col .link-btn { font-size: var(--fs-small); }
  .mb-col .stance { justify-self: start; white-space: normal; margin-top: 0; }
  .mb-add select { width: 100%; height: 40px; border: 1px dashed var(--line); border-radius: 8px; background: transparent; color: var(--text-2); padding: 0 6px; font-size: var(--fs-small) !important; }
  .mb-label { padding: 14px 0 6px; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); border-top: 1px solid var(--line-soft); }
  .mb-head + .mb-label { border-top: 0; }
  .mb-cells { padding-bottom: 12px; font-size: var(--fs-small); color: var(--text-2); }
  .mb-cells strong { color: var(--text); }
  .mb-cells > div { display: grid; gap: 4px; align-content: start; justify-items: start; }
  .mb-cells ol, .mb-cells ul { margin: 0; padding-left: 14px; display: grid; gap: 4px; }
  .mb-cells .pros, .mb-cells .cons { padding-left: 0; font-size: var(--fs-small); }
  .mb-win { font-style: normal; font-weight: 700; color: var(--lamp); }
}