/* THE CATALOGUE ON A PHONE — 27 October 2026.
 *
 *   "can you optimize for mobile view - currently not optimized."
 *
 * MEASURED FIRST, at 390x844, before a line of this was written:
 *
 *   the catalogue overflowed the viewport by 408px      — one CSS collision, below
 *   the record drawer opened at left 416                — off the screen, a consequence of it
 *   44 tap targets were under 32px tall
 *   264 pieces of text were set under 11px              — the generated block at the end
 *   the admin page's class count overflowed by 291px
 *
 * The needs page and the admin page did not overflow at all, and the catalogue's table was
 * already fine: it is 580px inside a `.scroll` box that scrolls sideways on purpose. So almost
 * all of the 408px was ONE rule, and the drawer being off-screen was not a drawer bug.
 *
 * WHY A SEPARATE SHEET. public/styles.css is regenerated whole by the other run, so a rule put
 * there is a rule with a short life; public/layout.css is that run's own durable sheet. This file
 * is this run's, linked after both on all three pages, and it holds the width work and nothing
 * else — so a regeneration cannot take it and nobody has to find mobile rules threaded through
 * two thousand desktop ones.
 *
 * It is loaded on index.html, requirements.html and admin.html. t84 holds all three links.
 */

/* ---- 1. THE COLLISION, AND IT IS NOT A MOBILE RULE ---- *
 *
 * `<div class="fpills runs" id="fRunsPills">` is the "where it runs" filter row. `.runs` is also
 * the BUILT-WHERE BADGE on a catalogue row — `.runs{display:inline-block;white-space:nowrap}` —
 * and it is written later in styles.css than `.fpills{display:flex;flex-wrap:wrap}`, so with
 * equal specificity the badge wins and the filter row becomes one unbreakable inline line. On a
 * desktop it has the room. At 390px it computed 767px wide inside a 342px bar, and because the
 * layout viewport grows to the widest thing on the page, `.drawer{width:min(1500px,97vw)}` then
 * resolved against 798px and opened past the right edge of the screen.
 *
 * So this is the fix for both, it is not inside a media query, and it is deliberately scoped to
 * the one element that carries both classes rather than reaching into the badge rule — the badge
 * is only ever drawn as a <span>, and this row is only ever a <div>. */
.fpills.runs {
  display: flex;
  flex-wrap: wrap;
  white-space: normal;
  min-width: 0;
  margin-left: 0;
  vertical-align: baseline;
  letter-spacing: normal;
  color: inherit;
  font: inherit;
}

/* A pill row cannot be narrower than its widest pill unless it is told it can be. Every filter
   row wraps already; this is what lets it. */
.fpills { min-width: 0; }

@media (max-width: 640px) {

  /* ---- 2. THE DRAWER TAKES THE SCREEN ---- *
   * 97vw and a 34px gutter is a desktop drawer. On a phone the record is the whole screen, and a
   * 3% strip of the page behind it is not a way back — the close button is. */
  .drawer {
    width: 100vw;
    max-width: 100vw;
    left: 0;
    right: 0;
    border-left: 0;
    box-shadow: none;
  }

  /* ---- 3. SOMETHING TO PRESS ---- *
   * 36px, which is the floor a finger needs; the smallest measured was 22px. Height only — the
   * labels set the width and several of them are two words. */
  .btn,
  .fpills button,
  .atabs button,
  .tabs button,
  .nav .age,
  .nav .cmtall,
  .cov,
  .secedit,
  .linepen,
  .covedit {
    min-height: 36px;
  }
  /* A pencil is square, and 36px of width on one is 36px taken from the heading beside it. */
  .secedit,
  .linepen,
  .covedit { min-width: 36px; }

  /* ---- 4. THE COUNT BESIDE A HEADING GOES UNDER IT ---- *
   * `h2 .acnt` is "12 in use · 3 waiting" after an <h2> that is already the full width. Inline it
   * overflowed by 291px; on its own line it costs one line of small type. */
  h2 .acnt,
  h2 .acnt.on {
    display: block;
    margin-left: 0;
    margin-top: 3px;
  }

  /* A long unbroken word — a workflow id, a data token, a URL in a note — is the other way a page
     grows past the screen. Wrapping one is better than scrolling the whole page sideways. */
  .wrap,
  .panel,
  .drawer { overflow-wrap: anywhere; }
}

/* ---- GENERATED, do not hand-edit: scripts/mobile-type-floor-2026-10-27.js ---- */
/* 104 rules across styles.css, layout.css, needs.css set text under 11px. On a desktop that is a
   badge; on a phone it is unreadable. Each is raised TO the floor and no further, so nothing that
   is already readable changes size, and every desktop rule is left exactly as it was. */
@media (max-width: 640px) {
  :is(
    .aball.none,
    .agarch,
    .agd dt,
    .agmore,
    .aguse dt,
    .agwarn,
    .atabs .acnt,
    .bchip,
    .brand small,
    .cat .wf .cmt,
    .cat .wf .u,
    .cat tr.grp .ph,
    .cbox .chead,
    .cell,
    .clsgrid .hd,
    .clsk,
    .complist .cst,
    .complist .cuse,
    .dchip,
    .difftab th,
    .drawer .bak,
    .drawer .basub,
    .drawer .iflow .iflabel,
    .drawer .lchip,
    .drawer .openflag,
    .drawer .revadd,
    .drawer .revc .revok,
    .drawer .tbdc,
    .drawer a.wfref b,
    .dropped>span,
    .egchip b,
    .egmap .egcolt,
    .egmap .egvia,
    .egmap .lcid,
    .fckh,
    .gph,
    .gtrust,
    .iss,
    .itile .ik,
    .jse span,
    .jwho span,
    .lane,
    .lane.diff i,
    .lanec,
    .lccard .lcch b,
    .lccard .lcdeg,
    .lccard .lctag,
    .lcmap .lcid,
    .ld .lv i,
    .lenslead,
    .letab th,
    .llegend .toflow,
    .nat,
    .now,
    .nself,
    .nwhy,
    .onlyc,
    .openit,
    .rails .rbr i,
    .reach,
    .relhd,
    .relk,
    .relm,
    .reln,
    .relq span,
    .remarks .rmm .btn,
    .reqblocks,
    .reqconf,
    .reqkind,
    .reqlocal,
    .reqsrc,
    .reqtabs i,
    .revc,
    .rkeyi em,
    .rolechip,
    .rsum .act,
    .runs,
    .runsnow .rl,
    .sb .mom > span,
    .sb .slot,
    .sbadge,
    .seg button .segcount,
    .seg button .segmark,
    .sheet .fld>span,
    .sstory .smiss,
    .state .dots,
    .state .mk,
    .state.TBC .pr,
    .surfrow .sf,
    .syslist .sysw,
    .tbl th,
    .thread .mh span,
    .thread .tact .btn,
    .tip,
    .top .editor span,
    .top .sub,
    .u,
    .usebar .ucnt,
    .was,
    .wl .dots,
    .wl .mat,
    .wl.partcode,
    .wl.tbc i,
    ol.flow .n
  ) { font-size: 11px; }
}
/* ---- end generated ---- */