/* ═══════════════════════════════════════════
   responsive.css — Mobile-only supplements
   Load AFTER the page's primary stylesheet.
   All rules are inside @media blocks.
   Zero effect on desktop.
   FrenchWrite
═══════════════════════════════════════════ */

/* ────────────────────────────────────────
   1. TOOL NAV — single-row horizontal scroll
   .tool-header-nav inherits flex-wrap:wrap
   from base styles. That defeats overflow-x:
   auto because items stack vertically instead
   of scrolling. Force nowrap so the scrollable
   row works as intended.
──────────────────────────────────────────── */
@media (max-width: 640px) {
  .tool-header-nav {
    flex-wrap: nowrap;
  }
}

/* ────────────────────────────────────────
   2. CROSSWORD NAV — hide text labels on phones
   The crossword page uses .primary-nav where
   span children have no .nav-text class, so
   the existing display:none rule misses them.
   Four nav links with visible text overflow the
   56px header on narrow screens.
──────────────────────────────────────────── */
@media (max-width: 680px) {
  .primary-nav .nav-link > span,
  .primary-nav .nav-dropdown-toggle > span:first-of-type {
    display: none;
  }
}

/* ────────────────────────────────────────
   3. CROSSWORD GRID — contain inside 1fr cell
   CSS grid children default to min-width:auto,
   so .crossword-grid-wrap can grow wider than
   its 1fr cell regardless of overflow-x:auto.
   min-width:0 restores the constraint and lets
   the grid scroll within its wrapper.
──────────────────────────────────────────── */
@media (max-width: 768px) {
  .crossword-layout > * {
    min-width: 0;
  }
  .crossword-grid-wrap {
    width: 100%;
  }
}

/* ────────────────────────────────────────
   4. TOUCH TARGETS — minimum comfortable size
   .row-del is 28×28px — below the 36px floor
   for comfortable tap targets on touch screens.
   .solve-tab has min-height:34px — same issue.
──────────────────────────────────────────── */
@media (max-width: 768px) {
  .row-del {
    width: 38px;
    height: 38px;
  }

  .solve-tab {
    min-height: 40px;
    padding: 9px 14px;
  }
}

/* ────────────────────────────────────────
   5. CROSSWORD ACTION BUTTONS — stack on tiny screens
   Print / Copy / New puzzle buttons side-by-side
   are cramped below 480px. Stack them vertically
   and center the content.
──────────────────────────────────────────── */
@media (max-width: 480px) {
  .crossword-actions {
    flex-direction: column;
  }
  .crossword-actions .btn-action {
    justify-content: center;
  }
}