/* ================================================================
   Daylight — the phone.

   style.css already has a Phones layer (drawers over the note, the scrim,
   44px targets, safe areas) and mobile.js already has the behaviour — both
   written when the classic shell was the default. Daylight then became the
   default with ZERO responsive rules of its own, so a phone got the classic
   phone layer showing through a desk-sized Daylight frame: a 274px tree
   "straight on the desk" over a 375px screen, a dashboard header whose one
   grid row is wider than the screen, a tile floating in 12px of desk it
   cannot afford.

   This file is the Daylight HALF of that same layer, not a second one: no new
   breakpoint (the same 760px — "are these columns still honest", not "is this
   an iPhone"), no new navigation (the dock stays, as the same left rail it is
   on a desk, because a second nav model is the thing mobile.js's header
   comment warns against). Scoped to body.surface-daylight like every other
   daylight file; the classic surfaces keep getting the base layer alone.
   ================================================================ */

@media (max-width: 760px) {

  /* ---- The desk disappears; the tile IS the screen ---- */
  body.surface-daylight #app { padding: 0; gap: 0; }
  body.surface-daylight #main {
    border-radius: 0;
    box-shadow: none;
  }

  /* ---- The dock: the same rail, on a phone's terms ----
     44px wide (Apple's own minimum target), safe-area padded at the notch
     and the home indicator, buttons at thumb size. */
  body.surface-daylight #dock {
    width: 44px;
    padding-left: env(safe-area-inset-left);
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
  body.surface-daylight #primary-nav .pnav-btn,
  body.surface-daylight #dock .dock-btn { width: 40px; height: 44px; border-radius: 10px; }

  /* The hover name is a mouse idea. A finger covers the icon it taps, the
     tooltip would appear UNDER the finger, and iOS long-press has its own
     meanings — so the dock tip simply does not exist here. aria-labels stay. */
  #app-tip { display: none; }

  /* ---- The drawers wear Daylight ----
     The base layer makes both sidebars fixed drawers; Daylight had made them
     transparent, which over a note is not a drawer but a haunting. */
  body.surface-daylight #left-sidebar {
    background: var(--bg-primary);
    border-right: 1px solid var(--border);
  }
  body.surface-daylight #right-sidebar {
    background: var(--bg-primary);
    border-left: 1px solid var(--border);
  }

  /* ---- The note itself ----
     48px desk gutters inside a 330px column left the PROSE 230px wide — alias
     chips were wrapping letter by letter. A phone's reading measure IS the
     screen; 18px is gutter enough. */
  body.surface-daylight #editor-container { padding: 18px 18px 140px; }

  /* ---- The note header ----
     The base layer wraps it to two rows; Daylight's restyle re-pinned pieces.
     Let it breathe and keep every control reachable. */
  body.surface-daylight #view-header { height: auto; min-height: 44px; padding: 6px 8px; flex-wrap: nowrap; }

  /* The status line: one row that scrolls, not a 73px two-line wrap under a
     note you are trying to read. */
  body.surface-daylight #status-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  /* nowrap on the bar is not enough — each readout wraps INSIDE itself
     ("13 words · 1 min read" became a 58px two-liner). */
  body.surface-daylight #status-bar > * { white-space: nowrap; flex: none; }
  body.surface-daylight #status-bar::-webkit-scrollbar { display: none; }

  /* ---- The Study page dashboard ----
     Daylight lays the dash as one grid row — title | Statistics | Study now —
     whose min-content is wider than the whole screen, so the buttons sat on
     top of the title (measured, the first thing the owner's screenshot shows).
     On a phone it reads top to bottom: title, the numbers, the fortnight,
     then the two actions full-width where thumbs live. */
  body.surface-daylight #study-home #study-dash {
    display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  }
  body.surface-daylight #study-home #study-dash::before { font-size: 26px; }
  body.surface-daylight #study-home .sd-numbers {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px; margin: 0;
  }
  body.surface-daylight #study-home .sd-stat { padding: 14px 14px 12px; }
  body.surface-daylight #study-home .sd-n { font-size: 32px; }
  /* The arithmetic is load-bearing: the bars carry scaleY(2.4) from the desk
     rules, so the tallest inline height (34px) paints 82px up from the
     baseline, and the box must hold 52 (label) + 82 (bars) + 34 (axis row) —
     anything shorter runs the bars through the "Next 14 days" label. Measured
     twice: 120 and 150 both did. */
  body.surface-daylight #study-home .sd-forecast { height: 170px; padding: 52px 16px 34px; }
  body.surface-daylight #study-home #study-all-due {
    width: 100%; height: 46px; justify-content: center;
  }
  body.surface-daylight #study-home #study-stats {
    width: 100%; height: 42px; margin: 0; justify-content: center;
  }
  body.surface-daylight[data-view="studyhome"] #study-home-left { padding: 16px 14px 90px; gap: 22px; }

  /* The side tiles (Flagged, Recent sittings) already stack via the container
     query; at phone width they just lose the desk-sized insets. */
  body.surface-daylight #study-home .sh-col-side > * { padding: 14px 14px; }

  /* ---- Settings: the base phone layout, at daylight strength ----
     surfaces.css restyles the box (width, radius, borders), which outguns the
     base phone rules — the full screen is restated here so the panel does not
     float as a rounded island with the app peeking around it. */
  body.surface-daylight #settings-box {
    width: 100vw; height: 100dvh; max-height: none;
    border-radius: 0; border: 0; flex-direction: column;
  }
  body.surface-daylight #settings-side {
    width: auto; flex-direction: column;
    border-right: 0; border-bottom: 1px solid var(--border);
  }
  body.surface-daylight .settings-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; }

  /* ---- The session's buttons at thumb size ----
     lists.css lays the grades as a flex row with fixed-width buttons; the
     base phone rule loses that specificity fight and Again/Easy hung off both
     edges of the screen. Restated at daylight strength: a 2x2 of real
     targets, reveal full-width. */
  body.surface-daylight #study-actions { padding: 10px 14px 6px; }
  body.surface-daylight #study-grades:not(.hidden) {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%;
  }
  body.surface-daylight #study-grades button { width: 100%; min-height: 52px; }
  body.surface-daylight #study-reveal { width: 100%; min-height: 48px; }
  body.surface-daylight #study-cram-actions { width: 100%; }
  body.surface-daylight #study-cram-actions button { flex: 1; min-height: 48px; }

  /* ---- Deck rows: finger height, tighter inset ---- */
  body.surface-daylight :is(#study-decks, #deck-modal-tree) .deck-row {
    min-height: 46px; padding-right: 8px;
  }
  /* On a desk the row's actions appear on hover; a phone has no hover, so
     they are simply always there. The row click still asks (the chooser menu),
     so nothing destructive hides behind the smaller targets. */
  body.surface-daylight #study-decks .deck-row .deck-actions { display: flex; }
}