/* Sleeve & Shelf palette, on top of Bootstrap's light/dark theming. */
:root,
[data-bs-theme="light"] {
  --ss-bg: #FAF7F2;
  --ss-surface: #FFFFFF;
  --ss-border: #E4DFD6;
  --ss-text: #211E1A;
  --ss-muted: #847C6C;
  --ss-sidebar: #1E293B;
  --ss-accent: #E8A33D;
  --ss-primary: #1E293B;
  --ss-on-primary: #FFFFFF;
  --ss-chip: rgba(30, 41, 59, 0.08);
  --ss-chip-text: #1E293B;
}

[data-bs-theme="dark"] {
  --ss-bg: #171B24;
  --ss-surface: #20252F;
  --ss-border: #323847;
  --ss-text: #F3EFE7;
  --ss-muted: #9B9284;
  --ss-sidebar: #0F1319;
  --ss-primary: #E8A33D;
  --ss-on-primary: #171B24;
  --ss-chip: rgba(243, 239, 231, 0.1);
  --ss-chip-text: #F3EFE7;
}

body {
  --bs-body-bg: var(--ss-bg);
  --bs-body-color: var(--ss-text);
  --bs-border-color: var(--ss-border);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  background: var(--ss-bg);
  color: var(--ss-text);
}

h1, h2, h3, .ss-brand {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
}

h1 { font-size: 1.75rem; margin: 0; }
h2 { font-size: 1.15rem; margin: 0; }

.ss-muted { color: var(--ss-muted); }

/* Shell: top bar on a phone, sidebar from large screens up. */
.ss-sidebar {
  background: var(--ss-sidebar);
  padding: 12px 16px;
}

.ss-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ss-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 1.05rem;
  text-decoration: none;
}

.ss-menu-button,
.ss-theme-toggle {
  min-width: 44px;
  height: 44px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.ss-theme-toggle {
  width: 100%;
  font-size: 0.875rem;
  font-weight: 500;
}

.ss-nav {
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
}

.ss-nav a {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 8px;
  color: #CBD5E1;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}

.ss-nav a:hover { color: #fff; }
.ss-nav a { gap: 12px; }
/* Help sits apart from the five sections, at the end of the menu. */
.ss-nav a.ss-nav-help { margin-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0 0 8px 8px; }
/* Icon, name, and the count pushed to the end. The icon takes the colour of the text. */
.ss-nav a > span:not(.ss-nav-count) { flex: 1; }
.ss-nav-icon { flex-shrink: 0; fill: currentColor; opacity: 0.85; }
.ss-nav a.active .ss-nav-icon { opacity: 1; }

/* The steps towards a new layout on the Dashboard. */
.ss-steps { margin-bottom: 0; padding: 0; list-style: none; }
.ss-steps li { border-bottom: 1px solid var(--ss-border); }
.ss-steps li:last-child { border-bottom: none; }
.ss-steps .ss-row { justify-content: flex-start; gap: 14px; border-bottom: none; }
.ss-step-number {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ss-chip);
  color: var(--ss-chip-text);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 28px;
  text-align: center;
}
.ss-step-done { background: var(--ss-accent); color: #1E293B; }

/* A screen of steps: the step that waits for the user stands out. */
.ss-step-current { border-color: var(--ss-accent); box-shadow: 0 0 0 1px var(--ss-accent); }
.ss-chip.ss-chip-now { background: var(--ss-accent); color: #1E293B; }
details.ss-card > summary { cursor: pointer; list-style: revert; }
details.ss-card > summary h2 { display: inline; }
details.ss-card:not([open]) > summary { border-bottom: none; }

/* The menu in groups, in the order the app is used. */
.ss-nav-group {
  margin-top: 14px;
  padding: 0 20px 2px;
  color: #8B93A6;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ss-nav-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(232, 163, 61, 0.2);
  color: var(--ss-accent);
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
}

.ss-nav a.active {
  background: rgba(232, 163, 61, 0.14);
  color: var(--ss-accent);
  font-weight: 600;
}

/* The screens of a section, as tabs above the page; they scroll sideways on a phone. */
/* Above the page: the section's tabs, and at the end the way to the page's part of the guide. */
.ss-section-bar {
  display: flex;
  align-items: stretch;
  margin: 0 0 4px;
  padding: 0 8px 0 16px;
  border-bottom: 1px solid var(--ss-border);
}
.ss-section-tabs {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.ss-help-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  padding: 10px 8px;
  color: var(--ss-muted);
  text-decoration: none;
}
.ss-help-link svg { fill: currentColor; }
.ss-help-link:hover, .ss-help-link:focus-visible { color: var(--ss-accent); }
.ss-section-tabs a {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 12px 10px 10px;
  border-bottom: 2px solid transparent;
  color: var(--ss-muted, #64748B);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.ss-section-tabs a:hover { color: inherit; }
.ss-section-tabs a.active { border-bottom-color: var(--ss-accent); color: inherit; font-weight: 600; }
/* Tabs out of sight fade at the edge they are behind. */
.ss-section-tabs.ss-more-after, .ss-letters.ss-more-after { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
.ss-section-tabs.ss-more-before, .ss-letters.ss-more-before { -webkit-mask-image: linear-gradient(to left, #000 82%, transparent); mask-image: linear-gradient(to left, #000 82%, transparent); }
.ss-section-tabs.ss-more-before.ss-more-after, .ss-letters.ss-more-before.ss-more-after { -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); }

.ss-main {
  padding: 0 0 24px;
  min-width: 0;
}

.ss-page { padding: 20px 16px 0; }

@media (min-width: 992px) {
  .ss-shell { display: flex; min-height: 100vh; }

  .ss-sidebar {
    position: sticky;
    top: 0;
    width: 240px;
    min-width: 240px;
    height: 100vh;
    padding: 28px 16px;
    display: flex;
    flex-direction: column;
  }

  .ss-brand { font-size: 1.15rem; padding: 0 4px; }
  .ss-nav { flex: 1; gap: 4px; padding-top: 24px; }
  .ss-nav a { height: 40px; flex-shrink: 0; }
  .ss-section-bar { margin: -16px 0 28px; padding: 0; }
  .ss-main { flex: 1; padding: 40px 48px; }
  .ss-page { padding: 0; }
}

/* Cards and lists. */
.ss-card {
  background: var(--ss-surface);
  border: 1px solid var(--ss-border);
  border-radius: 12px;
  overflow: hidden;
}

.ss-card-body { padding: 20px; }

.ss-group {
  padding: 10px 16px;
  background: var(--ss-bg);
  color: var(--ss-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ss-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--ss-border);
  color: inherit;
  text-decoration: none;
  /* Keep a row jumped to from search clear of the sticky bar. */
  scroll-margin-top: 150px;
}

.ss-row:last-child { border-bottom: none; }
.ss-row:target { box-shadow: inset 4px 0 0 var(--ss-accent); background: var(--ss-chip); }
a.ss-row:hover .ss-row-artist { color: var(--ss-accent); }

.ss-row-text { display: flex; flex-direction: column; flex: 1; gap: 2px; min-width: 0; }

/* Album covers, hotlinked from Discogs. */
.ss-cover { flex-shrink: 0; border-radius: 4px; object-fit: cover; background: var(--ss-chip); }
.ss-cover-empty { display: inline-block; }
.ss-block .ss-cover { margin: -2px 0 -2px -4px; pointer-events: none; }
.ss-row-artist { font-size: 0.95rem; font-weight: 600; }
.ss-row-title { font-size: 0.82rem; color: var(--ss-muted); }
.ss-row-place { font-size: 0.78rem; color: var(--ss-muted); text-align: right; }

.ss-chip {
  flex-shrink: 0;
  max-width: 45%;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ss-chip);
  color: var(--ss-chip-text);
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
}

/* Browse: search and shelf position stay reachable while scrolling. */
.ss-sticky-top {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 10px;
  background: var(--ss-bg);
  border-bottom: 1px solid var(--ss-border);
}

.ss-search,
.ss-shelf-select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--ss-border);
  border-radius: 10px;
  background: var(--ss-surface);
  color: var(--ss-text);
  font-size: 1rem;
}

.ss-shelf-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--ss-muted);
}

.ss-shelf-bar strong { color: var(--ss-text); }
/* Links in the bar, not its buttons: the primary button keeps its own text colour. */
.ss-shelf-bar a:not(.ss-button) { color: var(--ss-accent); font-weight: 600; }
.ss-reach { color: var(--ss-accent); font-weight: 600; white-space: nowrap; }

.ss-shelf-nav { display: flex; gap: 10px; }

.ss-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--ss-border);
  border-radius: 10px;
  background: var(--ss-surface);
  color: var(--ss-text);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.ss-button-primary {
  border-color: var(--ss-primary);
  background: var(--ss-primary);
  color: var(--ss-on-primary);
}

.ss-button.disabled { opacity: 0.4; pointer-events: none; }

.ss-sticky-bottom {
  position: sticky;
  bottom: 0;
  padding: 12px 16px;
  background: var(--ss-surface);
  border-top: 1px solid var(--ss-border);
}

.ss-sticky-bottom .ss-button { flex: 1; }

@media (min-width: 992px) {
  .ss-sticky-top { padding: 0 0 16px; border-bottom: none; gap: 16px; }
  .ss-shelf-bar {
    padding: 12px 18px;
    background: var(--ss-surface);
    border: 1px solid var(--ss-border);
    border-radius: 10px;
  }
  .ss-shelf-select { width: auto; height: 36px; font-size: 0.82rem; }
  .ss-shelf-nav .ss-button { min-height: 36px; font-size: 0.82rem; }
  .ss-row { padding: 12px 16px; scroll-margin-top: 190px; }
}

.ss-alert {
  padding: 12px 16px;
  border: 1px solid var(--ss-accent);
  border-radius: 10px;
  background: rgba(232, 163, 61, 0.12);
  font-size: 0.9rem;
}

.ss-stats { display: flex; flex-wrap: wrap; gap: 12px; }

.ss-stat {
  flex: 1 1 110px;
  padding: 14px 16px;
  background: var(--ss-surface);
  border: 1px solid var(--ss-border);
  border-radius: 10px;
}

.ss-stat-number { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: 1.5rem; font-weight: 700; white-space: nowrap; }
.ss-stat-label { font-size: 0.78rem; color: var(--ss-muted); }
/* A tile that leads to its screen; the albums tile is wider, with how far the shelves are filled. */
a.ss-stat-link { color: inherit; text-decoration: none; }
a.ss-stat-link:hover, a.ss-stat-link:focus-visible { border-color: var(--ss-accent); }
.ss-stat-wide { flex: 2 1 240px; }
.ss-stat-wide .ss-meter { max-width: none; height: 6px; }
.ss-stat-of { font-size: 1rem; font-weight: 500; color: var(--ss-muted); }

/* Storage: cabinets with their shelves. */
.ss-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ss-border);
}

.ss-button-small { min-height: 36px; padding: 0 14px; font-size: 0.82rem; }

.ss-table { width: 100%; font-size: 0.875rem; }

.ss-table th {
  padding: 10px 16px;
  background: var(--ss-bg);
  color: var(--ss-muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.ss-table td { padding: 12px 16px; border-top: 1px solid var(--ss-border); white-space: nowrap; }
/* Names that can be long may break, so the numbers beside them stay in view. */
.ss-table td.ss-wrap { white-space: normal; min-width: 10rem; }
/* On a phone the cells sit closer, so a table fits the screen without scrolling sideways. */
@media (max-width: 575.98px) {
  .ss-table th, .ss-table td { padding-left: 8px; padding-right: 8px; }
  .ss-table td.ss-wrap { min-width: 6rem; overflow-wrap: anywhere; }
  .ss-table td.ss-wrap .ss-chip { white-space: normal; }
  .ss-table .ss-link-button { margin-left: 8px; }
  .ss-table td.ss-wrap-tight { white-space: normal; }
}
.ss-table a, .ss-link-button { color: var(--ss-accent); font-weight: 600; text-decoration: none; }
.ss-link-button { margin-left: 12px; padding: 0; border: none; background: none; }
.ss-over { color: #D9534F; font-weight: 600; }

.form-control, .form-select {
  background-color: var(--ss-surface);
  border-color: var(--ss-border);
  color: var(--ss-text);
}

.progress { --bs-progress-bg: var(--ss-chip); --bs-progress-bar-bg: var(--ss-accent); height: 10px; }

.ss-move { margin-left: 4px; padding: 2px 8px; font-size: 1rem; }
.ss-button:disabled, .ss-link-button:disabled { opacity: 0.3; pointer-events: none; }

a.ss-row-artist { color: inherit; text-decoration: none; }
a.ss-row-artist:hover { color: var(--ss-accent); }
.ss-page a:not(.ss-button):not(.ss-row):not(.ss-row-artist):not(.ss-stat-link):not(.ss-letter):not(.ss-row-link) { color: var(--ss-accent); }

/* Layout: shelves with draggable blocks of albums. */
.ss-shelf { padding: 14px 20px; border-top: 1px solid var(--ss-border); }
.ss-card-head + .ss-shelf { border-top: none; }
.ss-shelf-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ss-meter { flex: 1; max-width: 260px; height: 8px; border-radius: 999px; background: var(--ss-chip); overflow: hidden; }
.ss-meter-fill { height: 100%; width: 0; background: var(--ss-accent); }
.ss-shelf-over .ss-meter-fill { background: #D9534F; }
.ss-shelf-over .ss-shelf-fill { color: #D9534F; font-weight: 600; }
/* Over an estimated width: worth measuring, not an alarm. */
.ss-shelf-over-estimate .ss-meter-fill { background: var(--ss-muted); }
.ss-estimate, .ss-over-estimate { color: var(--ss-muted); }

.ss-blocks { display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; margin: 0; padding: 0; list-style: none; }
.ss-tray { min-height: 64px; }

.ss-block {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--ss-border);
  border-radius: 8px;
  background: var(--ss-bg);
  font-size: 0.8rem;
  cursor: grab;
  touch-action: manipulation;
}

a.ss-block-name { color: inherit !important; text-decoration: none; }
a.ss-block-name:hover { color: var(--ss-accent) !important; }
.ss-block-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.ss-block-title { color: var(--ss-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

.ss-block-count {
  min-width: 24px;
  padding: 0 6px;
  border: none;
  border-radius: 999px;
  background: var(--ss-chip);
  color: var(--ss-chip-text);
  font-size: 0.72rem;
  font-weight: 600;
}

/* Sending a block to a shelf from a list instead of dragging it there. */
.ss-block-send {
  margin: -4px -6px -4px 0;
  padding: 2px 6px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--ss-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.ss-block-send:hover, .ss-block-send:focus-visible { background: var(--ss-chip); color: var(--ss-chip-text); }
.ss-block-moved { border-color: var(--ss-accent); box-shadow: 0 0 0 3px var(--ss-accent); transition: box-shadow 0.4s; }
.ss-send { background: var(--ss-surface); color: var(--ss-text); }
.ss-send .modal-body { padding: 12px 0 0; }
.ss-send .modal-body > p { padding: 0 16px; }
.ss-send-option { width: 100%; border: none; border-top: 1px solid var(--ss-border); background: none; color: inherit; text-align: left; justify-content: space-between; }
.ss-send-option:hover:not(:disabled), .ss-send-option:focus-visible { background: var(--ss-chip); }
.ss-send-option:disabled { opacity: 0.55; }

.sortable-ghost { opacity: 0.35; }
.sortable-chosen { border-color: var(--ss-accent); }
/* Picked up after holding it on a touch screen: lifted, so it is clear it now moves. */
@media (pointer: coarse) {
  .sortable-chosen { box-shadow: 0 0 0 3px var(--ss-accent); transform: scale(1.04); }
}

/* Tabs, one per room on the Layout screen. */
.ss-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--ss-border); }
.ss-tab {
  padding: 10px 16px;
  border-bottom: 3px solid transparent;
  color: var(--ss-muted) !important;
  font-weight: 600;
  text-decoration: none;
}
.ss-tab.active { border-bottom-color: var(--ss-accent); color: var(--ss-text) !important; }
a.ss-chip { text-decoration: none; }

a.ss-row-title { text-decoration: none; }
.ss-page a.ss-row-title:not(:hover) { color: var(--ss-muted) !important; }

/* Enlarging a cover: the small one is a button, the large one opens in a pop-up. */
.ss-cover-zoom { padding: 0; border: none; background: none; line-height: 0; cursor: zoom-in; border-radius: 4px; }
.ss-cover-zoom:focus-visible { outline: 3px solid var(--ss-accent); outline-offset: 2px; }
.ss-cover-dialog { max-width: min(92vw, 640px); margin-left: auto; margin-right: auto; }
.ss-cover-modal { position: relative; background: transparent; border: none; }
.ss-cover-large {
  display: block;
  width: 100%;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 8px;
  background: var(--ss-chip);
  aspect-ratio: 1;
  cursor: zoom-out;
}
.ss-cover-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  padding: 10px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.85);
  opacity: 1;
}

/* The app icon next to the name: its own cream tile keeps the black record visible on the dark sidebar. */
.ss-brand-icon { display: block; flex-shrink: 0; }

/* Explanation that is there when wanted: the first sentence shows, the rest opens. */
.ss-help > summary { color: var(--ss-accent); cursor: pointer; font-size: 0.85rem; width: fit-content; }
.ss-help > p { max-width: 70ch; }

/* An artist's page: one column on a phone, settings first; side by side from a laptop up. */
.ss-artist-grid { display: grid; gap: 40px; }
.ss-artist-grid > div { min-width: 0; }
@media (min-width: 1200px) {
  .ss-artist-grid { grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "main side"; align-items: start; }
  .ss-artist-main { grid-area: main; }
  .ss-artist-side { grid-area: side; }
  .ss-artist-side > h2:first-child, .ss-artist-main > h2:first-child { margin-top: 0 !important; }
}

/* Layout: the cabinet list stays at the top of the screen while scrolling the shelves. */
.ss-jump { position: sticky; top: 0; z-index: 3; padding: 8px 0; background: var(--ss-bg); }
.ss-jump .ss-shelf-select { width: 100%; }
.ss-jump-target { scroll-margin-top: 72px; }
@media (min-width: 992px) { .ss-jump .ss-shelf-select { width: auto; min-width: 280px; } }

/* The artist list one letter at a time: a row of letters, scrolling sideways on a phone. */
.ss-letters { display: flex; flex-wrap: wrap; gap: 4px; }
.ss-letters a, .ss-letters span {
  min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 0.85rem; font-weight: 600; text-decoration: none;
}
.ss-page .ss-letters a { color: var(--ss-text); background: var(--ss-surface); border: 1px solid var(--ss-border); }
.ss-page .ss-letters a.active { background: var(--ss-primary); border-color: var(--ss-primary); color: var(--ss-on-primary); }
.ss-letters span { color: var(--ss-muted); opacity: 0.4; }
@media (max-width: 575.98px) {
  .ss-letters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .ss-letters a, .ss-letters span { flex-shrink: 0; min-width: 36px; height: 36px; }
}

/* A button that asks before it acts: the question opens below it. */
.ss-confirm { position: relative; }
.ss-confirm > summary { list-style: none; cursor: pointer; }
.ss-confirm > summary::-webkit-details-marker { display: none; }
.ss-confirm[open] > summary { border-color: var(--ss-accent); }
.ss-confirm-body {
  position: absolute; right: 0; z-index: 4; width: min(320px, 80vw); margin-top: 6px; padding: 14px 16px;
  background: var(--ss-surface); border: 1px solid var(--ss-accent); border-radius: 10px; font-size: 0.875rem;
}

/* Listening on an album's page: a play button per track, a video once asked for. */
.ss-listen-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ss-track, .ss-video { justify-content: flex-start; gap: 12px; }
.ss-play {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--ss-border); background: var(--ss-surface); color: var(--ss-accent); font-size: 0.8rem;
}
.ss-play:hover:not(:disabled), .ss-play:focus-visible { border-color: var(--ss-accent); }
.ss-play:disabled { opacity: 0.3; }
.ss-video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
/* A video plays below its title, at the full width of the row. */
.ss-video { flex-wrap: wrap; }
.ss-video .ss-video-frame { flex: 1 0 100%; order: 2; }

/* A row that leads somewhere, with a play button beside the link. */
.ss-row-link { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.ss-row-link .ss-row-place { margin-left: auto; }
/* What plays now, under the album's title in Browse. */
.ss-now-playing { display: block; color: var(--ss-accent); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-play.ss-playing { border-color: var(--ss-accent); }

/* Logging in or out, at the very end of the menu. */
.ss-nav .ss-nav-login {
  display: block; width: 100%; height: auto; padding: 6px 20px; border: 0; background: none;
  color: #8B93A6; font-size: 0.82rem; text-align: left; text-decoration: none;
}
.ss-nav .ss-nav-login:hover { color: #fff; }