/* MOBILE LAYER — nav-utility
   Every rule below is inside a max-width:700px (or pointer:coarse) query and
   answers a measured defect found reviewing the product on a 390x844 phone.
   Desktop must not be able to see this file. See web/styles/mobile.css for the
   specificity contract. */

/* ========================================================= 1. THE DRAWER'S
   TWO LEFT EDGES */
/* [defect 1] The panel is padded `var(--s-5)` (12px), so the lockup, the
   avatar, the name/handle/stats block and the divider all start at 12.0–12.5
   CSS and the divider ends at 307.5. Every nav row then added a further
   `padding-inline: var(--s-4)` of its own, which put all eight 24px icon boxes
   at 20.0 and their labels at 60.5 — a second left edge 8px inboard of the
   first, running the whole height of the drawer — and pulled the Messages
   badge in to end at 299.5 against a divider ending at 307.5 and a close
   button ending at 307.75.
   The row keeps its 8px of optical padding, because that padding is what the
   hover/active pill needs in order not to sit flush against the ink. It is the
   *box* that was wrong: pulled out by exactly that padding, the row's ink
   lands on the panel's own 12px line and its badge ends on the panel's 308,
   while the pill still bleeds 8px past the text on both sides. Same idiom as
   `.composermodal__bar .iconbtn` in m/chrome.css: hit area out, ink in. */
@media (max-width: 700px) {
  .drawer__item,
  .drawer__signout { margin-inline: calc(var(--s-4) * -1); }
}

/* ============================================== 2. SIGN OUT IS A NAV ROW */
/* [defect 2] "Sign out @roger" was the only row in the drawer set in
   `--font-ui`/`--t-15` against the eight rows above it in `--font-dis`/`--t-17`,
   gapped `--s-5` against their `--s-6`, and given an 18px glyph whose ink
   measured 12.5 CSS wide inside the rows' 24 CSS icon boxes. The label started
   at 50.5 where every label above it started at 60.5–61: a destructive control
   breaking the one column the nav has, in a different typeface, at a different
   size. It is the same kind of object as the row above it — a row that
   navigates you somewhere — and the only thing that should distinguish it is
   its colour and the rule above it. So: same face, same size, same gap, same
   24px icon box, same 52px row, and a hairline where the list ends.
   The glyph is scaled in CSS rather than in the markup: `icon()` writes
   `viewBox="0 0 24 24"` and a `stroke-width` in user units, so a CSS box of
   24px renders pixel-identical to `icon('external', { size: 24 })`. The markup
   should still say 24 — see the report — but nothing about the artwork is
   being stretched here. */
@media (max-width: 700px) {
  .drawer__signout {
    gap: var(--s-6);
    min-height: 52px;
    /* app.css sets `width: 100%`, which measures the foot's content box and so
       ate the 8px the negative margin had just bought back on the right: the
       pill ended at 300 while every row above it ended at 316. A <button> is
       shrink-to-fit at `width: auto` whatever its `display`, so the width has
       to be stated — the foot's box plus the two margins taken off it. */
    width: calc(100% + var(--s-4) * 2);
    font-family: var(--font-dis);
    font-size: var(--t-17);
    letter-spacing: var(--tracking-tight);
  }
  .drawer__signout > svg { width: 24px; height: 24px; flex: none; }

  /* The rule the nav ends on, drawn on the panel's own 12→308 line rather than
     on the row's, so it lines up with the divider under the account block at
     the top of the drawer. */
  .drawer__foot {
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
  }
}

/* =========================================== 3. ICON BUTTONS REACH 44x44 */
/* [defect 3] `.iconbtn` is 36x36 everywhere (parts.css:6) — the drawer's close
   button, the notifications gear, the messages compose "+" — 8 CSS px under
   Apple's 44 and Material's 48 on every axis. The optics are correct at 36:
   the glyph, the hover pill and the focus ring are all sized to that box and
   moving it would push the close button off the lockup's line. So the target
   grows and the drawing does not: a transparent 4px skirt on a positioned
   parent takes the hit area to 44x44 without a single pixel of ink moving.
   The skirt is transparent and lives inside the button, so nothing about the
   drawing changes on any screen — the query is a phone or any coarse pointer,
   because a 44px target is a property of the finger, not of the width. */
@media (max-width: 700px), (pointer: coarse) {
  .iconbtn { position: relative; }
  .iconbtn::after { content: ''; position: absolute; inset: -4px; border-radius: inherit; }
}

/* ================================================ 12. THE NOTCH, EVERYWHERE */
/* [defect 12] Four screens ran four different header top insets (bookmarks
   9.5, notifications 20.5, messages 20.5, settings 23.5 CSS to cap height) and
   not one of them knew about `env(safe-area-inset-top)`: on a notched phone
   the whole sticky header sits under the status bar. The per-screen numbers
   are levelled in each view's own stylesheet; the inset is one rule, here,
   because every sticky header in the product has the same problem and it
   resolves to 0 on hardware without a notch — so this changes nothing you can
   photograph on a rectangular screen, which is the point. */
@media (max-width: 700px) {
  .topbar { padding-top: env(safe-area-inset-top, 0px); }
}