/* ===== dr_routes_html (HTML form, scoped) =====
   Loaded eagerly from anvil.yaml native_deps.head_html, which is also what styles the
   designer canvas.

   Scoping: a selector that already names .dr-routes is not wrapped, because wrapping it
   would drop it from (0,2,0) to (0,1,0) and hand the tie to the
   dependency's runtime-injected sheet, which lands after every head link. Only the selectors
   that do NOT name the root are :where(.dr-routes)-wrapped, which adds zero specificity and so
   cannot change which rule wins; it only stops them reaching the rest of the app.

   No designer gate: nothing here hides content until JavaScript runs. The
   empty-state and content divs are hidden with the HTML `hidden` attribute, which hides on the
   canvas exactly as it does at runtime. */

.dr-routes {
    min-width: 0;
}

:where(.dr-routes) .dr-route-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

:where(.dr-routes) .dr-route-columns > div {
    min-width: 0;
}

.dr-routes h3 {
    margin: 16px 0 8px;
    font-size: 13px;
    font-weight: 600;
}

:where(.dr-routes) .dr-route-chart {
    min-height: 200px;
}

:where(.dr-routes) #dr-route-table table {
    min-width: 1240px;
}

:where(.dr-routes) #dr-route-heatmap table {
    min-width: 650px;
}

.dr-routes .dr-route-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--px-text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.dr-routes .dr-heat-cell {
    border: 0;
    border-radius: 4px;
    min-width: 90px;
    min-height: 36px;
    padding: 8px;
    color: var(--px-text-primary);
    cursor: pointer;
}

/* Root class doubled to (0,3,1): the shell's .dr-dashboard button:focus-visible
   (drivers_analytics_html.css, outline-offset: 3px) is the same (0,2,1) and loads later. */
.dr-routes.dr-routes button:focus-visible {
    outline: 2px solid var(--dr-accent);
    outline-offset: 2px;
}

:where(.dr-routes) .dr-route-note {
    color: var(--px-text-muted);
    font-size: 11px;
    margin-top: 12px;
    line-height: 1.6;
}

.dr-routes summary {
    cursor: pointer;
    font-size: 12px;
    padding: 10px 0;
}

@media(max-width:900px) {
    :where(.dr-routes) .dr-route-columns {
        grid-template-columns: 1fr;
    }
}

@media print, (forced-colors:active) {
    :where(.dr-routes) .dr-route-chart {
        display: none;
    }

    .dr-routes details > div {
        display: block !important;
    }
}