/* =============================================================================
   Mobile adaptation — phase 1 (CSS-only quick pass)
   Target: portrait phones, viewport width ≤ 480px
   iPhone SE (375), iPhone 14/15 (390–393), iPhone Plus (428), Android (360–412)

   Strategy: collapse multi-column layouts into single column, shrink paddings
   and font sizes, ensure buttons reach 44px hit targets, and let containers
   that were min-width-locked (drawer, modals, kanban columns) breathe.
   ========================================================================= */

@media (max-width: 480px) {

  /* ------------------------------------------------------------------ Body */
  body { font-size: 14px; }

  /* --------------------------------------------------------------- Topbar */
  /* Stack into 2 rows: brand + tabs on top, controls on row 2.
     Stats stay hidden (already hidden ≤1100px). */
  .topbar {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px;
  }
  .top-stats { display: none; }
  .top-controls {
    justify-self: stretch;
    flex-wrap: wrap;
    gap: 8px;
  }
  .top-controls .sort-label { display: none; }
  .seg button { padding: 8px 12px; font-size: 12.5px; }

  /* App tabs (Board / Theory) sit inside topbar row 1 — keep tight */
  .app-tabs { margin-left: 0; }
  .app-tab { padding: 8px 12px; font-size: 13px; }

  .brand-text .brand-name { font-size: 15px; }
  .brand-text .brand-sub { font-size: 11.5px; }

  /* ---------------------------------------------------------------- Board */
  /* One column per viewport with horizontal snap-scroll.
     Tighter side padding so a column fills the screen. */
  .board {
    grid-auto-columns: calc(100vw - 28px);
    gap: 12px;
    padding: 14px 14px 80px;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 14px;
  }
  .board > .column { scroll-snap-align: center; }
  .column { min-width: 0; min-height: 160px; }

  .col-head { padding: 4px 4px 8px; }
  .col-title { font-size: 14px; }

  /* ---------------------------------------------------------------- Card */
  .card { padding: 12px; border-radius: 12px; }
  .card-name { font-size: 14px; }
  .card-bottom { gap: 6px; }

  /* -------------------------------------------------------------- Drawer */
  /* Full-screen sheet on phones — easier to read & tap inside */
  .drawer {
    width: 100vw;
    padding: 14px 16px 96px;
    border-left: 0;
  }
  .drawer-head { margin-bottom: 12px; }
  .drawer-name { font-size: 19px; }
  .drawer-hero { gap: 12px; margin-bottom: 10px; }
  .drawer-bio { font-size: 13.5px; margin: 4px 0 14px; }

  /* 2x2 stat grid → 1 col stack to keep numbers legible without truncation */
  .drawer-stats {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 18px;
  }
  .stat { padding: 10px 12px; }
  .stat-num { font-size: 20px; }
  .stat-num.small { font-size: 20px; }

  /* Timeline: tighter padding, allow score below title on narrow */
  .tl-item {
    grid-template-columns: 18px 1fr auto;
    gap: 10px;
    padding: 12px 12px;
  }
  .tl-title { font-size: 13.5px; }
  .tl-desc { font-size: 12.5px; }
  .tl-num { font-size: 13px; padding: 3px 7px; }

  .tl-link-edit-row { gap: 6px; }
  .tl-ready { gap: 6px; }
  .tl-ready-chip { padding: 6px 12px; font-size: 12px; }

  .rate-row { gap: 8px; flex-wrap: wrap; }
  .rate-buttons { flex-wrap: wrap; gap: 6px; }

  /* --------------------------------------------------------------- Modals */
  .modal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 18px 18px 16px;
    border-radius: 14px;
  }
  .modal-title { font-size: 17px; }
  .modal.candidate-add-modal {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    padding: 18px 18px 16px;
  }

  /* ---------------------------------------------------------------- Forms */
  /* Collapse 2- and 3-column form rows into single column */
  .add-row.two,
  .add-row.three { grid-template-columns: 1fr; gap: 10px; }
  .edit-row { flex-direction: column; gap: 10px; }
  .creds-row { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .creds-label { min-width: 0; }
  .creds-value { width: 100%; word-break: break-all; }

  /* -------------------------------------------------------------- Buttons */
  /* Touch target floor: 44px for primary actions */
  .btn,
  .btn.primary,
  .auth-form button[type="submit"],
  .modal-actions .btn.primary {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
  }
  .icon-btn { width: 36px; height: 36px; }

  /* Inputs: 16px font prevents iOS Safari auto-zoom on focus */
  .edit-input,
  .edit-textarea,
  .add-row select,
  .auth-input,
  .th-input,
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px;
  }

  /* ---------------------------------------------------------------- Auth */
  .auth-modal {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    padding: 20px 18px;
  }

  /* -------------------------------------------------------------- Footer */
  .footer {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 14px;
    text-align: center;
  }
  .footer .foot-left,
  .footer .foot-right { justify-self: center; }

  /* ===================================================================
     Theory tab
     =================================================================== */
  .th-page { padding: 14px; gap: 12px; }
  .th-page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .th-h2 { font-size: 19px; }
  .th-head-right { flex-wrap: wrap; gap: 12px; width: 100%; }
  .th-legend { gap: 12px; flex-wrap: wrap; }

  /* Matrix: keep horizontal scroll, but shrink sticky columns so something
     of the data is visible alongside the names */
  .th-matrix-wrap { max-height: calc(100vh - 200px); border-radius: 10px; }
  .th-mx-corner,
  .th-mx-row-head { width: 150px !important; min-width: 150px !important; padding-left: 10px !important; }
  .th-mx-progress,
  .th-mx-prog { width: 130px !important; min-width: 130px !important; padding: 0 10px !important; }
  .th-mx-foot-head { padding-left: 10px !important; }
  .th-pp { min-width: 0; }

  /* Theory modal — fits screen */
  .th-modal-back { padding: 12px; }
  .th-modal { padding: 18px; border-radius: 12px; }
  .th-modal-title { font-size: 18px; }
  .th-modal-stats { grid-template-columns: 1fr; gap: 8px; }
  .th-modal-meta { flex-wrap: wrap; gap: 12px; padding: 10px 12px; }
  .th-modal-row {
    grid-template-columns: 22px 1fr auto;
    gap: 8px;
    padding: 8px 10px;
  }
  .th-modal-row-date,
  .th-modal-row-score { display: none; }

  /* Add-material modal: form column-only on phone */
  .th-add-modal { padding: 18px; }
  .th-add-grid { grid-template-columns: 1fr; gap: 16px; }
  .th-add-row2 { grid-template-columns: 1fr; gap: 12px; }
  .th-types { grid-template-columns: repeat(3, 1fr); }
  .th-add-title { font-size: 18px; }
  .th-add-actions { flex-wrap: wrap; }

  .th-pop { padding: 18px; }

  /* ===================================================================
     Intro splash (light theme)
     =================================================================== */
  .intro-mark { width: 72px; height: 72px; border-radius: 22px; }
  .intro-title { font-size: 30px; }
  .intro-sub { font-size: 13px; padding: 0 24px; }
  .intro-cta {
    margin-top: 16px;
    padding: 14px 28px;
    font-size: 15px;
    min-height: 44px;
  }
  .cloud-a { width: 200px; height: 50px; }
  .cloud-b { width: 160px; height: 42px; }
  .cloud-c { width: 220px; height: 56px; }
  .cloud-d { width: 140px; height: 38px; }

  /* ===================================================================
     Intro RPG (dark theme)
     =================================================================== */
  .rpg-mode {
    top: 14px;
    padding: 3px;
  }
  .rpg-mode button {
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  /* Knight pushed further off-screen + faded so text owns the viewport */
  .rpg-knight-wrap { right: -20%; height: 70vh; opacity: 0.32; }
  .intro-rpg .rpg-content {
    margin-right: 0;
    padding: 0 18px;
  }
  .rpg-subtitle { min-height: 90px; font-size: 14px; }
}

/* Small tweak below 360px (older Android) — squeeze the last few pixels */
@media (max-width: 360px) {
  .topbar { padding: 10px 12px; }
  .board { padding: 12px 12px 80px; grid-auto-columns: calc(100vw - 24px); }
  .drawer { padding: 12px 14px 96px; }
  .intro-title { font-size: 26px; }
  .drawer-stats { grid-template-columns: 1fr; }
}