/* Phones and tablets. Loaded after the page's own styles, so these win.
   - Up to 1024px, and any touch screen up to 1366px (every iPad either way
     up): an app bar over the page, and the rail slides in from the left as a
     menu with everything the desktop rail has - views, buildings and
     floors, the site-wide lockdown and fire exit, sign out. On a tablet on
     its side the rail would otherwise take a fifth of the screen.
   - Up to 640px (phones): tighter page margins, tables that don't fit
     become cards (responsive.js), dialogs and button rows fill the width.
   - A touch screen at any width (pointer:coarse): bigger targets, and
     16px inputs so iOS doesn't zoom the page when one is focused.
   - Tablets (a touch screen 641-1366px): the Live map fills the screen with
     its side list beside it (on its side) or under it (upright), and the
     alerts dashboard lays out for the screen's shape. See "Tablets" below.
   Wider than 1024px with a mouse, nothing here applies. */

.appbar,.rail-scrim{display:none}
.map-more-btn,.pv-hit{display:none}

/* keep in step with RS_MENU in responsive.js */
@media (max-width:1024px), (pointer:coarse) and (max-width:1366px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);height:100%;height:100dvh}
  body.kiosk .app,html.fullmap .app{grid-template-rows:minmax(0,1fr)}

  .appbar{display:flex;align-items:center;gap:12px;min-width:0;position:relative;z-index:12;
    padding:8px 16px 8px 8px;padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
    background:var(--bg-1);border-bottom:1px solid var(--line)}
  body.kiosk .appbar,html.fullmap .appbar{display:none}
  .menu-btn{position:relative;flex:none;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:var(--radius-1);background:none;cursor:pointer;color:var(--fg-0)}
  .menu-btn:hover{background:var(--bg-2)}
  /* three bars, crossing to an X while the menu is open */
  .menu-btn i,.menu-btn i::before,.menu-btn i::after{display:block;width:20px;height:2px;border-radius:1px;background:currentColor;transition:transform .2s,background .2s}
  .menu-btn i{position:relative}
  .menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0}
  .menu-btn i::before{top:-6px}.menu-btn i::after{top:6px}
  .menu-btn[aria-expanded="true"] i{background:transparent}
  .menu-btn[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
  .menu-btn[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}
  .menu-flag{position:absolute;top:9px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--bad);box-shadow:0 0 0 2px var(--bg-1)}
  .appbar-logo{display:block;flex:none;width:auto;height:18px}
  .appbar-here{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-family:var(--font-mono);font-size:var(--btn-size);letter-spacing:var(--btn-track);text-transform:uppercase;font-weight:700;color:var(--fg-1);
    padding-left:12px;border-left:1px solid var(--line)}
  .appbar-urgent .count{font-family:var(--font-mono);font-size:12px;font-weight:700;border-radius:var(--radius-1);padding:2px 8px;background:var(--bad);color:var(--bad-ink)}

  /* the rail: the desktop rail, off to the left until the menu opens it */
  .rail{position:fixed;top:0;left:0;bottom:0;z-index:31;width:min(320px,86vw);
    border-right:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain;
    padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);
    transform:translateX(-100%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s;box-shadow:none}
  body.rail-open .rail{transform:none;visibility:visible;transition:transform .22s ease;box-shadow:8px 0 32px rgba(0,0,0,.35)}
  .rail-scrim{display:block;position:fixed;inset:0;z-index:30;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .2s}
  body.rail-open .rail-scrim{opacity:1;pointer-events:auto}
  body.rail-open{overflow:hidden}
  .brand{padding:16px 20px 14px}
  .brand-logo{max-width:200px}
  .site-act{display:grid;gap:8px}

  .main{padding:20px 24px 40px;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px));-webkit-overflow-scrolling:touch}
  .savebar{margin:18px -24px -40px;padding:12px 24px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
  /* the details drawer sits under the app bar's menu, over the page */
  .drawer{z-index:32}
  .scrim{z-index:31}
}

@media (max-width:640px){
  .appbar-logo{height:15px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:10px}
  .main{padding:16px 16px 32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
    padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}
  .savebar{margin:18px -16px -32px;padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));flex-wrap:wrap}
  .bhead{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:18px}
  .bhead h1{font-size:21px;overflow-wrap:anywhere}
  .bhead > .btnrow,.bhead > div:last-child:not(:first-child){display:flex;flex-wrap:wrap;gap:8px}
  .panel{padding:14px;margin-bottom:14px}
  .banner{padding:10px 12px;gap:10px}
  .banner .btn{flex:1 1 auto}
  /* tab rows wrap onto a second line rather than scrolling sideways */
  .tabs{flex-wrap:wrap}
  .tabs button{white-space:nowrap;flex:none}
  .d-tabs{flex-wrap:wrap}
  .d-tabs button{flex:none;white-space:nowrap}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .kv{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .kv dd{margin-bottom:8px}
  .ctl{flex-wrap:wrap}
  .ctl > select{max-width:100%}
  dialog{width:calc(100% - 24px);max-width:calc(100% - 24px);padding:18px;max-height:calc(100dvh - 24px);overflow:auto}
  dialog .row{flex-wrap:wrap}
  dialog .row .btn{flex:1 1 40%}
  .toast{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .tt-now{grid-template-columns:repeat(2,minmax(0,1fr))}

}

/* touch screens, any size */
/* Tables: rows as cards whenever a table doesn't fit its page, at any width
   (responsive.js adds .as-cards), so a page never scrolls sideways. */
.tablewrap table{min-width:0}
table.as-cards,table.as-cards tbody,table.as-cards tr,table.as-cards td{display:block;width:auto;min-width:0;max-width:none}
table.as-cards thead{display:block}
table.as-cards thead tr{display:flex;gap:8px;align-items:center}
table.as-cards thead th{display:none}
table.as-cards thead th:has(input,button,select){display:block;background:none;border:0;padding:10px 14px 0}
table.as-cards thead:not(:has(input,button,select)){display:none}
table.as-cards tr{padding:10px 14px;border-bottom:1px solid var(--line)}
table.as-cards tbody tr:last-child{border-bottom:0}
/* the heading on the left, the cell's own content (however many pieces) on the right */
table.as-cards td{display:flow-root;padding:3px 0 3px 128px;border:0;white-space:normal;overflow-wrap:anywhere;text-align:left}
table.as-cards td::before{content:attr(data-label);float:left;width:118px;margin:2px 0 0 -128px;overflow-wrap:anywhere;
  font-family:var(--font-mono);font-size:10px;letter-spacing:var(--label-track);text-transform:uppercase;color:var(--fg-2);font-weight:700}
table.as-cards td[data-label=""]{padding-left:0}
table.as-cards td[data-label=""]::before{content:none}
table.as-cards td:empty{display:none}
/* a row's tick-box sits in the card's corner; the heading's one selects them all */
table.as-cards tr{position:relative}
table.as-cards tbody td:has(> input[type=checkbox]:only-child){position:absolute;top:8px;right:12px;padding:0}
table.as-cards tbody td:has(> input[type=checkbox]:only-child)::before{content:none}
table.as-cards tbody tr:has(> td > input[type=checkbox]:only-child){padding-right:48px}
table.as-cards thead th:has(> input[type=checkbox]:only-child){display:flex;align-items:center;gap:8px;padding-bottom:10px}
table.as-cards thead th:has(> input[type=checkbox]:only-child)::after{content:"Select all";text-transform:uppercase}
table.as-cards thead:has(input,button,select){border-bottom:1px solid var(--line)}
table.as-cards td > select,table.as-cards td > input:not([type=checkbox]):not([type=radio]){width:100%;min-width:0}

@media (pointer:coarse){
  input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],input[type=url],input[type=tel],
  input[type=time],input[type=date],input[type=datetime-local],select,textarea{font-size:16px;min-height:42px}
  .btn{min-height:40px}
  .btn.small,.who .btn,.users td .btn,.floor h2 .bk-floor{min-height:34px}
  .icon-btn{width:44px;height:44px}
  .nav{min-height:44px}
  .navt{min-height:40px}
  .floors button{min-width:40px;min-height:36px}
  .seg button{padding:9px 14px}
  .tabs button{padding:12px 14px}
  .d-tabs button{padding:14px 12px 12px}
  .checkbox input,.checks input,td input[type=checkbox],th input[type=checkbox]{width:20px;height:20px}
  .switch::after{content:"";position:absolute;inset:-10px -6px}
  .cal-day{min-height:56px}
  button,.btn,a,label,summary,[data-act]{touch-action:manipulation}   /* no double-tap zoom delay */
  .pv-zoom{gap:6px}
  .pv-zoom .btn{min-width:48px;min-height:48px;font-size:18px}
  .pv-hit{display:inline;fill:transparent;stroke:none}                 /* a finger-sized target round each tag */
  /* no hover on a touch screen: what hover would reveal stays shown */
  .tile .pick.idle{opacity:1}
  tbody tr:hover{background:inherit}
}

/* ---- Tablets: a touch screen 641-1366px wide, either way up ---- */
.db-unmute{background:var(--bad);color:var(--bad-ink);border-color:var(--bad);font-weight:700;animation:db-unmute 1.2s ease-in-out infinite}
@keyframes db-unmute{50%{opacity:.65}}
@media (prefers-reduced-motion:reduce){.db-unmute{animation:none}}
.db-unmute[hidden]{display:none}

@media (pointer:coarse) and (min-width:641px) and (max-width:1366px){
  /* Live map: the page is the map. The toolbar keeps the floors, Find and
     Show on one line; layers, lines, role / label, heatmap, Calibrate and
     Pop out fold behind "Layers & filters" (positioning.js mapMoreSync). */
  .map-more-btn{display:inline-flex}
  .fp-root[data-kind="map"]:not(.map-more-open) .map-x{display:none!important}
  html:not(.fullmap) .main:has(> .fp-root[data-kind="map"]){display:flex;flex-direction:column;padding-top:14px;padding-bottom:14px;padding-bottom:max(14px,env(safe-area-inset-bottom,0px))}
  html:not(.fullmap) .fp-root[data-kind="map"][data-fid]{flex:1;min-height:0;display:flex;flex-direction:column}
  html:not(.fullmap) .fp-root[data-kind="map"][data-fid] > .bhead{flex:none;flex-direction:column;align-items:stretch;gap:8px;margin-bottom:12px}
  html:not(.fullmap) .fp-root[data-kind="map"][data-fid] > .bhead h1{font-size:20px}
  html:not(.fullmap) .fp-root[data-kind="map"][data-fid] > .bhead p{margin-top:2px}
  html:not(.fullmap) .fp-root[data-kind="map"][data-fid] > .bhead > .btnrow{align-items:center}
  .fp-root[data-kind="map"] #map-q{flex:1 1 200px;width:auto!important;min-width:160px}

  /* on its side: the map, and the side list (calibration above it) on the right, each scrolling on its own */
  html:not(.fullmap) .fp-root[data-kind="map"][data-fid] .fp-split{flex:1;min-height:0;display:grid;align-items:stretch;
    grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto minmax(0,1fr);gap:0 14px}
  html:not(.fullmap) .fp-root[data-kind="map"][data-fid] .fp-split > .map-col{grid-column:1;grid-row:1 / span 2;min-height:0}
  html:not(.fullmap) .fp-root[data-kind="map"][data-fid] .fp-split > .map-cal{grid-column:2;grid-row:1;margin-bottom:12px;max-height:45vh;overflow:auto}
  html:not(.fullmap) .fp-root[data-kind="map"][data-fid] .fp-split > .fp-side{grid-column:2;grid-row:2;min-height:0;max-height:none;overflow:auto;overscroll-behavior:contain}
  html:not(.fullmap) .fp-root[data-kind="map"][data-fid] .pv-wrap,
  html:not(.fullmap) .fp-root[data-kind="map"][data-fid] .map-col.has-tl .pv-wrap{flex:1;height:auto;min-height:0}

  /* Alerts dashboard on its side: the calls get two columns, the side lists a third */
  .db{grid-template-columns:minmax(0,2fr) minmax(280px,1fr)}
  /* a card's buttons: one row of equal, finger-sized buttons across the card */
  .db-call-foot > .btnrow{flex:1 1 100%;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
  .db-call-foot > .btnrow .btn.db-big{padding:14px 6px;min-height:52px;white-space:normal}
  .db-list .btn{min-height:44px}
}
@media (pointer:coarse) and (min-width:641px) and (max-width:1366px) and (orientation:portrait){
  /* upright: the map on top, then calibration, then the side list (what needs attention first) */
  html:not(.fullmap) .fp-root[data-kind="map"][data-fid] .fp-split{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto 38%;gap:0}
  html:not(.fullmap) .fp-root[data-kind="map"][data-fid] .fp-split > .map-col{grid-column:1;grid-row:1}
  html:not(.fullmap) .fp-root[data-kind="map"][data-fid] .fp-split > .map-cal{grid-column:1;grid-row:2;margin:12px 0 0;max-height:30vh}
  html:not(.fullmap) .fp-root[data-kind="map"][data-fid] .fp-split > .fp-side{grid-column:1;grid-row:3;margin-top:12px}
}
@media (pointer:coarse) and (min-width:641px) and (max-width:900px){
  /* Alerts dashboard upright: calls across the width, the call's camera and the alerts side by side under them */
  .db{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head head" "safety safety" "alerts alerts"}
  .db.has-cctv{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"head head" "safety safety" "cctv alerts"}
  .db-calls{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
}