/* My Devices' in-dialog kiosk host. The deep #kioskCard keeps its own layout;
   every selector here is scoped so opening both hosts cannot restyle either. */
.device-menu-actions > .device-menu-kiosk {
  grid-column: 1 / -1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--dusk);
  padding: 14px;
}
.device-menu-kiosk .dmk-title { margin: 0 0 6px; font-size: 15px; }
.device-menu-kiosk .klocks { margin: 0; }
.device-menu-kiosk .klock {
  min-width: 0;
  margin: 0;
  padding: 10px 0;
  min-height: 48px;
}
.device-menu-kiosk .klock:first-child { padding-top: 8px; }
.device-menu-kiosk .klock-name { overflow-wrap: anywhere; }
.device-menu-kiosk .klock-detail { overflow-wrap: anywhere; }
.device-menu-kiosk .ghost.small,
.device-menu-kiosk .primary.small {
  min-height: 44px;
  border-radius: 12px;
  white-space: normal;
}
.device-menu-kiosk button:disabled:not([aria-pressed="true"]) {
  background: var(--dusk);
  border-color: var(--line);
  color: var(--muted);
  box-shadow: none;
  cursor: not-allowed;
  opacity: .64;
}
.device-menu-kiosk .dmk-app-picker {
  display: flex;
  align-items: end;
  gap: 10px;
  min-width: 0;
  padding: 0 0 10px;
}
.device-menu-kiosk .dmk-app-picker > label { flex: 1 1 auto; min-width: 0; }
.device-menu-kiosk .dmk-app-picker select { display: block; min-width: 0; width: 100%; margin-top: 5px; }
.device-menu-kiosk .dmk-slider { min-height: 44px; margin-bottom: 6px; }
.device-menu-kiosk .klock-rot { gap: 8px; }
.device-menu-kiosk .krot { width: 100%; }
.device-menu-kiosk .dmk-unlock { margin: 10px 0 0; }
.device-menu-kiosk .dmk-escape { margin: 8px 0 0; }
.device-menu-kiosk .dmk-retry { min-height: 44px; margin: 8px 0; }
.device-menu-kiosk .dmk-no-child { margin: 8px 0; color: var(--muted); }
@media (max-width: 430px) {
  .device-menu-actions > .device-menu-kiosk { padding: 12px; }
  .device-menu-kiosk .dmk-app-picker { align-items: stretch; flex-direction: column; }
  .device-menu-kiosk .dmk-app-picker > label,
  .device-menu-kiosk .dmk-app-picker > button { width: 100%; }
  .device-menu-kiosk .klock { gap: 8px; }
  .device-menu-kiosk .klock .ghost.small { padding-left: 10px; padding-right: 10px; }
}