/* ================================================================
   Phones and touch
   Loaded last, so these rules adjust the ones in the other files.
   ================================================================ */

/* A tap should not leave a focus box behind. Keyboard focus still shows. */
:focus:not(:focus-visible) { outline: none; }

.mode-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ink) 70%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Key letters mean nothing without a keyboard. */
@media (hover: none), (max-width: 700px) {
  .tool kbd,
  .iv-tool kbd,
  .pill-button kbd,
  .log .keys { display: none; }
}

@media (max-width: 700px) {
  :root { --topbar-h: 100px; }

  /* ---------- Top bar ---------- */

  /* Two rows: book name and buttons on top, the modes underneath. */
  .topbar {
    grid-template-rows: 52px 48px;
    padding: 0 8px 0 14px;
  }

  .book-meta { grid-row: 1; grid-column: 2; }
  .top-actions { grid-row: 1; grid-column: 3; }

  /* Plain text tabs: the active one is brighter with a short line under it.
     No boxes, so the bar stays light. Each tab is still a full thumb target. */
  .modes {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: stretch;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 6px 4px 0;
  }

  .mode-button,
  .mode-button.active {
    position: relative;
    height: 44px;
    padding: 0;
    font-size: 13.5px;
  }

  .mode-button.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transform: translateX(-50%);
    opacity: .7;
  }

  .book-title { font-size: 16px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .book-title::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 0 3px 7px;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: rotate(45deg);
  }

  .marks-button { height: 44px; padding: 0 12px; }
  .settings-button { width: 44px; height: 44px; }

  /* ---------- Reading ---------- */

  main { padding-top: 38px; }
  body[data-mode="observe"] main { padding-bottom: 260px; }

  .navigation-zone {
    width: 22vw;
    min-width: 48px;
  }

  /* ---------- Book menu: a full-width sheet, books in two columns ---------- */

  .book-menu {
    left: 8px;
    right: 8px;
    width: auto;
    max-height: calc(100dvh - var(--topbar-h) - 24px);
    transform: none;
  }

  #oldTestamentBooks,
  #newTestamentBooks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
  }

  .book-option { min-height: 44px; padding: 11px 10px; font-size: 15px; }

  /* ---------- Panels from the top bar ---------- */

  .settings-panel {
    position: fixed;
    top: calc(var(--topbar-h) + 4px);
    left: 8px;
    right: 8px;
    width: auto;
    max-height: calc(100dvh - var(--topbar-h) - 20px);
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  /* While a menu or panel is open, the mark palette steps aside. */
  body:has(.book-menu.open) .palette,
  body:has(.settings-panel.open) .palette,
  body:has(.log.open) .palette { display: none; }

  .log { width: 100%; padding-bottom: calc(40px + env(safe-area-inset-bottom)); }

  /* ---------- Mark palette ---------- */

  /* Thumb-reach palette at the bottom, clear of the native selection menu. */
  .palette {
    left: 8px !important;
    right: 8px;
    top: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom));
    max-width: none;
    padding: 4px;
    border-radius: 16px;
  }

  .tools { display: grid; grid-template-columns: repeat(5, 1fr); }
  .tool { min-width: 0; min-height: 54px; padding: 8px 2px 7px; gap: 4px; font-size: 11px; }
  .note-input { min-width: 0; width: 100%; }
  .toast { bottom: 190px; }
  .extra { padding: 6px 4px 2px; }
  .chip { max-width: 100%; min-height: 36px; }
  .chip-x { width: 36px; height: 36px; font-size: 15px; }

  /* No "Add to" row on phones. If that was all the row held, hide the row too. */
  .add-to { display: none; }
  .extra:not(:has(> :not(.add-to))) { display: none; }

  /* ---------- Thumb-sized controls ---------- */

  .option-button { min-height: 44px; font-size: 14px; }
  select { min-height: 44px; font-size: 16px; }
  .range-row { min-height: 44px; }
  input[type="range"] { height: 32px; }

  .pill-button,
  .lens-chip { min-height: 40px; padding: 0 14px; font-size: 13px; }
  .log-row { min-height: 44px; }
  .chip-x,
  .pill-button { touch-action: manipulation; }

  /* ---------- Interpretation ---------- */

  /* Side panes cover the whole board, so nothing peeks out beside them. */
  .iv-library,
  .iv-text { width: 100%; box-shadow: none; }

  .iv-mini { min-width: 40px; height: 40px; font-size: 16px; }
  .iv-pane-head .iv-mini { width: 44px; height: 44px; font-size: 18px; }
  .iv-bar { gap: 6px; }
  .iv-chip-button { min-height: 40px; padding: 0 12px; font-size: 13.5px; }
  .iv-tab { min-height: 40px; }
  .iv-search { min-height: 44px; font-size: 16px; }
  .iv-lib-row { min-height: 44px; }
  .iv-tool { min-width: 46px; height: 46px; }
  .iv-zoom button { min-width: 40px; height: 40px; }
  .iv-zoom { bottom: 84px; }

  /* ---------- Application ---------- */

  /* Same side margin as the reading text in Observation (follows the Margin setting). */
  .ap-wrap {
    padding: 22px max(24px, var(--reader-margin)) calc(80px + env(safe-area-inset-bottom));
    gap: 32px;
  }
  .ap-interp { padding: 14px; font-size: 15px; }
  .ap-respond,
  .ap-link-button { display: inline-flex; align-items: center; min-height: 40px; font-size: 14px; }
  .ap-respond { margin-top: 2px; }

  .ap-head h2 { font-size: 26px; }
  .ap-head p { margin-bottom: 22px; }

  /* The response card fills the width; padding lives inside it, once. */
  .ap-entry { margin-bottom: 22px; }
  .ap-source { padding: 16px 16px 14px; }
  .ap-body { padding: 16px 16px 4px; }

  /* Each question sits on its own line under its label, not squeezed beside it. */
  .ap-label { display: block; margin-bottom: 8px; }
  .ap-label .q { display: block; margin-top: 4px; line-height: 1.4; }

  .ap-text { font-size: 16px; }
  .ap-chips { gap: 8px; }
  .ap-chip { min-height: 40px; padding: 0 14px; font-size: 14px; }

  .ap-foot { gap: 10px; padding: 12px 16px 14px; }
  .ap-status { flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .ap-status button { min-height: 40px; font-size: 14px; }
  .ap-small { min-height: 40px; padding: 0 14px; font-size: 14px; }
}