/* ==========================================================================
   Composer Forge — phone layout
   Loaded after styles.css on every gated page. Kept in its own file so the
   phone fixes don't touch the shared stylesheet other branches edit.
   Everything that changes the layout sits inside the 640px query (the same
   breakpoint styles.css already uses for phones), so desktop is unchanged.
   ========================================================================== */

/* Track overview: the collapse toggle only exists on phones (grid.js). */
.track-col__toggle { display: none; }

@media (max-width: 640px) {

  /* ---------- top bar: wrap instead of overflowing ----------
     Row 1: logo (+ Dashboard), lesson buttons, Account.
     Row 2: dev tools and the progress readout. The breadcrumbs are hidden:
     the page's own eyebrow and heading already say where you are.
     Not sticky here: wrapped, it's too tall to keep on screen. */
  :root { --logo-height: 40px; }

  .topbar {
    position: static;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding: 8px 16px;
  }

  .topbar__brand { flex: 1 1 0; }
  .topbar__crumbs { display: none; }
  .topbar__actions { order: 1; gap: 6px; }
  .topbar__account-btn { order: 2; }

  /* forces the line break between the two rows */
  .topbar:has(.topbar__progress)::after {
    content: "";
    order: 3;
    flex-basis: 100%;
  }

  .dev-tools {
    order: 4;
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
  }

  .dev-toggle__label,
  .dev-tools__reset { white-space: nowrap; }

  .topbar__progress {
    order: 5;
    margin-left: auto;
    font-size: var(--text-xs);
  }

  .topbar .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* at the bottom, so it doesn't cover the top bar's buttons */
  .dev-mode-badge {
    top: auto;
    bottom: 0;
    border-radius: 6px 6px 0 0;
    width: max-content;
    max-width: calc(100vw - 32px);
    text-align: center;
  }

  /* ---------- track overview: each track collapses to its header ---------- */
  .track-col__head {
    position: relative;
    padding-right: 56px;
  }

  .track-col__toggle {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: none;
    cursor: pointer;
  }

  /* chevron: points down when collapsed, up when open */
  .track-col__toggle::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2.5px solid #fff;
    border-bottom: 2.5px solid #fff;
    transform: translateY(-75%) rotate(45deg);
    transition: transform .15s ease;
  }

  .track-col:not(.is-collapsed) .track-col__toggle::after {
    transform: translateY(-25%) rotate(-135deg);
  }

  .track-col__toggle:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }

  .track-col.is-collapsed .track-col__body { display: none; }

  /* ---------- activities: finger-sized targets ---------- */
  .activity .btn,
  .step-nav .btn { min-height: 44px; }

  .activity__nudge-btn {
    width: 44px;
    height: 44px;
  }

  /* the Order drag handle */
  .activity__grip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 44px;
  }

  /* 16px stops iOS zooming the page when a field is focused */
  .activity input,
  .activity select,
  .activity textarea { font-size: 16px; }

  .activity__blank-input { min-height: 40px; }

  /* identify.js widens a figure whose regions are too small to tap, and it
     scrolls sideways inside the card rather than widening the page */
  .activity__label-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .activity__label-hint {
    font-size: var(--text-xs);
    color: var(--faint);
    margin: 4px 0 0;
  }
}