/* The Storage page, /studio/storage (decision 71; src/studio/storage-page/).
   A sibling of the History page: its frame, header, search, chips, row type,
   states and skeleton come from history.css; the Move to… popover, the
   one-line confirmation and the rename field from library.css and api.css.
   This file adds the usage card, the list's toolbar and bulk bar, the row's
   columns and actions, the collection sections and the location card. */

.sto { container-type: inline-size; }

.sto-label {
  margin: 0;
  color: var(--st-text-faint);
  font: 500 10px/normal var(--st-font-mono);
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.sto-icon { flex: none; }

/* ---- The usage card ------------------------------------------------------------------- */

.sto-usage-slot { margin-bottom: 28px; }
.sto-usage-slot:empty { display: none; }

.sto-usage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  border-radius: var(--st-radius-card);
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
  background: var(--st-surface);
}

.sto-usage__total {
  margin: 0;
  color: var(--st-text-dim);
  font: 400 14px/1.2 var(--st-font);
}
.sto-usage__used {
  margin-right: 4px;
  color: var(--st-text);
  font: 600 28px/1.1 var(--st-font);
  letter-spacing: -0.02em;
}

/* One segment per kind, as parts of the quota; the track is the free space. */
.sto-meter {
  display: flex;
  gap: 2px;
  height: 12px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--st-surface-2);
}
.sto-meter--full { outline: 1px solid var(--st-warn); outline-offset: 1px; }
.sto-meter__seg { flex: none; min-width: 4px; height: 100%; }
.sto-meter__seg:first-child { border-radius: 6px 0 0 6px; }
.sto-meter__seg--stems,
.sto-legend__dot--stems { background: var(--st-accent); }
.sto-meter__seg--original,
.sto-legend__dot--original { background: var(--st-stem-guitar); }
.sto-meter__seg--uploads,
.sto-legend__dot--uploads { background: var(--st-stem-piano); }
.sto-meter__seg--other,
.sto-legend__dot--other { background: var(--st-neutral); }
.sto-legend__dot--free { background: var(--st-surface-2); box-shadow: inset 0 0 0 1px var(--st-line-strong); }

.sto-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sto-legend__item { display: inline-flex; align-items: center; gap: 8px; }
.sto-legend__dot { flex: none; width: 8px; height: 8px; border-radius: 3px; }
.sto-legend__name { color: var(--st-text-dim); font: 400 12.5px/normal var(--st-font); }
/* "Other site data" explains itself in the shared tooltip, on hover, focus or a tap. */
.sto-legend__tip {
  padding: 0;
  border: 0;
  background: none;
  cursor: help;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.sto-legend__tip:hover { color: var(--st-text); }
/* Its tip is a sentence: it wraps at 320px (less on a phone) instead of the shared one-line tip, so no window cuts it off. */
.sto-legend__tip > .st-tip {
  width: max-content;
  max-width: min(320px, calc(100vw - 32px));
  white-space: normal;
  line-height: 1.45;
  text-align: left;
  cursor: default;
}
.sto-legend__size { color: var(--st-text); font: 500 12px/normal var(--st-font-mono); }

.sto-full { margin: 0; font-size: 12px; }

.sto-persist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--st-line);
}
.sto-persist__icon { width: 16px; height: 16px; }
.sto-persist--safe .sto-persist__icon { color: var(--st-ok); }
.sto-persist--unsafe .sto-persist__icon { color: var(--st-warn); }
.sto-persist__text { flex: 1 1 240px; margin: 0; color: var(--st-text-dim); font: 400 13px/18px var(--st-font); }
.sto-keep:disabled { color: var(--st-text-dim); cursor: progress; }
.sto-persist__refused { margin: -4px 0 0; color: var(--st-text-dim); font: 400 12px/1.5 var(--st-font); }

.sto-usage--skeleton { gap: 14px; min-height: 150px; }
.sto-skeleton__total { width: 220px; height: 26px; border-radius: 6px; background: var(--st-surface-2); }
.sto-skeleton__meter { width: 100%; height: 12px; border-radius: 6px; background: var(--st-surface-2); }

/* ---- The list's toolbar and bulk bar -------------------------------------------------------- */

.sto-check {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--st-accent);
  cursor: pointer;
}

.sto-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  margin-bottom: 8px;
  padding: 0 10px;
}
.sto-toolbar__title { flex: 1; min-width: 0; }

.sto-sort { display: inline-flex; align-items: center; gap: 8px; }
.sto-sort__label { color: var(--st-text-faint); font: 400 12px/normal var(--st-font); }
.sto-sort__select {
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
  background: var(--st-surface);
  color: var(--st-text);
  font: 500 12px/normal var(--st-font);
  cursor: pointer;
}
.sto-sort__select:hover { outline-color: var(--st-line-strong); }

.sto-bulk {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-bottom: 10px;
  padding: 0 10px 0 14px;
  border-radius: 10px;
  outline: 1px solid color-mix(in srgb, var(--st-accent) 40%, transparent);
  outline-offset: -0.5px;
  background: var(--st-accent-soft);
}
.sto-bulk__text { flex: 1; margin: 0; color: var(--st-text); font: 500 13px/normal var(--st-font); }
.sto-bulk__delete {
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: var(--st-accent);
  color: var(--st-on-accent);
  font: 600 12px/normal var(--st-font);
  cursor: pointer;
}
.sto-bulk__delete:hover { background: var(--st-accent-strong); }
.sto-bulk .sto-confirm { flex: 1; padding: 0; font-size: 13px; }
/* On a wide row the answer sits beside the question, not across the page. */
.sto-confirm .lib-confirm__text { flex: 0 1 auto; }

/* ---- A song row --------------------------------------------------------------------------- */

.sto-item { position: relative; border-radius: 10px; }
.sto-item.is-selected { background: color-mix(in srgb, var(--st-accent) 7%, transparent); }

.sto-row {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 10px;
  border-radius: 10px;
}
.sto-row:hover,
.sto-row:focus-within { background: var(--st-surface); }

.sto-art--upload {
  background: var(--st-surface-2);
  color: var(--st-text-dim);
  box-shadow: inset 0 0 0 1px var(--st-line-strong);
}

.sto-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 132px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
  color: var(--st-text-dim);
  font: 500 11.5px/normal var(--st-font);
}
.sto-chip .lib-icon { flex: none; width: 12px; height: 12px; color: var(--st-stem-drums); }
.sto-chip__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Up to six stems, in the mixer's order and colours. */
.sto-dots { flex: none; display: flex; gap: 4px; width: 56px; }
.sto-dot { width: 6px; height: 6px; border-radius: 50%; }

.sto-kind { flex: none; justify-content: center; width: 104px; color: var(--st-text-dim); font-weight: 500; }

.sto-size {
  flex: none;
  width: 64px;
  color: var(--st-text);
  font: 500 12.5px/normal var(--st-font-mono);
  text-align: right;
}
.sto-date {
  flex: none;
  width: 72px;
  color: var(--st-text-faint);
  font: 400 12px/normal var(--st-font-mono);
  text-align: right;
}

.sto-actions { flex: none; display: flex; gap: 2px; }
.sto-act,
.sto-actions .lib-item__move {
  position: static;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--st-text-dim);
  opacity: 1;
  transform: none;
  cursor: pointer;
}
.sto-act svg,
.sto-actions .lib-item__move .lib-icon { width: 15px; height: 15px; }
.sto-act:hover,
.sto-act:focus-visible,
.sto-actions .lib-item__move:hover,
.sto-actions .lib-item__move[aria-expanded='true'] { background: var(--st-surface-2); color: var(--st-text); }
.sto-act--delete:hover { color: var(--st-accent-ink); }
/* A row with nothing to download keeps its column, so the actions line up. */
.sto-act[hidden] { display: grid; visibility: hidden; }

/* The Library's popover, as wide as its own panel, under the row's actions. */
.sto-item .lib-move-wrap { left: auto; right: 10px; width: 240px; }
.sto-item > .sto-confirm { padding: 0 10px 10px 114px; font-size: 12px; }

.sto-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px 10px 114px;
  color: var(--st-text-dim);
  font: 400 12px/18px var(--st-font);
}
.sto-status--failed { color: var(--st-error-ink); }
.sto-progress { width: 160px; height: 4px; overflow: hidden; border-radius: 2px; background: var(--st-surface-2); }
.sto-progress__fill { display: block; height: 100%; background: var(--st-accent); }

/* ---- Collections ---------------------------------------------------------------------------- */

.sto-groups { display: flex; flex-direction: column; gap: 14px; }
.sto-group__head { display: flex; align-items: center; gap: 4px; padding-right: 10px; }
/* Unsorted has no pencil: its count lines up with the folders'. */
.sto-group__head:not(:has(.sto-group__rename)) { padding-right: 42px; }
.sto-group__toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--st-text);
  font: 500 13.5px/normal var(--st-font);
  text-align: left;
  cursor: pointer;
}
.sto-group__toggle:hover { background: var(--st-surface); }
.sto-group__chevron { flex: none; width: 14px; height: 14px; color: var(--st-text-faint); transition: transform 0.15s; }
.sto-group__toggle[aria-expanded='false'] .sto-group__chevron { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .sto-group__chevron { transition: none; } }
.sto-group__icon { flex: none; width: 15px; height: 15px; color: var(--st-stem-drums); }
.sto-group__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sto-group__meta { flex: none; margin-left: auto; color: var(--st-text-faint); font: 500 11px/normal var(--st-font-mono); }
.sto-group__rename svg { width: 13px; height: 13px; }
.sto-group .lib-folder-head--rename { padding: 2px 10px 2px 0; }
.sto-group__empty { margin: 0; padding: 6px 10px 6px 42px; color: var(--st-text-faint); font: 400 12.5px/normal var(--st-font); }

/* ---- Location --------------------------------------------------------------------------------- */

.sto-location {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 36px 0 32px;
  padding: 20px 22px;
  border-radius: var(--st-radius-card);
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
}
.sto-location[hidden] { display: none; }
.sto-location__row { display: flex; align-items: flex-start; gap: 14px; }
.sto-location__tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--st-surface-2);
  color: var(--st-text-dim);
}
.sto-location__tile svg { width: 20px; height: 20px; }
.sto-location__where { margin: 0 0 4px; color: var(--st-text); font: 500 14px/20px var(--st-font); }
.sto-location__note { max-width: 640px; margin: 0; color: var(--st-text-dim); font: 400 12.5px/1.5 var(--st-font); }
/* "Back up all my stems" (P74, backup.ts): the button and its note, then the question, the progress or the outcome. */
.sto-location__slot { padding-top: 12px; border-top: 1px dashed var(--st-line); }
.sto-backup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.sto-backup__note { flex: 1 1 280px; max-width: 640px; margin: 0; color: var(--st-text-dim); font: 400 12.5px/1.5 var(--st-font); }
.sto-backup__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.sto-backup__text { min-width: 0; color: var(--st-text); font: 500 13px/1.5 var(--st-font); overflow-wrap: anywhere; }
.sto-backup--failed .sto-backup__text { color: var(--st-error-ink); }

/* ---- Narrow ------------------------------------------------------------------------------------- */

@container (max-width: 860px) {
  .sto-chip, .sto-date { display: none; }
}
@container (max-width: 640px) {
  .sto-dots, .sto-kind { display: none; }
  .sto-item > .sto-confirm, .sto-status { padding-left: 10px; }
  .sto-usage, .sto-location { padding: 16px; }
}

/* A delete that left songs on the device: the storage-full line's look, with Retry and Dismiss. */
.sto-problem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-bottom: 12px;
  font-size: 12.5px;
}
.sto-problem__text { flex: 1 1 320px; }

/* A phone (the page about 300px wide at 375–390): the title keeps its line; the size and actions wrap under it. */
@container (max-width: 480px) {
  .sto-row { flex-wrap: wrap; height: auto; min-height: 60px; padding: 8px 10px; row-gap: 4px; }
  .sto-row > .hi-text { flex: 1 1 calc(100% - 116px); }
  .sto-size { margin-left: auto; }
}