/* Desktop keeps the topbar's name/id block, so the drawer's copy of it — and
   the drawer's own chrome — must not appear on the pinned rail. */
.adm-side-foot,
.adm-side-head,
.adm-navbtn,
.adm-nav-scrim{ display:none; }

/* ==========================================================================
   ADMIN ON A PHONE
   --------------------------------------------------------------------------
   Loaded LAST of the admin sheets, so it can correct the desktop rules without
   raising specificity games in the files that own them.

   Everything here is inside a `max-width` query — nothing in this file may
   affect the desktop panel.

   The two problems this fixes:

   1. NAVIGATION. The rail collapsed into a horizontally scrolling strip of 12
      tabs. About two were visible at once, the group labels and badges were
      dropped to make them fit, and there was no way to see what else existed
      short of dragging through the whole strip. It is replaced by a drawer:
      one tap shows all 12 sections at once, grouped, with their badges, and
      the button that opens it is labelled with the section you are on.

   2. TOUCH. A lot of controls were sized for a mouse — 16px id buttons, 29px
      segment options, 31–34px actions. Anything you are expected to hit gets a
      44px target on a phone (the iOS/Material floor), which mostly means
      min-height plus honest padding rather than new layout.
   ========================================================================== */

@media (max-width:760px){

  /* ---------------------------------------------------------------- topbar */

  /* The wordmark's text is redundant next to a section button that names the
     page — keep the "B" mark alone as the go-home target. */
  .adm-brand > span:not(.adm-brand-mark){ display:none; }
  .adm-brand{ flex:0 0 auto; }
  .adm-brand-mark{ width:36px; height:36px; }

  .adm-top{
    /* Give the row a stable min-height so the sticky offset the rail and the
       drawer are measured against (--adm-top-h) doesn't jitter as the user
       name loads in. */
    min-height:60px;
    gap:8px;
  }

  .adm-navbtn{
    display:inline-flex; align-items:center; gap:7px;
    min-width:0; flex:1 1 auto;              /* takes the slack between brand and actions */
    min-height:44px; padding:6px 10px;
    background:var(--adm-card); border:1px solid var(--adm-border);
    border-radius:11px; cursor:pointer;
    color:var(--adm-text); font-size:15px; font-weight:700;
    transition:border-color .15s, background .15s;
  }
  .adm-navbtn:active{ background:var(--adm-card-hi); }
  .adm-navbtn[aria-expanded="true"]{ border-color:var(--adm-border-hi); }
  .adm-navbtn-burger{ width:17px; height:17px; flex:0 0 auto; color:var(--adm-muted); }
  .adm-navbtn-label{
    min-width:0; flex:1 1 auto; text-align:left;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .adm-navbtn-chev{
    width:15px; height:15px; flex:0 0 auto; color:var(--adm-muted);
    transition:transform .2s;
  }
  .adm-navbtn[aria-expanded="true"] .adm-navbtn-chev{ transform:rotate(180deg); }

  /* The sign-out button is a destructive action sitting next to the theme
     toggle; both need a real target, and the name label must not push them
     off-row. */
  .adm-logout{ min-height:40px; padding:8px 12px; font-size:14px; white-space:nowrap; }
  .adm-theme-toggle{ min-width:40px; min-height:40px; }
  .adm-user-info{ display:none; }        /* the drawer footer carries it instead */

  /* ---------------------------------------------------------------- drawer */

  .adm-nav-scrim{
    display:block;                      /* the desktop rule above hides it */
    position:fixed; inset:0; z-index:800;
    background:rgba(6,7,11,.6);
    opacity:0; transition:opacity .22s ease;
    /* Only the OPEN scrim takes taps. The close path removes `.open` and hides
       the element on a timer; if that timer is ever late (a throttled
       background tab), this keeps a fully transparent scrim from silently
       eating every tap on the page underneath it. */
    pointer-events:none;
  }
  .adm-nav-scrim.open{ opacity:1; pointer-events:auto; }
  /* `hidden` alone loses to the `display:block` that `position:fixed` implies
     in some resets — state it, so the scrim is truly gone when closed and
     cannot swallow taps meant for the page. */
  .adm-nav-scrim[hidden]{ display:none; }

  /* The rail, restated as a fixed drawer. `body.admin-mode .adm-side` in
     11-admin-reading.css sets position/top/height at a higher specificity than
     a bare `.adm-side`, so every one of those properties is restated here at
     matching weight — this is the exact trap the old strip rules hit. */
  .adm-side,
  body.admin-mode .adm-side{
    position:fixed; z-index:810;
    top:0; left:0; bottom:0; height:100dvh;
    width:min(310px, 86vw);
    padding:0 10px calc(18px + env(safe-area-inset-bottom));
    border-right:1px solid var(--adm-border); border-bottom:none;
    overflow-y:auto; overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;        /* scrolling the drawer must not scroll the page under it */
    flex-direction:column; align-items:stretch;
    transform:translateX(-100%);
    transition:transform .26s cubic-bezier(.22,.61,.36,1);
    box-shadow:none;
    visibility:hidden;                  /* keeps it off the tab order while closed */
    /* --adm-panel is `rgba(255,255,255,.78)` in the light theme: a deliberate
       frosted tint that works when the rail sits in normal flow over the page
       background. Floating above the content as a drawer, that same 78% let the
       page read straight through the menu. Paint the tint over an opaque base
       so the drawer is solid in both themes without losing the intended colour. */
    background:linear-gradient(var(--adm-panel), var(--adm-panel)), var(--adm-bg);
  }
  /* The light theme styles the rail as frosted glass —
     `rgba(255,255,255,.55)` + `backdrop-filter:blur(10px)`, at a specificity
     (:root[data-theme] body.admin-mode .adm-side) the generic rule above cannot
     reach. In flow that reads as a tasteful tint over the page background; as a
     drawer floating over the content it left the page legible THROUGH the menu.
     Restated at matching weight, opaque, and without the blur — which is pure
     GPU cost once nothing shows through it. */
  :root[data-theme="light"] body.admin-mode .adm-side{
    background:linear-gradient(var(--adm-panel), var(--adm-panel)), var(--adm-bg);
    backdrop-filter:none;
  }

  .adm-side.open,
  body.admin-mode .adm-side.open{
    transform:none;
    visibility:visible;
    box-shadow:0 0 60px rgba(0,0,0,.55);
  }

  /* Drawer header — sticky so "close" is reachable from anywhere in a list of
     12 items on a short screen. */
  .adm-side-head{
    position:sticky; top:0; z-index:1;
    display:flex; align-items:center; justify-content:space-between;
    gap:10px; padding:14px 4px 10px; margin-bottom:2px;
    /* Opaque for the same reason as the drawer itself — the list scrolls
       underneath this header. */
    background:linear-gradient(var(--adm-panel), var(--adm-panel)), var(--adm-bg);
    border-bottom:1px solid var(--adm-border);
    font-size:12.5px; font-weight:800; letter-spacing:1px;
    text-transform:uppercase; color:var(--adm-muted);
  }
  .adm-side-close{
    display:grid; place-items:center;
    width:40px; height:40px; flex:0 0 auto;
    background:transparent; border:1px solid var(--adm-border);
    border-radius:10px; color:var(--adm-muted); cursor:pointer;
  }
  .adm-side-close svg{ width:17px; height:17px; }
  .adm-side-close:active{ background:var(--adm-card-hi); color:var(--adm-text); }

  /* Group labels and badges come BACK — the drawer has room the strip didn't,
     and they are what makes 12 destinations scannable. */
  .adm-side-section{ display:block; padding:14px 12px 6px; }
  .adm-side-section:first-of-type{ padding-top:8px; }
  .adm-tab .adm-tab-badge{ display:inline-block; }

  .adm-tab{
    flex:0 0 auto;
    min-height:48px;                    /* comfortable list-row target */
    padding:10px 12px;
    font-size:16px;
  }
  /* The desktop hover nudge reads as a jitter under a finger. */
  .adm-tab:hover{ transform:none; }

  .adm-side-foot{
    display:block;                      /* the desktop rule above hides it */
    margin-top:auto; padding:14px 12px 4px;
    border-top:1px solid var(--adm-border);
    color:var(--adm-muted); font-size:13px; line-height:1.45;
  }
  .adm-side-foot b{ display:block; color:var(--adm-text); font-size:14.5px; font-weight:700; }

  /* While the drawer is open the page behind must not scroll. The lock goes on
     <html>, never <body>: locking the body breaks the sticky topbar (the same
     defect already documented for the public site's drawer). */
  html.adm-nav-locked{ overflow:hidden; }

  @media (prefers-reduced-motion:reduce){
    .adm-side, body.admin-mode .adm-side, .adm-nav-scrim{ transition:none; }
  }

  /* ------------------------------------------------------- section headings */

  /* A 28px display heading plus a four-line description was costing ~380px of
     an 812px screen before any content appeared. */
  .adm-main{ padding:16px 14px calc(28px + env(safe-area-inset-bottom)); }
  .adm-section h4{ font-size:21px; gap:8px; }
  .adm-section h4 svg,
  .adm-section h4 [data-ico] svg{ width:20px; height:20px; }
  .adm-section-sub{
    font-size:14.5px; line-height:1.45; margin-bottom:14px;
    /* Two lines is enough to say what the page is; the rest is reference the
       admin has already read by their second visit. */
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    overflow:hidden;
  }
  .adm-section-head{ margin-bottom:14px; gap:10px; }
  .adm-section-head .adm-section-text{ min-width:100%; }   /* tools drop to their own row */
  .adm-section-tools{ width:100%; flex-wrap:wrap; }
  .adm-section-tools > *{ flex:1 1 auto; justify-content:center; }

  /* ---------------------------------------------------------- touch targets */

  .adm-icon-btn,
  .adm-action,
  .adm-pill,
  .adm-btn{ min-height:44px; }
  .adm-action{ padding:9px 14px; font-size:14.5px; }
  .adm-pill{ padding:10px 16px; }
  .adm-icon-btn{ padding:10px 14px; }
  .adm-row-actions{ flex-wrap:wrap; gap:8px; }

  /* Rows of actions read better as full-width stacked buttons than as a
     cramped wrap once there are three or more. */
  .adm-row-actions > .adm-action{ flex:1 1 auto; justify-content:center; }

  /* Native controls: iOS zooms the whole page when a focused field's text is
     under 16px, and the zoom does not come back on blur. Two admin selects
     were at 14–15px. */
  .admin select,
  .admin input[type=text],
  .admin input[type=number],
  .admin input[type=password],
  .admin input[type=search],
  .admin input[type=email],
  .admin textarea{ font-size:16px; }
  .admin select{ min-height:44px; }

  /* Checkboxes ship at 13px — unhittable. Scaling the box keeps the native
     control (and its checked state) rather than rebuilding it. */
  .admin input[type=checkbox],
  .admin input[type=radio]{
    width:20px; height:20px;
    /* These sit in `display:flex` labels, where a plain `width` is only a
       starting size — the default `flex-shrink:1` then squeezed them back to
       13px next to a long label. Take them out of the shrink. */
    flex:0 0 auto;
    accent-color:var(--adm-accent);
  }
  /* ...and give the label around it a real row to be tapped on. */
  .adm-grid-opts label,
  .adm-check label,
  label.adm-check{ min-height:44px; display:flex; align-items:center; gap:10px; }

  /* Copy-the-id buttons were 16–20px tall: the text WAS the whole target. Kept
     to 36px rather than the full 44 — they are a secondary affordance inside an
     already dense row, and a 44px chip next to a name reads as a primary
     button, which is not what a "tap to copy the id" control should look like. */
  .fin-st-id,
  .adm-ur-id{ min-height:36px; padding:6px 9px; }

  /* The rest of the row's controls get the full 44px, unlike the id chips
     directly above. The exemption there is about WEIGHT — an id chip should not
     look like a primary button. These three are the opposite: they are the
     primary actions on the screen they sit on, and they were simply missed by
     the pass that set 44px on .adm-btn and select.
       .fin-st-btn  — "Give premium" / "Manage" on a student row, measured 36px
       .adm-ur-seg  — the All / Online / Premium filter tabs, 38px
       .adm-hscan   — Health's Re-scan, 38px
     All three are below the iOS/Material floor this file sets out to enforce. */
  .fin-st-btn,
  .adm-ur-seg,
  .adm-hscan{ min-height:44px; }

  /* --------------------------------------------------------- scrolling data */

  /* Wide tables already scroll horizontally; on a phone they need momentum and
     a scroll boundary so a sideways drag doesn't drag the page instead. */
  .adm-tbl-wrap,
  .adm-htable-wrap,
  .adm-users-scroll,
  .fin-tabs,
  .adm-hcats{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }

  /* Health category chips and finance sub-tabs are horizontal scrollers by
     design — they just need to be thumb-sized. */
  .adm-hcat,
  .fin-tab,
  .tier-seg-opt,
  .adm-ur-btn{ min-height:40px; }
  .tier-seg-opt{ padding-top:9px; padding-bottom:9px; }

  /* -------------------------------------------------- reading / content list */

  /* One flex row of name + tier chip + two icon buttons left the title 105px at
     375px — "The fluor…", "The Scie…", "The Pira…" — and the title is the only
     thing that tells one passage from another. Give it the whole first line and
     let the chip and the actions share the second. */
  .rd-list-card{ flex-wrap:wrap; gap:10px; padding:14px 16px; }
  .rd-list-card-name{
    flex:1 1 100%;
    font-size:17px; line-height:1.32;
    white-space:normal;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
    overflow:hidden;
  }
  .rd-list-card-actions{ margin-left:auto; gap:8px; }
  .rd-icon-btn{ width:40px; height:40px; }

  /* The builder header packs title + PUBLISHED pill + Unpublish onto one
     wrapping row, but the title is `flex:1 1 0` with `min-width:0` — so instead
     of pushing the others onto the next line it collapsed to 116px and broke
     the passage name mid-word ("The fluorid / ation / contro / versy").
     A 100% basis makes the title take line one and the controls line two. */
  .rd-builder-title{ flex:1 1 100%; font-size:22px; line-height:1.25; }
  /* `space-between` was distributing the wrapped second line to the right edge,
     leaving the status pill floating away from the title it describes. */
  .rd-builder-head-row{ gap:10px; justify-content:flex-start; }

  /* The toolbar's three buttons each sized to their own text, so they stacked
     as a ragged left-aligned staircase. Two per row, equal width. */
  .rd-list-toolbar{ gap:10px; }
  .rd-list-search{ flex:1 1 100%; min-width:0; }
  .rd-list-toolbar > .rd-btn{
    flex:1 1 calc(50% - 5px); justify-content:center; min-height:44px;
    /* A flex item's default `min-width:auto` floors it at its min-content
       width. "Import from PDF" + "Import HTML" measure 346px plus a 10px gap
       against 353px of row — seven pixels over, so both wrapped to full-width
       rows of their own. Letting them shrink puts them back on one line. */
    min-width:0; font-size:14.5px; padding-left:10px; padding-right:10px;
  }
  .rd-list-toolbar > .rd-btn-primary{ flex:1 1 100%; font-size:16px; }  /* the create action leads */

  /* ------------------------------------------------------------ user roster */

  /* The search field was `flex:1 1 100%`, which took the whole row and left the
     46px refresh button stranded on a line of its own — about 90px of empty
     screen above the list. They share a row: search takes the slack. */
  .adm-ur-search{ flex:1 1 auto; min-width:0; }
  .adm-ur-refresh{ flex:0 0 auto; }
}

/* ------------------------------------------------------ user roster: phone

   The row is a six-column grid on desktop and folds to a wrapped two-line flex
   at ≤1080px. On an actual phone that fold was ragged: because .adm-ur-who has
   flex-basis 0, flex line-breaking placed the device chip up on line 1 next to
   the button, and the "Give premium" button — pushed right by margin-left:auto
   — orphaned onto a line of its own with dead space beside it. It also fought a
   second, half-finished reflow that used to live here, so the two sets of
   `order` rules cancelled out.

   This replaces both with ONE deterministic three-line card. The break is not
   left to chance: the .adm-ur-row::after spacer (flex-basis:100%, defined in
   37-admin-users.css and still in force here at order:4) hard-splits line 1
   from the rest, and the action's own flex-basis:100% guarantees it a full line.

     line 1 — avatar · identity (name + @id), the whole width to itself
     line 2 — access chip · device chip · activity   (the "status" row)
     line 3 — the full-width Give-premium / Manage button (a proper 44px target)

   Giving the identity all of line 1 is what keeps it to two tidy lines instead
   of wrapping to four in a 155px column — at 320px a shared line 1 left the name
   and id barely enough room to breathe. Access + device + activity are all
   secondary, so they share the next line and wrap among themselves if a very
   narrow screen demands it. Priority reads top-to-bottom: who, their tier, the
   one action — the same story the desktop table tells left-to-right. */
@media (max-width:600px){
  .adm-ur-row{
    display:flex; flex-wrap:wrap; align-items:center;
    gap:9px 10px; padding:12px 13px;
  }
  .adm-ur-av  { order:1; flex:0 0 auto; align-self:center; }
  .adm-ur-who { order:2; flex:1 1 auto; min-width:0; }
  /* order:4 is the ::after line-break spacer from 37-admin-users.css — placing
     everything below at 5+ drops it under the identity and ends line 1. */
  .adm-ur-acc { order:5; flex:0 0 auto; }
  .adm-ur-dev { order:6; flex:0 1 auto; min-width:0; }
  .adm-ur-seen{
    order:7; flex:1 1 auto; min-width:0;
    flex-direction:row; align-items:baseline; gap:6px;
    justify-content:flex-start; text-align:left;
  }
  .adm-ur-act { order:8; flex:1 1 100%; }
  .adm-ur-act .adm-ur-btn{ flex:1 1 auto; width:100%; height:44px; font-size:15px; padding:0 14px; }
  .adm-ur-go{ display:none; }
  /* The identity owns line 1, so a long Telegram name wraps to a second line
     instead of ellipsing away the id the row exists to show. */
  .adm-ur-name{ white-space:normal; overflow:visible; }
  .adm-ur-sub { white-space:normal; overflow:visible; }
}

/* Very narrow phones (iPhone SE and friends): the topbar runs out of room for
   a section label AND a worded sign-out button. */
@media (max-width:400px){
  .adm-navbtn{ font-size:14px; padding:6px 8px; }
  .adm-logout{ padding:8px 10px; font-size:13px; }
  .adm-main{ padding-left:11px; padding-right:11px; }
  .adm-section h4{ font-size:19px; }
}