.devices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 400px));
    gap: var(--rg-space-4);
    align-items: stretch;
}

.devices-tile-link {
    display: block;
    min-width: 0;
    min-height: 44px;
    color: var(--mud-palette-text-primary);
    border-radius: var(--rg-shape-card);
}

.devices-tile-link:focus-visible {
    outline: var(--rg-focus-ring);
    outline-offset: var(--rg-focus-ring-offset);
}

.devices-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 244px;
    padding: var(--rg-space-5);
    border-radius: var(--rg-shape-card);
    background: var(--device-appearance-container, var(--mud-palette-surface));
    transition: background-color var(--m3-motion-duration-short) var(--m3-motion-easing-effects);
}

.devices-tile-chevron {
    position: absolute;
    top: var(--rg-space-5);
    right: var(--rg-space-5);
    color: var(--mud-palette-text-secondary);
    transition: color var(--m3-motion-duration-short) var(--m3-motion-easing-effects);
}

.devices-tile-link:hover .devices-tile-chevron,
.devices-tile-link:focus-visible .devices-tile-chevron {
    color: var(--mud-palette-text-primary);
}

.devices-tile-link:hover .devices-tile {
    background: var(--rg-state-hover);
}

.devices-tile-link:active .devices-tile {
    background: var(--rg-state-selected);
}

.devices-tile-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--rg-space-4);
    border-radius: var(--rg-shape-control);
    color: var(--mud-palette-text-primary);
    background: var(--rg-surface-raised);
}

.devices-tile-icon .mud-icon-root {
    font-size: 1.75rem;
}

.devices-tile-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.devices-tile-status {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: var(--rg-space-1);
    min-height: var(--rg-control-height-sm);
    padding-inline: var(--rg-space-3);
    margin-top: var(--rg-space-2);
    border-radius: var(--rg-shape-pill);
    background: var(--rg-surface-container-nested);
}

.devices-tile-status.is-online {
    color: var(--rg-status-success-text);
    background: var(--rg-status-success-container);
}

.devices-tile-status.is-offline {
    color: var(--mud-palette-text-secondary);
}

.devices-tile-status.is-checking {
    color: var(--rg-status-info-text);
    background: var(--rg-status-info-container);
}

.devices-tile-status .mud-typography {
    color: inherit;
    font-weight: var(--rg-font-weight-medium);
}

.devices-tile-description {
    display: -webkit-box;
    min-height: 3em;
    max-height: 3em;
    margin-top: var(--rg-space-3);
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.devices-tile-description.is-empty {
    visibility: hidden;
}

.devices-tile-location {
    display: flex;
    align-items: center;
    gap: var(--rg-space-1);
    min-width: 0;
    min-height: 20px;
    margin-top: auto;
    color: var(--mud-palette-text-secondary);
}

.devices-tile-location .mud-icon-root {
    flex: 0 0 auto;
}

.devices-tile-location .mud-typography {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.devices-tile-location.is-empty {
    visibility: hidden;
}

/* MudPaper and MudStack render outside the page component's CSS scope. */
.device-settings-page .device-settings-section {
    padding: var(--rg-space-5);
    border-radius: var(--rg-shape-card);
    background: var(--rg-surface-workspace-panel);
}

@media (max-width: 599.98px) {
    .device-settings-page .device-settings-section {
        padding: var(--rg-space-4);
    }

    .device-settings-page .device-settings-actions {
        flex-direction: column;
    }

    .device-settings-page .device-settings-actions > * {
        width: 100%;
    }
}

/* Confirmed-offline device workspace. The copy sits directly on the page; only the device
   mark and its status badge carry color, so the state reads as calm rather than alarming. */
.device-offline-state {
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-8);
    padding-block: var(--rg-space-6) var(--rg-space-12);
}

.device-offline-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rg-space-3) var(--rg-space-4);
}

.device-offline-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--rg-space-6);
    row-gap: var(--rg-space-6);
    max-width: 760px;
}

.device-offline-body > :not(.device-offline-mark) {
    grid-column: 2;
}

.device-offline-mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: var(--rg-shape-app-tile);
    color: var(--device-appearance-color);
    background: var(--device-appearance-container);
    grid-row: 1 / span 3;
}

.device-offline-mark > .mud-icon-root {
    font-size: 2rem;
    opacity: 0.55;
}

.device-offline-mark-badge {
    position: absolute;
    right: -6px;
    bottom: -6px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 3px solid var(--rg-surface-workspace-canvas);
    border-radius: var(--rg-shape-pill);
    color: var(--mud-palette-text-primary);
    background: var(--rg-surface-control);
}

.device-offline-mark-badge .mud-icon-root {
    font-size: 1rem;
}

.device-offline-copy {
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-2);
    max-width: var(--rg-layout-reading-measure);
}

.device-offline-last-seen {
    font-variant-numeric: tabular-nums;
}

.device-offline-checks ul {
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-3);
    margin: var(--rg-space-3) 0 0;
    padding: 0;
    list-style: none;
}

.device-offline-checks li {
    display: flex;
    align-items: flex-start;
    gap: var(--rg-space-3);
    color: var(--mud-palette-text-secondary);
    font-size: var(--rg-type-body-medium-size);
    line-height: var(--rg-type-body-medium-line-height);
}

.device-offline-checks li .mud-icon-root {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--mud-palette-text-primary);
}

.device-offline-waiting {
    display: flex;
    align-items: center;
    gap: var(--rg-space-3);
}

/* A slow breathing dot shows that Rungard is still listening for the device. */
.device-offline-pulse {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: var(--rg-shape-pill);
    background: var(--mud-palette-text-secondary);
    animation: device-offline-pulse 2.4s var(--m3-motion-easing-effects) infinite;
}

@keyframes device-offline-pulse {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

@media (max-width: 599.98px) {
    .device-offline-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .device-offline-body > :not(.device-offline-mark) {
        grid-column: 1;
    }

    .device-offline-mark {
        grid-row: auto;
        width: 60px;
        height: 60px;
    }
}

/* Paused live updates inside a device workspace. Quiet and compact: the page stays usable with
   its last known data, so this only explains why controls are briefly unavailable. */
.device-connection-notice {
    display: flex;
    align-items: center;
    gap: var(--rg-space-3);
    width: fit-content;
    max-width: 100%;
    margin-bottom: var(--rg-space-4);
    padding: var(--rg-space-2) var(--rg-space-4);
    border-radius: var(--rg-shape-pill);
    color: var(--mud-palette-text-primary);
    background: var(--rg-surface-control);
    animation: device-connection-notice-enter var(--m3-motion-duration-medium) var(--m3-motion-easing-effects);
}

.device-connection-notice-spinner {
    flex: 0 0 auto;
    color: var(--mud-palette-text-secondary);
}

@keyframes device-connection-notice-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

.device-settings-page .device-settings-unsaved {
    align-self: center;
    margin-inline-end: var(--rg-space-2);
}