/* /facility-watch/fw-m.css — round two of the phone pass (loaded after fw.css and fw-cams.css; same tokens, nothing new to theme).
 * Who to call as a real tel: button outside every card link; the facility header's lamps as buttons; one menu on a phone; the
 * status line as one row; a one-row search on facility and city pages; drill tables that say they scroll; the city leads with
 * what to act on. Every colour is a token from fw.css, so Porcelain, Blueprint and Rust restyle all of it. */

/* ── who to call: a card's footer, OUTSIDE the card's link (fw-call.js) ── */
.fw-cw{display:flex;flex-direction:column;min-width:0;color:var(--card-ink);background:var(--card);border:2px solid var(--card-b);border-radius:6px}
.pw .fw-cw>a.fw-card{flex:1 1 auto;border:0;border-radius:4px}
.fw-call{border-top:1px solid var(--card-b)}
.pw .fw-tel{display:flex;align-items:center;gap:10px;min-height:40px;box-sizing:border-box;padding:4px 12px;text-decoration:none;color:var(--card-ink)}
.pw .fw-tel:hover b,.pw .fw-tel:hover span{text-decoration:underline}
.fw-tel-i{flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fw-tel>span{display:flex;flex-direction:column;min-width:0}.fw-tel b{font-size:14px;line-height:1.2;overflow-wrap:break-word}.fw-tel small{font-size:12px;color:var(--card-soft)}
.fw-nonum{display:flex;align-items:center;min-height:40px;box-sizing:border-box;padding:4px 12px;font-size:12.5px;font-weight:400;color:var(--card-soft)}
/* Who to call on the facility page: name and role left, a bordered Call button right */
.pw .fw-who{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}.fw-who-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.pw .fw-who .fw-tel.sm{flex:none;gap:8px;padding:0 14px;font-weight:700;color:var(--ink);border:2px solid var(--ink);border-radius:3px}.pw .fw-who .fw-tel.sm span{font-size:14px;color:inherit}
.pw .fw-who.first .fw-tel.sm{color:var(--board-ink);border-color:var(--board-ink)}
.pw .fw-who .fw-nonum{flex:none;max-width:45%;padding:0;min-height:0;text-align:right;font-size:12.5px;color:var(--soft)}.pw .fw-who.first .fw-nonum{color:var(--board-soft)}
.fw-who-more{min-height:40px;margin:8px 0 2px;padding:0 12px;font-size:13px;cursor:pointer;color:var(--ink);background:transparent;border:2px solid var(--ink);border-radius:3px}
.fw-who-more[aria-expanded="true"]{font-weight:700;color:var(--ground);background:var(--ink)}
.fw-who-all .fw-who{padding:8px 0}

/* ── the facility header: every lit lamp is a button that opens its rows under the header ── */
.pw .fw-lampb{display:flex;align-items:center;gap:9px;min-height:24px;padding:0;font:inherit;text-align:left;cursor:pointer;color:inherit;background:transparent;border:0}
.fw-lampb>span{text-decoration:underline dotted 1px;text-underline-offset:4px}.fw-lampb[aria-pressed="true"]>span{font-weight:700;text-decoration-style:solid}
.fw-fac>#head-panel{order:-3}.fw-fac>.fw-flowsec{order:-2}.pw .fw-under{min-width:0}
.d-qt,.fw-status-s,.fw-scope-back,.fw-here,.fw-mx,.fw-callbar,.fw-cfirst,.fw-upline,.fw-peak-at,.fw-dr-how,.fw-swipe,.fw-asof-m,.fw-one-s,.fw-strip-m,.fw-jumpw{display:none}

/* ── drills: a table that scrolls fades at its right edge until the end; a native select wears the multiselect's box ── */
.fw-tbl-x.fw-scrolls:not(.fw-end),.fw-strip.fw-scrolls:not(.fw-end),.fw-status-s.fw-scrolls:not(.fw-end),.fw-jump.fw-scrolls:not(.fw-end){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.fw-tbl-in{--cw:180px}.fw-dr-g>.fw-tw{min-width:var(--cw);overflow-wrap:normal;word-break:normal}
/* a scrolling table stops on column edges (FW.edge measures the held column into scroll-padding and adds --tail after the last),
   so a column at rest is wholly in view or wholly under the held name, never a cut fragment beside it; 6px each side of a cell */
.fw-dr-g>:last-child{margin-right:var(--tail,0px)}.fw-tbl-x.fw-scrolls{scroll-snap-type:x mandatory}.fw-scrolls .fw-tbl-h>:not(:first-child){scroll-snap-align:start}
.fw-scrolls .fw-dr-g>:not(:first-child){padding-left:6px;padding-right:6px}.fw-scrolls .fw-dr-g>:last-child{padding-right:0}.fw-moved .fw-dr-g>:first-child{border-right-color:var(--psoft)}
.fw-dr-k{margin:0 0 6px;font-size:12.5px;font-weight:700;color:var(--psoft)}/* what was pressed, when its rows are something else (the floor's sectors) */
.pw[data-pal="rust"] .fw-card-v.red{color:var(--red-t)}/* Rust's card reading is cream; a value past its red line keeps the alarm colour, as in the other two */
.fw-sel{position:relative;display:block}.fw-sel select{-webkit-appearance:none;appearance:none;padding-right:32px;cursor:pointer}
.fw-sel::after{content:"";position:absolute;right:12px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.6;pointer-events:none}

@media (max-width:760px),(pointer:coarse){/* a finger: the new controls are at least 44px too */
  .pw .fw-tel,.fw-nonum,.fw-who-more,.pw .fw-lampb,.fw-dr-how{min-height:44px}
  .fw-swipe{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:12.5px;color:var(--psoft)}.fw-swipe::after{content:"\2192";font-size:16px}}

@media (max-width:760px){
  /* one menu: the burger, then brand and this section; the menu holds sections, colours, every VISION tool, and who is signed in */
  .fw-top #vtr-burger{display:none}.fw-menu-btn{order:1;width:44px;padding:0;justify-content:center;margin-left:0;border-color:transparent}.fw-menu-btn::after{display:none}
  .fw-top.open .fw-menu-btn{color:var(--bar);background:var(--bar-ink)}.fw-brand{order:2;flex:1 1 auto;min-width:0;display:flex;align-items:baseline}
  .fw-here{display:inline;margin-left:8px;padding-left:8px;font-style:normal;font-weight:700;font-size:14px;color:var(--bar-ink);border-left:1px solid var(--bar-soft)}
  .fw-top.open .fw-mx{display:flex;flex-direction:column;gap:8px;order:12;flex:1 1 100%;padding:8px 0 4px;border-top:1px solid var(--bar-soft)}
  .fw-mx-tools,.fw-mx-out{min-height:44px;padding:0 14px;font:700 14px 'B612',sans-serif;text-align:left;cursor:pointer;color:var(--bar-ink);background:transparent;border:2px solid var(--bar-soft);border-radius:3px}
  .fw-mx-me{display:flex;align-items:center;justify-content:space-between;gap:12px}.fw-mx-me>span{display:flex;flex-direction:column;min-width:0}
  .fw-mx-me b{font-size:14px;color:var(--bar-ink)}.fw-mx-me small{font-size:12px;color:var(--bar-soft);overflow-wrap:anywhere}.fw-mx-out{flex:none}

  /* the status: one row, the posture then each number, each part opening its step; slides sideways only if it must */
  .fw-status{align-items:center;gap:8px;min-width:0}.fw-status-l{display:none}
  .fw-status-s{display:flex;align-items:center;flex:1 1 auto;min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none;overscroll-behavior-x:contain}.fw-status-s::-webkit-scrollbar{display:none}
  .fw-status-s>b{flex:none;font-size:13px}.fw-status-s>i{flex:none;padding:0 4px;font-style:normal;color:var(--soft)}
  .fw-status-s>button,.fw-status-s>span{flex:none;min-height:44px;padding:0;font-size:13px;color:var(--ink);background:transparent;border:0}
  .fw-status-s>button{cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}.fw-status-s>span{display:flex;align-items:center}

  /* facility and city pages: the scope bar folds to one row, a way back and the search */
  .fw-scope-c>.fw-seg,.fw-scope-c>.fw-city,.pw .fw-fhead a.fw-back,.pw .fw-over a.fw-back{display:none}
  .fw-fhead{padding-top:16px}.pw .fw-scope-back{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;box-sizing:border-box;padding:0 12px;font-size:14px;font-weight:700;text-decoration:none;color:var(--ink);border:2px solid var(--ink);border-radius:3px}
  .fw-scope-back::before{content:"";width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}

  /* act first: the lead dial is a shape (the big text beside it carries the number), quarter ticks where the numerals were and
     "00" kept at the top, drawn large enough to read; "How to read a dial" folds directly under the lead card, not after the six */
  .pw .fw-cw-lead .d-read,.pw .fw-cw-lead .d-lab,.pw .fw-cw-lead .d-hr:not(.d-h0){display:none}.pw .fw-cw-lead .d-qt{display:inline;stroke-width:3}
  .pw .fw-cw-lead .d-h0{font-size:24px;font-weight:700;fill:var(--pink);stroke-width:5px;transform:translateY(21px)}/* 12px or more on a 122px dial */
  /* the facility's own clears dial (about 156px) the same way: its 9px numerals and "to clear" drew at 6px; the centre "14h" stays */
  .fw-clr .d-lab,.fw-clr .d-hr:not(.d-h0){display:none}.fw-clr .d-qt{display:inline;stroke-width:3}.fw-clr .d-h0{font-size:21px;font-weight:700;fill:var(--pink);stroke-width:5px;transform:translateY(19px)}.fw-clr .d-read{transform:translateY(6px)}
  .pw .fw-cw-lead .d-hub{fill:var(--bezel);stroke:none;transform:scale(.75);transform-origin:120px 120px}
  .fw-acts{gap:10px}.fw-acts-r{display:contents}.fw-acts>.fw-cw-lead{order:-2}.fw-acts .fw-key{order:-1}
  .fw-call .fw-tel{padding:4px 14px}.fw-call .fw-nonum{padding:4px 14px}

  /* the facility header: one lamp a row, each pressable, a chevron at its end; the drill opens right under them */
  /* nowrap: a wrapping column sizes its line to the widest item, so a drill opened under a lamp grew to its table's width */
  .fw-fhead .fw-lamps.row{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;width:100%;min-width:0}.fw-fhead .fw-lamps.row>span{min-height:44px}
  .pw .fw-lampb{position:relative;width:100%;padding:0 26px 0 0;border-bottom:1px solid var(--hair)}.fw-lampb>span{text-decoration:none}
  .fw-lampb::after{content:"";position:absolute;right:8px;top:50%;width:8px;height:8px;margin-top:-5px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
  .fw-lampb[aria-pressed="true"]::after{margin-top:-7px;transform:rotate(45deg)}

  /* a call within thumb reach at the foot of a facility page (fw-call.js), clear of the home bar; hidden while typing */
  .fw-callbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:8px;box-sizing:border-box;padding:8px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));color:var(--bar-ink);background:var(--bar)}
  .pw .fw-callbar .fw-tel{flex:1 1 auto;min-width:0;min-height:48px;color:var(--bar);background:var(--bar-ink);border-radius:4px}.pw .fw-callbar .fw-tel small{color:inherit;opacity:.8}
  .pw .fw-callbar-all{flex:none;display:flex;align-items:center;justify-content:center;min-width:56px;min-height:48px;box-sizing:border-box;font:700 14px "B612",sans-serif;cursor:pointer;color:var(--bar-ink);background:transparent;border:2px solid var(--bar-soft);border-radius:4px}
  .pw.fw-hasbar{padding-bottom:calc(64px + env(safe-area-inset-bottom))}body:has(input:focus) .fw-callbar{display:none}
  .fw-callbar{transition:transform .2s ease,visibility .2s}.fw-callbar.off{visibility:hidden;transform:translateY(100%)}
  .fw-who.first b.ph{font-size:16px}/* "No ops lead on the roster" is a fact, not a heading: a person's name keeps the 20px */

  /* the facility page in the order a phone needs it: the steps, who to call, when the floor clears and the peak tiles, then the
     building, cameras, bays and the log; a jump row (FW.jump) is held under the scope bar, every block clears it when jumped to */
  /* .pw: fw.css's ".fw-fac>.fw-fhead+.fw-sec" matches the steps once a lamp's drill takes #head-panel out from between them */
  .fw-fac>.fw-fhead,.fw-fac>#head-panel{order:-9}.pw .fw-fac>.fw-flowsec{order:-8}.fw-fac #sec-who{order:-7}.fw-fac #sec-clr,.fw-fac>#sec-stations{order:-6}
  .fw-fac>#sec-peak{order:-5;padding-top:24px}.fw-fac>#sec-bld{order:-4}.fw-fac>#sec-cams{order:-3}.fw-fac #sec-bays{order:-2}.fw-fac #sec-why{order:-1}.fw-fac>*,.fw-fac section{scroll-margin-top:56px}
  .fw-jumpw{display:block;position:sticky;top:0;z-index:35;background:var(--ground);border-bottom:1px solid var(--hair)}.fw-pop{z-index:50}
  .fw-jump{position:relative;display:flex;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-left:8px;padding:0 max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))}.fw-jump::-webkit-scrollbar{display:none}
  .fw-jump button{flex:none;min-height:44px;padding:0 10px;font-size:14px;cursor:pointer;scroll-snap-align:start;color:var(--soft);background:transparent;border:0;border-bottom:3px solid transparent}
  .fw-jump button[aria-current="true"]{font-weight:700;color:var(--ink);border-bottom-color:var(--ink)}

  /* the bar's time: "as of 11:08" in the UI face, whose colon sits tight (B612 Mono gives a colon a whole cell: "11: 08") */
  .fw-asof-m{display:inline}.pw .fw-asof{font-family:'B612',sans-serif;font-variant-numeric:tabular-nums}

  /* city: the name and one verdict line, then the count by type; the kicker that repeated the count goes */
  .fw-verdict .fw-over,.fw-one-l,#view>.fw-strip{display:none}.fw-one-s{display:inline}.fw-name{margin:0 0 4px}.fw-one{font-size:15px}
  .pw .fw-strip-m{display:flex;margin:12px -16px 0;padding:10px 16px;border-top:1px solid var(--hair)}

  /* the VISION tool drawer (tool-rail.js, shared chrome) is opened from this page's menu: its close and search fit a finger here */
  .vtr-drawer .vtr-close{min-width:44px;min-height:44px;font-size:26px}.vtr-drawer .vtr-search input{min-height:44px;font-size:16px}

  /* drills: the held name column is 150px with an 8px lamp, so a facility name takes two lines (step lists: 4 of 855 take 3; about 1 in 8 did at 132px) */
  .fw-dr-g .fw-nm{gap:6px}.fw-dr-g .fw-nm i{width:8px;height:8px}
  /* drills: filters two a row (the select and the multiselect side by side), the reading guide one press away */
  .fw-dr-f .fw-ms{grid-column:auto}.fw-ms-btn{font-size:16px}.fw-dr-n .fw-dr-nx{display:none}.fw-dr-n.open .fw-dr-nx{display:inline}  .fw-dr-how{display:inline-flex;align-items:center;margin-top:6px;padding:0 12px;font-size:13px;cursor:pointer;color:var(--pink);background:transparent;border:2px solid var(--pink);border-radius:3px}
  .fw-dr-how[aria-expanded="true"]{font-weight:700}

  /* a delivery centre: the five upstream steps fold to one muted line, the last mile takes the row */
  .fw-flowsec:has(.fw-flow-up) .fw-sh>span{display:none}.fw-flow-up>.fw-up{display:none}.fw-flow-up>*{grid-column:1/-1}
  .fw-upline{display:block;margin:0 0 10px;font-size:13px;color:var(--soft)}

  /* staging bays two a row, so a name breaks only after its underscore */
  .fw-bays{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;--bk:.42}.fw-bay b{font-size:12.5px;overflow-wrap:break-word}

  /* city: what to act on first, its delivery centres under the line, then the hubs */
  .fw-cfirst{display:block;padding-top:18px}.fw-cfirst .fw-cw{margin-bottom:10px}
  .pw a.fw-card.fw-dcard{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px}.fw-dcard .fw-card-l{font-size:13px}}

/* ≤1180, tablets too: the peak tiles' read time once, in the section header; a tile prints its own only when it was read earlier */
/* and a lit window's facility name breaks after an underscore instead of losing its tail to an ellipsis */
@media (max-width:1180px){.fw-peak-at{display:inline;font-weight:400;color:var(--ink)}.fw-peak-asof.same{display:none}
  .fw-wins a b{white-space:normal;overflow-wrap:break-word}.fw-wins a b wbr{display:inline}}
/* a peak tile opens its rows like a step card does: the same chevron, and pressed = inverted with the chevron turned down */
@media (max-width:1180px),(hover:none){.pw .fw-peak-t{position:relative;padding-right:30px}
  .fw-peak-t::after{content:"";position:absolute;right:12px;top:16px;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
  .pw .fw-peak-t[aria-pressed="true"]{color:var(--ground);background:var(--ink);border-color:var(--ink)}.fw-peak-t[aria-pressed="true"]::after{top:12px;transform:rotate(45deg)}
  .fw-peak-t[aria-pressed="true"] .fw-peak-l,.fw-peak-t[aria-pressed="true"] .fw-peak-v,.fw-peak-t[aria-pressed="true"] .fw-peak-sub,.fw-peak-t[aria-pressed="true"] .fw-peak-asof{color:inherit;text-decoration:none}}