/* ============================================================
   Responsive layout (tablet + desktop).
   Loaded LAST. Phones (< 768px) are untouched: every rule below sits
   inside a min-width media query, so the mobile layout stays exactly
   as it was. The old 640px cap on the shell/header is replaced by
   --shell-w, which grows with the screen.
   ============================================================ */
:root { --shell-w: 640px; }

/* ---------- Tablet: 768px and up ---------- */
@media (min-width: 768px) {
  :root { --shell-w: 960px; }
  .app-shell { max-width: var(--shell-w); padding-left: 28px; padding-right: 28px; }
  .app-header { max-width: var(--shell-w); padding-left: 28px; padding-right: 28px; }
  .bottom-nav { max-width: 620px; }
  .sk-sheet { max-width: 760px; }

  /* Topic cards: as many columns as fit instead of a fixed 2 */
  .tp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
  .mg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }

  /* Flash card + test + settings stay in a readable column, centred inside the wider page */
  #view-daily, #view-settings { max-width: 760px; margin-inline: auto; }
  #view-test { max-width: 880px; margin-inline: auto; }
}

/* ---------- Desktop: 1100px and up ---------- */
@media (min-width: 1100px) {
  :root { --shell-w: 1240px; }
  .app-shell { padding-left: 36px; padding-right: 36px; }
  .app-header { padding-left: 36px; padding-right: 36px; }

  /* HOME on desktop: every panel gets its own full-width row, in this order:
       1 today's progress + your words (hero)   2 study circle   3+ topics etc. */
  #home-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  #home-content > * { margin: 0; min-width: 0; }
  #home-content > .hm-hero  { grid-row: 1; }
  #home-content > .fr-card  { grid-row: 2; }
  #home-content > .hm-learned { grid-row: 3; }
  #home-content > .hm-circle-slot { display: none; }
  /* boot spinner / empty states stay centred across both columns */
  #home-content > .boot-loading { grid-row: auto; }

  .tp-list { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
  .mg-list { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }

  #view-daily { max-width: 820px; }
  #view-manage { max-width: none; }
  .flip-card { height: clamp(280px, 44vh, 400px); }
}

/* ---------- Large desktop: 1500px and up ---------- */
@media (min-width: 1500px) {
  :root { --shell-w: 1400px; }
}

/* Mouse users: a hover cue on the clickable Home cards */
@media (hover: hover) and (min-width: 768px) {
  .fr-card, .tp-row, .hm-learned { transition: transform .15s ease, box-shadow .15s ease; }
  .fr-card:hover, .tp-row:hover, .hm-learned:hover { transform: translateY(-2px); }
}