/* Live road info (js/live.js): alerts strip (#liveAlerts), opt-in card, freeway sign, weather, cameras (#liveBlock)
   and its sheet. Only app.css tokens. The freeway sign stays dark in both themes, like the real thing. */

#liveAlerts:empty,#liveBlock:empty{display:none}

/* ---------- alerts strip (top of Drive) ---------- */
.lv-alerts{display:grid;gap:8px}
.lv-al{--k:var(--accent);--kf:var(--accent-fg);position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;
  width:100%;min-height:60px;margin:0;padding:10px 12px 10px 15px;border:0;border-radius:calc(var(--radius) - 2px);background:var(--surface);color:var(--fg);
  text-align:left;box-shadow:var(--shadow);overflow:hidden}
.lv-al.warn{--k:var(--danger);--kf:var(--sign-fg)}
.lv-al::before{content:"";position:absolute;inset:0;background:var(--k);opacity:.11;pointer-events:none}
.lv-al::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--k)}
.lv-al>*{position:relative}
.lv-al:active{transform:translateY(1px)}
.lv-al-ic{width:38px;height:38px;border-radius:calc(var(--radius) - 4px);background:var(--k);color:var(--kf);display:grid;place-items:center}
.lv-al-ic svg{width:22px;height:22px}
.lv-al-tx{display:grid;gap:3px;min-width:0}
.lv-al-tx b{font-weight:900;font-size:.98rem;line-height:1.2;text-wrap:balance}
.lv-al-tx small{color:var(--fg-2);font-size:.8rem;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.lv-chev{color:var(--muted);font-size:1.6rem;line-height:1;font-weight:400}
.lv-more{justify-self:start;background:none;border:0;color:var(--link);font-weight:800;font-size:.9rem;padding:0 4px;min-height:44px}

/* ---------- opt-in card ---------- */
.lv-ask{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);border-top:5px solid var(--accent);padding:16px;display:grid;gap:10px}
.lv-ask-top{font-size:.7rem;letter-spacing:.14em;font-weight:800;color:var(--link)}
.lv-ask h3{margin:0;font-size:1.4rem;font-weight:900;line-height:1.15}
.lv-ask p{margin:0;color:var(--fg-2)}
.lv-feats{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lv-feats li{display:flex;align-items:center;gap:8px;min-width:0;background:var(--surface-2);border-radius:calc(var(--radius) - 4px);padding:9px 10px;font-weight:700;font-size:.88rem;line-height:1.2}
.lv-feat-ic{font-size:1.15rem;line-height:1;flex:none}
.lv-ask-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.lv-ask .lv-fine{font-size:.76rem}
.lv-fine{color:var(--muted);font-size:.78rem;margin:0}

/* ---------- lower block ---------- */
.lv{display:grid;gap:18px;min-width:0}
.lv-sec{display:grid;gap:8px;min-width:0}
.lv-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:24px}
.lv-head .sub{margin:0}
.lv-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;margin:-10px -6px;padding:0 6px;
  background:none;border:0;border-radius:calc(var(--radius) - 6px);color:var(--link);font-weight:800;font-size:.9rem;text-decoration:none}
.lv-link:disabled{color:var(--muted)}

/* freeway sign: amber dot matrix on black */
.lv-cms{margin:0;display:grid;gap:8px}
.lv-cms-box{padding:6px;border-radius:calc(var(--radius) - 2px);background:var(--accent-fg);box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.lv-cms-face{position:relative;display:grid;align-items:center;min-height:124px;padding:14px 8px;border-radius:calc(var(--radius) - 7px);overflow:hidden;
  background:var(--accent-fg);color:var(--accent);font-family:var(--mono);font-weight:700;font-size:clamp(16px,5.5vw,26px);line-height:1.3;
  letter-spacing:.08em;text-transform:uppercase;text-align:center}
.lv-cms-pg{grid-area:1/1;display:grid;-webkit-text-stroke:.45px var(--accent);text-shadow:0 0 2px var(--accent)}
.lv-cms-pg span{display:block;min-height:1.32em;overflow-wrap:anywhere}
/* unlit pixels, then the mesh that turns the letters into dots */
.lv-cms-face::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.1;
  background:radial-gradient(circle,var(--accent) 0 .9px,transparent 1.3px) 0 0/4px 4px}
.lv-cms-face::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,transparent 0 1.3px,var(--accent-fg) 1.8px) 0 0/4px 4px}
.lv-cms-face[data-pages="2"] .lv-cms-pg{animation:lvPage 6s steps(1,end) infinite}
.lv-cms-face[data-pages="2"] .lv-cms-pg[data-p="2"]{animation-delay:-3s}
@keyframes lvPage{0%{opacity:1}50%{opacity:0}}
.lv-cms-cap{display:flex;justify-content:space-between;align-items:baseline;gap:8px;color:var(--muted);font-size:.84rem;font-weight:700;line-height:1.3}

/* weather */
.lv-wx{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px}
.lv-wxpt{display:grid;align-content:start;gap:10px;min-width:0;margin:0;padding:12px 14px 14px;border:0;border-radius:var(--radius);
  background:var(--surface);color:var(--fg);text-align:left;box-shadow:var(--shadow)}
.lv-wxpt:active{background:var(--surface-2)}
.lv-wx-d{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--link);line-height:1.2}
.lv-wx-city{font-size:1.05rem;font-weight:900;line-height:1.15;margin-top:-6px;text-wrap:balance}
.lv-per{display:grid;align-content:start;gap:2px;padding-top:10px;border-top:1px solid var(--line);min-width:0}
.lv-per-n{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--muted);line-height:1.2}
.lv-per-top{display:flex;align-items:center;gap:8px;margin:2px 0}
.lv-per-ic{font-size:1.55rem;line-height:1;flex:none}
.lv-per-t{font-family:var(--mono);font-weight:700;font-size:1.4rem;line-height:1;font-variant-numeric:tabular-nums}
.lv-per-s{font-weight:700;font-size:.9rem;line-height:1.25;overflow-wrap:anywhere}
.lv-per-x{color:var(--muted);font-size:.76rem;line-height:1.3}
.lv-per-x span{white-space:nowrap}
/* an old forecast (weather.gov not answering): its age under the last period */
.lv-wx-age{color:var(--muted);font-size:.76rem;font-weight:700;line-height:1.3}
.lv-wait{margin:0;padding:14px;border-radius:var(--radius);background:var(--surface);color:var(--muted);box-shadow:var(--shadow)}

/* cameras: their own horizontal scroller, edge to edge */
.lv-cams{list-style:none;margin:-4px -14px 0;padding:6px 14px 12px;display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.lv-cams::-webkit-scrollbar{display:none}
.lv-cams li{flex:0 0 auto;width:min(68%,236px);scroll-snap-align:start}
.lv-cam{display:grid;width:100%;margin:0;padding:0;border:0;border-radius:calc(var(--radius) - 2px);overflow:hidden;background:var(--surface);color:var(--fg);text-align:left;box-shadow:var(--shadow)}
.lv-cam-img{position:relative;display:block;aspect-ratio:4/3;background:var(--surface-2);overflow:hidden}
.lv-cam-img img{display:block;width:100%;height:100%;object-fit:cover}
.lv-cam-tx{display:grid;gap:1px;padding:8px 11px 10px;min-width:0}
.lv-cam-tx b{font-size:.92rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-cam-tx small{color:var(--muted);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-dot{display:inline-block;flex:none;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--danger);vertical-align:1px;animation:lvBlink 2s ease-in-out infinite}
.lv-cam.off .lv-dot,.lv-big.off+* .lv-dot{background:var(--muted);animation:none}
@keyframes lvBlink{50%{opacity:.3}}
.lv-cam-off{display:none;position:absolute;inset:0;place-items:center;padding:10px;text-align:center;background:var(--surface-2);color:var(--muted);font-weight:800;font-size:.85rem}
.lv-cam.off .lv-cam-off,.lv-big.off .lv-cam-off{display:grid}
.lv-tc{justify-self:start;margin:0 -6px;font-size:.92rem}
.lv-tc::after{content:"↗";margin-left:.3em}

/* status line */
.lv-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:6px 14px;border-radius:calc(var(--radius) - 2px);
  background:var(--surface-2);color:var(--muted);font-size:.82rem;font-weight:700;line-height:1.3}
.lv-foot-tx{display:grid;grid-template-columns:8px minmax(0,1fr);align-items:center;column-gap:9px;flex:1;min-width:0}
.lv-foot-tx::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.lv-foot-tx b{font-weight:800;color:var(--fg-2)}
.lv-foot-tx small{grid-column:2;font-size:.76rem;font-weight:600;color:var(--muted)}
.lv-foot-tx small span{white-space:nowrap}
.lv-foot.bad .lv-foot-tx::before{background:var(--muted)}
.lv-foot.part .lv-foot-tx::before{background:var(--accent)}
.lv-foot .lv-link{flex:none;margin:0 -6px 0 0;white-space:nowrap}
.lv-src{margin:-10px 0 0;color:var(--muted);font-size:.72rem;text-align:center}

/* ---------- sheet ---------- */
.lv-sheet .sheet-head b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-sheet .lv-close{min-height:44px;min-width:44px;padding:6px 8px}
.lv-sh-title{margin:0;font-size:1.35rem;font-weight:900;line-height:1.2;text-wrap:balance}
.lv-sh-meta{margin:0;color:var(--muted);font-size:.85rem;font-weight:700}
.lv-sh-lead{margin:0;color:var(--fg);font-size:1.02rem}
.lv-big{position:relative;margin:0;aspect-ratio:4/3;border-radius:calc(var(--radius) - 2px);overflow:hidden;background:var(--accent-fg)}
.lv-big img{display:block;width:100%;height:100%;object-fit:contain}
.lv-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.lv-nav .secondary{padding:10px;min-height:48px}
.lv-count{color:var(--muted);font-family:var(--mono);font-size:.82rem;text-align:center}
.lv-sh-alert{--k:var(--accent);display:grid;gap:4px;padding-left:12px;border-left:5px solid var(--k)}
.lv-sh-alert.warn{--k:var(--danger)}
.lv-dl{margin:0;display:grid}
.lv-dl dt{margin-top:12px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--muted)}
.lv-dl dt:first-child{margin-top:0}
.lv-dl dd{margin:3px 0 0;color:var(--fg-2)}
.lv-acts{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.lv-acts .lv-link{margin:0}
.lv-chains,.lv-fc{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lv-chains li{--k:var(--accent);--kf:var(--accent-fg);display:grid;gap:4px;padding:10px 12px;border-radius:calc(var(--radius) - 2px);background:var(--surface-2);border-left:5px solid var(--k)}
.lv-chains li.warn{--k:var(--danger);--kf:var(--sign-fg)}
.lv-chains small{color:var(--muted);font-size:.8rem}
.lv-chains p{margin:0;color:var(--fg-2);font-size:.92rem}
.lv-ch-top{display:flex;align-items:center;gap:10px;min-width:0}
.lv-ch-top b{min-width:0}
.lv-ch-lv{flex:none;font-family:var(--mono);font-weight:700;font-size:.85rem;background:var(--k);color:var(--kf);border-radius:calc(var(--radius) - 8px);padding:3px 7px 2px}
.lv-ch-d{margin-left:auto;flex:none;font-family:var(--mono);font-weight:700}
.lv-levels{display:grid;gap:4px}
.lv-levels .sub{margin:0 0 2px}
.lv-levels p{margin:0;color:var(--fg-2);font-size:.88rem}
.lv-fc li{display:grid;gap:4px;padding:10px 12px;border-radius:calc(var(--radius) - 2px);background:var(--surface-2)}
.lv-fc-top{display:flex;align-items:center;gap:10px}
.lv-fc-top .lv-per-t{margin-left:auto;font-size:1.15rem}
.lv-fc p{margin:0;color:var(--fg-2);font-size:.92rem}

/* keyboard focus keeps each card's own shape (app.css squares focused buttons to 6px) */
.lv-al:focus-visible,.lv-cam:focus-visible,.lv-foot .lv-link:focus-visible{border-radius:calc(var(--radius) - 2px)}
.lv-wxpt:focus-visible{border-radius:var(--radius)}

/* still sign for people who turn motion off: both pages, one above the other */
@media (prefers-reduced-motion:reduce){
  .lv-cms-face .lv-cms-pg{grid-area:auto;opacity:1}
  .lv-cms-face .lv-cms-pg[data-p="2"]{margin-top:10px;padding-top:10px;border-top:1px dashed var(--accent)}
}