/* =====================================================================
   THE MOBILE LAYER — read this before adding a single rule here.

   Everything in backend/static/css/mobile/ is a layer that adapts the
   app to phones and tablets. It is linked from base.html AFTER the theme
   stylesheets, i.e. it is the last thing in the cascade and wins every
   equal-specificity tie against app.css, the per-page sheets and the
   themes alike. That is deliberate: a mobile layout is structural, not
   thematic, and a theme must not be able to break it.

   THE ONE INVARIANT
   -----------------
   Every rule in every file of this directory MUST sit inside a media
   query that narrows to a compact or touch context. A desktop pointer
   browser wider than 900px must load these files and come out
   byte-identically laid out. core/tests.py::MobileLayerTests enforces
   this mechanically — a top-level rule here fails the suite.

   THE BREAKPOINTS — use these three and only these three
   ------------------------------------------------------
     @media (max-width: 900px)   COMPACT. Phones in either orientation and
                                 an iPad in portrait (768pt). The left
                                 sidebar stops being a fixed column, dense
                                 menubars collapse into submenus, sheets
                                 lose their page chrome and take the full
                                 width. This is where most rules live.

     @media (max-width: 600px)   PHONE. Everything COMPACT does, plus the
                                 tightest gutters, 16px form text (iOS
                                 zooms a focused input whose font is
                                 smaller than that, and never zooms back),
                                 and one-column-always grids.

     @media (pointer: coarse)    TOUCH. Hit areas only — never layout.
                                 Width says nothing about fingers: an iPad
                                 in landscape is 1024pt wide and still has
                                 no cursor, so it keeps the desktop layout
                                 but must not keep 28px tap targets.

   Do not invent a fourth. Do not use min-width — a rule that only takes
   effect above a width is a desktop change wearing a media query.

   WHY A DIRECTORY AND NOT ONE FILE
   --------------------------------
   One file per surface, so the six areas of the app could be adapted
   independently without colliding:
     10-shell.css      topbar, the sidebar-as-drawer, panels, safe areas
     20-editor.css     the note editor's docbar + formatting toolbar
     30-sheet.css      .sheet / .shell__body / forms / tables / buttons
     40-sequences.css  the sequence viewer
     50-annotate.css   the image annotator
     60-apps.css       dashboard, projects, tasks, samples, references, …

   HOUSE RULES
   -----------
   - Colour comes from design/tokens.css. Never a literal hex here.
   - Match specificity rather than reaching for !important; this layer
     already loads last, so a plain selector normally suffices. If a
     theme rule genuinely outranks you, restate its specificity and say
     so in a comment.
   - A rule that would improve the desktop too does not belong here.
     Put it in app.css and let it apply everywhere.
   ===================================================================== */

@media (max-width: 900px) {
  :root {
    /* The compact gutter: what replaces the desktop's 2.4rem sheet
       padding and 1rem body padding. One number so every surface
       lines up down the left edge on a narrow screen. */
    --gutter-compact: 0.85rem;
    /* The off-canvas drawer's width — capped so the scrim behind it
       stays wide enough to read as "tap here to dismiss". */
    --drawer-w: min(19rem, 84vw);
  }
}

@media (max-width: 600px) {
  :root {
    --gutter-compact: 0.7rem;
  }
}

@media (pointer: coarse) {
  :root {
    /* Apple's HIG minimum, and the floor for anything tappable. */
    --tap: 44px;
  }
}