/* ===== dr_homes_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-homes is not wrapped, because wrapping it
   would drop it a class 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-homes)-wrapped, which adds zero specificity and so cannot change which
   rule wins; it only stops them reaching the rest of the app.

   --dr-accent is the shell's token. drivers.css declares it on .dr-dashboard and the two overlay
   ids, and it reaches these rules by inheritance.

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

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

.dr-homes h3 {
    margin: 16px 0 8px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

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

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

:where(.dr-homes) .dr-home-chart {
    min-height: 200px;
}

:where(.dr-homes) #dr-home-table table {
    min-width: 960px;
}

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

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

:where(.dr-homes) .dr-home-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 110px;
}

:where(.dr-homes) .dr-home-bar > span.dr-home-bar-track {
    flex: 1 1 auto;
    height: 8px;
    border-radius: 4px;
    background: var(--px-accent-soft);
    overflow: hidden;
}

:where(.dr-homes) .dr-home-bar > span.dr-home-bar-track > span {
    display: block;
    height: 100%;
    background: var(--dr-accent);
}

:where(.dr-homes) .dr-home-footer {
    color: var(--px-text-muted);
    font-size: 11px;
    margin-top: 16px;
    line-height: 1.6;
}

:where(.dr-homes) .dr-home-partial {
    color: var(--px-text-muted);
}

/* Root class doubled to (0,3,1). The shell's .dr-dashboard button:focus-visible /
   .dr-dashboard summary:focus-visible (drivers_analytics_html.css, outline-offset: 3px) is
   the same (0,2,1) and loads later, so without the doubled class the ring would move to 3px
   on order alone. */
.dr-homes.dr-homes button:focus-visible,
.dr-homes.dr-homes summary:focus-visible {
    outline: 2px solid var(--dr-accent);
    outline-offset: 2px;
}

.dr-homes [hidden] {
    display: none !important;
}

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

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

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