/* mobile.css: the PHONE layer for the whole site (queue item 0, Koley 3 Oct 23:00 "fix the mobile view everywhere"; cloud Site Designer, 4 Oct 2026).
   CSS-LAYER ONLY, loads LAST (after site-design.css and the page layers). Everything lives inside @media (max-width: 800px) and (max-width: 480px),
   so desktop and tablets above 800 px see nothing of it. rem/em sizes; nothing under 12.5 px; tap targets ≥ 44 px (≥ 40 px in the top bar).
   Markup it can use when present (DESIGN-MARKUP-NOTES.md block E): td[data-label] (the key of a key/value card), details.hgsheet (the search page's "Filters" sheet).
   `!important` only where the shell, the site layer or a page's own <style> already use it, plus one that fights inline column widths on the search cells (`width: auto !important`); each listed in block E7 with cause and exit. */

@media (max-width: 800px) {
  /* ---------- M1. shell: text floor, tap targets, the top bar ---------- */
  :root { --sd-label: 12.5px; }                                   /* the site layer's label size (small, .meta, .hint, labels, chips) was 11.5 px */
  html body .main .wrap small, html body .main .wrap .meta, html body .main .wrap .hint, html body .main .wrap .note, html body .main th, html body .main .xmeta, html body .main td small { font-size: .78125rem; line-height: 1.4; }
  html body .main .wrap .ovtag { font-size: .78125rem !important; }   /* shell.css: .ovtag { font-size: 11.5px } with !important margins; the site layer restyles it at line 169 */
  html body .top2 { padding: .5rem .875rem; gap: .5rem; min-height: 3.5rem; }
  html body .top2 a.btn.login, html body .top2 .btn.go { min-height: 2.75rem !important; padding: 0 .75rem !important; font-size: .78125rem !important; display: inline-flex; align-items: center; justify-content: center; line-height: 1 !important; }   /* shell.css 800-px rule: 11 px; site layer line 68: 11.5 px !important */
  html body .top2 .thtog, html body .top2 .mnu { min-width: 2.75rem; min-height: 2.75rem; width: 2.75rem; height: 2.75rem; }
  html body .top2 .mlogo { min-height: 2.75rem; display: inline-flex; align-items: center; font-size: 1.125rem; }
  /* Log out on phones (Reviewer note 1): shell.css line 103 already hides the top-bar .tlogout below 800 px; the drawer (body.mopen .side) carries a.slogout when html.signedin.
     This file does not hide anything: it makes the drawer's Log out and Account 44-px rows and keeps them visible; the audit's "drawer Log out" column measures it on the signed-in views. */
  html.signedin body.mopen .side a.slogout, html.signedin body.mopen .side a[href*="logout"] { display: flex !important; min-height: 2.75rem; align-items: center; }
  html body.mopen .side a, html body.mopen .side details.sgrp > summary { min-height: 2.75rem !important; align-items: center; }   /* shell.css: 7-px padding !important rows in the panel */
  /* buttons, inputs, selects, chips: 44 px tall, full width where they stand alone */
  html body .btn, html body .main button:not(.thtog):not(.mnu):not(.wmbar button):not(.hgpg button):not(.cal button):not(.dbcal button):not(.pbill button):not(.rp):not(.secb):not(.hgx):not(.hgmx):not(.svf):not(.svt):not(.svp):not(.hglink):not(.hgsort):not(.cald):not(th > button):not(td > button), html body .main input:not([type=checkbox]):not([type=radio]), html body .main select, html body .main textarea { min-height: 2.75rem !important; }   /* the site layer's button system (site-design.css line 57) sets min-height 38 px !important with exactly this exclusion list; same specificity, this file loads later */
  /* The layer's OWN targets under 44 px, on purpose (Reviewer note 3): the icon-only × next to a filter label (.hgx / .hgmx, 36 px) and the inline chips (.chip, .chip2, .fchip, NAICS / SIN codes: 36 px, they sit in running text and lists). Everything else the layer touches is 44 px. */
  html body .main .hgx, html body .main .hgmx { width: 2.25rem; height: 2.25rem; }
  html body .main .wmbar button, html body .main .hgpg button { min-height: 2.75rem; }
  html body .main input[type=checkbox], html body .main input[type=radio] { width: 1.25rem; height: 1.25rem; margin: .375rem; }
  html body .main .xform label { gap: .375rem; }
  html body .main .wrap .chip, html body .main .wrap .chipx, html body .main .wrap .pill, html body .main .wrap .tag, html body .main .chip2, html body .main .fchip, html body .main .conaics a, html body .main .sinc { min-height: 2.25rem; display: inline-flex; align-items: center; }
  /* links in lists and tables: a 44-px hit area without moving the text */
  html body .main .dbl a, html body .main td a, html body .main .coitem, html body .main .ofres a { padding-top: .5rem; padding-bottom: .5rem; display: inline-block; }
  /* images and inline SVGs never wider than the phone */
  html body .main img, html body .main svg, html body .main video, html body .main canvas, html body .main iframe { max-width: 100%; height: auto; }
  html body .main .wmap svg, html body .main .eumap svg { height: auto; }
  html body .main .wrap { padding-left: 1rem !important; padding-right: 1rem !important; }   /* shell.css: 18 px !important */
  html body .main pre, html body .main code, html body .main .ptxt, html body .main .minput { max-width: 100%; overflow-wrap: anywhere; white-space: pre-wrap; }
  html body .main .wrap > div > * { max-width: 100%; }
  html body .main .mtag, html body .main .minput, html body .main figcaption, html body .main .ptxt { font-size: .78125rem !important; }
  html body .main summary { min-height: 2.75rem; display: flex; align-items: center; }
  html body .main td, html body .main th, html body .main li, html body .main p { overflow-wrap: anywhere; min-width: 0; } html body .main td > * { max-width: 100%; min-width: 0; }   /* docs.html: a cell's content ran 25 px past its card */
  html body .main h1, html body .main .wrap > div > h2:first-child, html body .main .phead h2, html body .main .dbhead h2, html body .main h2#dbhi, html body .main h2#coname, html body .main h2#ofname, html body .main .plhead h2 { font-size: 1.5rem !important; line-height: 1.2 !important; letter-spacing: -.015em !important; }   /* the site layer's page-title rule (!important, clamp to 30 px) */
  html body .main .phead p { font-size: 1rem; }

  /* ---------- M2. the four-column footer: a compact 2 × 2 link grid with 44-px rows (was 541–615 px of chrome on every page) ---------- */
  html body footer { padding: .75rem 0 .5rem; }   /* shell.css: 44 px / 36 px */
  html body footer .wrap { padding: .75rem 1rem 1rem !important; }
  html body footer .sheet { display: block; padding: 0; }
  html body footer .sheet > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .25rem; padding: .375rem 0; border: 0; }
  html body footer .sheet > div:first-child { display: block; padding: 0 0 .5rem; }
  html body footer .sheet > div:first-child p { font-size: .875rem; line-height: 1.45; margin: .25rem 0 0; max-width: 40ch; }
  html body footer .sheet h4 { flex: 0 0 100%; font-size: .78125rem; letter-spacing: .06em; margin: 0 0 .125rem; }
  html body footer .sheet a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .625rem 0 0; margin: 0 .375rem 0 0; font-size: .9375rem; }
  html body footer .sheet > div:first-child p { font-size: .8125rem; }
  html body footer .margin { display: flex; flex-direction: column; gap: .25rem; margin-top: .75rem; font-size: .78125rem; letter-spacing: 0; text-transform: none; }
  html body footer .margin span { font-size: .78125rem; }

  /* ---------- M3. horizontal strips scroll inside themselves (tabs, region buttons, stage tabs, source strips) ---------- */
  html body .main .wmbar, html body .main .pltabs, html body .main .hgtabs, html body .main .cotabs, html body .main .cktabs, html body .main .src, html body .main .plseg, html body .main .hgmbtns { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; gap: .375rem; }
  html body .main .wmbar::-webkit-scrollbar, html body .main .pltabs::-webkit-scrollbar, html body .main .hgtabs::-webkit-scrollbar, html body .main .cotabs::-webkit-scrollbar, html body .main .cktabs::-webkit-scrollbar { display: none; }
  html body .main .wmbar button, html body .main .pltabs button, html body .main .hgtab, html body .main .cotabs a, html body .main .cktabs button { flex: none; min-height: 2.75rem; white-space: nowrap; }
  html body .main .hgtabs { flex-wrap: nowrap; }                     /* the search source tabs wrapped to three lines */
  html body .main .wmbar { mask-image: none; -webkit-mask-image: none; }

  /* ---------- M4. stat tiles / strips: two per row, labels at the floor ---------- */
  html body .main .plk, html body .main .kpis, html body .main .ofkpi { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  html body .main .plk i, html body .main .kpis i, html body .main .ofkpi i { font-size: .78125rem !important; letter-spacing: 0; text-transform: none; }   /* .plk i 10.5 px; the density sheet's .kpis i 10 px !important */
  html body .main .plk b, html body .main .kpis b, html body .main .ofkpi b { font-size: 1.375rem; }
  html body .main .plk small, html body .main .kpis a.dbkl small { font-size: .78125rem; }

  /* ---------- M5. the search page: results as a card per row; the filter block with full-width controls ---------- */
  html body .hg .hgtw { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  html body .hg table#hgt, html body .hg #hgt tbody, html body .hg #hgt tr { display: block; width: 100%; min-width: 0; }   /* the page's own .hgt { min-width: 880px } and the percentage column widths are void once the cells are blocks */
  html body .hg #hgt td.msg { grid-column: 1 / -1; padding: 1.5rem 0; }
  html body .hg #hgt thead { display: none; }
  html body .hg #hgt tr { display: grid; grid-template-columns: 2.75rem 1fr auto; gap: .125rem .75rem; padding: .75rem 0; border-bottom: 1px solid var(--ln, var(--w-line, #e3e8ee)); align-items: start; }
  html body .hg #hgt td { display: block; padding: 0; border: 0; white-space: normal; max-width: none; width: auto !important; font-size: .875rem; }
  html body .hg #hgt td.mt { grid-column: 1; grid-row: 1 / span 4; }
  html body .hg #hgt td.t { grid-column: 2; font-weight: 500; }
  html body .hg #hgt td.ty, html body .hg #hgt td.ag, html body .hg #hgt td.sa { grid-column: 2; color: var(--mu, var(--w-muted, #5f6b7c)); font-size: .8125rem; }
  html body .hg #hgt td.ty { display: inline; } html body .hg #hgt td.ag::before { content: " · "; }
  html body .hg #hgt td.xs, html body .hg #hgt td.xn, html body .hg #hgt td.xp, html body .hg #hgt td.po { display: none; }
  html body .hg #hgt td.xv { grid-column: 2; font-variant-numeric: tabular-nums; }
  html body .hg #hgt td.dl { grid-column: 2; color: var(--mu, var(--w-muted, #5f6b7c)); font-size: .8125rem; }
  html body .hg #hgt td.to { grid-column: 3; grid-row: 1 / span 2; display: flex; gap: .25rem; }
  html body .hg .hgsplit, html body .hg .hgbox { grid-template-columns: 1fr; }
  html body .hg .hgin, html body .hg .hgsel { width: 100%; min-height: 2.75rem; }
  html body .hg .hgbar { flex-wrap: wrap; }
  /* with the markup of block E (details.hgsheet around the filter rows): closed by default on phones, "Filters" summary 44 px */
  html body .hg details.hgsheet > summary { display: flex; align-items: center; min-height: 2.75rem; font-weight: 500; cursor: pointer; list-style: none; }
  html body .hg details.hgsheet > summary::after { content: "\203A"; margin-left: auto; transform: rotate(90deg); }
  html body .hg details.hgsheet[open] > summary::after { transform: rotate(-90deg); }

  /* ---------- M6. data tables (company, office, contract vehicles, lists): a card per row at phone width ---------- */
  html body .main .cotbl, html body .main .ofwrap, html body .main .plwrap, html body .main .doc .xtable { overflow: visible; margin: 0; padding: 0; }
  html body .main .xtable, html body .main .oflist, html body .main .pllist, html body .main .doc table:not(.calg):not(.dbmt) { display: block; width: 100%; max-width: 100%; border: 0; border-radius: 0; background: transparent; }
  html body .main .xtable thead, html body .main .oflist thead, html body .main .pllist thead, html body .main .doc table:not(.calg):not(.dbmt) thead, html body .main .xtable tr:has(> th), html body .main .doc table:not(.calg):not(.dbmt) tr:has(> th) { display: none; }   /* company.html's table() writes its header as a plain <tr><th> row */
  html body .main .xtable tbody, html body .main .oflist tbody, html body .main .pllist tbody, html body .main .doc table:not(.calg):not(.dbmt) tbody { display: block; }
  html body .main .xtable tr, html body .main .oflist tr, html body .main .pllist tr, html body .main .doc table:not(.calg):not(.dbmt) tr { display: block; padding: .75rem 0; border-bottom: 1px solid var(--w-line, #e3e8ee); }
  html body .main .xtable td, html body .main .oflist td, html body .main .pllist td, html body .main .doc table:not(.calg):not(.dbmt) td { display: flex; justify-content: space-between; gap: .75rem; padding: .25rem 0; border: 0; min-width: 0; width: auto; max-width: none; white-space: normal; text-align: left; font-size: .875rem; }
  html body .main .xtable td:first-child, html body .main .oflist td:first-child, html body .main .pllist td:first-child, html body .main .doc table:not(.calg):not(.dbmt) td:first-child { display: block; font-weight: 500; padding-bottom: .375rem; }
  html body .main .xtable td:empty, html body .main .oflist td:empty, html body .main .pllist td:empty { display: none; }
  html body .main .xtable td small, html body .main .oflist td small, html body .main .pllist td small { display: block; width: 100%; }
  /* with block E markup (td[data-label]): the key on the left, the value on the right */
  html body .main td[data-label]:not(:first-child)::before { content: attr(data-label); color: var(--w-muted, #5f6b7c); font-size: .8125rem; flex: 0 0 40%; }
  html body .main .xtable td.n, html body .main .oflist td.n { justify-content: space-between; }
  /* the two-column registration table stays a key/value list */
  html body #coreg td:first-child { display: flex; font-weight: 400; color: var(--w-muted, #5f6b7c); width: auto; }
  html body #coreg tr { display: grid; grid-template-columns: 40% 1fr; gap: .5rem; padding: .5rem 0; } html body #coreg td { padding: 0; }
  /* dashboard "Top matches": badge · title; agency and date under it */
  html body .main .dbmt, html body .main .dbmt tbody { display: block; } html body .main .dbmt tr { display: grid; grid-template-columns: 2.75rem 1fr auto; gap: 0 .5rem; padding: .5rem 0; border-top: 1px solid var(--w-line, #e3e8ee); }
  html body .main .dbmt td { display: block; width: auto; padding: 0; border: 0; white-space: normal; overflow: visible; }
  html body .main .dbmt td:first-child { grid-row: 1 / span 2; } html body .main .dbmt .dbmta { grid-column: 2; font-size: .8125rem; } html body .main .dbmt .dbmte, html body .main .dbmt .dbmtd { grid-column: 3; text-align: right; font-size: .8125rem; }

  /* ---------- M7. company / office / people pages ---------- */
  html body #coprof .cohead, html body #coprof .coid { flex-direction: column; align-items: flex-start; gap: .75rem; }
  html body #coprof .colog { width: 3rem; height: 3rem; font-size: 1.125rem; }
  html body #coprof .cosec, html body #ofpage .ofsec { padding: 0 .875rem .75rem; }
  html body #coprof .cosec > h3, html body #ofpage .ofsec > h3 { margin: 0 -.875rem .75rem !important; padding: .75rem .875rem; font-size: 1.0625rem; }   /* same cause as item 2's heading rules (pages.css !important margins) */
  html body #coprof .kpis { grid-template-columns: 1fr 1fr; }
  html body #coprof .cotwo { grid-template-columns: 1fr; gap: .5rem; }
  html body #coprof .cobar { grid-template-columns: 1fr auto; } html body #coprof .cobar .l { grid-column: 1 / -1; } html body #coprof .cobar .t { grid-column: 1; }
  html body #coprof .conaics { gap: .375rem; } html body #coprof .conaics a, html body #coprof .sinc { min-height: 2.75rem; }
  html body #coprof .chip2, html body #compp .chip2, html body .main .chip2 { font-size: .78125rem !important; }   /* pages.css .chip2 11 px mono caps */
  html body #coprof .cochart .ax { font-size: 16px; }   /* SVG user units (viewBox 720 wide), NOT CSS px: the chart scales with its width, so 16 units render ≈ 15 px at 700 px wide; the ≤ 480 block sets 24 (≈ 13 px at 390). The audit measures SVG text at its rendered size (Reviewer note 2). */
  html body .main .rxd { height: auto; max-width: 100%; min-height: 0; }
  html body .main .rxd .rxs { position: static; width: 100%; } html body .main .rxd .rxs2, html body .main .rxd .rxs1 { position: static; transform: none; }
  html body .main .rxd .rxq { white-space: normal; overflow-wrap: anywhere; font-size: .8125rem; }
  html body .main .rxd ol.rxr li { width: auto; max-width: 100%; padding: .5rem 0 !important; }
  html body .main .rxd ol.rxr li small, html body .main .rxd ol.rxr li span, html body .main .rxd .rxn, html body .main .rxd .rxbar em, html body .main .rxd .rxbtn { font-size: .78125rem !important; }   /* pages.css .rxd ol.rxr li rules are !important */
  html body .main .cosug, html body .main .hgpop, html body .main .xsug { max-width: calc(100vw - 2rem); left: 0; right: 0; }

  /* ---------- M8. pipeline and dashboard ---------- */
  html body #pl .plhead h2 { font-size: 1.5rem !important; }
  html body #pl .plact { width: 100%; gap: .5rem; } html body #pl .plq { width: 100%; order: 3; }
  html body #pl .plseg button { min-height: 2.75rem !important; flex: 1; }
  html body #pl .plboard { display: block; } html body #pl .plcol { display: none; background: none; padding: 0; min-height: 0; } html body #pl .plcol.cur { display: flex; } html body #pl .plcol .plch { display: none; }
  html body #pl .plc { padding: .75rem; } html body #pl .plc h4 { font-size: .9375rem; -webkit-line-clamp: 3; } html body #pl .plc .ag { white-space: normal; font-size: .8125rem; }
  html body #pl .pt { font-size: .78125rem; padding: .25rem .5rem; }
  html body #pl .pldr { width: 100vw; max-width: 100vw; left: 0; right: 0; }
  html body #db .dbhead { flex-direction: column; align-items: stretch; gap: .75rem; } html body #db .dbact { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } html body #db .dbact .btn { width: 100%; justify-content: center; }
  html body #db .dbgrid { grid-template-columns: 1fr; gap: 1rem; } html body #db .dbcol { gap: 1rem; }
  html body #db .dbc { padding: .875rem; } html body #db .dbch { flex-wrap: wrap; gap: .25rem .75rem; } html body #db .dbch h3 { font-size: 1rem !important; }   /* shell.css 600-px rule: 14 px !important */
  html body #db .dbl li { gap: .625rem; padding: .625rem 0; } html body #db .dbl li > div { min-width: 0; } html body #db .dbl a { display: inline; padding: 0; overflow-wrap: anywhere; }
  html body #db .dbd { width: 3.75rem; flex: none; } html body #db .dbtag, html body #db .dbtag.new { min-width: 3rem; font-size: .78125rem !important; }
  html body #db .dbsc2, html body .main .dbsc2 { font-size: .78125rem !important; } html body #db .dbnew small { font-size: .78125rem !important; }   /* pages.css: .dbnew small { font: … !important }; the match badge .dbsc2 11.5 px */
  html body #db .calg { gap: .1875rem; } html body #db .cald { aspect-ratio: 1; min-height: 2.75rem; font-size: .8125rem; }
  html body #db .calnav button { width: 2.75rem; height: 2.75rem; }
  html body #db .dbalr label { flex-wrap: wrap; } html body #db .dbalr select { width: 100%; }
  html body #db .dbss select, html body #db .dbl label select { min-height: 2.75rem !important; }

  /* ---------- M9. maps and the home page ---------- */
  html body .main .wmap, html body .main .eumap { max-width: 100%; overflow: hidden; }
  html body .main .wmap svg { width: 100%; height: auto; display: block; }
  html body .main .wmbar button, html body .main .wmbar button.on { font-size: .8125rem !important; min-height: 2.75rem !important; padding: 0 .75rem !important; }   /* the map pages' own phone rule keeps 12 px / 30 px with !important */
  html body .main .lockcard { padding: 1rem; } html body .main .lockcard b { font-size: 1rem; }
  html body .main .grid3, html body .main .cards { grid-template-columns: 1fr; }
  html body .main .boards { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* ---------- M10. the narrow phone: one column everywhere, the stat strips stack, the page title 22 px ---------- */
  html body .main h1, html body .main .wrap > div > h2:first-child, html body .main .phead h2, html body .main .dbhead h2, html body .main h2#dbhi, html body .main h2#coname, html body .main h2#ofname, html body .main .plhead h2 { font-size: 1.375rem !important; }
  html body .main .xsright, html body .main .xsbtns { grid-template-columns: 1fr !important; }
  html body .main .xform { grid-template-columns: 1fr; } html body .main .xform .wide, html body .main .xform .full { grid-column: auto; }
  html body .hg #hgt tr { grid-template-columns: 2.5rem 1fr auto; }
  html body .main td[data-label]:not(:first-child)::before { flex-basis: 45%; }
  html body #coprof .kpis, html body #ofpage .ofkpi, html body .main .plk { grid-template-columns: 1fr 1fr; }
  html body footer .sheet { grid-template-columns: 1fr 1fr; }
  html body #coprof .cochart .ax { font-size: 24px; }
}