/* ===================================================================
   mobile.css — phone-first corrections, loaded LAST so it wins.

   Our workers are on cheap Android phones at 360–390 CSS px. Everything
   here exists because test/mobile.test.mjs caught it at those widths:
   a control too small to hit with a thumb, or text too small to read.

   Rules:
     * Everything is inside @media (max-width: 59.99rem) — the width at
       which shell.css makes the sidebar permanent. Below that you are on
       a phone or a phone held sideways (a 360px handset in landscape is
       800px wide and was getting none of these floors), so the floors
       apply there too. Desktop, from 60rem up, is untouched.
     * Nothing here changes colour, spacing character or wording. It
       raises floors: 40px for anything you tap, 12px for anything you
       read.
     * No !important. This file is last in the cascade; matching the
       original selector's specificity is enough.

   NOTE: views/partials/shell-top.ejs links this file and so covers every
   signed-in page. Six pages do NOT go through that shell and each carries
   its own <head>, so they need the link adding separately or they keep the
   old 11px text and 30px tap targets:
       public/index.html, public/terms.html, public/privacy.html,
       public/contact.html, views/login.ejs, views/register.ejs
   (views/error.ejs is in the same position and is worth doing at the same
   time). test/mobile.test.mjs names any page it finds in this state.
   =================================================================== */

@media (max-width: 59.99rem) {
  /* The role under the name in the topbar sat at 11.52px — on screen at every
     width below the sidebar breakpoint, including a phone held sideways. */
  .who__meta span { font-size: .75rem; }

  /* The role label at the top of the drawer sat at 10.88px. The audit
     measures the drawer CLOSED, where it is off-canvas and so excluded —
     but it is the first thing a worker reads when they open the menu. */
  .side__area { font-size: .75rem; }

  /* The drawer IS the navigation on a phone, so every row in it is a tap
     target. These were 36-37px, and the "SOON" pill was 9.6px. None of it
     was caught by the audit, which measures the drawer closed — where the
     whole thing is off-canvas and every check skips it. */
  .navlink { min-height: 40px; }
  .brandmark { min-height: 40px; }
  .navlink__soon { font-size: .75rem; }


  /* ================================================================
     1. Tap targets — 40×40 minimum
     ================================================================ */

  /* Buttons. .btn--sm (.35rem padding, 32px tall) is the one used in
     table rows and card headers, which is exactly where a thumb has the
     least room to spare. min-width matters for the short labels — "All"
     came out 37px wide — and never stretches a button that is already
     wider, or a .btn--block, which is 100%. */
  .btn { min-height: 40px; min-width: 40px; }
  .btn--sm { min-height: 40px; min-width: 40px; }
  /* Icon-only buttons (the ↑ ↓ category movers) were 30×24. */
  .btn--icon { min-width: 40px; min-height: 40px; }

  /* Pagination was a 32px square — the classic missed tap. */
  .pager__btn { min-width: 40px; min-height: 40px; }

  /* The bell / alerts button in the top bar was 38×38. */
  .iconbtn { width: 40px; height: 40px; }

  /* Form controls. .textarea is deliberately absent: it already has a
     min-height of 5rem and a 40px floor here would shrink it. */
  .input,
  .select,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="tel"], input[type="number"], input[type="search"],
  input[type="date"], input[type="url"], select {
    min-height: 40px;
  }

  /* Filter chips were 31px tall. They are inline (or flex items), so
     they need a box that honours min-height. */
  .chip {
    display: inline-flex; align-items: center;
    min-height: 40px;
  }

  /* Brand lockups double as the "go home" link on every page. */
  .wordmark { min-height: 40px; }

  /* Auth pages: back link, role tabs, and the Terms · Privacy · Contact
     row in the slim footer. The footer links are a bare list separated
     by middots — not running copy — so they are aimed at, not read. */
  .auth__back {
    display: inline-flex; align-items: center;
    min-height: 40px;
  }
  .roletab {
    display: flex; align-items: center; justify-content: center;
    min-height: 40px;
  }
  .footer__bar span a {
    display: inline-flex; align-items: center;
    min-height: 40px; padding-inline: .3rem;
  }

  /* Marketing footer link columns were 30px rows. */
  .footer__col a {
    display: flex; align-items: center;
    min-height: 40px;
  }

  /* The support addresses on /contact sit alone in their paragraph. */
  .contactcard p > a {
    display: inline-flex; align-items: center;
    min-height: 40px;
  }

  /* Table of contents on /terms and /privacy: 17px rows, stacked 3px
     apart. Padding rather than flex keeps the decimal marker aligned
     with the first line of the link. */
  .doc .toc ol { gap: .15rem; }
  .doc .toc li a {
    display: block;
    padding-block: .65rem;
  }

  /* "432 open →" next to a section heading, and the "12 queued" link
     under a KPI figure — both were ~18px of clickable height. */
  .secttl { align-items: center; }
  .secttl__all {
    display: inline-flex; align-items: center;
    min-height: 40px;
  }
  a.kpi__sub {
    display: flex; align-items: center;
    min-height: 40px;
  }

  /* Job title in a board / task row: the main thing a worker taps. */
  .joblink {
    display: flex; align-items: center;
    min-height: 40px;
  }

  /* Admin tables put the row's link inside a truncating <b>, which is
     the whole content of that <b>. Padding the inline link would be
     clipped by the <b>'s own overflow:hidden, and an inline box ignores
     min-width — so a user with no name on file ("—") stayed 14px wide.
     Promoting the link to a block makes it fill the cell and take the
     truncation with it, so the ellipsis still appears. */
  .cellmain b.truncate > a {
    display: block;
    min-height: 40px; line-height: 40px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* ================================================================
     1b. Gutters — give the data the room the padding was using
     ================================================================ */

  /* Three admin tables are still too wide for a phone and scroll inside
     .tablewrap (/admin's payout queue, /admin/ledger, /admin/categories).
     A 1.1rem gutter on both sides of every cell is 17.6px per side that
     could be showing the amount instead, so tables that are NOT stacked
     into cards get tighter gutters here. .table--dense (.6rem) and
     .table--cards (.2rem 0) set their own and are more specific, so they
     are untouched. */
  .table th, .table td { padding-left: .7rem; padding-right: .7rem; }
  .table th:first-child, .table td:first-child { padding-left: .9rem; }
  .table th:last-child,  .table td:last-child  { padding-right: .9rem; }

  /* ================================================================
     2. Type — 12px floor
     ================================================================ */

  /* .75rem is exactly 12px at the default root size, and still scales
     if the reader has set a larger default. Only selectors that were
     BELOW 12px are listed: raising a floor must never shrink anything,
     so .table td (13.8px) and .sm (14.1px) are deliberately not here. */
  .xs,
  .pill,
  .kpi__sub,
  .stat__label,
  .stat__sub,
  .earn__badge,
  .earn__titles span,
  .rew__name,
  .rew__sub,
  .takesub,
  .chartx,
  .table th,
  .detail,
  .feecell i,
  .alert__time,
  .dot,
  .navlink__count,
  .side__group,
  .table--cards td::before {
    font-size: .75rem;
  }

  /* The unread badge grows with its text so the digits are not clipped. */
  .dot { min-width: 19px; height: 19px; }

  /* Marketing pages (styles.css). Each selector matches the specificity
     of the rule it is raising. */
  .wallet__tag { font-size: .75rem; }
  .wallet__foot .sm { font-size: .75rem; }
  .section__kicker { font-size: .75rem; }
  .footer__col h4 { font-size: .75rem; }
  .doc .toc h2 { font-size: .75rem; }

  /* Donut caption. It lives inside a 132px viewBox rendered at 132px,
     so 12px here is 12px on the glass. The centre figure above it is
     19px at y+2 and the caption sits at y+18, so there is room. */
  .donut__sub { font-size: 12px; }
}