/* ============================================================================
   responsive.css — site-wide ADAPTIVE layer for allpick.

   Desktop (>= 901px) is 100% untouched: the fixed 1920px proportional zoom
   canvas keeps working exactly as before. Everything in this file lives inside
   `@media (max-width: 900px)` (plus two hidden-by-default helpers above it), so
   wide screens never see a single rule from here.

   At <= 900px the shell becomes a real fluid layout:
     • the 1920 zoom canvas is switched off (real device pixels)
     • the left rail turns into an off-canvas drawer behind a top app bar
     • desktop grids (match rows, tables) reflow into single-column cards
     • iOS/Android safe areas are respected (env() = 0 on the desktop web)

   Works in a normal mobile browser AND inside the Capacitor app. The app adds
   only native behaviour (status bar, offline, push) via mobile.js.
   All UI text stays English (frontend-english-only).
   ============================================================================ */

/* Hidden by default — only revealed inside the breakpoint below. */
.mtopbar   { display: none; }
.rail-scrim{ display: none; }

/* =====================  TABLET / PHONE  (<= 900px)  ========================= */
@media (max-width: 900px) {

  /* ---- 1. switch off the 1920 logical canvas -> real device pixels -------- */
  html, body {
    height: auto; min-height: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }
  .shell        { zoom: 1 !important; display: block; height: auto; overflow: visible; }
  .content-anon { zoom: 1 !important; height: auto; }
  .main         { display: block; min-width: 0; overflow: visible; }
  .content      { overflow: visible; padding: 14px 12px calc(20px + env(safe-area-inset-bottom)); }

  /* ---- 2. mobile top app bar --------------------------------------------- */
  .mtopbar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 60;
    padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
    background: var(--rail, #0d1219);
    border-bottom: 1px solid var(--hairline, #1c2430);
  }
  .mtopbar .burger {
    width: 38px; height: 38px; border: 0; background: transparent;
    color: var(--text, #eef1f6); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  .mtopbar .burger svg { width: 24px; height: 24px; }
  .mtopbar .mlogo {
    display: flex; align-items: center; gap: 9px;
    font-weight: 800; font-size: 17px; letter-spacing: -.02em;
    color: var(--text, #eef1f6); text-decoration: none;
  }
  .mtopbar .mlogo img { width: 26px; height: 26px; object-fit: contain; background: transparent; }
  .mtopbar .mlogo .dot { color: var(--accent, #16c784); }

  /* ---- 3. left rail -> off-canvas drawer --------------------------------- */
  .rail {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(84vw, 300px);
    transform: translateX(-100%);
    transition: transform .22s ease;
    z-index: 130;
    box-shadow: 0 0 40px rgba(0, 0, 0, .55);
    padding-top: calc(14px + env(safe-area-inset-top));
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .rail.open { transform: none; }
  .rail-scrim {
    display: block; position: fixed; inset: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
    z-index: 120;
  }
  .rail-scrim.show { opacity: 1; visibility: visible; }

  /* ---- 4. reflow the match-row grid into cards --------------------------- */
  /* desktop grid is `34px 230px 630px 58px 54px 90px`. On mobile: hide the
     table header row, and re-lay each match row as a tidy card.              */

  /* hide the desktop table header (Type/Matchup/Draft… + "Show bans").
     Two separate rules so browsers without :has() still honour .mhead.       */
  .mrow.mhead { display: none !important; }
  .mrow:has(.showbans) { display: none !important; }

  .mrow {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "cat   teams teams"
      "draft draft draft"
      "res   dur   date";
    gap: 8px 10px;
    align-items: center;
    width: auto !important;
    padding: 12px !important;
    margin: 0 0 8px;
    border-radius: 12px;
    background: var(--panel, #111722);
    border: 1px solid var(--hairline, #1c2430);
  }
  .mrow > .cat { grid-area: cat; align-self: start; }
  .mrow > .mrow-teams {
    grid-area: teams; align-self: start;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-weight: 700; font-size: 15px; min-width: 0;
  }
  .mrow > .mrow-teams .vs { color: var(--text-faint, #697384); font-weight: 600; font-size: 12px; }
  .mrow > .mrow-draft {
    grid-area: draft;
    display: flex; flex-wrap: nowrap; align-items: center; gap: 4px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .mrow > .mrow-draft .vsq { color: var(--text-faint, #697384); margin: 0 6px; flex: none; }
  .mrow > .res  { grid-area: res;  justify-self: start; }
  .mrow > .dur  { grid-area: dur;  justify-self: center; color: var(--text-mute, #8a94a3); font: 600 12px var(--mono, ui-monospace, monospace); }
  .mrow > .date { grid-area: date; justify-self: end;    color: var(--text-faint, #697384); font: 600 12px var(--mono, ui-monospace, monospace); }

  /* ---- 5. wide tables scroll sideways instead of breaking ---------------- */
  table {
    display: block; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }

  /* ---- 6. common desktop grids collapse to one column -------------------- */
  .pres-grid { grid-template-columns: 1fr; }

  /* ---- 7. right slide-in match drawer -> full screen --------------------- */
  .mdrawer {
    width: 100vw !important; max-width: 100vw !important;
    padding-top: calc(14px + env(safe-area-inset-top));
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  /* ---- 8. type & touch tune-ups ------------------------------------------ */
  h1 { font-size: 20px; }
  h2 { font-size: 16px; }
  .content > * { max-width: 100%; }
  .btn, button { min-height: 40px; }
  a, button { -webkit-tap-highlight-color: transparent; }
}

/* =====================  PHONE-ONLY tweaks (<= 560px)  ====================== */
@media (max-width: 560px) {
  .mtopbar .mlogo .word-hide { display: none; }   /* logo mark only on small phones */
}

/* =====================  NATIVE-APP niceties  ============================== */
/* Applied only inside the Capacitor shell (html.native, set by base.html).   */
html.native .mtopbar { padding-top: calc(10px + env(safe-area-inset-top)); }

/* Offline banner + "save offline" FAB are injected by mobile.js (native).    */
.m-offline-bar {
  position: fixed; left: 0; right: 0; top: 0;
  padding: calc(env(safe-area-inset-top) + 6px) 8px 6px;
  background: #7a1f1f; color: #fff; text-align: center;
  font: 600 12px var(--mono, ui-monospace, monospace);
  z-index: 250; transform: translateY(-120%); transition: transform .2s ease;
}
.m-offline-bar.show { transform: translateY(0); }
.m-save-fab {
  position: fixed; right: 14px; bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 210; border: 0; border-radius: 22px;
  background: var(--accent, #16c784); color: #06231a;
  font: 700 13px var(--mono, ui-monospace, monospace);
  padding: 10px 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
}
.m-save-fab.saved { background: #23303d; color: var(--accent, #16c784); }