/* One compact inventory row: identity opens the device page; status expands
   diagnostics; the two square actions are remote controls and pause/resume.
   This is last in the device stylesheet stack so all older card variants have
   the same geometry, including pending/ghost states. */
#devices .devrow.devcard,
#devices .devcard:has(> .devactions > .devlockstate:not(:empty)),
#devices .devcard:has(> details.healthcap[open]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(118px, max-content) 44px 44px;
  grid-template-areas: none;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
  padding: 7px 2px;
}
#devices .devrow.devcard > .devbtn {
  grid-area: auto;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 3px 4px;
}
#devices .devcard .devicon {
  position: static;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  order: -1;
}
#devices .devcard .devnm,
#devices .devcard .devnmrow,
#devices .devcard .devcontext {
  display: flex;
  min-width: 0;
}
#devices .devcard .devnm {
  flex: 1 1 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: auto;
  text-align: left;
  gap: 1px;
}
#devices .devcard .devnmrow {
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding-right: 0;
}
#devices .devcard .devnmtext {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.25;
}
#devices .devcard .devnmrow > .pill,
#devices .devcard .devopen { display: none; }
#devices .devcard .devcontext { flex: 0 1 auto; align-items: center; justify-content: flex-start; gap: 5px; width: 100%; margin: 0; overflow: hidden; }
#devices .devcard .devchild {
  max-width: min(100%, 180px);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 650;
}
#devices .devcard .devconnection,
#devices .devcard .devsub.devseen { margin: 0; font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
#devices .devcard .devsub.devseen { order: 3; }
#devices .devcard .devsub.warnnote { flex: 1 1 100%; order: 4; margin: 1px 0 0; }
#devices .devcard .devplat,
#devices .devcard .devlock,
#devices .devcard .devbrowsergrant,
#devices .devcard .devtelemetry { display: none; }
#devices .devcard > details.healthcap {
  grid-area: auto;
  grid-column: 2;
  grid-row: 1;
  justify-self: stretch;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: visible;
}
#devices .devcard details.healthcap > .healthsummary {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 9px;
  gap: 5px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: transparent;
}
#devices .devcard .healthsummary-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#devices .devcard .healthsummary-state { display: block; flex: 0 1 auto; font-size: 11px; text-align: center; }
#devices .devcard .healthsummary-icon { flex: 0 0 15px; width: 15px; height: 15px; }
#devices .devcard details.healthcap > .healthsummary::before { order: 3; margin: 0; font-size: 10px; }
#devices .devcard:has(> details.healthcap[open]) > details.healthcap {
  grid-column: 1 / -1;
  grid-row: 2;
  padding: 0 10px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--surface-raised);
}
#devices .devcard:has(> details.healthcap[open]) > details.healthcap > .healthsummary {
  justify-content: flex-start;
  width: 100%;
  border: 0;
  background: none;
}
#devices .devrow.devcard > .devactions { display: contents; }
#devices .devcard > .devactions > .device-menu-trigger,
#devices .devcard > .devactions > .devlockbtn {
  grid-area: auto;
  grid-row: 1;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: transparent;
}
#devices .devcard > .devactions > .device-menu-trigger { grid-column: 3; color: var(--brand); }
#devices .devcard > .devactions > .devlockbtn { grid-column: 4; }
#devices .devcard > .devactions .devaction-icon { width: 18px; height: 18px; margin: 0; }
#devices .devcard > .devactions > .devlockstate {
  grid-area: auto;
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0 0 0 44px;
  padding: 0;
  text-align: left;
  font-size: 11px;
}
#devices .devcard > .devactions > .devforget { grid-area: auto; grid-column: 1 / -1; justify-self: end; }
#devices .devcard > .devactions > button:not(:has(svg)) { width: auto; padding-inline: 10px; }

@media (max-width: 700px) {
  #devices .devrow.devcard,
  #devices .devcard:has(> .devactions > .devlockstate:not(:empty)),
  #devices .devcard:has(> details.healthcap[open]) {
    grid-template-columns: minmax(0, 1fr) 44px 44px;
    grid-template-areas: none;
  }
  #devices .devrow.devcard > .devbtn { grid-column: 1 / -1; grid-row: 1; }
  #devices .devcard > details.healthcap { grid-column: 1; grid-row: 2; justify-self: start; min-width: 128px; }
  #devices .devcard > .devactions > .device-menu-trigger { grid-column: 2; grid-row: 2; }
  #devices .devcard > .devactions > .devlockbtn { grid-column: 3; grid-row: 2; }
  #devices .devcard:has(> details.healthcap[open]) > details.healthcap { grid-column: 1 / -1; grid-row: 3; }
}

/* A remote should scan like a settings panel, not a stack of cards. The
   dialog has one scroll surface; each control remains at least 44px tall. */
:root:has(#deviceMenuOverlay:not(.is-hidden)) {
  overflow: hidden;
}
#deviceMenuOverlay .device-menu-panel {
  max-width: 560px;
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  border-color: var(--border-subtle);
  background: var(--dusk);
  box-shadow: 0 24px 60px rgba(22,35,63,.18);
}
@media (min-width: 700px) {
  #deviceMenuOverlay { align-items: center; }
}
#deviceMenuOverlay .toprow {
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-subtle);
}
#deviceMenuOverlay #deviceMenuTitle { font-size: 17px; line-height: 1.2; }
#deviceMenuOverlay #deviceMenuName { margin-top: 2px; font-size: 12px; line-height: 1.3; }
#deviceMenuOverlay #deviceMenuClose {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 13px;
  border-radius: 11px;
  font-size: 12px;
}
#deviceMenuOverlay #deviceMenuOffline {
  margin: 11px 20px 0;
  padding: 8px 11px;
  border-radius: 10px;
  font-size: 11.5px;
  line-height: 1.35;
}
#deviceMenuOverlay .device-menu-actions {
  --dm-gap: 0px;
  --dm-section-gap: 0px;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: min-content;
  gap: 0;
  margin: 0;
  padding: 7px 20px 20px;
  scrollbar-gutter: stable;
  overscroll-behavior-y: contain;
}
#deviceMenuActions > * { grid-column: 1 / -1; min-width: 0; }
#deviceMenuActions .device-menu-section {
  margin: 0;
  padding: 15px 0 6px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
}
#deviceMenuActions .device-menu-section:first-child { padding-top: 4px; }
#deviceMenuActions .device-menu-action {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: none;
}
#deviceMenuActions button.device-menu-action { flex-direction: row; align-items: center; gap: 10px; }
#deviceMenuActions button.device-menu-action:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); }
#deviceMenuActions button.device-menu-action:focus-visible { outline-offset: -2px; border-radius: 8px; }
#deviceMenuActions .device-menu-action.danger { color: var(--danger-text); border-color: var(--border-subtle); }
#deviceMenuActions .device-menu-action.primary {
  justify-content: center;
  margin: 9px 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--primary-cta-gradient);
  color: var(--primary-cta-text);
}
#deviceMenuActions .device-menu-action .dm-label { flex: 1 1 auto; min-width: 0; }
#deviceMenuActions .dm-icon { flex: 0 0 18px; width: 18px; height: 18px; color: var(--brand); }
#deviceMenuActions .device-menu-stateful .dm-state { flex: 0 0 auto; margin: 0; padding: 4px 9px; font-size: 11px; }
#deviceMenuActions .device-menu-pause-toggle .dm-label { font-weight: 800; }
#deviceMenuActions .dm-toggle-track {
  position: relative;
  flex: 0 0 32px;
  width: 32px;
  height: 20px;
  border: 1px solid var(--border-control);
  border-radius: 999px;
  background: var(--surface-raised);
}
#deviceMenuActions .dm-toggle-track::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-secondary);
  transition: transform .16s ease;
}
#deviceMenuActions .device-menu-pause-toggle[data-paused="true"] .dm-toggle-track { border-color: var(--danger); background: var(--danger-tint); }
#deviceMenuActions .device-menu-pause-toggle[data-paused="true"] .dm-toggle-track::before { transform: translateX(12px); background: var(--danger); }
#deviceMenuActions .device-menu-pause-toggle[data-lock-confirmation="pending"] .dm-toggle-track {
  border-style: dashed;
  border-color: var(--border-control);
  background: var(--surface-raised);
}
#deviceMenuActions .device-menu-pause-toggle[data-lock-confirmation="pending"] .dm-toggle-track::before {
  transform: translateX(6px);
  background: var(--text-secondary);
}
#deviceMenuActions .device-menu-pause-toggle[data-lock-confirmation="pending"] .dm-toggle-track::after {
  content: '';
  position: absolute;
  top: 9px;
  left: 12px;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--surface-raised);
}
#deviceMenuActions .device-menu-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
#deviceMenuActions .device-menu-picker > .dm-label { flex: 1 1 170px; }
#deviceMenuActions .device-menu-picker > .dm-picker {
  flex: 0 1 215px;
  width: auto;
  min-width: 160px;
  min-height: 40px;
  margin: 0;
  padding: 6px 32px 6px 11px;
  border-radius: 10px;
  font-size: 12px;
}
#deviceMenuActions button.device-menu-kiosk-toggle {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 3px;
  text-align: left;
}
#deviceMenuActions .device-menu-kiosk-toggle .dm-icon { grid-column: 1; grid-row: 1; }
#deviceMenuActions .device-menu-kiosk-toggle .dm-label { grid-column: 2; grid-row: 1; }
#deviceMenuActions .device-menu-kiosk-toggle .dm-state { grid-column: 3; grid-row: 1; }
#deviceMenuActions .device-menu-kiosk-toggle .dm-substate {
  grid-column: 2 / -1;
  grid-row: 2;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}
#deviceMenuActions .device-menu-kiosk {
  padding: 4px 0 10px 12px;
  border: 0;
  border-left: 2px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
}
#deviceMenuActions .device-menu-kiosk[hidden],
#deviceMenuActions .drp-card[hidden] { display: none; }
#deviceMenuActions .device-menu-kiosk .dmk-title { margin-bottom: 2px; font-size: 13px; }
#deviceMenuActions .device-menu-kiosk .klock { min-height: 44px; padding: 6px 0; }
#deviceMenuActions .device-menu-kiosk .klock.klock-rot .krot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 6px;
}
#deviceMenuActions .device-menu-kiosk .klock.klock-rot .krot .ghost.small,
#deviceMenuActions .device-menu-kiosk .klock.klock-rot .krot .primary.small {
  width: 100%;
  min-height: 44px;
  padding: 5px 3px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  font-size: 11px;
  line-height: 1.15;
}
#deviceMenuActions .drp {
  display: grid;
  gap: 6px;
  padding: 14px 0 12px;
  border-bottom: 1px solid var(--border-subtle);
}
#deviceMenuActions .drp-title { margin: 0; color: var(--text-secondary); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
#deviceMenuActions .drp-note { font-size: 11px; line-height: 1.3; }
#deviceMenuActions .drp-jumps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#deviceMenuActions .drp-jump {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-raised);
  color: var(--brand-deep);
  font-size: 12px;
  font-weight: 800;
}
#deviceMenuActions .drp-jump .dm-icon { width: 16px; height: 16px; }
#deviceMenuActions .drp-jump[aria-expanded="true"] { border-color: var(--brand); background: var(--brand-tint); }
#deviceMenuActions .drp-card {
  padding: 8px 0 8px 12px;
  border: 0;
  border-left: 2px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
}
#deviceMenuActions .drp-card-title { font-size: 13px; }
#deviceMenuActions button.device-menu-destination {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  text-align: left;
}
#deviceMenuActions .device-menu-destination .dm-icon { grid-column: 1; }
#deviceMenuActions .device-menu-destination .dm-label { grid-column: 2; }
#deviceMenuActions .device-menu-destination .dqa-goes {
  grid-column: 3;
  width: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--text-secondary);
  font-size: 0;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-align: right;
}
#deviceMenuActions .device-menu-destination .dqa-goes::after { content: '›'; font-size: 22px; font-weight: 400; }
#deviceMenuActions .dqa {
  display: block;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  background: transparent;
}
:root[data-theme="light"] #deviceMenuActions .dqa { border: 0; border-bottom: 1px solid var(--border-subtle); }
#deviceMenuActions .dqa-title {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 2px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
#deviceMenuActions .dqa-title::-webkit-details-marker { display: none; }
#deviceMenuActions .dqa-title::after { content: '›'; margin-left: auto; color: var(--text-secondary); font-size: 22px; font-weight: 400; line-height: 1; }
#deviceMenuActions .dqa[open] .dqa-title::after { content: '⌄'; }
#deviceMenuActions .dqa-title:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 8px; }
#deviceMenuActions .dqa:not([open]) > :not(summary) { display: none; }
#deviceMenuActions .dqa[open] { padding-bottom: 12px; }
#deviceMenuActions .dqa[open] .dqa-form,
#deviceMenuActions .dqa[open] .dqa-check,
#deviceMenuActions .dqa[open] .dqa-msg { margin: 0 0 7px 28px; }
#deviceMenuActions .dqa-send { min-height: 42px; padding: 8px 13px; border-radius: 10px; font-size: 12px; }
#deviceMenuActions .dqa-form > .inp { min-height: 42px; border-radius: 10px; font-size: 12px; }
@media (max-width: 420px) {
  #deviceMenuOverlay .toprow { padding: 14px 16px 11px; }
  #deviceMenuOverlay #deviceMenuOffline { margin-inline: 16px; }
  #deviceMenuOverlay .device-menu-actions { padding-inline: 16px; }
  #deviceMenuActions .device-menu-picker > .dm-picker { flex: 1 1 100%; }
  #deviceMenuActions .device-menu-destination .dqa-goes { width: 20px; max-width: 20px; font-size: 0; }
}

/* The first screen is a remote: two adjacent, stateful switches and compact
   task shortcuts. The same scrollport holds one view at a time; hidden views
   cannot retain focus or leave blank grid tracks behind. */
#deviceMenuActions > .dm-face,
#deviceMenuActions > .dm-drawer,
#deviceMenuActions > .dm-detail {
  grid-column: 1 / -1;
  min-width: 0;
}
#deviceMenuActions > .dm-face[hidden],
#deviceMenuActions > .dm-drawer[hidden],
#deviceMenuActions > .dm-detail[hidden],
#deviceMenuActions .dm-detail-slot[hidden] {
  display: none !important;
}
#deviceMenuOverlay #deviceMenuBack {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: 11px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 750;
}
#deviceMenuOverlay #deviceMenuBack[hidden] { display: none !important; }
#deviceMenuOverlay #deviceMenuBack:hover { border-color: var(--border-control); }
#deviceMenuOverlay .toprow .who { flex: 1 1 auto; min-width: 0; }
#deviceMenuOverlay .toprow .who .nm,
#deviceMenuOverlay .toprow .who .id { min-width: 0; overflow-wrap: anywhere; }

#deviceMenuActions .dm-face { display: grid; gap: 14px; padding-top: 8px; }
#deviceMenuActions .dm-hero {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 0 2px;
  color: var(--text-primary);
}
#deviceMenuActions .dm-hero strong,
#deviceMenuActions .dm-hero .dm-hero-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}
#deviceMenuActions .dm-hero small,
#deviceMenuActions .dm-hero .dm-hero-note {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}
#deviceMenuActions .dm-quick-grid,
#deviceMenuActions .dm-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  min-width: 0;
}
/* A hand-over is the third quick action on supported Android devices. Keep
   three equal cells on a wide modal; on a phone the last action spans the
   two-column row instead of leaving a lopsided empty cell. */
@media (min-width: 600px) {
  #deviceMenuActions .dm-quick-grid.dm-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  #deviceMenuActions .dm-quick-grid > .dm-quick:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    min-height: 64px;
  }
  #deviceMenuActions .dm-quick-grid > .dm-parent-handover:last-child:nth-child(odd) {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  #deviceMenuActions .dm-parent-handover:last-child:nth-child(odd) .dm-state {
    margin: 0 0 0 auto;
    text-align: right;
  }
}
#deviceMenuActions button.dm-quick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 5px;
  min-width: 0;
  min-height: 98px;
  margin: 0;
  padding: 12px 13px;
  border: 1px solid var(--border-control);
  border-radius: 15px;
  background: var(--surface-raised);
  color: var(--text-primary);
  text-align: left;
  box-shadow: 0 2px 8px rgba(22,35,63,.035);
  /* Theme text changes immediately. Do not animate the tile fill behind it:
     light-to-dark otherwise flashes white text on the old pale surface. */
  transition: border-color .16s ease, transform .16s ease;
}
#deviceMenuActions .dm-quick .dm-toggle-track {
  position: absolute;
  top: 12px;
  right: 12px;
}
#deviceMenuActions .dm-taps-toggle[data-state="on"] .dm-toggle-track {
  border-color: var(--brand);
  background: var(--brand-tint);
}
#deviceMenuActions .dm-taps-toggle[data-state="on"] .dm-toggle-track::before {
  transform: translateX(12px);
  background: var(--brand);
}
#deviceMenuActions .dm-taps-toggle[data-state="sending"] .dm-toggle-track { border-style: dashed; }
#deviceMenuActions button.dm-quick:hover:not(:disabled) {
  border-color: var(--brand);
  background: var(--brand-tint);
  transform: translateY(-1px);
}
#deviceMenuActions button.dm-quick:active:not(:disabled) { transform: translateY(0); }
#deviceMenuActions button.dm-quick:focus-visible,
#deviceMenuActions button.dm-entry:focus-visible,
#deviceMenuActions button.dm-open-drawer:focus-visible,
#deviceMenuOverlay #deviceMenuBack:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
#deviceMenuActions .dm-quick .dm-icon {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  color: var(--brand-deep);
}
#deviceMenuActions .dm-quick .dm-label {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  color: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.22;
  overflow-wrap: anywhere;
}
#deviceMenuActions .dm-quick .dm-state {
  display: block;
  flex: 0 1 auto;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
#deviceMenuActions button.dm-quick[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand-tint);
}
#deviceMenuActions button.dm-quick[aria-pressed="true"] .dm-state { color: var(--brand-deep); }
#deviceMenuActions button.dm-quick.device-menu-pause-toggle[data-paused="true"] {
  border-color: var(--danger);
  background: var(--danger-tint);
}
#deviceMenuActions button.dm-quick.device-menu-pause-toggle[data-paused="true"] .dm-icon,
#deviceMenuActions button.dm-quick.device-menu-pause-toggle[data-paused="true"] .dm-state {
  color: var(--danger-text);
}
#deviceMenuActions button.dm-quick.device-menu-pause-toggle[data-lock-confirmation="pending"] {
  border-style: dashed;
  border-color: var(--border-control);
  background: var(--surface-raised);
}
#deviceMenuActions button.dm-quick.device-menu-pause-toggle[data-lock-confirmation="pending"] .dm-state {
  color: var(--text-primary);
}
#deviceMenuActions button.dm-quick[aria-busy="true"],
#deviceMenuActions button.dm-quick[data-state="pending"] { border-style: dashed; }
#deviceMenuActions button.dm-quick:disabled { cursor: not-allowed; box-shadow: none; }
#deviceMenuActions button.dm-quick:disabled .dm-state { color: var(--text-secondary); }

#deviceMenuActions .dm-entry-grid { gap: 8px; }
#deviceMenuActions button.dm-entry {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--dusk);
  color: var(--text-primary);
  text-align: left;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
#deviceMenuActions button.dm-entry:hover { border-color: var(--brand); background: var(--brand-tint); }
#deviceMenuActions .dm-entry .dm-icon { flex: 0 0 17px; width: 17px; height: 17px; color: var(--brand-deep); }
#deviceMenuActions .dm-entry .dm-label { flex: 1 1 auto; min-width: 0; }
#deviceMenuActions button.dm-open-drawer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  background: var(--dusk);
  color: var(--brand-deep);
  text-align: left;
  font-size: 12px;
  font-weight: 800;
}
#deviceMenuActions button.dm-open-drawer:hover { border-color: var(--brand); background: var(--brand-tint); }
#deviceMenuActions button.dm-open-drawer::after { content: '›'; font-size: 23px; font-weight: 400; line-height: 1; }

#deviceMenuActions .dm-drawer,
#deviceMenuActions .dm-detail { padding-top: 5px; }
#deviceMenuActions .dm-drawer > .device-menu-section:first-child { padding-top: 2px; }
#deviceMenuActions .dm-drawer .device-menu-action { min-height: 46px; }
#deviceMenuActions .dm-drawer .dm-detail-link::after {
  content: '›';
  margin-left: auto;
  color: var(--text-secondary);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
#deviceMenuActions .dm-drawer .device-menu-picker { padding-block: 10px; }
#deviceMenuActions .dm-drawer .device-menu-kiosk {
  margin: 6px 0 12px;
  padding: 5px 0 8px 12px;
}
#deviceMenuActions .dm-drawer .device-menu-kiosk[hidden] { display: none !important; }
#deviceMenuActions .dm-drawer .device-menu-kiosk-toggle[aria-expanded="true"] .dm-substate {
  /* The individual lock controls immediately below say these same values.
     Keep the concise state pill here, and restore the full summary whenever
     the lock controls are collapsed (including Pending/unknown states). */
  display: none;
}
#deviceMenuActions .dm-drawer .device-menu-kiosk .klock {
  min-height: 44px;
  border-color: var(--border-subtle);
}
#deviceMenuActions .dm-drawer .device-menu-kiosk .dmk-title { display: none; }
#deviceMenuActions .dm-drawer .device-menu-kiosk .dmk-unlock { min-height: 44px; }
#deviceMenuActions .dm-detail .drp { padding: 0 0 12px; border-bottom: 0; }
#deviceMenuActions .dm-detail .drp[hidden] { display: none !important; }
#deviceMenuActions .dm-detail .drp-jumps { display: none; }
#deviceMenuActions .dm-detail .drp-card {
  padding: 8px 0;
  border: 0;
  border-radius: 0;
}
#deviceMenuActions .dm-detail .dm-detail-slot { min-width: 0; }
#deviceMenuActions .dm-detail .dqa {
  border: 0;
  border-radius: 0;
}
#deviceMenuActions .dm-detail .dqa-title {
  display: none;
}
#deviceMenuActions .dm-detail .dqa-title::after { content: none; }
#deviceMenuActions .dm-detail .dqa[open] .dqa-form,
#deviceMenuActions .dm-detail .dqa[open] .dqa-check,
#deviceMenuActions .dm-detail .dqa[open] .dqa-msg { margin-left: 0; }
#deviceMenuActions .dm-detail .dqa-send,
#deviceMenuActions .dm-detail .dqa-form > .inp { min-height: 44px; }

/* On a short phone the site decision is the task, not a third heading about
   apps and websites. Keep the scope/host warnings, but remove the duplicate
   section title and tighten their *relationships* so Allow and Block remain
   in the first viewport. No absolute placement or content overlay. */
#deviceMenuActions[data-remote-detail="site"] .dm-detail .drp {
  gap: 4px;
  padding: 6px 0 6px;
}
#deviceMenuActions[data-remote-detail="site"] .dm-detail .drp-title { display: none; }
#deviceMenuActions[data-remote-detail="site"] .dm-detail .drp-card {
  gap: 6px;
  padding: 4px 0 4px 10px;
}
#deviceMenuActions[data-remote-detail="site"] .dm-detail .drp-help,
#deviceMenuActions[data-remote-detail="site"] .dm-detail .drp-note {
  font-size: 11px;
  line-height: 1.3;
}

@media (max-width: 420px) {
  #deviceMenuOverlay .toprow { gap: 8px; }
  #deviceMenuOverlay #deviceMenuBack { padding-inline: 8px; }
  #deviceMenuOverlay #deviceMenuClose { padding-inline: 9px; }
  #deviceMenuActions .dm-face { gap: 11px; }
  #deviceMenuActions .dm-quick-grid,
  #deviceMenuActions .dm-entry-grid { gap: 7px; }
  #deviceMenuActions button.dm-quick { min-height: 92px; padding: 10px; }
  #deviceMenuActions button.dm-quick .dm-label { font-size: 13px; }
  #deviceMenuActions button.dm-entry { padding-inline: 9px; font-size: 11.5px; }
}
@media (max-height: 430px) and (min-width: 600px) {
  #deviceMenuOverlay .toprow { padding: 8px 16px; }
  #deviceMenuOverlay .device-menu-actions { padding: 5px 16px 9px; }
  #deviceMenuActions .dm-face { gap: 6px; padding-top: 0; }
  #deviceMenuActions .dm-hero { display: flex; align-items: baseline; gap: 10px; }
  #deviceMenuActions .dm-hero .dm-hero-title { font-size: 13px; white-space: nowrap; }
  #deviceMenuActions .dm-hero .dm-hero-note { font-size: 11px; }
  #deviceMenuActions button.dm-quick { min-height: 70px; padding: 7px 10px; gap: 2px; }
  #deviceMenuActions .dm-quick .dm-icon { width: 16px; height: 16px; }
  #deviceMenuActions .dm-quick .dm-label { font-size: 12px; }
  #deviceMenuActions .dm-quick .dm-state { font-size: 10px; }
  #deviceMenuActions .dm-quick .dm-toggle-track { top: 7px; right: 10px; }
  #deviceMenuActions button.dm-entry,
  #deviceMenuActions button.dm-open-drawer { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  #deviceMenuActions button.dm-quick { transition: none; }
}