/* ===== drivers_analytics_html (the shell, HTML form) =====
   The shell's own rules; the rules six children also use are theme/assets/drivers/drivers.css.
   Loaded eagerly from anvil.yaml native_deps.head_html, which is also what styles the
   designer canvas.

   SCOPING. A selector that already names .dr-dashboard stays exactly as it was: wrapping it
   would drop it a class and hand the tie to the dependency's runtime-injected sheet, which
   lands after every head link. That is what keeps .dr-dashboard .px-card-header (0,2,0) above
   the dependency's .px-card-header (0,1,0), and the same for .px-card-body. An id selector
   cannot leak and is left bare. Everything else is :where(.dr-dashboard)-wrapped, which adds
   zero specificity and so cannot change which rule wins; it only stops the rule reaching the
   rest of the app.

   No designer gate: nothing here hides content until JavaScript runs. #dr-failed,
   #dr-grid-banner and #dr-telematics-note are hidden with the HTML `hidden` attribute, which
   hides on the canvas exactly as it does at runtime. */

.dr-dashboard,.dr-dashboard * { box-sizing:border-box; }
/* The root rule, and the one bare class in this file. position: relative is declared rather
   than left to pxEnsureOverlayAnchor, which writes it INLINE on the root at runtime when the
   computed position is static. flex: 1 0 auto and no overflow / height / position: fixed,
   because this element is a flex item inside the layout's scroller .px-nav-content and any
   of those stops the port scrolling. min-height: calc(100dvh - 16px) is the layout's height
   minus its padding at 980px and up. Below 980px the 56px top bar comes off that height, so
   the screen overspills the port by 56px. */
.dr-dashboard { --accent:var(--dr-accent); --accent-hover:color-mix(in srgb, var(--dr-accent) 80%, #000); --accent-subtle:color-mix(in srgb, var(--dr-accent) 12%, transparent); --accent-text:var(--px-ink-on-bright); font-family:var(--px-font); color:var(--px-text-primary); background:var(--px-bg-deep); min-height:calc(100dvh - 16px); isolation:isolate; position:relative; flex:1 0 auto; }
:where(.dr-dashboard) .dr-content { padding:24px; display:flex; flex-direction:column; gap:18px; }
:where(.dr-dashboard) .dr-header { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
:where(.dr-dashboard) .dr-header h1 { margin:0; font-size:24px; font-weight:600; }
.dr-dashboard h1[title],.dr-dashboard .dr-controls label > span[title] { cursor:help; }
:where(.dr-dashboard) .dr-controls { display:flex; flex-wrap:wrap; align-items:end; gap:10px; }
:where(.dr-dashboard) .dr-controls label { display:flex; flex-direction:column; gap:5px; font-size:11px; color:var(--px-text-muted); }
.dr-dashboard button,.dr-dashboard input,.dr-dashboard select { font:inherit; }
.dr-dashboard button { cursor:pointer; }
.dr-dashboard button:focus-visible,.dr-dashboard input:focus-visible,.dr-dashboard select:focus-visible,.dr-dashboard summary:focus-visible { outline:2px solid var(--dr-accent); outline-offset:3px; }
#dr-failed { border:1px solid var(--px-danger); border-radius:10px; padding:24px; color:var(--px-danger); text-align:center; background:var(--px-bg-card); }
#dr-panels { display:flex; flex-direction:column; gap:20px; min-width:0; }
.dr-dashboard .dr-stale { opacity:.45; pointer-events:none; }
.dr-dashboard .px-card-header { margin:0; font-size:17px; }
.dr-dashboard .px-card-body { padding:18px; }
:where(.dr-dashboard) .dr-quality > summary { cursor:pointer; padding:18px; font-size:14px; font-weight:600; }
:where(.dr-dashboard) .dr-quality-content { padding:0 18px 18px; }
:where(.dr-dashboard) .dr-quality-counts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 24px; margin:0 0 16px; font-size:12px; }
:where(.dr-dashboard) .dr-quality-counts > div { display:flex; justify-content:space-between; gap:14px; padding-bottom:7px; border-bottom:1px solid var(--px-border); }
:where(.dr-dashboard) .dr-quality-counts dt,:where(.dr-dashboard) .dr-quality-counts dd { margin:0; }
:where(.dr-dashboard) .dr-quality-counts dd { font-weight:600; font-variant-numeric:tabular-nums; }
:where(.dr-dashboard) .dr-quality-counts > section { min-width:0; }
:where(.dr-dashboard) .dr-quality-counts h3 { margin:16px 0 8px; font-size:13px; font-weight:600; }
:where(.dr-dashboard) .dr-quality-chart { min-height:160px; }
:where(.dr-dashboard) .dr-quality-lists { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 24px; margin:16px 0 0; font-size:12px; }
:where(.dr-dashboard) .dr-quality-lists > details { min-width:0; border-bottom:1px solid var(--px-border); }
:where(.dr-dashboard) .dr-quality-lists > details > summary { cursor:pointer; padding:7px 0; font-size:12px; font-weight:600; }
:where(.dr-dashboard) .dr-quality-lists ul { margin:0 0 9px; padding-left:18px; line-height:1.7; }
.dr-dashboard [hidden] { display:none !important; }
@media(max-width:600px) { :where(.dr-dashboard) .dr-content { padding:14px; gap:14px; } :where(.dr-dashboard) .dr-header { display:block; } :where(.dr-dashboard) .dr-controls { gap:8px; } :where(.dr-dashboard) .dr-controls label { flex:1 1 120px; min-width:0; } :where(.dr-dashboard) .dr-control { width:100%; min-width:0; } :where(.dr-dashboard) .dr-quality-counts { grid-template-columns:1fr; } :where(.dr-dashboard) .dr-quality-lists { grid-template-columns:1fr; } .dr-dashboard .px-card-body { padding:13px; } }