/* RecoverQ app theme — white / blue / Inter, shared by app, operator, sign-up and admin. v5 2026-09-12 */
:root{
  --ink:#0B1730;--ink-2:#3B4759;--ink-3:#7A8698;
  --paper:#fff;--wash:#F3F7FC;--line:#E3E9F1;
  --beacon:#1256D6;--beacon-wash:#EAF1FF;
  --live:#12A36B;--live-wash:#E6F6EF;
  --busy:#D93025;--busy-wash:#FCEBEA;
  --info:#1256D6;--info-wash:#EAF1FF;--bad:#C5221F;
  --rq-blue:#1256D6;--rq-grad:linear-gradient(135deg,#1F7BFF,#1256D6);
  --rq-orange:#F26B1D;--rq-ograd:linear-gradient(135deg,#FF8A3D,#F26B1D);
}
html{background:#fff}
body,body *{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif!important}
body{color:var(--ink);-webkit-font-smoothing:antialiased}
.hazard{display:none}
.app{box-shadow:none}
/* brand */
.brand{display:block;line-height:0;text-decoration:none}
.brand img{height:34px;width:auto;display:block}
header{border-bottom:1px solid var(--line)}
header .loc{font-weight:500;color:var(--ink-2)}
header .loc .dot{width:9px;height:9px;box-shadow:0 0 0 4px rgba(18,163,107,.16)}
.useloc{color:var(--beacon);font-weight:600;text-decoration:none}
/* search */
.where input{border:1.5px solid var(--line);border-radius:14px;padding:13px 14px;font-size:15px;text-transform:none}
.where input:focus{outline:2px solid var(--beacon);border-color:var(--beacon)}
.where button{border-radius:14px;font-weight:700;padding:0 20px}
/* chips (vehicle + show) */
.filters{gap:8px;padding-left:16px;padding-right:16px}
.chip{font-weight:700;font-size:14px;height:40px;padding:0 15px;border:1.5px solid #C9D6EA;color:var(--ink);background:#fff;display:inline-flex;align-items:center;gap:7px;border-radius:999px}
.chip[data-f]::before{content:"";width:17px;height:17px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;color:var(--beacon)}
.chip[data-f="all"]::before{display:none}
.chip[data-f="car"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11l1.5-4A2 2 0 018.4 6h7.2a2 2 0 011.9 1.3L19 11h1v6h-2a2 2 0 01-4 0h-4a2 2 0 01-4 0H4v-6zm2.2 0h9.6l-1-2.7H8.2z'/%3E%3C/svg%3E")}
.chip[data-f="van"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 7h12v8H2zm12 2h4l3 3v3h-7zM5 17a2 2 0 104 0 2 2 0 00-4 0zm10 0a2 2 0 104 0 2 2 0 00-4 0z'/%3E%3C/svg%3E")}
.chip[data-f="ev"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2L4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E")}
.chip[data-f="4x4"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10l2-4h10l4 4h2v6h-2a2.5 2.5 0 01-5 0H9a2.5 2.5 0 01-5 0H2v-6zm3.2 0h8.3l-2-2H7.2z'/%3E%3C/svg%3E")}
.chip[data-f="motorbike"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12a4 4 0 104 4h6a4 4 0 104-4l-2-4h-3l-1-2H9v2h2l1 2H8z'/%3E%3C/svg%3E")}
.chip[data-f="hgv"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 6h13v10H1zm13 3h5l4 4v3h-9zM4 18a2 2 0 104 0 2 2 0 00-4 0zm12 0a2 2 0 104 0 2 2 0 00-4 0z'/%3E%3C/svg%3E")}
.chip[aria-pressed="true"]{background:var(--rq-grad);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(18,86,214,.28)}
.chip[aria-pressed="true"]::before{color:#fff}
.filters2 .chip{height:36px;font-size:13px;border-color:var(--line)}
.filters2 .chip[aria-pressed="true"]{background:var(--ink);box-shadow:none}
.chip:focus-visible{outline:2px solid var(--beacon)}
/* map */
#map,#tmap{background:#EEF3F8}
.pin{width:34px;height:34px;border-width:3px}
.pin.on{background:var(--live)}
.pin.off{background:var(--busy)}
.pin.sel,#map.many .pin.sel{box-shadow:0 0 0 4px var(--beacon),0 0 0 8px rgba(18,86,214,.2),0 3px 10px rgba(0,0,0,.3)}
.me{background:var(--beacon)}
.me::after{border-color:var(--beacon)}
.locbtn{color:var(--beacon);font-weight:700;border-radius:999px;box-shadow:0 2px 8px rgba(11,23,48,.18)}
.locbtn svg{fill:var(--beacon)}
.legend{font-weight:600}
.pindrop button{border-radius:999px;font-weight:600;border:1.5px solid var(--line);color:var(--ink-2)}
.pindrop button.on{background:var(--beacon-wash);border-color:var(--beacon);color:var(--beacon)}
.maplibregl-popup-content{border-radius:14px}
.maplibregl-popup-content a{background:var(--rq-grad);border-radius:999px;font-weight:700}
.maplibregl-cooperative-gesture-screen{font-weight:600;font-size:14px}
/* driver cards */
.listcol,#list{background:var(--wash)}
.count{font-weight:600;padding:14px 16px 8px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;margin:0 16px 10px;padding:14px 16px;gap:14px}
.card.sel{background:#fff;border-color:var(--beacon);box-shadow:0 0 0 3px rgba(18,86,214,.14)}
.card.premium{border-color:#CFE0FF;background:#F8FAFF}
.dist{flex-basis:56px}
.dist b{font-weight:800;font-size:25px;letter-spacing:-.03em;color:var(--beacon)}
.dist small{font-weight:600;letter-spacing:.06em}
.name{font-weight:700;letter-spacing:-.01em}
.bdg{padding:3px 8px}
.bdg.prem{background:#EEF3FF;color:var(--beacon)}.bdg.ver{background:var(--live-wash);color:#0E7A50}.bdg.star{background:#FFF4D6;color:#8A5A00}
.status{font-weight:600}
.status.on{color:#0E7A50}
.call{border-radius:999px;font-weight:700;background:var(--rq-grad);padding:12px 18px;box-shadow:0 8px 18px rgba(18,86,214,.26)}
.call.busy{background:#fff;color:var(--busy);border:1.5px solid var(--busy);box-shadow:none}
.note{font-size:12.5px}
.howto{border-radius:14px}
.hpick button[aria-pressed="true"]{background:var(--beacon);border-color:var(--beacon)}
/* the three tabs */
.tabs{gap:8px;padding:8px 10px calc(10px + env(safe-area-inset-bottom));grid-template-columns:1fr 1fr 1fr}
.tabs:has(#adminTab:not([hidden])){grid-template-columns:1fr 1fr 1fr 1fr}
.tab{font-weight:700;font-size:14px;height:46px;padding:0 6px;border-radius:999px;border:2px solid var(--line);background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:7px}
.tab::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;flex:0 0 auto}
.tab[data-p="public"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13l2-5a2 2 0 011.9-1.3h8.2A2 2 0 0117 8l2 5h1a1 1 0 011 1v3h-2a2.5 2.5 0 01-5 0H10a2.5 2.5 0 01-5 0H3v-3a1 1 0 011-1zm3.4-1h11.2l-1.3-3.3H7.7z'/%3E%3C/svg%3E");border-color:var(--beacon);color:var(--beacon)}
.tab[data-p="public"][aria-selected="true"]{background:var(--rq-grad);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(18,86,214,.28)}
.tab[data-p="transport"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 6h11v9H2zm11 3h4l3 3v3h-7zM5 18a2 2 0 104 0 2 2 0 00-4 0zm11 0a2 2 0 104 0 2 2 0 00-4 0z'/%3E%3C/svg%3E");border-color:var(--rq-orange);color:#B84A0A;background:#FFF2E8}
.tab[data-p="transport"][aria-selected="true"]{background:var(--rq-ograd);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(242,107,29,.3)}
.tab[data-p="operator"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4 4 0 100-8 4 4 0 000 8zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z'/%3E%3C/svg%3E");border-color:var(--ink);color:var(--ink)}
.tab[data-p="operator"][aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tab[data-p="admin"]{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5.3-3.4 9.6-8 11-4.6-1.4-8-5.7-8-11V5l8-3z'/%3E%3C/svg%3E");border-color:var(--busy);color:var(--busy)}
.tab[data-p="admin"][aria-selected="true"]{background:var(--busy);color:#fff}
.tab .badge{background:#fff;color:var(--busy)}
/* operator log-in + join box */
.acct h1{font-weight:800;font-size:28px;letter-spacing:-.03em}
.acct input{border:1.5px solid var(--line);border-radius:14px;padding:13px 14px}
.acct .go{border-radius:999px;background:var(--rq-grad);font-weight:700;box-shadow:0 8px 20px rgba(18,86,214,.28)}
.acct .link{color:var(--beacon);font-weight:600;text-decoration:none;text-align:center;width:100%}
.join{margin-top:26px;background:var(--wash);border:1px solid var(--line);border-radius:20px;padding:20px}
.join b{display:block;font-size:17px;letter-spacing:-.01em}
.join p{color:var(--ink-2);font-size:14px;margin:6px 0 14px}
.joinbtn{width:100%;height:50px;border-radius:999px;background:#fff;border:2px solid var(--beacon);color:var(--beacon);font-weight:700;font-size:15px;cursor:pointer}
/* transport tab */
.prebar{background:#FFF2E8;border-bottom:1px solid #FFD9BF}
.prebar b{color:#B84A0A}
.tgo{border-radius:999px;background:var(--rq-ograd);font-weight:700}
.sect{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:11.5px}
/* sheet + switches */
.sheet{border-top-color:var(--beacon);border-radius:20px 20px 0 0}
.sw{background:#C3C9D2}
.sw[aria-checked="true"]{background:var(--live)}
.sw.blue[aria-checked="true"]{background:var(--beacon)}
.sw.red[aria-checked="true"]{background:var(--busy)}
.toggle-row{background:var(--live-wash)}
.toggle-row.tr{background:var(--info-wash)}
/* desktop */
.tabs .tabs-brand{display:none}
@media (min-width:900px){
  body{background:var(--wash)}
  .app{max-width:1360px;margin:0 auto;padding-top:64px;box-shadow:0 0 0 1px var(--line)}
  .tabs{max-width:1360px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:9px 24px;border-bottom:1px solid var(--line);height:64px}
  .tabs .tabs-brand{display:block;margin-right:18px;line-height:0}
  .tabs .tabs-brand img{height:40px;display:block}
  .tab{height:42px;padding:0 20px;width:auto}
  header .brand{display:none}
  header{padding:8px 24px;flex:0 0 auto}
  #public > .where,#public > .filters,#public > .cols{flex-shrink:0}
  #public > .cols{flex:1 1 auto}
  .app{padding-top:64px!important}
  #public > .where,#public > .filters,.filters{padding-left:24px;padding-right:24px}
  .mapcol{border-right:1px solid var(--line)}
  .card{margin:0 22px 12px;padding:16px 18px}
  .count{padding-left:22px}
  .listcol{background:var(--wash)}
  #account{padding-top:36px}
  #operator iframe{min-height:calc(100vh - 64px)}
  .sheet,.jbar{border-radius:20px;margin-right:calc((100vw - 1360px) / 2 + 12px)}
  @media (max-width:1380px){ .sheet,.jbar{margin-right:12px} }
}

/* ===== v4: fix list 12 Sep 2026 ===== */
/* 10. how it works — the first thing above the driver list */
.callhow{margin:14px 18px 0;background:var(--rq-grad);color:#fff;border-radius:16px;padding:14px 16px;font:500 14px/1.5 Inter,system-ui,sans-serif;box-shadow:0 8px 20px rgba(18,86,214,.25);display:flex;gap:12px;align-items:flex-start}
.callhow svg{width:26px;height:26px;fill:#fff;flex:0 0 auto;margin-top:1px}
.callhow b{font-weight:800}
/* 9. short positions line, under the box */
.approx{margin:8px 18px 0;font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.approx svg{width:14px;height:14px;fill:var(--ink-3);flex:0 0 auto}
/* 12. the rating bar can be dismissed */
.jbar .rx{flex:0 0 auto;width:34px;height:34px;margin:-6px -8px -6px 2px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font:400 22px/1 Inter,system-ui,sans-serif;cursor:pointer}
/* operator: On a job toggle */
.tog.job.on{background:var(--busy-wash)}
.tog.job.on h2{color:var(--busy)}
.tog.job.off{background:var(--paper)}
.tog.job.off h2{color:var(--ink)}
.busy .row + .row{margin-top:8px}
.busy input[type=text],.busy input[type=time]{font:500 15px Inter,system-ui,sans-serif}
.busy .pub{font-size:12px;color:#7d1d1d;margin-top:8px}
.pubcard{margin:12px 18px 6px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.pubcard small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:6px}
.pubcard .st{font-size:13.5px;font-weight:600;color:var(--busy)}
.pubcard .st i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--busy);margin-right:6px;vertical-align:1px}
.pubcard .nt{font-size:13px;color:var(--ink-2);margin-top:4px}

/* 13. tablets (touch screens 700px and wider): tabs stay at the bottom under the thumb, not in a top menu */
@media (min-width:700px) and (pointer:coarse){
  .app{max-width:none;padding-top:0 !important;box-shadow:none;margin:0}
  header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;flex:0 0 auto}
  header .brand{display:block}
  header .brand img{height:38px}
  .tabs{position:fixed;top:auto;bottom:0;left:0;right:0;max-width:none;margin:0;height:auto;display:grid;grid-template-columns:repeat(var(--tabs,3),1fr);gap:12px;padding:10px 24px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);border-bottom:0;background:var(--paper);justify-content:stretch}
  .tabs .tabs-brand{display:none !important}
  .tab{height:52px;width:auto;padding:0;font-size:16px;justify-content:center}
  #public > .where,#public > .filters,.filters{padding-left:24px;padding-right:24px}
  .card{margin:0 22px 12px}
  .count{padding-left:22px}
  .callhow{margin:14px 22px 0}
  .approx{margin:8px 22px 0}
  #account{max-width:560px;margin:0 auto;padding-top:36px}
  .sheet,.jbar{max-width:600px;margin:0 auto;left:0;right:0;bottom:calc(86px + env(safe-area-inset-bottom));border-radius:16px}
}
/* tablet, upright: map on top, drivers underneath, the page scrolls as one */
@media (min-width:700px) and (pointer:coarse) and (orientation:portrait){
  html,body{height:auto}
  .app{height:auto;min-height:100vh;display:block;overflow:visible;padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important}
  #public:not([hidden]),#transport:not([hidden]){display:block}
  #public > .cols{display:block;border-top:1px solid var(--line)}
  .mapcol{display:block;border-right:0}
  #map{height:46vh;min-height:360px;border-bottom:1px solid var(--line)}
  .listcol{overflow:visible;background:var(--paper)}
  #tmapWrap:not([hidden]){display:block}
  #tmapWrap > #tmap{height:44vh;min-height:340px;border-right:0}
  #tmapWrap > #liveList{overflow:visible}
  #account:not([hidden]),#operator:not([hidden]),#admin:not([hidden]){overflow:visible;display:block}
  #operator iframe{min-height:calc(100vh - 60px)}
}
/* tablet, on its side: map left, drivers right, only the list scrolls */
@media (min-width:700px) and (pointer:coarse) and (orientation:landscape){
  html,body{height:100%}
  .app{height:100vh;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:0 !important}
  #public:not([hidden]),#transport:not([hidden]){display:flex;flex-direction:column;flex:1;min-height:0}
  #public > .where,#public > .filters{flex:0 0 auto}
  #public > .cols{display:grid;grid-template-columns:1fr 1fr;flex:1;min-height:0;border-top:1px solid var(--line)}
  .mapcol{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  #map{flex:1;min-height:0;height:auto;border-bottom:0}
  #public .legend{padding:10px 18px}
  .listcol{overflow-y:auto;min-height:0;padding-bottom:calc(96px + env(safe-area-inset-bottom));background:var(--wash)}
  #tmapWrap:not([hidden]){display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto minmax(0,1fr) auto;flex:1;min-height:0;border-top:1px solid var(--line)}
  #tmapWrap > .sect{grid-column:1/-1;grid-row:1}
  #tmapWrap > #tmap{grid-column:1;grid-row:2;height:auto;min-height:0;border-right:1px solid var(--line)}
  #tmapWrap > #liveList{grid-column:2;grid-row:2;overflow-y:auto;min-height:0;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  #tmapWrap > .note{grid-column:1/-1;grid-row:3}
  #pbResults{flex:1;min-height:0;overflow-y:auto;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  #account:not([hidden]),#operator:not([hidden]),#admin:not([hidden]){flex:1;min-height:0;overflow-y:auto;padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  #operator iframe{min-height:calc(100vh - 60px)}
}
/* the operator's on-a-job note under their status line */
.status{flex-wrap:wrap}
.status .jobnote{flex-basis:100%;font-weight:400;color:var(--ink-2);margin-top:2px;line-height:1.4}

/* ===== v5 ===== */
/* 16. store buttons in the browser hint */
.livehint .stores{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.livehint .stores a{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:9px;background:var(--ink);color:#fff;font:600 13px Inter,system-ui,sans-serif;text-decoration:none}
/* 17. keep the header out from under the phone/tablet status bar (notch, clock, battery) */
html.native header{padding-top:calc(14px + env(safe-area-inset-top))}
html.native .tabs{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
@media (min-width:700px) and (pointer:coarse){
  html.native header{padding-top:calc(12px + env(safe-area-inset-top))}
}
/* ===== v6 ===== */
/* 18. the page never scrolls sideways or zooms; only the maps zoom (two fingers) */
html,body{overflow-x:hidden;max-width:100%}
/* ===== v7 ===== */
/* 19. iPhone app: the shell already leaves room for the status bar, so the page must not add it again */
html.native.ios header{padding-top:14px}
@media (min-width:700px) and (pointer:coarse){
  html.native.ios header{padding-top:12px}
}
/* ===== v8 ===== */
/* 20. the tablet layout rules above are for the main app only — the Operator page (inside its frame) must not be stretched to the frame height, or the frame and the page grow each other for ever (the "twitch") */
@media (min-width:700px) and (pointer:coarse){
  html.framed,html.framed body{height:auto !important}
  html.framed .app{height:auto !important;min-height:0 !important;display:block !important;overflow:visible !important;padding-bottom:calc(24px + env(safe-area-inset-bottom)) !important}
}
/* ===== v9 ===== */
/* 21a. inside the app's frame a swipe must pass through to the page around it (the phone rule "overscroll-behavior:none" was stopping every scroll on Android) */
html.framed,html.framed body{overscroll-behavior:auto !important}
/* 21. tablet on its side: the Operator page scrolls inside its own frame — touch-drag scrolls the page, not the box around it (an iframe cannot scroll the container behind it) */
@media (min-width:700px) and (pointer:coarse) and (orientation:landscape){
  #operator{overflow:hidden !important}
  #operator iframe{height:100% !important;min-height:0 !important}
  html.framed{height:100% !important;overflow:hidden !important}
  html.framed body{height:100% !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch}
  html.framed .app{height:auto !important;min-height:100% !important;overflow:visible !important;padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important}
}