/* responsive.css — phone and tablet corrections, shared by every page.
 *
 * The homepage comes from a Claude Design export laid out for a desktop window.
 * It already swaps its 268px rail for top tabs below 900px, but the rows inside
 * are built from fixed pixel columns: on a 375px screen the lesson list gave the
 * title 10px of width, so "Opening the book" wrapped one word per line and the
 * row stood 100px tall. The map pages are hand-written and mostly fluid, but a
 * three-column table cannot shrink below its content and pushed the page 36px
 * sideways.
 *
 * This is a correction layer, loaded last. It changes the desktop design in only
 * one place — an always-empty date column that was reserving 66px on every row.
 * !important is needed throughout because the design styles elements inline.
 */

/* ---------------------------------------------------------------- universal */

html { -webkit-text-size-adjust: 100%; }

/* Nothing may push the page sideways: on a phone that makes every vertical
   swipe feel like it is fighting the page. */
html, body { overflow-x: hidden; }

img, svg, video, canvas { max-width: 100%; }

/* A source filename such as
   Exp.-of-the-Morning-Evening-Adhkar-Sh.-Abdur-Razzaq-al-Badr.pdf
   is one 445px-wide token. On master.html it was being clipped, not wrapped. */
pre, code, kbd, samp { overflow-wrap: anywhere; }
p, li, td, th, dd, figcaption { overflow-wrap: break-word; }
/* master.html sets `#md code{white-space:nowrap}` — an ID selector, so it wins
   over a plain `code` rule, and that filename was cut off rather than wrapped. */
@media (max-width: 820px) { code { white-space: normal !important; } }

/* ------------------------------------------------------------------ tables */
/* A table of Arabic terms and their meanings will not shrink below its longest
   word. Give it its own scroll box rather than letting it widen the page — the
   map pages were pushing the document 36px sideways this way, and master.html
   84px, where body{overflow-x:hidden} then simply cut the text off. */
@media (max-width: 820px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13.5px;
  }
  table th, table td { padding: 9px 10px; }
}

/* --------------------------------------------------- map pages on a phone */
@media (max-width: 620px) {
  body > .wrap { padding-left: 14px; padding-right: 14px; }
  .wrap section { padding: 18px 16px; }
  .wrap h1 { font-size: 25px; line-height: 1.25; }

  /* the ▶ Listen / Transcript row under each lesson heading */
  .lsn-audio { gap: 10px; }
  .lsn-audio button, .lsn-audio a.la-tx { padding: 9px 14px; }

  /* [Page 38] citations and the class-only badges are set in 11px. Under RULE
     ZERO the page citation is the point of the badge — it has to be readable. */
  .pg, .board-tag { font-size: 12px; }
}

/* ============================================================== homepage ===
 * These hooks are added to the design's markup by build_site.py, which fails
 * the build if the markup it anchors to has moved.
 * ========================================================================= */

/* The lesson date is empty on every row — we do not have the class dates and
   will not invent them — yet it reserved 66px plus a gap. Reclaim it at every
   width, not only on phones. */
[data-sm="lesson-date"]:empty { display: none !important; }

@media (max-width: 700px) {
  /* Fixed columns came to ~290px of a 338px row, leaving the title 10px. */
  [data-sm="lesson-row"]   { gap: 11px !important; padding: 13px 15px !important; }
  [data-sm="lesson-num"]   { flex: 0 0 20px !important; font-size: 13px !important; }
  [data-sm="lesson-go"]    { display: none !important; }  /* the row itself opens */
  [data-sm="lesson-title"] { min-width: 0 !important; }

  /* 15s / 15s / 1x sat at 31px tall — under the 44px touch guidance. */
  [data-sm="transport"] button,
  [data-sm="transport"] a { min-height: 42px !important; }
}

/* Below 900px the design swaps its 268px rail for a scrolling row of top tabs.
   Those tabs are 31px tall — fine for a mouse, small for a thumb — and their
   count badges are set in 10.5px, which is under the size anything on a phone
   should be. */
@media (max-width: 700px) {
  header nav button,
  header nav + * button { min-height: 40px !important; }

  /* The design sets every size inline, so there is no rule to raise — these
     substring selectors are the only way to reach them. It sets text as small
     as 8.5px; on a phone nothing secondary should go below ~11.5px. */
  [style*="font-size:8.5px"],
  [style*="font-size:9.5px"],
  [style*="font-size:10px"],
  [style*="font-size:10.5px"],
  [style*="font-size:11px"] { font-size: 11.5px !important; }

  /* "All 57 →" and "Full library →" are 16px-tall text buttons. */
  [style*="font-size:12px"][style*="font-weight:700"] { padding: 6px 0 !important; }
}

/* Card grids ask for a 210–340px minimum track. Once page padding is taken out
   of a 375px screen that track no longer fits, and the grid overflows its
   container — on the dashboard the "Latest class recordings" card ran 58px past
   the right edge and its text was cut off.

   Collapsing to a single `1fr` is NOT enough: `1fr` means `minmax(auto, 1fr)`,
   and that `auto` minimum is the item's min-content width. The exam card holds a
   nested 210px-minimum grid, so its min-content was 441px and the track blew out
   to 441px regardless. It takes `minmax(0, 1fr)` plus `min-width:0` on the items
   to let them actually shrink. */
@media (max-width: 700px) {
  [style*="repeat(auto-fill"],
  [style*="repeat(auto-fit"] { grid-template-columns: minmax(0, 1fr) !important; }
  [style*="repeat(auto-fill"] > *,
  [style*="repeat(auto-fit"] > * { min-width: 0 !important; }
}

/* --------------------------------------------------------- touch targets */
/* pointer:coarse rather than a width query — an iPad in landscape is 1024px
   wide and still driven by a finger. */
@media (pointer: coarse) {
  .lsn-audio button,
  .lsn-audio a.la-tx { min-height: 40px; display: inline-flex; align-items: center; }
  .backbar a { display: inline-block; padding: 7px 2px; }
}