/* ============================================================================
   notebook2.mobile.css — LearnHero Notebook v2, phone-polish layer (refine 4, A2)

   PURPOSE. A thin, ADDITIVE sheet that fixes the mobile defects a real 390x844
   sweep exposed. It is linked in notebook2.html AFTER notebook2.css so it cascades
   last, and every rule is scoped to @media (max-width: 480px) so DESKTOP IS NEVER
   TOUCHED. The base sheet already does the heavy responsive lifting (four-zone
   stack at 760px, touch ergonomics under pointer:coarse, dialog viewport clamps);
   this layer only repairs the residue that survived to the phone:

     D1  hero session-plan hint reaches / crams the 390px right edge   (ref3 O2)
     D2  "Ask your study partner" action group overflows the viewport  (fresh sweep)
     D3  the review "Close" wraps to its own orphan line under the      (ref3 O3)
         retention presets, and is a sub-44px touch target
     D4  a focused library note's revealed row-acts overflow the rail   (fresh sweep)
     D5  the sticky header rail ignores the notch / home-indicator safe area

   TENETS. VI (perceivable/operable, WCAG-AA: >=44px targets, no clipped controls),
   VII (calm — contain, don't decorate). No copy or behavior changes (I). Every fix
   is cited to a before/after frame in docs/receipts/refine4/mobile/.

   WHY 480px (not 420 or 760): the base sheet's tightest phone block is 420px and
   its touch block is pointer:coarse; 480px catches the common 390-430px phone
   widths (incl. the 390px sweep) without reaching the 761px+ desktop grid. These
   rules never fire above 480px, so the desktop receipts are byte-for-byte unchanged.
   ============================================================================ */

@media (max-width: 480px) {

  /* ── D5 — SAFE-AREA INSETS (notch / home indicator) ────────────────────────
     The shell declares viewport-fit=cover, so on a notched phone the sticky rail
     can slide under the status bar / rounded corners. Pad it by the safe-area
     insets (0 on non-notched devices, so this is inert there). Only the sticky
     rail needs it; the scrollable body already clears the notch. */
  .nb-rail {
    padding-left: max(11px, env(safe-area-inset-left));
    padding-right: max(11px, env(safe-area-inset-right));
    padding-top: max(9px, env(safe-area-inset-top));
    flex-wrap: wrap;
    overflow-x: auto;
    overflow-y: visible;
    min-width: 0;
    max-width: 100%;
  }
  .nb-kicker {
    flex: 1 1 100%;
    min-width: 0;
  }
  .nb-rail-actions {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap !important; /* C15: one action row, not a tall wrap stack */
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 52px;
  }
  .nb-rail-actions > * { flex: 0 0 auto !important; }
  /* C15: recede parked rail chrome (Find + surface live in ⋯ More). */
  .nb-kicker-text,
  .nb-kicker-divider { display: none; }
  .nb-kicker {
    max-height: 52px;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 6px;
    flex-wrap: nowrap;
  }
  .nb-home { flex: 0 0 auto; }
  .nb-home .nb-brand { display: none; }
  #nb-cover-toggle .nb-cover-toggle-glyph,
  #nb-cover-toggle[aria-pressed="true"] .nb-cover-toggle-glyph--lift {
    display: none;
  }
  /* Opening compose: keep one 44px row. Recede labels; do not lift the kicker
     into a second fat row just to unclip HUD. */
  .nb-kicker:has(#nb-hud) {
    max-height: 52px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .nb-hud-version { display: none; }
  .nb-hud {
    flex: 0 0 auto;
    min-width: min-content;
    min-height: 44px;
    padding: 0 4px 0 8px;
    gap: 6px;
  }
  .nb-hud-setup { padding: 8px 8px; }
  .nb-rail-actions #nb-surface-chip,
  .nb-rail-actions #nb-local,
  .nb-rail-actions .nb-search,
  .nb-rail-actions #nb2-galaxy-rail-btn,
  .nb-rail-actions #nb2-partner,
  .nb-rail-actions #nb2-ocr,
  .nb-rail-actions #nb2-handwriting,
  .nb-rail-actions #nb2-secondary { display: none !important; }

  /* ── D2 — "ASK YOUR STUDY PARTNER" ACTION GROUP (fresh 390px sweep) ─────────
     before: editor-mobile-before.png — #nb2-partner is inline-flex with no wrap,
     so its label + 4 buttons (Quiz me / Find my gaps / Make flashcards / Cover
     notes) run off the right edge (measured right=408, "Cover notes" clipped).
     FIX: let the group wrap; give the label its own full-width line so the four
     actions flow into tappable rows beneath it. Each stays a >=44px target (the
     base sheet already lifts .nb-btn under pointer:coarse; we guarantee it here
     too so it holds regardless of pointer type). after: editor-mobile-after.png */
  .nb2-partner {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
  }
  .nb2-partner-label {
    flex: 1 1 100%;     /* the label owns its own line above the actions */
    white-space: normal;
    margin-right: 0;
  }
  .nb2-partner .nb-btn {
    flex: 1 1 auto;
    min-height: 44px;
    justify-content: center;
  }

  /* ── D4 — FOCUSED LIBRARY-NOTE ROW ACTS (fresh 390px sweep) ─────────────────
     before: editor-mobile-before.png (a focused note) — on touch there is no
     hover, so the row acts reveal on :focus-within; when they expand
     (max-width:90px) inside the ~358px rail they push the delete glyph past the
     edge (measured right=426). FIX: on the phone let the acts REPLACE the title's
     tail rather than add to the row width — the title already has min-width:0 +
     ellipsis, so capping the acts and letting them shrink-to-content keeps the row
     inside the rail. after: editor-mobile-after.png */
  .nb2-library-note { min-width: 0; }
  .nb2-library-note:hover .nb2-library-note-acts,
  .nb2-library-note:focus-within .nb2-library-note-acts {
    max-width: 88px;    /* two icon acts + gap, no more; title ellipsis absorbs the rest */
    flex: none;
  }
  .nb2-library-note-acts { overflow: visible; }   /* clip was hiding the 2nd act; the row now fits so it need not clip */

  /* ── D3 — REVIEW "CLOSE" ORPHAN WRAP (ref3 O3) ─────────────────────────────
     before: review-predict-mobile-before.png / review-grade-mobile-before.png —
     the review dialog head is a wrapping flex row [title · Approach · Retention ·
     Close]; on the phone Approach + Retention consume the width, so Close wraps to
     its own line UNDER the presets (measured top=254, alone) — an awkward orphan,
     and at 32px it is a sub-44px touch target.
     FIX: pull Close up beside the TITLE (the conventional top-right dialog
     affordance) via order, let the title flex to push it right, and size it for
     touch. Approach + Retention then wrap cleanly onto their own rows below, and
     Close is never orphaned or clipped. after: review-*-mobile-after.png */
  .nb2-review .nb-dialog-head {
    align-items: flex-start;
    column-gap: 8px;
    row-gap: 8px;
  }
  .nb2-review .nb-dialog-head > strong {
    flex: 1 1 auto;
    order: 0;
  }
  .nb2-review .nb-dialog-head > .nb-btn {   /* the Close button */
    order: 1;
    flex: 0 0 auto;
    min-height: 44px;
    align-self: flex-start;
  }
  .nb2-review-strategy { order: 2; flex: 1 1 100%; }
  .nb2-retention       { order: 3; flex: 1 1 100%; }

  /* ── D6 — CALIBRATE-INVITE CLUSTER (refine5 studio nit #2) ──────────────────
     before: cal-invite-default-mobile.before.png — .nb-cal-invite is a
     space-between row [body · acts]; on the phone the body wraps to ~5 lines
     while "Not now"/"Set your GPS" float vertically-centered against the tall
     block, reading as a stray floating pair rather than one calm invitation.
     FIX: stack the cluster to a column so the actions sit as their own row
     beneath the body, right-aligned. No copy/behavior change (I); calm (VII).
     after: cal-invite-default-mobile.after.png */
  .nb-cal-invite {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .nb-cal-invite-acts { justify-content: flex-end; }

  /* WorryPlate popover: full-width above status bar on narrow phones */
  .nb2-worryplate-menu {
    width: calc(100vw - 16px);
    max-width: none;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

}