/* RoadCom HQ. Same look as the app and business site: near-black, tail-light
   orange used sparingly, slanted condensed numbers. Laid out like a car's
   instrument panel and made to sit on a screen all day. */
@font-face{font-family:"Barlow Condensed";font-style:italic;font-weight:800;font-display:swap;src:url(/fonts/barlow-condensed-latin-800-italic.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format("woff2")}

:root{
  --bg:#06080b; --surface:#0d1117; --surface-2:#141a23; --line:#1d2531; --line-2:#27303e;
  --text:#eef1f6; --muted:#7d8899; --soft:#b9c2d0;
  --accent:#ff6a1a; --accent-soft:rgba(255,106,26,.14); --accent-ink:#1a0a00;
  --ok:#4cc38a; --warn:#f0a94a; --danger:#e5484d;
  --stop:#7cc4ff; --photo:#c79bff;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:14px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;color:var(--text);font:14px/1.5 var(--body);-webkit-font-smoothing:antialiased}
html{background:var(--bg)}
/* A faint glow at the top, like dash lighting. */
body{background:radial-gradient(1200px 420px at 50% -180px,rgba(255,106,26,.10),transparent 70%),var(--bg);min-height:100vh}
a{color:var(--accent)}
[hidden]{display:none!important}
.muted{color:var(--muted)}

/* Brand */
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:34px;height:34px;border-radius:9px}
.brand b{font:800 italic 26px/1 var(--display);letter-spacing:1px;text-transform:uppercase}
.brand b i{color:var(--accent);font-style:inherit}
.brand span{font:800 italic 14px/1 var(--display);letter-spacing:1.5px;color:var(--bg);background:var(--accent);padding:3px 7px;border-radius:4px;transform:skewX(-8deg)}

/* Buttons and forms */
.btn{font:600 14px/1 var(--body);border:0;border-radius:10px;padding:12px 16px;background:var(--accent);color:var(--accent-ink);cursor:pointer}
.btn.ghost{background:transparent;color:var(--soft);border:1px solid var(--line-2)}
.btn.ghost:hover{color:var(--text);border-color:var(--muted)}
.btn.small{padding:8px 12px;font-size:13px}
.btn:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input{width:100%;font:15px var(--body);padding:11px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg);color:var(--text)}
label{font-size:13px;color:var(--soft)}

/* Sign in */
.signin{min-height:100vh;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-left,0px))}
.signin-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:12px}
.signin-card form{display:flex;flex-direction:column;gap:8px}
.signin-card form .btn{margin-top:8px}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.say{min-height:1.5em;margin:0;font-size:14px}
.say.err{color:var(--danger)} .say.ok{color:var(--ok)}
.blocked{position:fixed;inset:auto 0 0;margin:0;padding:16px;background:var(--surface);border-top:1px solid var(--danger);display:flex;gap:12px;align-items:center;justify-content:center}

/* Page */
.hq{padding:14px max(20px,env(safe-area-inset-right,0px)) 28px max(20px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:14px;max-width:2200px;margin:0 auto}

/* Header: brand, clock, status */
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.clock{display:flex;align-items:baseline;gap:10px}
.clock b{font:800 italic 34px/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:.5px}
.clock span{color:var(--muted);font-size:13px;text-transform:uppercase;letter-spacing:.12em;font-weight:600}
.bar-right{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.live{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ok);display:inline-flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums;padding:6px 10px;border-radius:99px;background:rgba(76,195,138,.08)}
.live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;animation:pulse 2s infinite}
.live.stale{color:var(--warn);background:rgba(240,169,74,.08)}
.live.down{color:var(--danger);background:rgba(229,72,77,.08)}
@keyframes pulse{50%{opacity:.3}}

/* Headline tiles */
.tiles{display:grid;grid-template-columns:1.6fr repeat(5,minmax(0,1fr));gap:12px}
.tile{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line);border-radius:var(--r);padding:14px 16px 13px;display:flex;flex-direction:column;gap:3px;min-width:0}
.tile::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:2px;border-radius:2px;background:transparent}
.tile small{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tile b{font:800 italic 44px/1.05 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile em{font-style:normal;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.good em{color:var(--ok)} .tile.good::after{background:var(--ok)}
.tile.warn em{color:var(--warn)} .tile.warn::after{background:var(--warn)}
.tile.warn b{color:var(--warn)}
.tile.bad em{color:var(--danger)} .tile.bad::after{background:var(--danger)}
.tile.hero{border-color:rgba(255,106,26,.35);background:radial-gradient(400px 160px at 100% 100%,var(--accent-soft),transparent 70%),linear-gradient(180deg,var(--surface-2),var(--surface))}
.tile.hero b{font-size:54px}
.tile.hero::after{display:none}
.tile .spark{position:absolute;right:14px;bottom:14px;width:42%;height:46px}
.tile .spark svg{width:100%;height:100%;display:block;overflow:visible}

/* Cards */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;align-items:stretch}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px 16px;min-width:0;display:flex;flex-direction:column;gap:12px}
.card > header{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.card h2{margin:0;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);display:flex;align-items:center;gap:8px}
.card h2::before{content:"";width:3px;height:12px;border-radius:2px;background:var(--accent);transform:skewX(-14deg)}
.card .sub{font-size:12px;color:var(--muted)}
.span-3{grid-column:span 3} .span-4{grid-column:span 4} .span-5{grid-column:span 5} .span-6{grid-column:span 6} .span-12{grid-column:span 12}
.stack{display:flex;flex-direction:column;gap:10px}

/* Chart */
.chart{flex:1;min-height:230px;position:relative}
.chart svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.chart text{fill:var(--muted);font:11px var(--body)}
.chart .lbl{fill:var(--text);font:800 italic 15px var(--display)}

/* Feed */
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;flex:1;overflow:hidden;max-height:290px}
.feed li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.feed li:last-child{border-bottom:0}
.feed li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--soft)}
.feed li time{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.feed .chip{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:5px;color:var(--muted);background:var(--surface-2);min-width:62px;text-align:center}
.feed .place .chip{color:var(--accent);background:var(--accent-soft)}
.feed .photo .chip{color:var(--photo);background:rgba(199,155,255,.12)}
.feed .signup .chip{color:var(--ok);background:rgba(76,195,138,.12)}
.feed .report .chip{color:var(--danger);background:rgba(229,72,77,.12)}
.feed .money .chip{color:var(--warn);background:rgba(240,169,74,.12)}
.feed .comment .chip{color:var(--stop);background:rgba(124,196,255,.12)}
.feed li.fresh{animation:fresh 3s ease-out}
@keyframes fresh{from{background:var(--accent-soft)}to{background:transparent}}

/* Map */
.map{flex:1;min-height:250px;border-radius:10px;overflow:hidden;background:var(--bg)}
.map .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.8) contrast(.9) saturate(.35)}
.leaflet-container{font:12px var(--body);background:var(--bg)}
.leaflet-tooltip{background:var(--surface-2);color:var(--text);border:1px solid var(--line-2);box-shadow:none}
.leaflet-bar a{background:var(--surface-2)!important;color:var(--text)!important;border-color:var(--line-2)!important}
.leaflet-bar{border:1px solid var(--line-2)!important;box-shadow:none!important}
.leaflet-control-attribution{background:rgba(6,8,11,.7)!important;color:var(--muted)!important}
.leaflet-control-attribution a{color:var(--soft)!important}
.legend{display:flex;gap:12px;align-items:center;font-size:12px;color:var(--muted);flex-wrap:wrap}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:-6px}
.dot.route{background:var(--accent)} .dot.stop{background:var(--stop)} .dot.photo{background:var(--photo)}

/* Gauges: free plan limits as dials */
.gauges{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.gauge{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;text-align:center}
.gauge svg{width:100%;max-width:190px;height:auto;display:block}
.gauge .arc-bg{stroke:var(--surface-2)}
.gauge .arc{stroke:var(--ok)}
.gauge.warn .arc{stroke:var(--warn)} .gauge.bad .arc{stroke:var(--danger)}
.gauge .tick{stroke:var(--line-2)}
.gauge .pct{fill:var(--text);font:800 italic 30px var(--display)}
.gauge b{font-size:13px;font-weight:600;margin-top:-6px}
.gauge span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* Lists */
.list{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0;font-size:13.5px}
.list dt,.list dd{padding:6px 0;border-bottom:1px solid var(--line)}
.list dt:last-of-type,.list dd:last-of-type{border-bottom:0}
.list dt{color:var(--soft)}
.list dd{margin:0;padding-left:12px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.list dd.warn{color:var(--warn)} .list dd.bad{color:var(--danger)}
.rank{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;font-size:13.5px;counter-reset:r}
.rank.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.rank li{counter-increment:r;display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.rank li::before{content:counter(r);font:800 italic 15px/1 var(--display);color:var(--muted)}
.rank li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank li em{font-style:normal;color:var(--muted);white-space:nowrap;font-size:12px}
.links{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.links a{display:inline-block;text-decoration:none;color:var(--soft);font-size:13px;padding:8px 12px;border:1px solid var(--line-2);border-radius:99px}
.links a::after{content:" ↗";color:var(--muted)}
.links a:hover{color:var(--text);border-color:var(--accent)}
.empty{color:var(--muted);font-size:13px;margin:0}
.setup{font-size:12.5px;color:var(--muted);margin:0;border:1px dashed var(--line-2);border-radius:10px;padding:10px 12px}
.headline{display:flex;align-items:baseline;gap:8px 12px;flex-wrap:wrap}
.big{font:800 italic 42px/1 var(--display);font-variant-numeric:tabular-nums}
.stars{color:var(--warn);letter-spacing:2px}
.review{border-top:1px solid var(--line);padding-top:8px;font-size:12.5px;display:flex;flex-direction:column;gap:2px}
.review b{font-weight:600}
.review p{margin:0;color:var(--soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;margin-right:6px}
.pill.ok{color:var(--ok);background:rgba(76,195,138,.12)} .pill.warn{color:var(--warn);background:rgba(240,169,74,.12)}
.pill.bad{color:var(--danger);background:rgba(229,72,77,.12)} .pill.muted{color:var(--muted);background:var(--surface-2)}

/* TV mode: the page fills the screen and switches between four screens of
   cards. Header and headline tiles stay put; the cards slide in and out. */
.tv-exit{transition:opacity .3s;background:var(--surface-2)}
body.tv .bar-right .btn{display:none}
body.tv .tile b{font-size:52px}
body.tv .tile.hero b{font-size:64px}
body.tv .clock b{font-size:42px}
body.tv.idle .tv-exit{opacity:0;pointer-events:none}
body.tv.idle,body.tv.idle *{cursor:none!important}
body.tv{overflow:hidden}
body.tv .hq{height:100vh;padding-bottom:16px;max-width:none}
body.tv .grid{flex:1;min-height:0;grid-auto-rows:minmax(0,1fr);overflow:hidden;perspective:1600px}
body.tv .card{display:none}
body.tv .card.on{display:flex}
/* Keep the big-screen widths even on a smaller screen. */
body.tv .span-3{grid-column:span 3} body.tv .span-4{grid-column:span 4}
body.tv .span-5{grid-column:span 5} body.tv .span-6{grid-column:span 6}
body.tv .feed-card{grid-column:span 3}
/* Every card on a screen fills its share of the height. */
body.tv .card .feed{max-height:none}
body.tv .chart,body.tv .map{min-height:0}
/* Screen 1: chart, map, feed side by side. */
body.tv [data-screen="1"]{grid-row:1 / span 2}
/* Screen 2: dials across the top, releases and errors below. */
body.tv .gauges-card{grid-column:span 12}
body.tv [data-screen="2"]:not(.gauges-card){grid-column:span 6}
body.tv .gauges-card .gauges{flex:1;align-items:center}
body.tv .gauge svg{max-width:250px;max-height:22vh}
body.tv .gauge .pct{font-size:34px}
body.tv .gauge b{font-size:16px} body.tv .gauge span{font-size:14px}
/* Screen 3: four lists, full height, bigger text. */
body.tv [data-screen="3"]{grid-row:1 / span 2}
body.tv [data-screen="3"] .list{font-size:clamp(14px,1.8vh,20px)}
body.tv [data-screen="3"] .list dt,body.tv [data-screen="3"] .list dd{padding:clamp(4px,1.3vh,16px) 0}
body.tv [data-screen="3"] .list dd{padding-left:12px}
/* Screen 4: store, most liked, newest people. */
body.tv [data-screen="4"]{grid-column:span 4;grid-row:1 / span 2}
body.tv [data-screen="4"] .rank{font-size:clamp(14px,1.8vh,20px)}
body.tv [data-screen="4"] .rank li{padding:clamp(4px,1.3vh,16px) 0}
body.tv .rank.cols{grid-template-columns:1fr}

/* Cards arrive from the right and leave to the left, like turning a page. */
body.tv .card.on{animation:screen-in .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes screen-in{from{opacity:0;transform:translateX(60px) rotateY(-8deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
body.tv .grid.out .card.on{animation:screen-out .45s cubic-bezier(.4,0,1,1) both;animation-delay:calc(var(--i,0) * 50ms)}
@keyframes screen-out{to{opacity:0;transform:translateX(-60px) rotateY(8deg);filter:blur(6px)}}

/* Screen names and a bar that fills until the next screen. */
.screens{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.screens button{font:600 12px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:99px;padding:6px 12px;cursor:pointer;transition:color .3s,border-color .3s,background .3s}
.screens button.on{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.screens .progress{flex:1;min-width:120px;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.screens .progress i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.screens .progress i.run{animation:fill var(--screen-time,20s) linear both}
.screens.paused .progress i{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  .live::before{animation:none}
  .tv-exit,.screens button{transition:none}
  @keyframes screen-in{from{opacity:0}to{opacity:1}}
  @keyframes screen-out{to{opacity:0}}
}

/* Smaller screens */
@media (max-width:1400px){
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .span-3,.span-4,.span-5,.span-6{grid-column:span 6}
  .feed-card{grid-column:span 12}
}
@media (max-width:760px){
  .bar{grid-template-columns:1fr}
  .bar-right{justify-content:flex-start}
  .clock,#tv{display:none}
  .tiles > :last-child{grid-column:span 2}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile.hero{grid-column:span 2}
  .tile b{font-size:34px}
  .tile.hero b{font-size:44px}
  .span-3,.span-4,.span-5,.span-6,.span-12{grid-column:span 12}
  .gauges{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rank.cols{grid-template-columns:1fr}
  .feed{max-height:none}
}
@media (max-height:820px){
  body.tv .gauge svg{max-height:12vh}
  body.tv .gauge .pct{font-size:24px}
  body.tv .gauge b{font-size:13px} body.tv .gauge span{font-size:12px}
  body.tv .tile b{font-size:38px} body.tv .tile.hero b{font-size:46px}
}