/* Phone and tablet layout layer. It changes presentation only; quizzer data remains in browser storage. */
html { -webkit-text-size-adjust: 100%; }

@media (max-width: 700px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  body { font-size: 16px; }
  .page-shell { width: min(100% - 16px, 1420px); padding: 10px 0 28px; }
  .hero, .panel { border-radius: 20px; }
  .hero, .panel, .first-run-card { padding: 16px; }
  .hero { gap: 16px; }
  .hero-card { min-height: 0; padding: 14px; }
  .hero-logo { width: min(100%, 230px); }
  h1 { font-size: clamp(2.05rem, 11vw, 3rem); }
  h2 { font-size: clamp(1.5rem, 8vw, 2.1rem); }
  .first-run-overlay { align-items: flex-start; overflow-y: auto; padding: 10px; }
  .first-run-card { border-radius: 22px; margin: 0; max-height: none; width: 100%; }
  .first-run-grid, .first-run-quizzer-row { grid-template-columns: 1fr; }
  .coach-page-nav { flex-wrap: nowrap; margin-bottom: 12px; overflow-x: auto; padding: 10px; scrollbar-width: thin; }
  .coach-page-tab { flex: 0 0 auto; font-size: .92rem; padding: 9px 12px; white-space: nowrap; }
  .app-grid,
  body[data-coach-page="session"][data-session-view="setup"] .setup-panel,
  body[data-coach-page="session"][data-session-view="active"] .coach-page-shell,
  body[data-coach-page="insights"] .progress-panel,
  body[data-coach-page="reference"] .reference-search-grid,
  body[data-coach-page="reference"] .reference-search-scope-row,
  body[data-coach-page="reference"] .reference-search-form,
  .daily-message-grid,
  .practice-insights-grid,
  .issue-groups-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-coach-page="session"] .setup-panel,
  body[data-coach-page="session"] .progress-panel { max-height: none; position: static; }
  body[data-coach-page="session"] .live-panel { min-height: 0; }
  body[data-coach-page="insights"] .encouragement-panel:first-of-type { grid-row: auto; }
  body[data-coach-page="profile"] .setup-details-body > .split-fields { grid-template-columns: 1fr; }
  body[data-coach-page="session"][data-session-view="setup"] .setup-panel > .split-fields { grid-column: 1; }
  .split-fields, .button-row, .control-row { gap: 10px; }
  .split-fields > *, .button-row > *, .control-row > * { flex: 1 1 100%; min-width: 0; }
  .button { min-height: 46px; width: 100%; }
  input, select, textarea { font-size: 16px; max-width: 100%; min-height: 46px; }
  select option { font-size: 1rem !important; }
  .summary-grid, .timer-grid { grid-template-columns: 1fr; }
  .day-progress-row { grid-template-columns: 1fr; gap: .35rem; }
  .day-progress-row strong { text-align: left; }
  .practice-month-header { align-items: flex-start; flex-direction: column; }
  .reference-scope-card { grid-column: auto; }

  /* Live Session needs its own compact rhythm.  The desktop view uses a
     sidebar beside the verse; on a phone every active-work card stays in one
     clear vertical lane with the controls reachable without sideways scroll. */
  body[data-coach-page="session"][data-session-view="active"] .coach-page-shell {
    display: block;
    width: 100%;
  }

  body[data-coach-page="session"][data-session-view="active"] .setup-panel,
  body[data-coach-page="session"][data-session-view="active"] .live-panel,
  body[data-coach-page="session"][data-session-view="active"] .progress-panel {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
  }

  body[data-coach-page="session"][data-session-view="active"] .setup-panel {
    align-items: stretch;
    padding: 10px;
  }

  body[data-coach-page="session"][data-session-view="active"] .setup-panel > .stacked-top {
    display: grid;
    gap: 8px;
    width: 100%;
  }

  body[data-coach-page="session"][data-session-view="active"] .live-panel {
    min-height: 0;
    padding: 16px 12px;
  }

  body[data-coach-page="session"][data-session-view="active"] .live-reference-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  body[data-coach-page="session"][data-session-view="active"] #current-reference {
    font-size: clamp(1.55rem, 8vw, 2.15rem);
    overflow-wrap: anywhere;
  }

  body[data-coach-page="session"][data-session-view="active"] #current-verse-text,
  body[data-coach-page="session"][data-session-view="active"] #current-answer-guide {
    overflow-wrap: anywhere;
  }

  body[data-coach-page="session"][data-session-view="active"] #current-verse-text {
    font-size: 1.12rem;
    line-height: 1.55;
  }

  body[data-coach-page="session"][data-session-view="active"] .timer-grid,
  body[data-coach-page="session"][data-session-view="active"] .session-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0;
  }

  body[data-coach-page="session"][data-session-view="active"] .timer-card,
  body[data-coach-page="session"][data-session-view="active"] .summary-card {
    min-width: 0;
    padding: 10px 8px;
  }

  body[data-coach-page="session"][data-session-view="active"] .timer-card strong,
  body[data-coach-page="session"][data-session-view="active"] .summary-card strong {
    font-size: 1.18rem;
    overflow-wrap: anywhere;
  }

  body[data-coach-page="session"][data-session-view="active"] .timer-card p,
  body[data-coach-page="session"][data-session-view="active"] .summary-card p {
    font-size: .78rem;
    overflow-wrap: anywhere;
  }

  body[data-coach-page="session"][data-session-view="active"] .control-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    width: 100%;
  }

  body[data-coach-page="session"][data-session-view="active"] .control-row .button {
    box-sizing: border-box;
    font-size: .94rem;
    min-height: 52px;
    min-width: 0;
    padding: 10px 7px;
    width: 100%;
  }

  body[data-coach-page="session"][data-session-view="active"] .latest-card,
  body[data-coach-page="session"][data-session-view="active"] .progress-panel {
    margin-top: 14px;
    padding: 14px 12px;
  }
}

/* True phone live session: keep every part in one readable column. */
@media (max-width: 700px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden !important; }

  body[data-coach-page="session"][data-session-view="active"] .coach-page-shell {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: none !important;
    gap: 0 !important;
  }

  body[data-coach-page="session"][data-session-view="active"] .setup-panel,
  body[data-coach-page="session"][data-session-view="active"] .live-panel,
  body[data-coach-page="session"][data-session-view="active"] .progress-panel {
    box-sizing: border-box !important;
    display: block !important;
    position: static !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: none !important;
    margin: 0 0 12px !important;
  }

  body[data-coach-page="session"][data-session-view="active"] .setup-panel > .section-heading,
  body[data-coach-page="session"][data-session-view="active"] .setup-panel .practice-session-row {
    display: none !important;
  }

  body[data-coach-page="session"][data-session-view="active"] .setup-panel > .stacked-top {
    display: block !important;
    width: 100% !important;
  }

  body[data-coach-page="session"][data-session-view="active"] #save-session-btn {
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
  }

  body[data-coach-page="session"][data-session-view="active"] .timer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-coach-page="session"][data-session-view="active"] .session-summary-grid,
  body[data-coach-page="session"][data-session-view="active"] .summary-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-coach-page="session"][data-session-view="active"] .control-row,
  body[data-coach-page="session"][data-session-view="active"] .last-verse-actions,
  body[data-coach-page="session"][data-session-view="active"] .progress-panel .list-grid,
  body[data-coach-page="session"][data-session-view="active"] .progress-panel .result-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body[data-coach-page="session"][data-session-view="active"] .control-row .button,
  body[data-coach-page="session"][data-session-view="active"] .last-verse-actions .button {
    white-space: normal !important;
    width: 100% !important;
    min-height: 52px !important;
  }

  body[data-coach-page="session"][data-session-view="active"] .desktop-session-shortcuts { display: none !important; }
  body[data-coach-page="session"][data-session-view="active"] .touch-session-instructions { display: block; margin-top: 12px; }
  body[data-coach-page="session"][data-session-view="active"] .touch-session-instructions summary { color: var(--accent-strong); cursor: pointer; font-weight: 800; }
  body[data-coach-page="session"][data-session-view="active"] .touch-session-instructions p { font-size: .92rem; line-height: 1.4; margin: 8px 0 0; }
  body[data-coach-page="session"][data-session-view="active"] .word-prompt-quote-entry { display: block; margin: 0 0 16px; }
  body[data-coach-page="session"][data-session-view="active"] .word-prompt-quote-reference { display: block; margin-bottom: 5px; }
  body[data-coach-page="session"][data-session-view="active"] .word-prompt-quote-text { display: block; }
}

@media (min-width: 701px) and (max-width: 1100px) {
  .page-shell { width: min(100% - 32px, 1420px); padding-top: 18px; }
  .coach-page-nav { padding: 12px; }
  body[data-coach-page="session"] .setup-panel,
  body[data-coach-page="session"] .progress-panel { position: static; max-height: none; }

  /* Keep the live controls touch-sized while the bucket panel shares the tablet screen. */
  body[data-coach-page="session"][data-session-view="active"] .control-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
  }

  body[data-coach-page="session"][data-session-view="active"] .desktop-session-shortcuts { display: none !important; }
  body[data-coach-page="session"][data-session-view="active"] .touch-session-instructions { display: block; margin-top: 12px; }
  body[data-coach-page="session"][data-session-view="active"] .touch-session-instructions summary { color: var(--accent-strong); cursor: pointer; font-weight: 800; }
  body[data-coach-page="session"][data-session-view="active"] .touch-session-instructions p { font-size: .95rem; line-height: 1.4; margin: 8px 0 0; }
  body[data-coach-page="session"][data-session-view="active"] .word-prompt-quote-entry { display: block; margin: 0 0 18px; }
  body[data-coach-page="session"][data-session-view="active"] .word-prompt-quote-reference { display: block; margin-bottom: 5px; }
  body[data-coach-page="session"][data-session-view="active"] .word-prompt-quote-text { display: block; }

  body[data-coach-page="session"][data-session-view="active"] .control-row .button {
    min-height: 64px;
    min-width: 0;
    white-space: normal;
    width: 100%;
  }

  .first-run-card { width: min(100%, 720px); }
}

/* Lite is the default on phones and tablets: live work remains visible,
   while timers, summaries, and history stay out of the way until requested. */
@media (max-width: 1100px) {
  body[data-coach-page="session"][data-session-view="active"] #mobile-session-view-btn { display: block !important; margin-top: 12px; width: 100%; }
  body[data-coach-page="session"][data-session-view="active"] .timer-grid,
  body[data-coach-page="session"][data-session-view="active"] .session-summary-grid,
  body[data-coach-page="session"][data-session-view="active"] #current-answer-guide,
  body[data-coach-page="session"][data-session-view="active"] .touch-session-instructions,
  body[data-coach-page="session"][data-session-view="active"] .latest-card,
  body[data-coach-page="session"][data-session-view="active"] .progress-panel { display: none !important; }
  body.mobile-session-full[data-coach-page="session"][data-session-view="active"] .timer-grid,
  body.mobile-session-full[data-coach-page="session"][data-session-view="active"] .session-summary-grid { display: grid !important; }
  body.mobile-session-full[data-coach-page="session"][data-session-view="active"] #current-answer-guide,
  body.mobile-session-full[data-coach-page="session"][data-session-view="active"] .touch-session-instructions,
  body.mobile-session-full[data-coach-page="session"][data-session-view="active"] .latest-card,
  body.mobile-session-full[data-coach-page="session"][data-session-view="active"] .progress-panel { display: block !important; }
  body[data-coach-page="session"][data-session-view="active"] .word-prompt-quote-entry { display: block; margin: 0 0 18px; max-width: 100%; overflow-wrap: normal; word-break: normal; }
  body[data-coach-page="session"][data-session-view="active"] .word-prompt-quote-reference,
  body[data-coach-page="session"][data-session-view="active"] .word-prompt-quote-text { display: block; overflow-wrap: normal; word-break: normal; }
  body[data-coach-page="session"][data-session-view="active"] .coach-word-tooltip { display: none !important; }
}