/* web/phone-a11y.css — phone and accessibility basics (audit 2026-10-03, F14 / ux-perf-15).

   Three things a phone needs that the rest of the stylesheets never promised together:
     1. No zoom when a field is tapped. iOS Safari zooms the whole page in whenever the focused field's text is
        under 16 px, and leaves it zoomed after the keyboard closes. Measured on the dev tree at 390 px: every
        field on All posts, Feed, Compose and Engagement was 13 or 14 px (30 of 30), Settings' too (24 of 24);
        only Network had some at 16 (6 of its 17), each raised by hand, one rule at a time.
     2. Fingers, not pointers: 44 px targets (Apple's minimum) for the app bar, the rows of sub-tabs and the
        buttons on cards. Measured at 390 px: the app bar's tabs were 38 x 40, the avatar 30 x 30, the visits
        counter 49 x 30, the sub-tabs 36 x 37, card buttons 40 tall (the icon ones 24 to 35 wide), a post card's
        schedule line 24, the Calendar's status chips 28 and its Month / Week / Day buttons 34, Compose's topic
        chips 24 and the close button on its open-post tabs 13 x 15.
     3. Focus that survives a redraw is web/focus-keep.js, not CSS.

   Loaded after every stylesheet in the head, so equal-weight rules here win on order. view-groups.css is linked
   later, inside the app bar, and compose.js adds its own rules when it starts: where a rule here meets one of
   theirs, it is written to out-rank it. Colours are theme tokens only, so the light and dark themes both follow.
   Nothing below section 1 applies wider than 640 px; section 1 applies at any width on a touch screen. */

/* ---- 1. No zoom on focus ------------------------------------------------------------------------------
   A phone held sideways is wider than 640 px and still zooms, so a touch screen counts as well as a narrow
   one. !important on purpose: field sizes are set by 30-odd class and id rules (and inline styles drawn by
   the views), and every one of them is 13 or 14 px; a rule that has to out-rank each in turn is the
   one-at-a-time patching this replaces. Only the size of text in a field changes, nothing at desktop width. */
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
  select,
  textarea,
  [contenteditable="true"],
  [contenteditable=""],
  [contenteditable="plaintext-only"] { font-size: 16px !important; }
}

/* ---- 2. 44 px targets at phone width ------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* The app bar holds ten targets (the visits counter, five tabs, theme, New post, the avatar): 44 px each, the
     icon in the middle of its tab. Under 520 px they no longer fit one row (see 2b). */
  .appnav .nav-item { justify-content: center; min-width: 44px; min-height: 44px; padding: 0 4px; }
  .appnav .nav-ico { font-size: 18px; }
  /* The count sits on the icon's corner, and the icon is in the middle of its tab, not at its right edge. */
  .appnav .nav-badge { right: auto; left: calc(50% + 6px); top: 3px; }

  .lv-counter { min-height: 44px; min-width: 44px; justify-content: center; }
  .appbar-right .btn,
  .appbar #btn-theme-toggle.btn--icon { min-width: 44px; width: 44px; min-height: 44px; height: 44px; padding: 0; justify-content: center; }
  /* The avatar: a 44 px button, with the circle it always showed (34 px) drawn on the initials inside it. */
  .acctmenu-btn { width: 44px; height: 44px; border: 0; background: transparent; }
  .acctmenu-btn:hover { background: transparent; }
  .acctmenu-initials { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border-radius: 50%; border: 1px solid var(--ink-invert-soft); background: var(--navy-line); color: var(--ink-invert); }
  .acctmenu-btn:hover .acctmenu-initials { border-color: var(--ink-invert); }
  /* Its menu (Accounts, Settings, Import, Help, Sign out) is a list a finger picks from: 33 px rows before. */
  .acctmenu-panel .nav-item { min-height: 44px; }

  /* Rows of sub-tabs: the tab's pages (web/view-groups.js), Writers' views and its log's days, Compose's
     side-panel tabs and a pull's sources, Engagement's views, the Calendar's status, brand, destination and
     platform filters with its own Month / Week / Day row, and Feed's themes. */
  .vg-tab, .wr-tab, .wr-logtab, .cmp-panel__tab, .srctab,
  .eg-chip, .cal-legend-chip, .cal-brand-chip, .cal-dest-chip, .cal-plat-chip, .feed-theme-chip,
  .calendar-wrap .fc .fc-toolbar .fc-button { min-height: 44px; min-width: 44px; justify-content: center; }
  /* The room kept for the sub-tab row before it is drawn: 44 + its line. An id, because view-groups.css (linked
     after this file) keeps 38 with a rule of the same weight as a class one, and the row would jump as it came. */
  #vg-subnav:empty { height: 45px; }
  /* All posts' Comfortable / Compact switch. */
  .sched-density button { min-height: 44px; padding-left: 12px; padding-right: 12px; }
  /* Compose's open posts, the "+" and "more" beside them, and the list "more" opens. */
  .cmp-tabstrip { min-height: 44px; }
  .cmp-tab, .cmp-tab-menu-item { min-height: 44px; }
  /* A tab's close button fills the tab's height at its right end: the tab's own padding is given back to it. */
  .cmp-tab-x { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -7px -8px -7px -4px; }
  .cmp-tab-new, .cmp-tab-more { min-width: 44px; min-height: 44px; }
  /* Compose's "Jump" row (compose.js draws it and adds its look when it starts, after this file: hence the id).
     It is stuck under the app bar while he writes, so it stays one line and scrolls sideways, as the sub-tab
     rows do: with 44 px links, wrapping would have stacked two or three rows into that stuck bar. */
  #compose-view .cmp-jumpnav { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scrollbar-width: none; padding-top: 0; padding-bottom: 0; }
  #compose-view .cmp-jumpnav::-webkit-scrollbar { display: none; }
  #compose-view .cmp-jumpnav > * { flex: 0 0 auto; }
  #compose-view .cmp-jumpnav-link { min-height: 44px; min-width: 44px; white-space: nowrap; }

  /* Buttons on cards, and every other button drawn as one: M99 asked for 40 px, a finger needs 44, and an icon
     button needs it across as well as up. */
  .btn, .btn--sm, .btn--icon { min-height: 44px; min-width: 44px; }
  /* The eye (LinkedIn visits) in Network's header keeps a 34 px minimum of its own (ux-app.css, same weight,
     earlier): 44 tall and 34 wide it was an oval beside two round buttons. */
  .np-head .lv-btn { min-width: 44px; }
  /* The controls on cards that are not drawn as buttons: a post card's schedule line (All posts), Compose's
     topic, style and momentum chips and its best-time pill, the Calendar's time-zone pill. */
  .sched-edit-trigger, .cmp-topic-chip, .cmp-style-chip, .cmp-momentum-chip, .cmp-bt-pill, .tz-trigger { min-height: 44px; }
  /* A box and its words are one target: Compose's destinations and media types, its option boxes, Feed's
     and Compose's regex boxes, Engagement's "by themselves" switches, and the box that picks a Feed card. */
  .check, .cmp-media-type, .cm-auto__switch, .feed-regex-label, .cmp-feed-regex-lbl { min-height: 44px; }
  .cmp-dest, .feed-select-wrap { min-width: 44px; min-height: 44px; justify-content: center; }
  /* A Feed card's score (it opens how the score was made), and the "top N" a theme chip carries: that one
     sits inside a 44 px chip, so it fills the chip's height without making the chip taller. */
  .pts-badge { min-height: 44px; }
  .feed-theme-top { min-width: 44px; min-height: 44px; margin-top: -14px; margin-bottom: -14px; }
  /* Settings' time-zone chips: the x that removes one was 15 x 14. It takes 44 x 44 out of the chip's own
     padding and the gap before it, so the chip does not grow. */
  .tz-pick-chip-x, .pref-tz-picker .tz-pick-chip button { min-width: 44px; min-height: 44px; margin: -14px -6px -14px -10px; }
  /* Every dialog's close button, and Help's row of section chips. */
  .modal-close { width: 44px; height: 44px; }
  .help-toc a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Fields are pressed too: the 16 px text above already makes most of them 42 px tall, and Engagement's search 34. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
  select { min-height: 44px; }
  /* A fold's own line ("Show 20 more posts", Theme, Trending topics, Generate media) is the line it opens on. */
  section.view details > summary { min-height: 44px; box-sizing: border-box; }
  /* "Never send to" on Engagement, Replies, Comments and Touch (release 312, 2026-10-05): its fields, its Add and Remove
     and its line already take 44 px above; the contacts a name finds are buttons too, and the line's words sit in its
     middle. */
  .np-never .np-never-pick { min-height: 44px; }
  .np-never > summary { align-items: center; }
}

/* ---- 2b. The app bar under 520 px ------------------------------------------------------------------------
   The app bar's ten 44 px targets need about 482 px on one row with its gaps (measured), and up to 16 more once
   the visits count has three digits, so under 520 px the five tabs take a row of their own, each a fifth of the
   width, under the brand row. They all show: on one row the Newsletter tab was already scrolled out of sight at
   390 px, before any target grew. From 520 to 640 px (a phone on its side, where height is short) they stay on
   the one 52 px row. */
@media (max-width: 519px) {
  :root { --topbar-h: 92px; }   /* the bars that stick under the app bar sit below both rows: 4 + 44 + 44 */
  .appbar { flex-wrap: wrap; align-items: center; row-gap: 0; column-gap: 6px; min-height: 0; padding: 4px 8px 0; }
  .appbar-brand { order: 1; min-height: 44px; }
  .appbar-right { order: 2; margin-left: auto; gap: 6px; }
  .appnav { order: 3; flex: 1 0 100%; gap: 0; overflow: visible; }
  .appnav .nav-item { flex: 1 1 0; }
}