/* The Storage page's device filter (decision 74, P61; storage-page/devices-view.ts).
   The chips are History's (history.css), the card the usage card's and the rows
   the page's own (storage.css), without the checkbox and the actions. */

.sto-devices:empty { display: none; }
.sto-devices__chips { flex-wrap: wrap; margin-bottom: 20px; }
.sto-devices__chips .hi-chip { max-width: 240px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Another device's chip: the name takes the ellipsis, its last seen stays whole. */
.sto-devices__chips .hi-chip:has(.sto-devices__name) { display: inline-flex; align-items: center; }
.sto-devices__name { overflow: hidden; text-overflow: ellipsis; }
.sto-devices__when { flex: none; white-space: pre; opacity: 0.75; }

/* Another device, or All devices: this device's meter, list and location card step aside. Its search and
   view chips only turn invisible, so the header keeps its height and the device chips don't move. */
[data-device="other"] :is(.sto-usage-slot, .sto-body, .sto-location) { display: none; }
[data-device="other"] .hi-controls { visibility: hidden; }

/* At the 20-device cap: this browser can't be listed (the storage-full line's look). */
.sto-devices__cap { margin: -8px 0 20px; font-size: 12.5px; }
.sto-devices__said { margin: -12px 0 16px; color: var(--st-text-dim); font: 400 12.5px/1.5 var(--st-font); }
.sto-devices__said:empty { display: none; }
/* The Mac offline: the other devices are its last copy (P415 frame 3, kept-devices.ts). */
.sto-devices__as-of { margin: -12px 0 16px; color: var(--st-text-faint); font: 400 12.5px/1.5 var(--st-font); }
.sto-devices__as-of-title { color: var(--st-text-strong); font-weight: 600; }

/* "Forget this device…", or the shared confirmation strip in its place. */
.sto-devices__forget { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 12px; border-top: 1px dashed var(--st-line); }
.sto-devices__forget .sto-confirm { flex: 1; min-width: 0; padding: 0; font-size: 12.5px; }
/* The Forget question is read in full: it wraps rather than cutting off. */
.sto-devices__forget .lib-confirm__text { white-space: normal; line-height: 1.5; }
.sto-devices__failed { color: var(--st-error-ink); font: 500 12.5px/1.5 var(--st-font); }

.sto-devices__seen { margin: -6px 0 0; color: var(--st-text-faint); font: 400 12px/1.4 var(--st-font-mono); }

/* "Stored on <device>. Open the Studio on that device to manage it." */
.sto-devices__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 12px;
  color: var(--st-text-dim);
  font: 400 12.5px/1.5 var(--st-font);
}
.sto-devices__note .lib-icon { flex: none; width: 14px; height: 14px; color: var(--st-text-faint); }

.sto-body--device { margin-bottom: 32px; }
/* A view-only row: no checkbox, so the artwork starts the row; nothing to hover for. */
.sto-item--view .sto-row:hover { background: none; }

/* The device tag stays on a narrow page, where the collection chip goes. */
@container (max-width: 860px) {
  .sto-chip.sto-device { display: inline-flex; }
}