/* T9 — Backend wiring: the notifications bell at the right end of the top bar
   (every design page: 40×40, an 18px bell, an 8px accent badge ringed in the
   panel colour), its panel, and the extra lines of the split flow's
   "can't split here" card, which otherwise wears T1's card and failure styles. */

.api-notifications { position: relative; display: flex; }
.api-notifications [hidden] { display: none !important; }

.api-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--st-text-dim);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.api-bell:hover,
.api-bell[aria-expanded='true'] { background: var(--st-surface-2); color: var(--st-text); }
.api-bell:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
.api-bell__icon { width: 18px; height: 18px; }
.api-bell__dot {
  position: absolute;
  top: 9px;
  left: 24px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--st-accent);
  outline: 2px solid var(--st-panel);
  outline-offset: -1px;
}

.api-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  width: 360px;
  max-height: min(520px, calc(100vh - 96px));
  border-radius: 14px;
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
  background: var(--st-surface);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--st-shadow) 50%, transparent);
  font-family: var(--st-font);
}
.api-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px 16px;
  border-bottom: 1px solid var(--st-line);
}
.api-panel__title { margin: 0; color: var(--st-text); font-size: 14px; font-weight: 600; }
.api-panel__list { flex: 1; overflow: auto; margin: 0; padding: 6px; list-style: none; }
.api-panel__empty { padding: 18px 12px; color: var(--st-text-faint); font-size: 12.5px; line-height: 1.5; text-align: center; }

.api-note {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
}
.api-note[data-read='false'] { background: var(--st-surface-2); }
.api-note__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--st-surface-2);
  color: var(--st-text-dim);
}
.api-note__glyph { width: 15px; height: 15px; }
.api-note[data-tone='success'] .api-note__icon { color: var(--st-ok); background: color-mix(in srgb, var(--st-ok) 12%, transparent); }
.api-note[data-tone='error'] .api-note__icon { color: var(--st-error-ink); background: color-mix(in srgb, var(--st-error) 14%, transparent); }
.api-note[data-tone='progress'] .api-note__glyph { animation: sp-spin 1s linear infinite; }
.api-note__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.api-note__title { color: var(--st-text); font-size: 13px; font-weight: 600; }
.api-note__body { color: var(--st-text-dim); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.api-note__at { color: var(--st-text-faint); font: 400 11px var(--st-font-mono); }
.api-note__action { align-self: center; }

.api-panel__permission {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 14px 16px;
  border-top: 1px solid var(--st-line);
}
.api-panel__permission-text { flex: 1; margin: 0; color: var(--st-text-faint); font-size: 12px; line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .api-note[data-tone='progress'] .api-note__glyph { animation: none; }
}

/* ---- The split flow's "can't split here" card (T1's .sp-card, failed) ------ */

.api-unsupported { max-width: 640px; }
.api-unsupported__body { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.api-unsupported__lead { margin: 0; color: var(--st-text); font-size: 15px; line-height: 1.55; }
.api-unsupported__fix { margin: 0; color: var(--st-text-dim); font-size: 13.5px; line-height: 1.55; }
.api-unsupported__detail { margin: 0; color: var(--st-text-faint); font: 400 11.5px var(--st-font-mono); }
.api-unsupported__actions { display: flex; gap: 10px; margin-top: 24px; }

/* ---- Kept stems in the Library: Remove saved stems (P9) -------------------- */
/* library.css is at its size limit, so the Library's Delete controls (library/delete.ts) live here. */

.lib-item--deletable { position: relative; }
.lib-item__delete {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--st-accent-ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%);
}
.lib-item__delete .lib-icon { width: 14px; height: 14px; }
.lib-item--deletable:hover .lib-item__delete,
.lib-item--deletable:focus-within .lib-item__delete,
.lib-item__delete:focus-visible { opacity: 1; }
.lib-item__delete:hover,
.lib-item__delete:focus-visible { background: var(--st-surface-2); }
/* While the trash shows, the title ends before it. */
.lib-item--deletable:hover :is(.lib-item__link, .lib-item--unavailable),
.lib-item--deletable:focus-within :is(.lib-item__link, .lib-item--unavailable) { padding-right: 36px; }
.lib-item--deletable:hover .lib-item__playing,
.lib-item--deletable:focus-within .lib-item__playing { visibility: hidden; }

/* Storage full (decision 26): one line under the search, above the sections. */
.lib-full {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--st-warn) 10%, transparent);
  color: var(--st-warn);
  font: 500 11px/1.4 var(--st-font);
}

.lib-confirm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 6px 8px 10px;
  color: var(--st-text-dim);
  font: 400 11px/normal var(--st-font);
}
.lib-confirm__text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lib-confirm__yes,
.lib-confirm__no {
  padding: 3px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: 500 11px/normal var(--st-font);
  cursor: pointer;
}
.lib-confirm__yes { color: var(--st-accent-ink); }
.lib-confirm__no { color: var(--st-text-dim); }
.lib-confirm__yes:hover,
.lib-confirm__no:hover { background: var(--st-surface-2); }
@media (hover: none) { .lib-item__delete { opacity: 1; } }

/* ---- YouTube thumbnails over the Library's artwork (api/thumbnail.ts) ------ */

.lib-art { position: relative; overflow: hidden; }
.lib-art__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.lib-art__thumb[data-loaded='true'] { opacity: 1; }

/* ---- Sorting the Library (decision 33, P21: library/sorting.ts) ------------ */
/* library.css is at its size limit, so Move to…, dragging and rename live here too. */

/* Move to… sits left of the trash, like it: 26×26, a 14px icon, radius 7. */
.lib-item__move {
  position: absolute;
  top: 50%;
  right: 34px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--st-text-dim);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-50%);
}
.lib-item__move .lib-icon { width: 14px; height: 14px; }
.lib-item--movable:hover .lib-item__move,
.lib-item--movable:focus-within .lib-item__move,
.lib-item__move[aria-expanded='true'] { opacity: 1; }
.lib-item__move:hover,
.lib-item__move:focus-visible,
.lib-item__move[aria-expanded='true'] { background: var(--st-surface-2); color: var(--st-text); }
/* While "Delete this song?" shows under the row, Move to… steps aside. */
.lib-item--movable:has(> .lib-confirm) .lib-item__move { display: none; }
.lib-item--movable:hover :is(.lib-item__link, .lib-item--unavailable),
.lib-item--movable:focus-within :is(.lib-item__link, .lib-item--unavailable) { padding-right: 64px; }
@media (hover: none) { .lib-item__move { opacity: 1; } }

/* The menu: a popover under the row (over the rows below), one 28px item per folder. */
.lib-move-wrap {
  position: absolute;
  top: calc(100% - 4px);
  right: 6px;
  left: 10px;
  z-index: 5;
  padding: 8px 4px 4px;
  border-radius: 10px;
  outline: 1px solid var(--st-line-strong);
  outline-offset: -0.5px;
  background: var(--st-menu-bg);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--st-shadow) 50%, transparent);
}
.lib-move-wrap--up { top: auto; bottom: calc(100% - 4px); }
.lib-move__label { margin: 0 8px 4px; color: var(--st-text-faint); font: 500 10.5px/normal var(--st-font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.lib-move { display: flex; flex-direction: column; gap: 2px; }
.lib-move__item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--st-text-dim);
  font: 400 12px/normal var(--st-font);
  text-align: left;
  cursor: pointer;
}
.lib-move__item:hover,
.lib-move__item:focus-visible { background: var(--st-surface-2); color: var(--st-text); }
.lib-move__item { --st-focus-offset: -2px; }
.lib-move__icon { width: 13px; height: 13px; color: var(--st-stem-drums); }
.lib-move__name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lib-move__none { margin: 0; padding: 6px 8px; color: var(--st-text-faint); font: 400 12px/normal var(--st-font); }

/* Dragging: the row fades, a ghost follows the pointer, the folder under it lights up. */
.lib--dragging,
.lib--dragging * { cursor: grabbing; user-select: none; }
.lib--dragging :is(.lib-item__move, .lib-item__delete, .lib-folder__rename) { visibility: hidden; }
/* With the row buttons hidden, titles get their full width back. */
.lib--dragging .lib-item--movable :is(.lib-item__link, .lib-item--unavailable) { padding-right: 10px; }
.lib--dragging .lib-item--movable .lib-item__playing { visibility: visible; }
.lib-item.is-dragging { opacity: 0.4; }
.lib-folder-item.is-drop-target .lib-folder:not(.lib-folder--new) {
  outline: 1px solid var(--st-accent);
  outline-offset: -1px;
  background: var(--st-accent-soft);
  color: var(--st-text);
}
.lib-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 240px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  outline: 1px solid var(--st-line-strong);
  outline-offset: -0.5px;
  background: var(--st-surface-2);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--st-shadow) 50%, transparent);
  color: var(--st-text);
  font: 500 12px/normal var(--st-font);
  pointer-events: none;
}
.lib-ghost .lib-icon { width: 13px; height: 13px; color: var(--st-text-dim); }
.lib-ghost__title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Rename: a pencil at the header's right (hover and keyboard focus), then the New folder field. */
.lib-folder-head { position: relative; }
.lib-folder__rename {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--st-text-dim);
  cursor: pointer;
  opacity: 0;
}
.lib-folder__rename .lib-icon { width: 13px; height: 13px; }
.lib-folder-head:hover .lib-folder__rename,
.lib-folder-head:focus-within .lib-folder__rename { opacity: 1; }
.lib-folder__rename:hover,
.lib-folder__rename:focus-visible { background: var(--st-surface-2); color: var(--st-text); }
.lib-folder-head:hover .lib-folder,
.lib-folder-head:focus-within .lib-folder { padding-right: 36px; }
@media (hover: none) { .lib-folder__rename { opacity: 1; } .lib-folder-head .lib-folder { padding-right: 36px; } }
.lib-folder--rename.is-invalid { outline: 1px solid var(--st-accent); outline-offset: -0.5px; }
.lib-folder__error { margin: 4px 10px 0; color: var(--st-accent-ink); font: 400 11px/1.4 var(--st-font); }
.lib-folder__error[hidden] { display: none; }

/* Before the session answers, New waits (decision 30). */
.lib-new:disabled { cursor: default; opacity: 0.5; }
.lib-new:disabled:hover { background: none; color: var(--st-text-dim); }

/* P22 (decision 34) — the Library's automatic Tags: the "+N more" / "Show
   fewer" chip after the twelfth tag wears the design's lib-tag chip, a shade
   quieter and without a count; "Finding tags…" is the Library's quiet note. */
.lib-tag--more { background: none; }
.lib-tag--more .lib-tag__name { color: var(--st-text-faint); }
.lib-tag--more:hover .lib-tag__name { color: var(--st-text-dim); }
.lib-tags-finding { padding: 4px 4px 2px; }

/* P32 (decision 43) — an upload has no thumbnail: a neutral tile from the
   tokens (the rows' surface and line, the dim ink), not a song's gradient. */
.lib-art--upload {
  background: var(--st-surface-2);
  color: var(--st-text-dim);
  box-shadow: inset 0 0 0 1px var(--st-line-strong);
}