/* app-adapt.css -- the responsive layer for the 20/20 (SiteVoice) app itself: the supervisor screen,
 * the desks, the sign-in, every page the app serves on wool.app and rcr.app.sentailient.ai.
 *
 * The app has two layouts of its own: a phone layout with a bottom tab bar below 1000px, and a
 * desktop shell above it (a 200px left rail, the content in a 72rem column). Inside both sits the
 * board (wb- classes, a port of the GG Index board). What that left uncovered, 2026-09-16:
 *   - phones and iPads in portrait: the board rail is a 210px box showing one index of twenty-two;
 *     on a phone the board's pinned top block is ~590px tall, which is most of the screen;
 *   - iPads in landscape (1000-1279): the desktop shell plus the full board in ~820px -- the map
 *     squeezed, the divisions table cut off on the right, the page scrolling sideways;
 *   - laptops: the rail taller than the screen (needs ~930px);
 *   - monitors: a 1152px column beside a 200px rail, 16px type, a third of the screen empty.
 *
 * WHERE IT LIVES. The app is deployed from MK's branches, rebased and force-pushed daily, so this
 * is not in the repo: /srv/www/sitevoice-adapt/ on the fpo box, injected by nginx before the closing
 * head tag on every HTML page of both hosts (location / in each vhost). Deploys never touch it.
 * Every selector is prefixed with `html` so its rules win ties against the app's own. (Never write a
 * literal closing style tag inside this file's comments.)
 *
 * The owner's board rule (still.js): THE TOP HOLDS -- kept wherever a screen can afford it; on a
 * phone it cannot, so there the block scrolls with the page and only the index strip stays.
 *
 * Bands (CSS px):  < 640 phones  |  640-999 tablet portrait (the app's phone layout)  |  1000-1279
 * tablet landscape / 11" laptops (the app's desktop shell)  |  1280-1799 laptops (native design;
 * short screens get a tighter rail)  |  1800+ monitors, scaled 1.12 / 1.3 (2300+) / 1.55 (3000+). */

/* ============ every width: the board's own sticky pieces ============ */
html .wb-rail{max-height:calc(100dvh - var(--wb-navtop,0px) - var(--wb-toph,0px))}
/* the map was sticky at top:12px and slid under the pinned top block when the reader scrolled */
html .wb-mapwrap{top:calc(var(--wb-navtop,0px) + var(--wb-toph,0px) + 12px)}
/* the divisions table must never push the page sideways: it scrolls inside its column instead */
html .wb-side{overflow-x:auto}
html .wb-rank td.wb-m{max-width:150px}

/* ============ THE RAIL AS A STRIP: phones and tablets in portrait (< 1000, the app's phone layout) ============
 * One row of index tabs that swipes sideways and stays put, instead of a 210px box. On a phone the
 * top block is not pinned (it is most of the screen); on a tablet it stays pinned and the strip sits
 * under it. app-adapt.js keeps the strip's sideways position across the board's re-renders. */
@media (max-width:999px){
  html .wb-rail{max-height:none;position:sticky;top:calc(var(--wb-navtop,0px) + var(--wb-toph,0px));
    z-index:5;display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;padding:0;
    border-right:0;border-bottom:1px solid var(--wb-line);background:var(--wb-surface);
    scrollbar-width:thin;overscroll-behavior-x:contain;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent)}
  html .wb-rail .wb-rhead{flex:none;display:flex;flex-direction:column;justify-content:center;
    max-width:200px;padding:6px 12px;margin:0;border-bottom:0;border-right:1px solid var(--wb-line)}
  html .wb-rail .wb-rhead svg.wb-gauge{display:none}
  html .wb-rail .wb-rhead b{font-size:13px;line-height:1.15}
  html .wb-rail .wb-rhead span{font-size:10px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html .wb-rail .wb-rhead .wb-rworst,html .wb-rail .wb-rhead .wb-rnone{margin-top:1px}
  html .wb-rail .wb-ri{flex:none;width:auto;min-height:52px;align-items:center;gap:6px;padding:0 12px;
    border-left:0;border-bottom:3px solid transparent;white-space:nowrap;margin:0}
  html .wb-rail .wb-ri:hover{background:none}
  html .wb-rail .wb-ri.wb-on{border-bottom-color:var(--wb-accent);background:var(--wb-accent-soft)}
  html .wb-rail .wb-ri .wb-rl{overflow:visible;text-overflow:clip}
  html .wb-rail .wb-ri.wb-grp{margin-top:0;padding-left:14px;border-left:1px solid var(--wb-line);
    font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase}
  html .wb-rail .wb-ri.wb-ind{padding-left:10px}
  html .wb-rail .wb-ri.wb-top{position:static;padding:0 12px 0 14px;background:none;border-bottom:3px solid transparent;z-index:auto}
  html .wb-rail .wb-ri.wb-top.wb-on{background:var(--wb-accent-soft);border-bottom-color:var(--wb-accent)}
  html .wb-shell{grid-template-columns:minmax(0,1fr)}
  html .wb-two{grid-template-columns:minmax(0,1fr)}
  html .wb-mapwrap{position:static}
  html .wb-main{padding:12px 12px 30px;min-height:0}
}
/* phones: the top block scrolls with the page; the strip pins under the app's own sticky header */
@media (max-width:639px){
  html .wb-top{position:static}
  html .wb-rail{top:var(--wb-navtop,0px)}
  html .wb-rail .wb-rhead{max-width:150px;padding:4px 10px}
  html .wb-rail .wb-ri{min-height:48px;padding:0 10px;font-size:12px}
}

/* ============ tablet landscape and small laptops, 1000-1279: the desktop shell in a small width ============
 * The shell's 200px rail plus the board's 272px rail left ~500px for a map beside a table: the
 * table was cut off and the page scrolled sideways. The shell rail narrows, the board rail narrows,
 * and the map sits above the list rather than beside it, capped so it does not eat the screen. */
@media (min-width:1000px) and (max-width:1279px){
  html body{padding-left:160px}
  html .bottomnav{width:160px;padding-left:8px;padding-right:8px}
  html .bottomnav button{font-size:14px;padding:6px 10px}
  html .wb-shell{grid-template-columns:224px minmax(0,1fr)}
  html .wb-ri{font-size:12px;padding:4px 10px 4px 12px;gap:6px}
  html .wb-ri.wb-top{font-size:12.5px}
  html .wb-ri.wb-ind{padding-left:20px}
  html .wb-ri .wb-rv{min-width:38px;padding:2px 4px}
  html .wb-rhead{padding:6px 12px 8px}
  html .wb-main{padding:14px 16px 36px}
  html .wb-two{grid-template-columns:minmax(0,1fr);gap:14px}
  html .wb-mapwrap{position:static}
  html .wb-mapbox,html .wb-mapbox svg{max-height:400px}
}

/* ============ laptops and up: fit all twenty-two rail rows ============
 * Two things stack above the rail here: the app's own sticky header (113px) and the board's pinned
 * top block (~160px). And the app's touch rule gives every button a 44px minimum, which makes each
 * rail row 44px -- a 1,070px rail. The rows take their natural height again; at short heights the
 * rail head's dial goes (the number is on the "Overall here" card anyway) and, on the shortest
 * laptop screens, the app header scrolls away so the board's own block can hold on its own. */
@media (min-width:1000px){
  html .wb-ri{min-height:0}
}
@media (min-width:1000px) and (max-height:960px){
  html .wb-rail{padding-top:4px;padding-bottom:4px}
  html .wb-ri{padding:2px 13px 2px 15px;font-size:12.5px}
  html .wb-ri svg.wb-gauge{height:15px;width:auto}
  html .wb-ri.wb-grp{margin-top:3px}
  html .wb-rhead{padding:4px 14px 5px;margin-bottom:3px}
  html .wb-rhead svg.wb-gauge{display:none}
  html .wb-rhead b{font-size:13px}
}
@media (min-width:1000px) and (max-height:880px){
  html header{position:static}
  html .wb-ri{font-size:12px}
  html .wb-ri.wb-grp{font-size:9.5px}
  html .wb-rhead span{line-height:1.3}
}
@media (min-width:1000px) and (max-height:760px){
  /* a 720px laptop: the counts line inside the pinned block goes, the door and period bar stay */
  html .wb-top .wb-lede{display:none}
}
/* monitors are scaled up (below), which shrinks the height the board sees: keep the medium step */
@media (min-width:1800px){
  html .wb-rail{padding-bottom:8px}
  html .wb-ri{padding:3px 13px 3px 15px;font-size:12.5px}
  html .wb-ri svg.wb-gauge{height:16px;width:auto}
  html .wb-ri.wb-grp{margin-top:5px}
  html .wb-rhead svg.wb-gauge{width:84px;height:auto;margin:2px auto 0}
}

/* ============ laptops and monitors: the app's 200px rail leaves the board's map 264px wide at 1280 ============ */
@media (min-width:1280px){
  html .wb-two{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px}
}

/* ============ touch: an iPad is a tablet, not a small mouse (rows and tabs breathe; rail rows do not,
 * or the rail no longer fits a landscape screen) ============ */
@media (min-width:640px) and (pointer:coarse){
  html .wb-rank td,html .wb-sites td{padding:6px 6px}
  html .wb-tp{padding:9px 10px}
  html .wb-pr{padding:4px 0}
  html .wb-bar button,html .wb-cmp{padding-top:8px;padding-bottom:8px}
  html .wb-acc{padding:11px 12px}
  html .wb-thing{padding:6px 0}
}

/* ============ large monitors: the design, scaled ============
 * `zoom` scales the whole shell -- rail, column, board, the dials -- as one thing, text stays crisp,
 * and the board's own measurements (offsetHeight into --wb-toph, scrollY restores) stay consistent
 * because they all live in the same zoomed coordinate space. Above 2300 the column also widens. */
@media (min-width:1800px){ html body{zoom:1.12} }
@media (min-width:2300px){
  html body{zoom:1.3}
  html main{max-width:80rem}
  html .top,html .navrow{max-width:calc(80rem - 2 * var(--gutter,20px))}
}
@media (min-width:3000px){ html body{zoom:1.55} }