/* ══════════════════════════════════════════════════════════════
   Home cards on phones: the same frosted look, without a live backdrop blur on every card.
   The page is ~20 cards tall; blurring what is behind each one while scrolling is what makes phones stutter.
   The surface becomes a near-opaque tint of the card colour (so text contrast does not depend on what is behind),
   the highlight and shadow stay. The hall drawing and the hall switcher keep the real glass: they sit over the drawing.
   Remove this file's <link> in App.razor to get the previous look back.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
    .iot-home :is(.ih-w:not(.ih-w-scene), .ih-card, .ih-hall, .ih-tile, .ih-module, .ih-units, .ih-attn-item, .ih-unit, .ih-panel) {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: linear-gradient(160deg, var(--frost-hi), transparent 55%), color-mix(in srgb, var(--s-1) 92%, transparent);
    }

    /* the nested pills inside those cards were glass on glass: a plain tint is enough */
    .iot-home :is(.ih-w, .ih-card, .ih-hall) :is(.ih-metric, .ih-read, .ih-w-pill) {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   The same for the control pages (climate, heater, device control): their cards also blurred what is behind them,
   dozens at a time. On phones they get the near-opaque surface too. The orbiting light on running devices is an
   animated conic gradient that repaints every frame; on touch screens it stays as a still ring.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    :is(.htr, .iot) :is(.htr-card, .htr-tile, .clm-kpi, .clm-chart, .htr-stepper-card, .htr-shortcut, .htr-err-card, .htr-hero, .htr-nav, .htr-modbar, .clm-stage, .htr-schematic, .clm-chip) {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: linear-gradient(160deg, var(--frost-hi), transparent 55%), color-mix(in srgb, var(--s-1) 92%, transparent);
    }
}

@media (pointer: coarse) {
    .iot-home .ih-w-switch.is-on::before,
    .iot-home .ih-unit.is-on::before { animation: none; }
    .ih-ruler-sel::after { animation: none; }
}