#modal .v78-suspension { min-inline-size:0; margin:0; padding:1rem; border:1px solid #a0b7c0; border-radius:12px; }
.v78-suspension legend { padding:0 .35rem; font-weight:750; }
#modal .v78-suspension label { display:grid; gap:.35rem; }
.v78-suspension details { padding:.7rem 0; }
.v78-suspension summary { cursor:pointer; font-weight:650; }
.v78-suspension details[open] summary { margin-bottom:.75rem; }
.v78-template-buttons { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.6rem; }
.v78-suspension [data-delete-prompt]:not([hidden]) { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.v78-suspension [data-delete-question] { flex-basis:100%; margin-bottom:0; }
.v78-suspension [data-template-status]:empty { display:none; }
#modal .v78-mac-preview { margin:0; padding:.85rem 1rem; border-left:4px solid #c06b19; border-radius:6px; background:#fff7e9; color:#312518; }
#modal .v78-mac-preview h3 { font-size:.85rem; color:#694722; margin:0 0 .6rem; }
#modal .v78-mac-preview strong, #modal .v78-mac-preview p { white-space:pre-wrap; overflow-wrap:anywhere; }
#modal .v78-mac-preview p { margin:.4rem 0; color:#312518; }
#modal .v78-mac-preview span { display:inline-block; font-weight:650; font-size:.86rem; color:#1a5c86; }
.v78-clock-summary { display:flex; align-items:center; gap:.6rem; }
.v78-clock-light { width:1em; height:1em; flex:none; border-radius:50%; background:#ac330d; outline:2px solid #762804; }
.v78-clock-unread .v78-clock-light { animation:v78-clock-pulse 1.35s steps(1,end) infinite; }
@keyframes v78-clock-pulse { 50% { background:#ffd796; } }
@media(prefers-reduced-motion:reduce){.v78-clock-unread .v78-clock-light{animation:none;}}
#modal .v78-clock-list { list-style:none; padding:0; display:grid; gap:.85rem; }
#modal .v78-clock-list li { border:1px solid #b3c2ca; border-radius:8px; padding:.8rem 1rem; }
#modal .v78-clock-list li.v78-clock-unread { border-left:4px solid #ac330d; }
#modal .v78-clock-list h3 { overflow-wrap:anywhere; }
#modal .v78-clock-list [data-clock-status] { font-weight:bold; }

/* Keep the destructive command at the far edge, after the everyday controls. */
#modal .v79-device-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .75rem 1.5rem;
  margin-top: .45rem;
}
#modal .v79-device-actions > .v64-access-actions { margin: 0; }
#modal .v79-device-actions > [data-operation="remove"] { justify-self: end; }
@media (max-width: 640px) {
  #modal .v79-device-actions { grid-template-columns: minmax(0, 1fr); }
  #modal .v79-device-actions .button { min-height: 44px; max-width: 100%; white-space: normal; }
  #modal .v79-device-actions > .v64-access-actions { gap: .5rem; }
}

#modal .v80-fold {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  margin:0;
  padding:.25rem 0;
  border:0;
  border-radius:.2rem;
  background:transparent;
  box-shadow:none;
  color:inherit;
  font:inherit;
  cursor:pointer;
}
#modal .v80-fold::before { content:"▸"; color:#276575; }
#modal .v80-fold[aria-expanded=true]::before { transform:rotate(90deg); }
#modal .v80-fold:focus-visible { outline:2px solid #267988; outline-offset:2px; }
#client-devices-content[hidden] { display:none; }
#modal .v80-device-number { display:block; font-size:.83em; font-weight:650; color:#47666d; }

/* Device summaries share a row on wide screens. Opening one gives its controls the full width. */
#modal .v81-device-count {
  display:inline-grid;
  place-items:center;
  min-width:1.8em;
  padding:.1em .45em;
  border-radius:1em;
  background:#e2efee;
  color:#205754;
  font-size:.85em;
  font-variant-numeric:tabular-nums;
}
#modal .v81-device-grid {
  grid-template-columns:minmax(0,1fr);
  gap:.5rem;
}
#modal .v81-device-grid > article { min-width:0; }
#modal .v81-device-grid .v64-device-head {
  display:grid;
  flex:1;
  min-width:0;
  gap:.3rem;
}
#modal .v81-device-name, #modal .v81-device-status {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.25rem .65rem;
}
#modal .v81-device-name { align-items:baseline; }
#modal .v81-device-grid .v80-device-number { white-space:nowrap; }
#modal .v81-device-status > *, #modal .v81-device-name > strong {
  max-width:100%;
  overflow-wrap:anywhere;
}
#modal .v81-device-grid .v64-device-fold > summary { min-height:44px; }
#modal .v81-device-grid .v64-device-fold > summary:focus-visible {
  outline:2px solid #267988;
  outline-offset:3px;
}
@supports selector(:has(> details[open])) {
  @media (min-width:800px) {
    #modal .v81-device-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    #modal .v81-device-grid > :only-child,
    #modal .v81-device-grid > :has(> .v64-device-fold[open]) { grid-column:1/-1; }
  }
}
#modal .v80-archived, #modal .v80-pending {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.5rem 1rem;
  min-width:0;
  overflow-wrap:anywhere;
}
#modal .v80-archived small, #modal .v80-pending small { display:block; }
#modal .v80-restore-hint { flex-basis:100%; }
#modal .v80-pending-list { margin-bottom:.75rem; display:grid; gap:.4rem; }
#modal .v80-pending-list h4 { margin:0; }
#modal .v80-pending {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  padding:.75rem .9rem;
  border:1px solid #b76b13;
  border-inline-start:5px solid #a05b0a;
  background-color:#fff1d8;
  color:#392b1e;
}
#modal .v80-pending:focus-visible { outline:2px solid #825010; outline-offset:2px; }
#modal .v80-pending .v81-decision-status {
  display:flex;
  align-items:center;
  gap:.35em;
  font-weight:700;
  color:#734008;
}
#modal .v81-decision-status .icon { width:1em; height:1em; }
@media (max-width:640px) {
  #modal .v80-pending { grid-template-columns:minmax(0,1fr); }
  #modal .v80-pending .v64-access-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
}
#modal .v80-history-events { padding-inline-start:1.25rem; overflow-wrap:anywhere; }
@media (max-width:640px) {
  #modal .v64-devices > header { flex-wrap:wrap; }
  #modal .v64-devices > header .v64-access-actions { max-width:100%; }
  #modal .v80-fold, #modal .v64-devices > header .button,
  #modal .v80-archived .button, #modal .v80-pending .button {
    min-height:44px; white-space:normal; max-width:100%;
  }
}

#modal .v64-device.v86-restriction-seen {
  animation:none;
  background:#ffe8eb !important;
  color:#521324 !important;
  border-color:#b52245;
  box-shadow:inset 4px 0 #b52245;
}
#modal .v86-access-state { font-weight:700; color:#70142c; }
.v86-unread-device { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; max-width:100%; }
.v86-unread-device button { white-space:normal; overflow-wrap:anywhere; text-align:start; }